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

import * as React from 'react';
import clsx from 'clsx';

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

export const RightSidebarStaticBase = React.forwardRef<HTMLDivElement, RightSidebarStaticBaseProps>(({
  children,
	className,
  ...etcProps
}, ref) => (
  <div
		{...etcProps}
		className={clsx(
			'box-border 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))]',
			className,
		)}
    ref={ref}
  >
    <div
      className="w-full h-full relative z-[1]"
    >
      {children}
    </div>
  </div>
));

RightSidebarStaticBase.displayName = 'RightSidebarStaticBase'