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

import * as React from 'react';

export interface RightSidebarStaticBaseProps extends React.HTMLProps<HTMLDivElement> {}

export const RightSidebarStaticBase = React.forwardRef<HTMLDivElement, RightSidebarStaticBaseProps>(({
  children,
  ...etcProps
}, ref) => (
  <div
    className="box-border bg-bg after:pb-[1px] after:-mt-[1px] after:box-border md:pr-[calc(50%-(var(--base-width)*0.5)] md:absolute md:top-0 md:right-0 md:h-full md:w-[calc(50%-(var(--base-width)*0.5))]"
    {...etcProps}
    ref={ref}
  >
    <div
      className="w-full h-full relative z-[1]"
    >
      {children}
    </div>
  </div>
));

RightSidebarStaticBase.displayName = 'RightSidebarStaticBase'