smarthr-ui 97.0.0 → 98.0.0

package/lib/components/Header/LanguageSwitcher/LanguageSwitcher.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var libs_tabbable = require('../../../libs/tabbable.cjs');

package/lib/components/Header/LanguageSwitcher/LanguageSwitcher.js

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { tabbable } from '../../../libs/tabbable.js';

package/lib/components/Icon/OpenInNewTabIcon.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Icon_generateIcon = require('./generateIcon.cjs');

package/lib/components/Icon/OpenInNewTabIcon.js

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { FaUpRightFromSquare } from './../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { generateIcon } from './generateIcon.js';

package/lib/components/InformationPanel/InformationPanel.cjs

@@ -7,7 +7,7 @@ var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.
 var hooks_useObjectAttributes = require('../../hooks/useObjectAttributes.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Base_Base = require('../Base/Base.cjs');

package/lib/components/InformationPanel/InformationPanel.js

@@ -5,7 +5,7 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import { useObjectAttributes } from '../../hooks/useObjectAttributes.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { Base } from '../Base/Base.js';

package/lib/components/Input/SearchInput/SearchInputIcon.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Icon_FaIcon = require('../../Icon/FaIcon.cjs');

package/lib/components/Input/SearchInput/SearchInputIcon.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { FaMagnifyingGlassIcon } from '../../Icon/FaIcon.js';

package/lib/components/InputFile/InputFileMultiplyAppendable.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 require('../Base/Base.cjs');

package/lib/components/InputFile/InputFileMultiplyAppendable.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useId, useMemo, useRef, useImperativeHandle, useCallback, memo } from 'react';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import '../Base/Base.js';

package/lib/components/InputFile/InputFileNative.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 require('../Base/Base.cjs');

package/lib/components/InputFile/InputFileNative.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useId, useMemo, useRef, useImperativeHandle, useCallback, memo } from 'react';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import '../Base/Base.js';

package/lib/components/Layout/Cluster/Cluster.cjs

@@ -106,7 +106,6 @@ const ActualCluster = ({ as, gap = 0.5, inline = false, align, justify, classNam
         justify,
         className,
     }), [inline, gaps.row, gaps.column, align, justify, className]);
-    // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知
     const Component = as || 'div';
     const Wrapper = components_SectioningContent_useSectioningWrapper.useSectionWrapper(Component);
     // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、

package/lib/components/Layout/Cluster/Cluster.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Cluster.cjs","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、\n  // refの型を静的に決定できません。HTMLElementを基底型として使用し、\n  // 実際の要素型との整合性はas anyで型アサーションします。\n  const body = <Component {...rest} ref={ref as any} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;;AAKL;AACA;;;;AAIA;;AAGE;;AAGF;AACF;;;;"}
+{"version":3,"file":"Cluster.cjs","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、\n  // refの型を静的に決定できません。HTMLElementを基底型として使用し、\n  // 実際の要素型との整合性はas anyで型アサーションします。\n  const body = <Component {...rest} ref={ref as any} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;AAIL;AACA;;;;AAIA;;AAGE;;AAGF;AACF;;;;"}

package/lib/components/Layout/Cluster/Cluster.js

@@ -104,7 +104,6 @@ const ActualCluster = ({ as, gap = 0.5, inline = false, align, justify, classNam
         justify,
         className,
     }), [inline, gaps.row, gaps.column, align, justify, className]);
-    // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知
     const Component = as || 'div';
     const Wrapper = useSectionWrapper(Component);
     // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、

package/lib/components/Layout/Cluster/Cluster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cluster.js","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、\n  // refの型を静的に決定できません。HTMLElementを基底型として使用し、\n  // 実際の要素型との整合性はas anyで型アサーションします。\n  const body = <Component {...rest} ref={ref as any} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;;AAKL;AACA;;;;AAIA;;AAGE;;AAGF;AACF;;;"}
+{"version":3,"file":"Cluster.js","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、\n  // refの型を静的に決定できません。HTMLElementを基底型として使用し、\n  // 実際の要素型との整合性はas anyで型アサーションします。\n  const body = <Component {...rest} ref={ref as any} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;AAIL;AACA;;;;AAIA;;AAGE;;AAGF;AACF;;;"}

package/lib/components/Layout/Container/Container.cjs

@@ -4,8 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
-var hooks_useDevice_useDevice = require('../../../hooks/useDevice/useDevice.cjs');
-require('../../../hooks/useDevice/DeviceProvider.cjs');
 var hooks_useEnvironment_useEnvironment = require('../../../hooks/useEnvironment/useEnvironment.cjs');
 require('../../../themes/createSpacing.cjs');
 require('../../../_virtual/index.cjs');
@@ -84,9 +82,7 @@ const classNameGenerator = index.tv({
     ],
 });
 const Container = ({ size = 'DEFAULT', padding = { block: 2, inline: 2, narrowModeBlock: 1.5, narrowModeInline: 1 }, className, ...rest }) => {
-    const { isNarrowView } = hooks_useDevice_useDevice.useDevice();
-    const environment = hooks_useEnvironment_useEnvironment.useEnvironment();
-    const mobile = isNarrowView || environment.mobile;
+    const { mobile } = hooks_useEnvironment_useEnvironment.useEnvironment();
     const actualClassName = React.useMemo(() => {
         const actualPadding = padding instanceof Object
             ? padding

package/lib/components/Layout/Container/Container.cjs.map

@@ -1 +1 @@
-{"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;;"}
+{"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 { 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 { mobile } = useEnvironment()\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":";;;;;;;;;;;;;;;;;;;;AA0BA;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;AACE;AAEI;AACA;AACJ;;AAEE;AACA;;AAED;;AAEH;AACF;;"}

package/lib/components/Layout/Container/Container.js

@@ -2,8 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
-import { useDevice } from '../../../hooks/useDevice/useDevice.js';
-import '../../../hooks/useDevice/DeviceProvider.js';
 import { useEnvironment } from '../../../hooks/useEnvironment/useEnvironment.js';
 import '../../../themes/createSpacing.js';
 import '../../../_virtual/index.js';
@@ -82,9 +80,7 @@ const classNameGenerator = ce({
     ],
 });
 const Container = ({ size = 'DEFAULT', padding = { block: 2, inline: 2, narrowModeBlock: 1.5, narrowModeInline: 1 }, className, ...rest }) => {
-    const { isNarrowView } = useDevice();
-    const environment = useEnvironment();
-    const mobile = isNarrowView || environment.mobile;
+    const { mobile } = useEnvironment();
     const actualClassName = useMemo(() => {
         const actualPadding = padding instanceof Object
             ? padding

package/lib/components/Layout/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","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;;"}
+{"version":3,"file":"Container.js","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 { 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 { mobile } = useEnvironment()\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":";;;;;;;;;;;;;;;;;;AA0BA;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;AACE;AAEI;AACA;AACJ;;AAEE;AACA;;AAED;;AAEH;AACF;;"}

package/lib/components/Layout/Stack/Stack.cjs

@@ -16,28 +16,28 @@ const classNameGenerator = index.tv({
             false: 'shr-flex',
         },
         gap: {
-            0: 'shr-space-y-0',
-            0.25: 'shr-space-y-0.25',
-            0.5: 'shr-space-y-0.5',
-            0.75: 'shr-space-y-0.75',
-            1: 'shr-space-y-1',
-            1.25: 'shr-space-y-1.25',
-            1.5: 'shr-space-y-1.5',
-            2: 'shr-space-y-2',
-            2.5: 'shr-space-y-2.5',
-            3: 'shr-space-y-3',
-            3.5: 'shr-space-y-3.5',
-            4: 'shr-space-y-4',
-            8: 'shr-space-y-8',
-            X3S: 'shr-space-y-0.25',
-            XXS: 'shr-space-y-0.5',
-            XS: 'shr-space-y-1',
-            S: 'shr-space-y-1.5',
-            M: 'shr-space-y-2',
-            L: 'shr-space-y-2.5',
-            XL: 'shr-space-y-3',
-            XXL: 'shr-space-y-3.5',
-            X3L: 'shr-space-y-4',
+            0: 'shr-gap-y-0',
+            0.25: 'shr-gap-y-0.25',
+            0.5: 'shr-gap-y-0.5',
+            0.75: 'shr-gap-y-0.75',
+            1: 'shr-gap-y-1',
+            1.25: 'shr-gap-y-1.25',
+            1.5: 'shr-gap-y-1.5',
+            2: 'shr-gap-y-2',
+            2.5: 'shr-gap-y-2.5',
+            3: 'shr-gap-y-3',
+            3.5: 'shr-gap-y-3.5',
+            4: 'shr-gap-y-4',
+            8: 'shr-gap-y-8',
+            X3S: 'shr-gap-y-0.25',
+            XXS: 'shr-gap-y-0.5',
+            XS: 'shr-gap-y-1',
+            S: 'shr-gap-y-1.5',
+            M: 'shr-gap-y-2',
+            L: 'shr-gap-y-2.5',
+            XL: 'shr-gap-y-3',
+            XXL: 'shr-gap-y-3.5',
+            X3L: 'shr-gap-y-4',
         },
         align: {
             start: 'shr-items-start',

package/lib/components/Layout/Stack/Stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.cjs","sources":["../../../../src/components/Layout/Stack/Stack.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap } from '../../../types'\n\nconst classNameGenerator = tv({\n  base: 'shr-flex-col shr-justify-start [&_>_*]:shr-my-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    gap: {\n      0: 'shr-space-y-0',\n      0.25: 'shr-space-y-0.25',\n      0.5: 'shr-space-y-0.5',\n      0.75: 'shr-space-y-0.75',\n      1: 'shr-space-y-1',\n      1.25: 'shr-space-y-1.25',\n      1.5: 'shr-space-y-1.5',\n      2: 'shr-space-y-2',\n      2.5: 'shr-space-y-2.5',\n      3: 'shr-space-y-3',\n      3.5: 'shr-space-y-3.5',\n      4: 'shr-space-y-4',\n      8: 'shr-space-y-8',\n      X3S: 'shr-space-y-0.25',\n      XXS: 'shr-space-y-0.5',\n      XS: 'shr-space-y-1',\n      S: 'shr-space-y-1.5',\n      M: 'shr-space-y-2',\n      L: 'shr-space-y-2.5',\n      XL: 'shr-space-y-3',\n      XXL: 'shr-space-y-3.5',\n      X3L: 'shr-space-y-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n  },\n})\n\ntype Props = VariantProps<typeof classNameGenerator> &\n  PropsWithChildren<{\n    as?: string | ComponentType<any>\n  }> &\n  ComponentPropsWithRef<'div'>\n\nexport const Stack = forwardRef<HTMLDivElement, Props>(\n  ({ as: Component = 'div', inline = false, gap = 1, align, className, ...rest }, ref) => {\n    const actualClassName = useMemo(\n      () => classNameGenerator({ inline, align, gap, className }),\n      [align, className, gap, inline],\n    )\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = <Component {...rest} ref={ref} className={actualClassName} />\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AAeA;AACE;AACA;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAQM;AAEH;AAKA;AACA;;AAGE;;AAGF;AACF;;"}
+{"version":3,"file":"Stack.cjs","sources":["../../../../src/components/Layout/Stack/Stack.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap } from '../../../types'\n\nconst classNameGenerator = tv({\n  base: 'shr-flex-col shr-justify-start [&_>_*]:shr-my-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    gap: {\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n  },\n})\n\ntype Props = VariantProps<typeof classNameGenerator> &\n  PropsWithChildren<{\n    as?: string | ComponentType<any>\n  }> &\n  ComponentPropsWithRef<'div'>\n\nexport const Stack = forwardRef<HTMLDivElement, Props>(\n  ({ as: Component = 'div', inline = false, gap = 1, align, className, ...rest }, ref) => {\n    const actualClassName = useMemo(\n      () => classNameGenerator({ inline, align, gap, className }),\n      [align, className, gap, inline],\n    )\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = <Component {...rest} ref={ref} className={actualClassName} />\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AAeA;AACE;AACA;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAQM;AAEH;AAKA;AACA;;AAGE;;AAGF;AACF;;"}

package/lib/components/Layout/Stack/Stack.js

@@ -14,28 +14,28 @@ const classNameGenerator = ce({
             false: 'shr-flex',
         },
         gap: {
-            0: 'shr-space-y-0',
-            0.25: 'shr-space-y-0.25',
-            0.5: 'shr-space-y-0.5',
-            0.75: 'shr-space-y-0.75',
-            1: 'shr-space-y-1',
-            1.25: 'shr-space-y-1.25',
-            1.5: 'shr-space-y-1.5',
-            2: 'shr-space-y-2',
-            2.5: 'shr-space-y-2.5',
-            3: 'shr-space-y-3',
-            3.5: 'shr-space-y-3.5',
-            4: 'shr-space-y-4',
-            8: 'shr-space-y-8',
-            X3S: 'shr-space-y-0.25',
-            XXS: 'shr-space-y-0.5',
-            XS: 'shr-space-y-1',
-            S: 'shr-space-y-1.5',
-            M: 'shr-space-y-2',
-            L: 'shr-space-y-2.5',
-            XL: 'shr-space-y-3',
-            XXL: 'shr-space-y-3.5',
-            X3L: 'shr-space-y-4',
+            0: 'shr-gap-y-0',
+            0.25: 'shr-gap-y-0.25',
+            0.5: 'shr-gap-y-0.5',
+            0.75: 'shr-gap-y-0.75',
+            1: 'shr-gap-y-1',
+            1.25: 'shr-gap-y-1.25',
+            1.5: 'shr-gap-y-1.5',
+            2: 'shr-gap-y-2',
+            2.5: 'shr-gap-y-2.5',
+            3: 'shr-gap-y-3',
+            3.5: 'shr-gap-y-3.5',
+            4: 'shr-gap-y-4',
+            8: 'shr-gap-y-8',
+            X3S: 'shr-gap-y-0.25',
+            XXS: 'shr-gap-y-0.5',
+            XS: 'shr-gap-y-1',
+            S: 'shr-gap-y-1.5',
+            M: 'shr-gap-y-2',
+            L: 'shr-gap-y-2.5',
+            XL: 'shr-gap-y-3',
+            XXL: 'shr-gap-y-3.5',
+            X3L: 'shr-gap-y-4',
         },
         align: {
             start: 'shr-items-start',

package/lib/components/Layout/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../../../src/components/Layout/Stack/Stack.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap } from '../../../types'\n\nconst classNameGenerator = tv({\n  base: 'shr-flex-col shr-justify-start [&_>_*]:shr-my-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    gap: {\n      0: 'shr-space-y-0',\n      0.25: 'shr-space-y-0.25',\n      0.5: 'shr-space-y-0.5',\n      0.75: 'shr-space-y-0.75',\n      1: 'shr-space-y-1',\n      1.25: 'shr-space-y-1.25',\n      1.5: 'shr-space-y-1.5',\n      2: 'shr-space-y-2',\n      2.5: 'shr-space-y-2.5',\n      3: 'shr-space-y-3',\n      3.5: 'shr-space-y-3.5',\n      4: 'shr-space-y-4',\n      8: 'shr-space-y-8',\n      X3S: 'shr-space-y-0.25',\n      XXS: 'shr-space-y-0.5',\n      XS: 'shr-space-y-1',\n      S: 'shr-space-y-1.5',\n      M: 'shr-space-y-2',\n      L: 'shr-space-y-2.5',\n      XL: 'shr-space-y-3',\n      XXL: 'shr-space-y-3.5',\n      X3L: 'shr-space-y-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n  },\n})\n\ntype Props = VariantProps<typeof classNameGenerator> &\n  PropsWithChildren<{\n    as?: string | ComponentType<any>\n  }> &\n  ComponentPropsWithRef<'div'>\n\nexport const Stack = forwardRef<HTMLDivElement, Props>(\n  ({ as: Component = 'div', inline = false, gap = 1, align, className, ...rest }, ref) => {\n    const actualClassName = useMemo(\n      () => classNameGenerator({ inline, align, gap, className }),\n      [align, className, gap, inline],\n    )\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = <Component {...rest} ref={ref} className={actualClassName} />\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;AAeA;AACE;AACA;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAQM;AAEH;AAKA;AACA;;AAGE;;AAGF;AACF;;"}
+{"version":3,"file":"Stack.js","sources":["../../../../src/components/Layout/Stack/Stack.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap } from '../../../types'\n\nconst classNameGenerator = tv({\n  base: 'shr-flex-col shr-justify-start [&_>_*]:shr-my-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    gap: {\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n  },\n})\n\ntype Props = VariantProps<typeof classNameGenerator> &\n  PropsWithChildren<{\n    as?: string | ComponentType<any>\n  }> &\n  ComponentPropsWithRef<'div'>\n\nexport const Stack = forwardRef<HTMLDivElement, Props>(\n  ({ as: Component = 'div', inline = false, gap = 1, align, className, ...rest }, ref) => {\n    const actualClassName = useMemo(\n      () => classNameGenerator({ inline, align, gap, className }),\n      [align, className, gap, inline],\n    )\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = <Component {...rest} ref={ref} className={actualClassName} />\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;AAeA;AACE;AACA;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAQM;AAEH;AAKA;AACA;;AAGE;;AAGF;AACF;;"}

package/lib/components/Loader/LoaderSpinner.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_VisuallyHiddenText_VisuallyHiddenText = require('../VisuallyHiddenText/VisuallyHiddenText.cjs');

package/lib/components/Loader/LoaderSpinner.js

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { VisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText.js';

package/lib/components/Pagination/Pagination.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var libs_lodash = require('../../libs/lodash.cjs');

package/lib/components/Pagination/Pagination.js

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { range } from '../../libs/lodash.js';

package/lib/components/Pagination/PaginationItemButton.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../Button/Button.cjs');

package/lib/components/Pagination/PaginationItemButton.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { Button } from '../Button/Button.js';

package/lib/components/SideNav/SideNav.cjs

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
-var components_SideNav_SideNavItemButton = require('./SideNavItemButton.cjs');
+var components_SideNav_SideNavContext = require('./SideNavContext.cjs');
 
 const ROUNDED = {
     t_l: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tl-l',
@@ -28,28 +28,9 @@ const classNameGenerator = index.tv({
         rounded: false,
     },
 });
-const SideNav = ({ items, size = 'M', onClick, className, rounded, children, ...rest }) => {
-    const actualOnClick = React.useMemo(() => onClick
-        ? (e) => onClick(e, (e.currentTarget.value ||
-            e.currentTarget.getAttribute('data-value')))
-        : undefined, [onClick]);
+const SideNav = ({ size = 'M', className, rounded, children, ...rest }) => {
     const actualClassName = React.useMemo(() => classNameGenerator({ rounded, className }), [rounded, className]);
-    return (jsxRuntime.jsx("ul", { ...rest, className: actualClassName, children: items
-            ? items.map((item) => (jsxRuntime.jsx(components_SideNav_SideNavItemButton.SideNavItemButton, { id: item.id, title: item.title, prefix: item.prefix, current: item.current, size: size, onClick: actualOnClick }, item.id)))
-            : children &&
-                React.Children.map(children, (child) => {
-                    if (child &&
-                        typeof child === 'object' &&
-                        'type' in child &&
-                        child.type === components_SideNav_SideNavItemButton.SideNavItemButton) {
-                        return React.cloneElement(child, {
-                            // 子コンポーネントに対して親コンポーネントから onClick size を一括で適用
-                            size,
-                            onClick: actualOnClick,
-                        });
-                    }
-                    return child;
-                }) }));
+    return (jsxRuntime.jsx("ul", { ...rest, className: actualClassName, children: jsxRuntime.jsx(components_SideNav_SideNavContext.SideNavProvider, { value: { size }, children: children }) }));
 };
 
 exports.SideNav = SideNav;

package/lib/components/SideNav/SideNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.cjs","sources":["../../../src/components/SideNav/SideNav.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { Children, cloneElement } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { SideNavItemButton, type SideNavSizeType } from './SideNavItemButton'\n\nexport type SideNavItemButtonProps = Omit<\n  ComponentProps<typeof SideNavItemButton>,\n  'size' | 'onClick'\n>\n\ntype AbstractProps = PropsWithChildren<{\n  /** 各アイテムのデータの配列\n   * @deprecated SideNavItemButton を使ってください\n   */\n  items?: SideNavItemButtonProps[]\n  /** 各アイテムの大きさ */\n  size?: SideNavSizeType\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (\n    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>,\n    id: string,\n  ) => void\n  /** コンポーネントに適用するクラス名 */\n  className?: string\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'ul'>, keyof AbstractProps>\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-br-l',\n}\nconst ROUNDED_ALL = ['shr-rounded-l', ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-SideNav', 'shr-relative shr-list-none shr-bg-column'],\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      all: ROUNDED_ALL,\n      top: ['shr-rounded-t-l', ROUNDED.t_l, ROUNDED.t_r],\n      right: ['shr-rounded-r-l', ROUNDED.t_r, ROUNDED.b_r],\n      bottom: ['shr-rounded-b-l', ROUNDED.b_l, ROUNDED.b_r],\n      left: ['shr-rounded-l-l', ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const SideNav: FC<Props> = ({\n  items,\n  size = 'M',\n  onClick,\n  className,\n  rounded,\n  children,\n  ...rest\n}) => {\n  const actualOnClick = useMemo(\n    () =>\n      onClick\n        ? (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) =>\n            onClick(\n              e,\n              ((e as React.MouseEvent<HTMLButtonElement, MouseEvent>).currentTarget.value ||\n                e.currentTarget.getAttribute('data-value')) as string,\n            )\n        : undefined,\n    [onClick],\n  )\n\n  const actualClassName = useMemo(\n    () => classNameGenerator({ rounded, className }),\n    [rounded, className],\n  )\n\n  return (\n    <ul {...rest} className={actualClassName}>\n      {items\n        ? items.map((item) => (\n            <SideNavItemButton\n              key={item.id}\n              id={item.id}\n              title={item.title}\n              prefix={item.prefix}\n              current={item.current}\n              size={size}\n              onClick={actualOnClick}\n            />\n          ))\n        : children &&\n          Children.map(children, (child) => {\n            if (\n              child &&\n              typeof child === 'object' &&\n              'type' in child &&\n              child.type === SideNavItemButton\n            ) {\n              return cloneElement(\n                child as React.ReactElement<ComponentProps<typeof SideNavItemButton>>,\n                {\n                  // 子コンポーネントに対して親コンポーネントから onClick size を一括で適用\n                  size,\n                  onClick: actualOnClick,\n                },\n              )\n            }\n\n            return child\n          })}\n    </ul>\n  )\n}\n"],"names":["tv","useMemo","_jsx","SideNavItemButton","Children","cloneElement"],"mappings":";;;;;;;AAmCA,MAAM,OAAO,GAAG;AACd,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,0DAA0D;AAC/D,IAAA,GAAG,EAAE,0DAA0D;CAChE;AACD,MAAM,WAAW,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AAEzF,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,oBAAoB,EAAE,0CAA0C,CAAC;AACxE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,GAAG,EAAE,WAAW;YAChB,GAAG,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YAClD,KAAK,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACpD,MAAM,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACrD,IAAI,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AACpD,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,OAAO,GAAc,CAAC,EACjC,KAAK,EACL,IAAI,GAAG,GAAG,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,aAAa,GAAGC,aAAO,CAC3B,MACE;AACE,UAAE,CAAC,CAAsE,KACrE,OAAO,CACL,CAAC,GACC,CAAqD,CAAC,aAAa,CAAC,KAAK;YACzE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,YAAY,CAAC;AAElD,UAAE,SAAS,EACf,CAAC,OAAO,CAAC,CACV;IAED,MAAM,eAAe,GAAGA,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAChD,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB;IAED,QACEC,0BAAQ,IAAI,EAAE,SAAS,EAAE,eAAe,YACrC;cACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACbA,eAACC,sDAAiB,EAAA,EAEhB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,aAAa,EAAA,EANjB,IAAI,CAAC,EAAE,CAOZ,CACH;AACH,cAAE,QAAQ;gBACRC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/B,oBAAA,IACE,KAAK;wBACL,OAAO,KAAK,KAAK,QAAQ;AACzB,wBAAA,MAAM,IAAI,KAAK;AACf,wBAAA,KAAK,CAAC,IAAI,KAAKD,sDAAiB,EAChC;wBACA,OAAOE,kBAAY,CACjB,KAAqE,EACrE;;4BAEE,IAAI;AACJ,4BAAA,OAAO,EAAE,aAAa;AACvB,yBAAA,CACF;oBACH;AAEA,oBAAA,OAAO,KAAK;gBACd,CAAC,CAAC,EAAA,CACH;AAET;;;;"}
+{"version":3,"file":"SideNav.cjs","sources":["../../../src/components/SideNav/SideNav.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { SideNavProvider } from './SideNavContext'\n\nimport type { SideNavSizeType } from './SideNavItemButton'\n\ntype AbstractProps = PropsWithChildren<{\n  /** 各アイテムの大きさ */\n  size?: SideNavSizeType\n  /** コンポーネントに適用するクラス名 */\n  className?: string\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'ul'>, keyof AbstractProps>\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-br-l',\n}\nconst ROUNDED_ALL = ['shr-rounded-l', ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-SideNav', 'shr-relative shr-list-none shr-bg-column'],\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      all: ROUNDED_ALL,\n      top: ['shr-rounded-t-l', ROUNDED.t_l, ROUNDED.t_r],\n      right: ['shr-rounded-r-l', ROUNDED.t_r, ROUNDED.b_r],\n      bottom: ['shr-rounded-b-l', ROUNDED.b_l, ROUNDED.b_r],\n      left: ['shr-rounded-l-l', ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const SideNav: FC<Props> = ({ size = 'M', className, rounded, children, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ rounded, className }),\n    [rounded, className],\n  )\n\n  return (\n    <ul {...rest} className={actualClassName}>\n      <SideNavProvider value={{ size }}>{children}</SideNavProvider>\n    </ul>\n  )\n}\n"],"names":["tv","useMemo","_jsx","SideNavProvider"],"mappings":";;;;;;;AAgBA,MAAM,OAAO,GAAG;AACd,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,0DAA0D;AAC/D,IAAA,GAAG,EAAE,0DAA0D;CAChE;AACD,MAAM,WAAW,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AAEzF,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,oBAAoB,EAAE,0CAA0C,CAAC;AACxE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,GAAG,EAAE,WAAW;YAChB,GAAG,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YAClD,KAAK,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACpD,MAAM,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACrD,IAAI,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AACpD,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,OAAO,GAAc,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;IAC1F,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAChD,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB;IAED,QACEC,0BAAQ,IAAI,EAAE,SAAS,EAAE,eAAe,YACtCA,cAAA,CAACC,iDAAe,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D;AAET;;;;"}

package/lib/components/SideNav/SideNav.d.ts

@@ -1,16 +1,9 @@
-import { type ComponentProps, type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
+import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
 import { type VariantProps } from 'tailwind-variants';
-import { SideNavItemButton, type SideNavSizeType } from './SideNavItemButton';
-export type SideNavItemButtonProps = Omit<ComponentProps<typeof SideNavItemButton>, 'size' | 'onClick'>;
+import type { SideNavSizeType } from './SideNavItemButton';
 type AbstractProps = PropsWithChildren<{
-    /** 各アイテムのデータの配列
-     * @deprecated SideNavItemButton を使ってください
-     */
-    items?: SideNavItemButtonProps[];
     /** 各アイテムの大きさ */
     size?: SideNavSizeType;
-    /** アイテムを押下したときに発火するコールバック関数 */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>, id: string) => void;
     /** コンポーネントに適用するクラス名 */
     className?: string;
 }> & VariantProps<typeof classNameGenerator>;