one-product-system-11.tsx

import type { LayoutProps as SystemLayoutProps } from 'styled-system';
import { compose, layout as systemLayout, system } from 'styled-system';
import type { ResponsiveValue } from './types';

export type LayoutProps = SystemLayoutProps & {
  hideScroll?: ResponsiveValue<boolean>;
};

const customLayout = system({
  hideScroll: (value: boolean) =>
    value
      ? {
          scrollbarWidth: 'none',
          msOverflowStyle: 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        }
      : {},
});

export const layout = compose(systemLayout, customLayout);