viewfinder/packages/react/src/widgets/RightSidebarBase/index.tsx

import * as React from 'react';
import {layouts, Span} from '@tesseract-design/viewfinder-base';

export type RightSidebarStaticBaseProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'> & {
  span?: Span,
}

export const RightSidebarStaticBase = React.forwardRef<HTMLDivElement, RightSidebarStaticBaseProps>(({
  children,
  span = Span.WIDE,
  ...etcProps
}, ref) => {
  return (
    <div
      className={layouts.RightSidebarStatic.SidebarBase()}
      {...etcProps}
      ref={ref}
    >
      <div
        className={layouts.RightSidebarStatic.SidebarMainContent()}
      >
        {children}
      </div>
    </div>
  )
});

RightSidebarStaticBase.displayName = 'RightSidebarStaticBase'