{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Layout/Container/Container.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useDevice } from '../../../hooks/useDevice'\nimport { useEnvironment } from '../../../hooks/useEnvironment'\nimport { paddingBlock, paddingInline } from '../../../tailwind'\n\nimport type { Gap } from '../../../types'\n\ntype AbstractProps = PropsWithChildren<\n  Omit<VariantProps<typeof classNameGenerator>, 'paddingBlock' | 'paddingInline'> & {\n    padding?: Gap | SeparatePadding\n  }\n>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n  /** 画面幅が狭い時のブロック方向パディング */\n  narrowModeBlock?: Gap\n  /** 画面幅が狭い時のインライン方向パディング */\n  narrowModeInline?: Gap\n}\n\nconst classNameGenerator = tv({\n  base: 'shr-mx-auto shr-w-full',\n  variants: {\n    size: {\n      NARROW: 'shr-max-w-col6',\n      DEFAULT: 'shr-max-w-col8',\n      WIDE: 'shr-max-w-col9',\n      FULL: '',\n    },\n    paddingBlock,\n    paddingInline,\n  },\n  compoundVariants: [\n    {\n      paddingInline: [0.25, 'X3S'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.25])*2)]',\n    },\n    {\n      paddingInline: [0.5, 'XXS'],\n      className: 'shr-w-[calc(100%-theme(spacing[0.5])*2)]',\n    },\n    {\n      paddingInline: 0.75,\n      className: 'shr-w-[calc(100%-theme(spacing[0.75])*2)]',\n    },\n    {\n      paddingInline: [1, 'XS'],\n      className: 'shr-w-[calc(100%-theme(spacing[1])*2)]',\n    },\n    {\n      paddingInline: 1.25,\n      className: 'shr-w-[calc(100%-theme(spacing[1.25])*2)]',\n    },\n    {\n      paddingInline: [1.5, 'S'],\n      className: 'shr-w-[calc(100%-theme(spacing[1.5])*2)]',\n    },\n    {\n      paddingInline: [2, 'M'],\n      className: 'shr-w-[calc(100%-theme(spacing[2])*2)]',\n    },\n    {\n      paddingInline: [2.5, 'L'],\n      className: 'shr-w-[calc(100%-theme(spacing[2.5])*2)]',\n    },\n    {\n      paddingInline: [3, 'XL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3])*2)]',\n    },\n    {\n      paddingInline: [3.5, 'XXL'],\n      className: 'shr-w-[calc(100%-theme(spacing[3.5])*2)]',\n    },\n    {\n      paddingInline: [4, 'X3L'],\n      className: 'shr-w-[calc(100%-theme(spacing[4])*2)]',\n    },\n    {\n      paddingInline: 8,\n      className: 'shr-w-[calc(100%-theme(spacing[8])*2)]',\n    },\n  ],\n})\n\nexport const Container: FC<Props> = ({\n  size = 'DEFAULT',\n  padding = { block: 2, inline: 2, narrowModeBlock: 1.5, narrowModeInline: 1 },\n  className,\n  ...rest\n}) => {\n  const { isNarrowView } = useDevice()\n  const environment = useEnvironment()\n  const mobile = isNarrowView || environment.mobile\n  const actualClassName = useMemo(() => {\n    const actualPadding =\n      padding instanceof Object\n        ? padding\n        : { block: padding, inline: padding, narrowModeBlock: padding, narrowModeInline: padding }\n    return classNameGenerator({\n      size,\n      paddingBlock: mobile ? actualPadding.narrowModeBlock : actualPadding.block,\n      paddingInline: mobile ? actualPadding.narrowModeInline : actualPadding.inline,\n      className,\n    })\n  }, [size, className, padding, mobile])\n  return <div {...rest} className={actualClassName} />\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACA;AACE;AACE;AACA;AACA;AACA;AACD;;;AAGF;AACD;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AAEM;AAML;AACA;AACA;AACA;AACE;AAEI;AACA;AACJ;;AAEE;AACA;;AAED;;AAEH;AACF;;"}