smarthr-ui 96.1.1 → 96.1.3

package/lib/components/AppHeader/components/common/CommonButton.cjs

@@ -38,12 +38,13 @@ const commonButtonClassNameGenerator = index.tv({
     },
 });
 const CommonButton = React.memo(({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {
+    const hasPrefix = !!prefix;
     const actualClassName = React.useMemo(() => commonButtonClassNameGenerator({
-        prefix: !!prefix,
+        prefix: hasPrefix,
         current,
         boldWhenCurrent,
         className,
-    }), [current, prefix, boldWhenCurrent, className]);
+    }), [current, hasPrefix, boldWhenCurrent, className]);
     switch (elementAs) {
         case 'a':
             return (jsxRuntime.jsxs("a", { ...rest, className: actualClassName, children: [prefix, children] }));

package/lib/components/AppHeader/components/common/CommonButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommonButton.cjs","sources":["../../../../../src/components/AppHeader/components/common/CommonButton.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nexport const commonButtonClassNameGenerator = tv({\n  base: [\n    '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',\n    '[&&]:hover:shr-bg-white-darken',\n    '[&&]:focus-visible:shr-focus-indicator [&&]:focus-visible:shr-bg-white-darken',\n  ],\n  variants: {\n    prefix: {\n      true: ['[&&]:shr-gap-0.5'],\n    },\n    current: {\n      true: ['[&&]:shr-bg-white-darken'],\n    },\n    boldWhenCurrent: {\n      true: null,\n      false: ['[&&]:shr-font-normal'],\n    },\n    rounded: {\n      true: ['[&&]:shr-rounded-m'],\n      false: ['[&&]:shr-rounded-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      boldWhenCurrent: true,\n      current: true,\n      className: ['[&&]:shr-font-bold'],\n    },\n  ],\n  defaultVariants: {\n    rounded: true,\n  },\n})\n\ntype AnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'prefix'>\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'prefix'>\n\ntype Props = (({ elementAs: 'a' } & AnchorProps) | ({ elementAs: 'button' } & ButtonProps)) & {\n  prefix?: ReactNode\n  current?: boolean\n  boldWhenCurrent?: boolean\n}\n\nexport const CommonButton = memo<Props>(\n  ({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          prefix: !!prefix,\n          current,\n          boldWhenCurrent,\n          className,\n        }),\n      [current, prefix, boldWhenCurrent, className],\n    )\n\n    switch (elementAs) {\n      case 'a':\n        return (\n          <a {...(rest as AnchorProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </a>\n        )\n      case 'button':\n        return (\n          // eslint-disable-next-line smarthr/best-practice-for-button-element\n          <button {...(rest as ButtonProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </button>\n        )\n    }\n\n    throw new Error(elementAs satisfies never)\n  },\n)\n"],"names":["tv","memo","useMemo","_jsxs"],"mappings":";;;;;;AAGO,MAAM,8BAA8B,GAAGA,QAAE,CAAC;AAC/C,IAAA,IAAI,EAAE;QACJ,iQAAiQ;QACjQ,gCAAgC;QAChC,+EAA+E;AAChF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,kBAAkB,CAAC;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,0BAA0B,CAAC;AACnC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CAAC,sBAAsB,CAAC;AAChC,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,oBAAoB,CAAC;YAC5B,KAAK,EAAE,CAAC,uBAAuB,CAAC;AACjC,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,CAAC,oBAAoB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAWM,MAAM,YAAY,GAAGC,UAAI,CAC9B,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;IAChF,MAAM,eAAe,GAAGC,aAAO,CAC7B,MACE,8BAA8B,CAAC;QAC7B,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,OAAO;QACP,eAAe;QACf,SAAS;KACV,CAAC,EACJ,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,CAAC,CAC9C;IAED,QAAQ,SAAS;AACf,QAAA,KAAK,GAAG;AACN,YAAA,QACEC,eAAA,CAAA,GAAA,EAAA,EAAA,GAAQ,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CACrD,MAAM,EACN,QAAQ,CAAA,EAAA,CACP;AAER,QAAA,KAAK,QAAQ;YACX;;YAEEA,eAAA,CAAA,QAAA,EAAA,EAAA,GAAa,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC1D,MAAM,EACN,QAAQ,CAAA,EAAA,CACF;;AAIf,IAAA,MAAM,IAAI,KAAK,CAAC,SAAyB,CAAC;AAC5C,CAAC;;;;;"}
+{"version":3,"file":"CommonButton.cjs","sources":["../../../../../src/components/AppHeader/components/common/CommonButton.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nexport const commonButtonClassNameGenerator = tv({\n  base: [\n    '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',\n    '[&&]:hover:shr-bg-white-darken',\n    '[&&]:focus-visible:shr-focus-indicator [&&]:focus-visible:shr-bg-white-darken',\n  ],\n  variants: {\n    prefix: {\n      true: ['[&&]:shr-gap-0.5'],\n    },\n    current: {\n      true: ['[&&]:shr-bg-white-darken'],\n    },\n    boldWhenCurrent: {\n      true: null,\n      false: ['[&&]:shr-font-normal'],\n    },\n    rounded: {\n      true: ['[&&]:shr-rounded-m'],\n      false: ['[&&]:shr-rounded-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      boldWhenCurrent: true,\n      current: true,\n      className: ['[&&]:shr-font-bold'],\n    },\n  ],\n  defaultVariants: {\n    rounded: true,\n  },\n})\n\ntype AnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'prefix'>\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'prefix'>\n\ntype Props = (({ elementAs: 'a' } & AnchorProps) | ({ elementAs: 'button' } & ButtonProps)) & {\n  prefix?: ReactNode\n  current?: boolean\n  boldWhenCurrent?: boolean\n}\n\nexport const CommonButton = memo<Props>(\n  ({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {\n    const hasPrefix = !!prefix\n\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          prefix: hasPrefix,\n          current,\n          boldWhenCurrent,\n          className,\n        }),\n      [current, hasPrefix, boldWhenCurrent, className],\n    )\n\n    switch (elementAs) {\n      case 'a':\n        return (\n          <a {...(rest as AnchorProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </a>\n        )\n      case 'button':\n        return (\n          // eslint-disable-next-line smarthr/best-practice-for-button-element\n          <button {...(rest as ButtonProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </button>\n        )\n    }\n\n    throw new Error(elementAs satisfies never)\n  },\n)\n"],"names":["tv","memo","useMemo","_jsxs"],"mappings":";;;;;;AAGO,MAAM,8BAA8B,GAAGA,QAAE,CAAC;AAC/C,IAAA,IAAI,EAAE;QACJ,iQAAiQ;QACjQ,gCAAgC;QAChC,+EAA+E;AAChF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,kBAAkB,CAAC;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,0BAA0B,CAAC;AACnC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CAAC,sBAAsB,CAAC;AAChC,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,oBAAoB,CAAC;YAC5B,KAAK,EAAE,CAAC,uBAAuB,CAAC;AACjC,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,CAAC,oBAAoB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAWM,MAAM,YAAY,GAAGC,UAAI,CAC9B,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;AAChF,IAAA,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM;IAE1B,MAAM,eAAe,GAAGC,aAAO,CAC7B,MACE,8BAA8B,CAAC;AAC7B,QAAA,MAAM,EAAE,SAAS;QACjB,OAAO;QACP,eAAe;QACf,SAAS;KACV,CAAC,EACJ,CAAC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,CAAC,CACjD;IAED,QAAQ,SAAS;AACf,QAAA,KAAK,GAAG;AACN,YAAA,QACEC,eAAA,CAAA,GAAA,EAAA,EAAA,GAAQ,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CACrD,MAAM,EACN,QAAQ,CAAA,EAAA,CACP;AAER,QAAA,KAAK,QAAQ;YACX;;YAEEA,eAAA,CAAA,QAAA,EAAA,EAAA,GAAa,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC1D,MAAM,EACN,QAAQ,CAAA,EAAA,CACF;;AAIf,IAAA,MAAM,IAAI,KAAK,CAAC,SAAyB,CAAC;AAC5C,CAAC;;;;;"}

package/lib/components/AppHeader/components/common/CommonButton.js

@@ -36,12 +36,13 @@ const commonButtonClassNameGenerator = ce({
     },
 });
 const CommonButton = memo(({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {
+    const hasPrefix = !!prefix;
     const actualClassName = useMemo(() => commonButtonClassNameGenerator({
-        prefix: !!prefix,
+        prefix: hasPrefix,
         current,
         boldWhenCurrent,
         className,
-    }), [current, prefix, boldWhenCurrent, className]);
+    }), [current, hasPrefix, boldWhenCurrent, className]);
     switch (elementAs) {
         case 'a':
             return (jsxs("a", { ...rest, className: actualClassName, children: [prefix, children] }));

package/lib/components/AppHeader/components/common/CommonButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonButton.js","sources":["../../../../../src/components/AppHeader/components/common/CommonButton.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nexport const commonButtonClassNameGenerator = tv({\n  base: [\n    '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',\n    '[&&]:hover:shr-bg-white-darken',\n    '[&&]:focus-visible:shr-focus-indicator [&&]:focus-visible:shr-bg-white-darken',\n  ],\n  variants: {\n    prefix: {\n      true: ['[&&]:shr-gap-0.5'],\n    },\n    current: {\n      true: ['[&&]:shr-bg-white-darken'],\n    },\n    boldWhenCurrent: {\n      true: null,\n      false: ['[&&]:shr-font-normal'],\n    },\n    rounded: {\n      true: ['[&&]:shr-rounded-m'],\n      false: ['[&&]:shr-rounded-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      boldWhenCurrent: true,\n      current: true,\n      className: ['[&&]:shr-font-bold'],\n    },\n  ],\n  defaultVariants: {\n    rounded: true,\n  },\n})\n\ntype AnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'prefix'>\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'prefix'>\n\ntype Props = (({ elementAs: 'a' } & AnchorProps) | ({ elementAs: 'button' } & ButtonProps)) & {\n  prefix?: ReactNode\n  current?: boolean\n  boldWhenCurrent?: boolean\n}\n\nexport const CommonButton = memo<Props>(\n  ({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          prefix: !!prefix,\n          current,\n          boldWhenCurrent,\n          className,\n        }),\n      [current, prefix, boldWhenCurrent, className],\n    )\n\n    switch (elementAs) {\n      case 'a':\n        return (\n          <a {...(rest as AnchorProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </a>\n        )\n      case 'button':\n        return (\n          // eslint-disable-next-line smarthr/best-practice-for-button-element\n          <button {...(rest as ButtonProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </button>\n        )\n    }\n\n    throw new Error(elementAs satisfies never)\n  },\n)\n"],"names":["tv","_jsxs"],"mappings":";;;;AAGO,MAAM,8BAA8B,GAAGA,EAAE,CAAC;AAC/C,IAAA,IAAI,EAAE;QACJ,iQAAiQ;QACjQ,gCAAgC;QAChC,+EAA+E;AAChF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,kBAAkB,CAAC;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,0BAA0B,CAAC;AACnC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CAAC,sBAAsB,CAAC;AAChC,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,oBAAoB,CAAC;YAC5B,KAAK,EAAE,CAAC,uBAAuB,CAAC;AACjC,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,CAAC,oBAAoB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAWM,MAAM,YAAY,GAAG,IAAI,CAC9B,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;IAChF,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,8BAA8B,CAAC;QAC7B,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,OAAO;QACP,eAAe;QACf,SAAS;KACV,CAAC,EACJ,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,CAAC,CAC9C;IAED,QAAQ,SAAS;AACf,QAAA,KAAK,GAAG;AACN,YAAA,QACEC,IAAA,CAAA,GAAA,EAAA,EAAA,GAAQ,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CACrD,MAAM,EACN,QAAQ,CAAA,EAAA,CACP;AAER,QAAA,KAAK,QAAQ;YACX;;YAEEA,IAAA,CAAA,QAAA,EAAA,EAAA,GAAa,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC1D,MAAM,EACN,QAAQ,CAAA,EAAA,CACF;;AAIf,IAAA,MAAM,IAAI,KAAK,CAAC,SAAyB,CAAC;AAC5C,CAAC;;;;"}
+{"version":3,"file":"CommonButton.js","sources":["../../../../../src/components/AppHeader/components/common/CommonButton.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nexport const commonButtonClassNameGenerator = tv({\n  base: [\n    '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',\n    '[&&]:hover:shr-bg-white-darken',\n    '[&&]:focus-visible:shr-focus-indicator [&&]:focus-visible:shr-bg-white-darken',\n  ],\n  variants: {\n    prefix: {\n      true: ['[&&]:shr-gap-0.5'],\n    },\n    current: {\n      true: ['[&&]:shr-bg-white-darken'],\n    },\n    boldWhenCurrent: {\n      true: null,\n      false: ['[&&]:shr-font-normal'],\n    },\n    rounded: {\n      true: ['[&&]:shr-rounded-m'],\n      false: ['[&&]:shr-rounded-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      boldWhenCurrent: true,\n      current: true,\n      className: ['[&&]:shr-font-bold'],\n    },\n  ],\n  defaultVariants: {\n    rounded: true,\n  },\n})\n\ntype AnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'prefix'>\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'prefix'>\n\ntype Props = (({ elementAs: 'a' } & AnchorProps) | ({ elementAs: 'button' } & ButtonProps)) & {\n  prefix?: ReactNode\n  current?: boolean\n  boldWhenCurrent?: boolean\n}\n\nexport const CommonButton = memo<Props>(\n  ({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {\n    const hasPrefix = !!prefix\n\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          prefix: hasPrefix,\n          current,\n          boldWhenCurrent,\n          className,\n        }),\n      [current, hasPrefix, boldWhenCurrent, className],\n    )\n\n    switch (elementAs) {\n      case 'a':\n        return (\n          <a {...(rest as AnchorProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </a>\n        )\n      case 'button':\n        return (\n          // eslint-disable-next-line smarthr/best-practice-for-button-element\n          <button {...(rest as ButtonProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </button>\n        )\n    }\n\n    throw new Error(elementAs satisfies never)\n  },\n)\n"],"names":["tv","_jsxs"],"mappings":";;;;AAGO,MAAM,8BAA8B,GAAGA,EAAE,CAAC;AAC/C,IAAA,IAAI,EAAE;QACJ,iQAAiQ;QACjQ,gCAAgC;QAChC,+EAA+E;AAChF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,kBAAkB,CAAC;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,0BAA0B,CAAC;AACnC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CAAC,sBAAsB,CAAC;AAChC,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,oBAAoB,CAAC;YAC5B,KAAK,EAAE,CAAC,uBAAuB,CAAC;AACjC,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,CAAC,oBAAoB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAWM,MAAM,YAAY,GAAG,IAAI,CAC9B,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;AAChF,IAAA,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM;IAE1B,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,8BAA8B,CAAC;AAC7B,QAAA,MAAM,EAAE,SAAS;QACjB,OAAO;QACP,eAAe;QACf,SAAS;KACV,CAAC,EACJ,CAAC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,CAAC,CACjD;IAED,QAAQ,SAAS;AACf,QAAA,KAAK,GAAG;AACN,YAAA,QACEC,IAAA,CAAA,GAAA,EAAA,EAAA,GAAQ,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CACrD,MAAM,EACN,QAAQ,CAAA,EAAA,CACP;AAER,QAAA,KAAK,QAAQ;YACX;;YAEEA,IAAA,CAAA,QAAA,EAAA,EAAA,GAAa,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC1D,MAAM,EACN,QAAQ,CAAA,EAAA,CACF;;AAIf,IAAA,MAAM,IAAI,KAAK,CAAC,SAAyB,CAAC;AAC5C,CAAC;;;;"}

package/lib/components/Base/Base.cjs

@@ -5,10 +5,16 @@ 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 tailwind_padding = require('../../tailwind/padding.cjs');
-require('../../themes/createTextColor.cjs');
+require('../../themes/createSpacing.cjs');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
 require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
+require('../../themes/createBackgroundColor.cjs');
+require('../../themes/createBorder.cjs');
 require('../SectioningContent/SectioningContent.cjs');
 require('../SectioningContent/levelContext.cjs');
 var components_SectioningContent_useSectioningWrapper = require('../SectioningContent/useSectioningWrapper.cjs');

package/lib/components/Base/Base.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Base.cjs","sources":["../../../src/components/Base/Base.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 { paddingBlock, paddingInline } from '../../tailwind'\nimport { useSectionWrapper } from '../SectioningContent'\n\nimport type { Gap } from '../../types'\n\nexport const baseClassNameGenerator = tv({\n  base: 'smarthr-ui-Base shr-bg-white forced-colors:shr-border-shorthand contrast-more:shr-border-high-contrast',\n  variants: {\n    paddingBlock,\n    paddingInline,\n    radius: {\n      s: 'shr-rounded-m',\n      m: 'shr-rounded-l',\n    },\n    overflowBlock: {\n      visible: 'shr-overflow-y-visible',\n      hidden: 'shr-overflow-y-hidden',\n      clip: 'shr-overflow-y-clip',\n      scroll: 'shr-overflow-y-scroll',\n      auto: 'shr-overflow-y-auto',\n    },\n    overflowInline: {\n      visible: 'shr-overflow-x-visible',\n      hidden: 'shr-overflow-x-hidden',\n      clip: 'shr-overflow-x-clip',\n      scroll: 'shr-overflow-x-scroll',\n      auto: 'shr-overflow-x-auto',\n    },\n    layer: {\n      0: 'shr-shadow-layer-0',\n      1: 'shr-shadow-layer-1',\n      2: 'shr-shadow-layer-2',\n      3: 'shr-shadow-layer-3',\n      4: 'shr-shadow-layer-4',\n    },\n  },\n})\n\ntype Overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'\n\ntype AbstractProps = PropsWithChildren<\n  Omit<\n    VariantProps<typeof baseClassNameGenerator>,\n    'paddingBlock' | 'paddingInline' | 'overflowBlock' | 'overflowInline'\n  > & {\n    /** 境界とコンテンツの間の余白 */\n    padding?: Gap | SeparatePadding\n    /** コンテンツが要素内に収まらない場合の処理方法 */\n    overflow?: Overflow | { x: Overflow; y: Overflow }\n    as?: string | ComponentType<any>\n  }\n>\nexport type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n}\n\nexport const Base = forwardRef<HTMLDivElement, Props>(\n  ({ padding, radius, overflow, layer, as: Component = 'div', className, ...rest }, ref) => {\n    const actualClassName = useMemo(() => {\n      const actualPadding =\n        padding instanceof Object ? padding : { block: padding, inline: padding }\n      const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }\n\n      return baseClassNameGenerator({\n        paddingBlock: actualPadding.block,\n        paddingInline: actualPadding.inline,\n        radius: radius ?? 'm',\n        overflowBlock: actualOverflow.y,\n        overflowInline: actualOverflow.x,\n        layer: layer ?? 1,\n        className,\n      })\n    }, [layer, overflow, padding, radius, className])\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":";;;;;;;;;;;;;;;AAgBO;AACL;AACA;;;AAGE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAwBM;AAEH;;;AAKE;;;;;;;;AAQC;AACH;AAEA;AACA;;AAGE;;AAGF;AACF;;;"}
+{"version":3,"file":"Base.cjs","sources":["../../../src/components/Base/Base.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 { paddingBlock, paddingInline } from '../../tailwind'\nimport { useSectionWrapper } from '../SectioningContent'\n\nimport type { Gap } from '../../types'\n\nexport const baseClassNameGenerator = tv({\n  base: 'smarthr-ui-Base shr-bg-white forced-colors:shr-border-shorthand contrast-more:shr-border-high-contrast',\n  variants: {\n    paddingBlock,\n    paddingInline,\n    radius: {\n      s: 'shr-rounded-m',\n      m: 'shr-rounded-l',\n    },\n    overflowBlock: {\n      visible: 'shr-overflow-y-visible',\n      hidden: 'shr-overflow-y-hidden',\n      clip: 'shr-overflow-y-clip',\n      scroll: 'shr-overflow-y-scroll',\n      auto: 'shr-overflow-y-auto',\n    },\n    overflowInline: {\n      visible: 'shr-overflow-x-visible',\n      hidden: 'shr-overflow-x-hidden',\n      clip: 'shr-overflow-x-clip',\n      scroll: 'shr-overflow-x-scroll',\n      auto: 'shr-overflow-x-auto',\n    },\n    layer: {\n      0: 'shr-shadow-layer-0',\n      1: 'shr-shadow-layer-1',\n      2: 'shr-shadow-layer-2',\n      3: 'shr-shadow-layer-3',\n      4: 'shr-shadow-layer-4',\n    },\n  },\n})\n\ntype Overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'\n\ntype AbstractProps = PropsWithChildren<\n  Omit<\n    VariantProps<typeof baseClassNameGenerator>,\n    'paddingBlock' | 'paddingInline' | 'overflowBlock' | 'overflowInline'\n  > & {\n    /** 境界とコンテンツの間の余白 */\n    padding?: Gap | SeparatePadding\n    /** コンテンツが要素内に収まらない場合の処理方法 */\n    overflow?: Overflow | { x: Overflow; y: Overflow }\n    as?: string | ComponentType<any>\n  }\n>\nexport type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n}\n\nexport const Base = forwardRef<HTMLDivElement, Props>(\n  ({ padding, radius, overflow, layer, as: Component = 'div', className, ...rest }, ref) => {\n    const actualClassName = useMemo(() => {\n      const actualPadding =\n        padding instanceof Object ? padding : { block: padding, inline: padding }\n      const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }\n\n      return baseClassNameGenerator({\n        paddingBlock: actualPadding.block,\n        paddingInline: actualPadding.inline,\n        radius: radius ?? 'm',\n        overflowBlock: actualOverflow.y,\n        overflowInline: actualOverflow.x,\n        layer: layer ?? 1,\n        className,\n      })\n    }, [layer, overflow, padding, radius, className])\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":";;;;;;;;;;;;;;;;;;;;;AAgBO;AACL;AACA;;;AAGE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAwBM;AAEH;;;AAKE;;;;;;;;AAQC;AACH;AAEA;AACA;;AAGE;;AAGF;AACF;;;"}

package/lib/components/Base/Base.js

@@ -3,10 +3,16 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, 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 { paddingInline, paddingBlock } from '../../tailwind/padding.js';
-import '../../themes/createTextColor.js';
+import '../../themes/createSpacing.js';
 import '../../_virtual/index.js';
 import '../../_virtual/index2.js';
 import '../../themes/createColor.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
+import '../../themes/createBackgroundColor.js';
+import '../../themes/createBorder.js';
 import '../SectioningContent/SectioningContent.js';
 import '../SectioningContent/levelContext.js';
 import { useSectionWrapper } from '../SectioningContent/useSectioningWrapper.js';

package/lib/components/Base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.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 { paddingBlock, paddingInline } from '../../tailwind'\nimport { useSectionWrapper } from '../SectioningContent'\n\nimport type { Gap } from '../../types'\n\nexport const baseClassNameGenerator = tv({\n  base: 'smarthr-ui-Base shr-bg-white forced-colors:shr-border-shorthand contrast-more:shr-border-high-contrast',\n  variants: {\n    paddingBlock,\n    paddingInline,\n    radius: {\n      s: 'shr-rounded-m',\n      m: 'shr-rounded-l',\n    },\n    overflowBlock: {\n      visible: 'shr-overflow-y-visible',\n      hidden: 'shr-overflow-y-hidden',\n      clip: 'shr-overflow-y-clip',\n      scroll: 'shr-overflow-y-scroll',\n      auto: 'shr-overflow-y-auto',\n    },\n    overflowInline: {\n      visible: 'shr-overflow-x-visible',\n      hidden: 'shr-overflow-x-hidden',\n      clip: 'shr-overflow-x-clip',\n      scroll: 'shr-overflow-x-scroll',\n      auto: 'shr-overflow-x-auto',\n    },\n    layer: {\n      0: 'shr-shadow-layer-0',\n      1: 'shr-shadow-layer-1',\n      2: 'shr-shadow-layer-2',\n      3: 'shr-shadow-layer-3',\n      4: 'shr-shadow-layer-4',\n    },\n  },\n})\n\ntype Overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'\n\ntype AbstractProps = PropsWithChildren<\n  Omit<\n    VariantProps<typeof baseClassNameGenerator>,\n    'paddingBlock' | 'paddingInline' | 'overflowBlock' | 'overflowInline'\n  > & {\n    /** 境界とコンテンツの間の余白 */\n    padding?: Gap | SeparatePadding\n    /** コンテンツが要素内に収まらない場合の処理方法 */\n    overflow?: Overflow | { x: Overflow; y: Overflow }\n    as?: string | ComponentType<any>\n  }\n>\nexport type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n}\n\nexport const Base = forwardRef<HTMLDivElement, Props>(\n  ({ padding, radius, overflow, layer, as: Component = 'div', className, ...rest }, ref) => {\n    const actualClassName = useMemo(() => {\n      const actualPadding =\n        padding instanceof Object ? padding : { block: padding, inline: padding }\n      const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }\n\n      return baseClassNameGenerator({\n        paddingBlock: actualPadding.block,\n        paddingInline: actualPadding.inline,\n        radius: radius ?? 'm',\n        overflowBlock: actualOverflow.y,\n        overflowInline: actualOverflow.x,\n        layer: layer ?? 1,\n        className,\n      })\n    }, [layer, overflow, padding, radius, className])\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":";;;;;;;;;;;;;AAgBO;AACL;AACA;;;AAGE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAwBM;AAEH;;;AAKE;;;;;;;;AAQC;AACH;AAEA;AACA;;AAGE;;AAGF;AACF;;"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.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 { paddingBlock, paddingInline } from '../../tailwind'\nimport { useSectionWrapper } from '../SectioningContent'\n\nimport type { Gap } from '../../types'\n\nexport const baseClassNameGenerator = tv({\n  base: 'smarthr-ui-Base shr-bg-white forced-colors:shr-border-shorthand contrast-more:shr-border-high-contrast',\n  variants: {\n    paddingBlock,\n    paddingInline,\n    radius: {\n      s: 'shr-rounded-m',\n      m: 'shr-rounded-l',\n    },\n    overflowBlock: {\n      visible: 'shr-overflow-y-visible',\n      hidden: 'shr-overflow-y-hidden',\n      clip: 'shr-overflow-y-clip',\n      scroll: 'shr-overflow-y-scroll',\n      auto: 'shr-overflow-y-auto',\n    },\n    overflowInline: {\n      visible: 'shr-overflow-x-visible',\n      hidden: 'shr-overflow-x-hidden',\n      clip: 'shr-overflow-x-clip',\n      scroll: 'shr-overflow-x-scroll',\n      auto: 'shr-overflow-x-auto',\n    },\n    layer: {\n      0: 'shr-shadow-layer-0',\n      1: 'shr-shadow-layer-1',\n      2: 'shr-shadow-layer-2',\n      3: 'shr-shadow-layer-3',\n      4: 'shr-shadow-layer-4',\n    },\n  },\n})\n\ntype Overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'\n\ntype AbstractProps = PropsWithChildren<\n  Omit<\n    VariantProps<typeof baseClassNameGenerator>,\n    'paddingBlock' | 'paddingInline' | 'overflowBlock' | 'overflowInline'\n  > & {\n    /** 境界とコンテンツの間の余白 */\n    padding?: Gap | SeparatePadding\n    /** コンテンツが要素内に収まらない場合の処理方法 */\n    overflow?: Overflow | { x: Overflow; y: Overflow }\n    as?: string | ComponentType<any>\n  }\n>\nexport type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n}\n\nexport const Base = forwardRef<HTMLDivElement, Props>(\n  ({ padding, radius, overflow, layer, as: Component = 'div', className, ...rest }, ref) => {\n    const actualClassName = useMemo(() => {\n      const actualPadding =\n        padding instanceof Object ? padding : { block: padding, inline: padding }\n      const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }\n\n      return baseClassNameGenerator({\n        paddingBlock: actualPadding.block,\n        paddingInline: actualPadding.inline,\n        radius: radius ?? 'm',\n        overflowBlock: actualOverflow.y,\n        overflowInline: actualOverflow.x,\n        layer: layer ?? 1,\n        className,\n      })\n    }, [layer, overflow, padding, radius, className])\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":";;;;;;;;;;;;;;;;;;;AAgBO;AACL;AACA;;;AAGE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAwBM;AAEH;;;AAKE;;;;;;;;AAQC;AACH;AAEA;AACA;;AAGE;;AAGF;AACF;;"}

package/lib/components/Base/BaseColumn/BaseColumn.cjs

@@ -4,10 +4,16 @@ 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 tailwind_backgroundColor = require('../../../tailwind/backgroundColor.cjs');
-require('../../../themes/createTextColor.cjs');
+require('../../../themes/createSpacing.cjs');
 require('../../../_virtual/index.cjs');
 require('../../../_virtual/index2.cjs');
 require('../../../themes/createColor.cjs');
+require('../../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../../themes/createShadow/defaultShadow.cjs');
+require('../../../themes/createWidth.cjs');
+require('../../../themes/createBackgroundColor.cjs');
+require('../../../themes/createBorder.cjs');
 var components_Base_Base = require('../Base.cjs');
 
 const classNameGenerator = index.tv({

package/lib/components/Base/BaseColumn/BaseColumn.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseColumn.cjs","sources":["../../../../src/components/Base/BaseColumn/BaseColumn.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Base } from '../Base'\n\ntype AbstractProps = Omit<ComponentProps<typeof Base>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const BaseColumn: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Base {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","backgroundColor","useMemo","_jsx","Base"],"mappings":";;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAEC,wCAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,UAAU,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC7F,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,eAACC,yBAAI,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACnF;;;;"}
+{"version":3,"file":"BaseColumn.cjs","sources":["../../../../src/components/Base/BaseColumn/BaseColumn.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Base } from '../Base'\n\ntype AbstractProps = Omit<ComponentProps<typeof Base>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const BaseColumn: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Base {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","backgroundColor","useMemo","_jsx","Base"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAEC,wCAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,UAAU,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC7F,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,eAACC,yBAAI,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACnF;;;;"}

package/lib/components/Base/BaseColumn/BaseColumn.js

@@ -2,10 +2,16 @@ 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 { backgroundColor } from '../../../tailwind/backgroundColor.js';
-import '../../../themes/createTextColor.js';
+import '../../../themes/createSpacing.js';
 import '../../../_virtual/index.js';
 import '../../../_virtual/index2.js';
 import '../../../themes/createColor.js';
+import '../../../themes/createTextColor.js';
+import 'styled-components';
+import '../../../themes/createShadow/defaultShadow.js';
+import '../../../themes/createWidth.js';
+import '../../../themes/createBackgroundColor.js';
+import '../../../themes/createBorder.js';
 import { Base } from '../Base.js';
 
 const classNameGenerator = ce({

package/lib/components/Base/BaseColumn/BaseColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseColumn.js","sources":["../../../../src/components/Base/BaseColumn/BaseColumn.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Base } from '../Base'\n\ntype AbstractProps = Omit<ComponentProps<typeof Base>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const BaseColumn: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Base {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,UAAU,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC7F,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,IAAC,IAAI,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACnF;;;;"}
+{"version":3,"file":"BaseColumn.js","sources":["../../../../src/components/Base/BaseColumn/BaseColumn.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Base } from '../Base'\n\ntype AbstractProps = Omit<ComponentProps<typeof Base>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const BaseColumn: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Base {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,UAAU,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC7F,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,IAAC,IAAI,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACnF;;;;"}

package/lib/components/Button/AnchorButton.cjs

@@ -14,13 +14,8 @@ const classNameGenerator = index.tv({
 });
 const AnchorButton = React.forwardRef(({ size = 'M', prefix, suffix, wide = false, variant = 'secondary', inactiveReason, target, rel, elementAs, className, children, href, ...rest }, ref) => {
     const actualClassName = React.useMemo(() => classNameGenerator({ className }), [className]);
-    const actualSuffix = React.useMemo(() => {
-        // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
-        if (target === '_blank' && !prefix && suffix === undefined) {
-            return jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, {});
-        }
-        return suffix;
-    }, [prefix, suffix, target]);
+    // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
+    const actualSuffix = target === '_blank' && !prefix && suffix === undefined ? jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, {}) : suffix;
     const button = (jsxRuntime.jsx(components_Button_ButtonWrapper.ButtonWrapper, { ...rest, href: href, size: size, wide: wide, variant: variant, className: actualClassName, target: target, rel: rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel, isAnchor: true, anchorRef: ref, elementAs: elementAs, prefix: prefix, suffix: actualSuffix, children: children }));
     if (!href && inactiveReason) {
         return jsxRuntime.jsx(components_Button_DisabledReason.DisabledReason, { button: button, disabledReason: inactiveReason });

package/lib/components/Button/AnchorButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.cjs","sources":["../../../src/components/Button/AnchorButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type PropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledReason } from './DisabledReason'\n\nimport type { AbstractProps as ButtonProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype AbstractProps<T extends ElementType> = Omit<ButtonProps, 'variant' | 'disabledReason'> & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  // tertiaryはAnchorButtonでは使用不可\n  variant?: Exclude<ButtonProps['variant'], 'tertiary'>\n  inactiveReason?: ButtonProps['disabledReason']\n}\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof AbstractProps<T> & ElementRefProps<T>\n>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'M',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      inactiveReason,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      href,\n      ...rest\n    }: PropsWithoutRef<AbstractProps<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    const actualSuffix = useMemo(() => {\n      // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n      if (target === '_blank' && !prefix && suffix === undefined) {\n        return <OpenInNewTabIcon />\n      }\n\n      return suffix\n    }, [prefix, suffix, target])\n\n    const button = (\n      <ButtonWrapper\n        {...rest}\n        href={href}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={actualClassName}\n        target={target}\n        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}\n        isAnchor\n        anchorRef={ref}\n        elementAs={elementAs}\n        prefix={prefix}\n        suffix={actualSuffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!href && inactiveReason) {\n      return <DisabledReason button={button} disabledReason={inactiveReason} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: AbstractProps<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & {\n  displayName: string\n}\n\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nForwardedAnchorButton.displayName = 'AnchorButton'\n\nexport { ForwardedAnchorButton as AnchorButton }\n"],"names":[],"mappings":";;;;;;;;;;;AAmCA;AACE;AACD;AAED;AAmBI;AAEA;;;;;AAME;;AAGF;AAoBA;;;AAIA;AACF;AAQF;AAIA;AACA;;"}
+{"version":3,"file":"AnchorButton.cjs","sources":["../../../src/components/Button/AnchorButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type PropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledReason } from './DisabledReason'\n\nimport type { AbstractProps as ButtonProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype AbstractProps<T extends ElementType> = Omit<ButtonProps, 'variant' | 'disabledReason'> & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  // tertiaryはAnchorButtonでは使用不可\n  variant?: Exclude<ButtonProps['variant'], 'tertiary'>\n  inactiveReason?: ButtonProps['disabledReason']\n}\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof AbstractProps<T> & ElementRefProps<T>\n>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'M',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      inactiveReason,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      href,\n      ...rest\n    }: PropsWithoutRef<AbstractProps<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n    const actualSuffix =\n      target === '_blank' && !prefix && suffix === undefined ? <OpenInNewTabIcon /> : suffix\n\n    const button = (\n      <ButtonWrapper\n        {...rest}\n        href={href}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={actualClassName}\n        target={target}\n        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}\n        isAnchor\n        anchorRef={ref}\n        elementAs={elementAs}\n        prefix={prefix}\n        suffix={actualSuffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!href && inactiveReason) {\n      return <DisabledReason button={button} disabledReason={inactiveReason} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: AbstractProps<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & {\n  displayName: string\n}\n\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nForwardedAnchorButton.displayName = 'AnchorButton'\n\nexport { ForwardedAnchorButton as AnchorButton }\n"],"names":[],"mappings":";;;;;;;;;;;AAmCA;AACE;AACD;AAED;AAmBI;;;AAMA;AAoBA;;;AAIA;AACF;AAQF;AAIA;AACA;;"}

package/lib/components/Button/AnchorButton.js

@@ -12,13 +12,8 @@ const classNameGenerator = ce({
 });
 const AnchorButton = forwardRef(({ size = 'M', prefix, suffix, wide = false, variant = 'secondary', inactiveReason, target, rel, elementAs, className, children, href, ...rest }, ref) => {
     const actualClassName = useMemo(() => classNameGenerator({ className }), [className]);
-    const actualSuffix = useMemo(() => {
-        // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
-        if (target === '_blank' && !prefix && suffix === undefined) {
-            return jsx(OpenInNewTabIcon, {});
-        }
-        return suffix;
-    }, [prefix, suffix, target]);
+    // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
+    const actualSuffix = target === '_blank' && !prefix && suffix === undefined ? jsx(OpenInNewTabIcon, {}) : suffix;
     const button = (jsx(ButtonWrapper, { ...rest, href: href, size: size, wide: wide, variant: variant, className: actualClassName, target: target, rel: rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel, isAnchor: true, anchorRef: ref, elementAs: elementAs, prefix: prefix, suffix: actualSuffix, children: children }));
     if (!href && inactiveReason) {
         return jsx(DisabledReason, { button: button, disabledReason: inactiveReason });

package/lib/components/Button/AnchorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.js","sources":["../../../src/components/Button/AnchorButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type PropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledReason } from './DisabledReason'\n\nimport type { AbstractProps as ButtonProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype AbstractProps<T extends ElementType> = Omit<ButtonProps, 'variant' | 'disabledReason'> & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  // tertiaryはAnchorButtonでは使用不可\n  variant?: Exclude<ButtonProps['variant'], 'tertiary'>\n  inactiveReason?: ButtonProps['disabledReason']\n}\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof AbstractProps<T> & ElementRefProps<T>\n>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'M',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      inactiveReason,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      href,\n      ...rest\n    }: PropsWithoutRef<AbstractProps<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    const actualSuffix = useMemo(() => {\n      // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n      if (target === '_blank' && !prefix && suffix === undefined) {\n        return <OpenInNewTabIcon />\n      }\n\n      return suffix\n    }, [prefix, suffix, target])\n\n    const button = (\n      <ButtonWrapper\n        {...rest}\n        href={href}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={actualClassName}\n        target={target}\n        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}\n        isAnchor\n        anchorRef={ref}\n        elementAs={elementAs}\n        prefix={prefix}\n        suffix={actualSuffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!href && inactiveReason) {\n      return <DisabledReason button={button} disabledReason={inactiveReason} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: AbstractProps<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & {\n  displayName: string\n}\n\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nForwardedAnchorButton.displayName = 'AnchorButton'\n\nexport { ForwardedAnchorButton as AnchorButton }\n"],"names":[],"mappings":";;;;;;;;;AAmCA;AACE;AACD;AAED;AAmBI;AAEA;;;;;AAME;;AAGF;AAoBA;;;AAIA;AACF;AAQF;AAIA;AACA;;"}
+{"version":3,"file":"AnchorButton.js","sources":["../../../src/components/Button/AnchorButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type PropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledReason } from './DisabledReason'\n\nimport type { AbstractProps as ButtonProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype AbstractProps<T extends ElementType> = Omit<ButtonProps, 'variant' | 'disabledReason'> & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  // tertiaryはAnchorButtonでは使用不可\n  variant?: Exclude<ButtonProps['variant'], 'tertiary'>\n  inactiveReason?: ButtonProps['disabledReason']\n}\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof AbstractProps<T> & ElementRefProps<T>\n>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'M',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      inactiveReason,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      href,\n      ...rest\n    }: PropsWithoutRef<AbstractProps<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n    const actualSuffix =\n      target === '_blank' && !prefix && suffix === undefined ? <OpenInNewTabIcon /> : suffix\n\n    const button = (\n      <ButtonWrapper\n        {...rest}\n        href={href}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={actualClassName}\n        target={target}\n        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}\n        isAnchor\n        anchorRef={ref}\n        elementAs={elementAs}\n        prefix={prefix}\n        suffix={actualSuffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!href && inactiveReason) {\n      return <DisabledReason button={button} disabledReason={inactiveReason} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: AbstractProps<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & {\n  displayName: string\n}\n\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nForwardedAnchorButton.displayName = 'AnchorButton'\n\nexport { ForwardedAnchorButton as AnchorButton }\n"],"names":[],"mappings":";;;;;;;;;AAmCA;AACE;AACD;AAED;AAmBI;;;AAMA;AAoBA;;;AAIA;AACF;AAQF;AAIA;AACA;;"}

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.cjs

@@ -81,17 +81,21 @@ const typedMemo = React.memo;
 const EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/;
 const BaseDestroyButton = ({ labelId, suffixTextId, item, onDelete, disabled, buttonRef, className, iconStyle, }) => {
     const { localize } = intl_useIntl.useIntl();
+    const onDeleteRef = React.useRef(onDelete);
+    onDeleteRef.current = onDelete;
+    const itemRef = React.useRef(item);
+    itemRef.current = item;
     const onClick = React.useCallback(() => {
-        onDelete(item);
-    }, [item, onDelete]);
+        onDeleteRef.current(itemRef.current);
+    }, []);
     const onKeyDown = React.useCallback((e) => {
         if (EXEC_DESTROY_KEY.test(e.key)) {
             e.stopPropagation();
             // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない
             // このタイミングで明示的に削除処理を実行する
-            onClick();
+            onDeleteRef.current(itemRef.current);
         }
-    }, [onClick]);
+    }, []);
     const destroyButtonIconAltSuffix = React.useMemo(() => localize({
         id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',
         defaultText: 'を削除',

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectedItem.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n  const onClick = useCallback(() => {\n    onDelete(item)\n  }, [item, onDelete])\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (EXEC_DESTROY_KEY.test(e.key)) {\n        e.stopPropagation()\n\n        // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n        // このタイミングで明示的に削除処理を実行する\n        onClick()\n      }\n    },\n    [onClick],\n  )\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","useState","useId","useMemo","_jsxs","Chip","_jsx","Tooltip","memo","useRef","useEffect","useIntl","useCallback","UnstyledButton","VisuallyHiddenText","FaCircleXmarkIcon"],"mappings":"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"}
+{"version":3,"file":"MultiSelectedItem.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n\n  const onDeleteRef = useRef(onDelete)\n  onDeleteRef.current = onDelete\n  const itemRef = useRef(item)\n  itemRef.current = item\n\n  const onClick = useCallback(() => {\n    onDeleteRef.current(itemRef.current)\n  }, [])\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (EXEC_DESTROY_KEY.test(e.key)) {\n      e.stopPropagation()\n\n      // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n      // このタイミングで明示的に削除処理を実行する\n      onDeleteRef.current(itemRef.current)\n    }\n  }, [])\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","useState","useId","useMemo","_jsxs","Chip","_jsx","Tooltip","memo","useRef","useEffect","useIntl","useCallback","UnstyledButton","VisuallyHiddenText","FaCircleXmarkIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EACL,oHAAoH;AACtH,QAAA,SAAS,EAAE,4CAA4C;AACvD,QAAA,YAAY,EAAE;YACZ,uCAAuC;YACvC,cAAc;YACd,wBAAwB;YACxB,4DAA4D;YAC5D,gCAAgC;AACjC,SAAA;AACD,QAAA,gBAAgB,EACd,+GAA+G;AAClH,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,iEAAiE;AAC7E,aAAA;AACF,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,YAAY,EAAE,wBAAwB;AACvC,aAAA;AACD,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEI,SAAU,iBAAiB,CAAI,EACnC,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,SAAS,GACA,EAAA;IACT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI;AACjC,IAAA,MAAM,QAAQ,GAAGC,WAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,QAAQ,aAAa;AACxC,IAAA,MAAM,mBAAmB,GAAG,CAAA,EAAG,QAAQ,6BAA6B;AAEpE,IAAA,MAAM,UAAU,GAAGC,aAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;QAEnF,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;AAClB,YAAA,SAAS,EAAE,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;AACxC,YAAA,YAAY,EAAE,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;YACxC,gBAAgB,EAAE,gBAAgB,EAAE;SACrC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;AAE9B,IAAA,MAAM,IAAI,IACRC,eAAA,CAACC,yBAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CACrDC,eAAC,SAAS,EAAA,EAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,EAAE,eAAe,YACtF,IAAI,CAAC,KAAK,EAAA,CACD,EAEX,SAAS,KACRA,cAAA,CAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,mBAAmB,EACjC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,UAAU,CAAC,YAAY,EAClC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GACtC,CACH,CAAA,EAAA,CACI,CACR;IAED,IAAI,YAAY,EAAE;QAChB,OAAOA,cAAA,CAACC,kCAAO,EAAA,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAA,QAAA,EAAG,IAAI,EAAA,CAAW;IACvD;AAEA,IAAA,OAAO,IAAI;AACb;AAEA,MAAM,SAAS,GAAGC,UAAI,CAOpB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,SAAS,EAAE,KAAI;AACjE,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAC;IAE7CC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,cAAc,IAAI,QAAQ,CAAC,OAAO,EAAE;AACtC,YAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO;YAE7B,eAAe,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACtD;AACF,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAErC,IAAA,QACEJ,cAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,YAC9C,QAAQ,EAAA,CACJ;AAEX,CAAC,CAAC;AAEF,MAAM,SAAS,GAAmBE,UAAI;AACtC,MAAM,gBAAgB,GAAG,uBAAuB;AAEhD,MAAM,iBAAiB,GAAG,CAAK,EAC7B,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,GAMV,KAAI;AACH,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAGG,oBAAO,EAAE;AAE9B,IAAA,MAAM,WAAW,GAAGF,YAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAC9B,IAAA,MAAM,OAAO,GAAGA,YAAM,CAAC,IAAI,CAAC;AAC5B,IAAA,OAAO,CAAC,OAAO,GAAG,IAAI;AAEtB,IAAA,MAAM,OAAO,GAAGG,iBAAW,CAAC,MAAK;AAC/B,QAAA,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,SAAS,GAAGA,iBAAW,CAAC,CAAC,CAAmC,KAAI;QACpE,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAChC,CAAC,CAAC,eAAe,EAAE;;;AAInB,YAAA,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;QACtC;IACF,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,0BAA0B,GAAGT,aAAO,CACxC,MACE,QAAQ,CAAC;AACP,QAAA,EAAE,EAAE,qDAAqD;AACzD,QAAA,WAAW,EAAE,KAAK;AACnB,KAAA,CAAC,EACJ,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACEC,eAAA,CAACS,+CAAc,EAAA,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,EAAE,EAAA,iBAAA,EACK,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,YAAY,EAAE,EAC7C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,QAAA,EAAA,CAEpBP,cAAA,CAACQ,mEAAkB,EAAA,EAAC,EAAE,EAAE,YAAY,EAAA,QAAA,EAAG,0BAA0B,EAAA,CAAsB,EACvFR,cAAA,CAACS,wCAAiB,IAAC,KAAK,EAAE,QAAQ,GAAG,eAAe,GAAG,SAAS,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,CAAA,EAAA,CAC3E;AAErB,CAAC;AACD,MAAM,aAAa,GAAG,SAAS,CAAC,iBAAiB,CAAC;;;;"}

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.js

@@ -79,17 +79,21 @@ const typedMemo = memo;
 const EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/;
 const BaseDestroyButton = ({ labelId, suffixTextId, item, onDelete, disabled, buttonRef, className, iconStyle, }) => {
     const { localize } = useIntl();
+    const onDeleteRef = useRef(onDelete);
+    onDeleteRef.current = onDelete;
+    const itemRef = useRef(item);
+    itemRef.current = item;
     const onClick = useCallback(() => {
-        onDelete(item);
-    }, [item, onDelete]);
+        onDeleteRef.current(itemRef.current);
+    }, []);
     const onKeyDown = useCallback((e) => {
         if (EXEC_DESTROY_KEY.test(e.key)) {
             e.stopPropagation();
             // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない
             // このタイミングで明示的に削除処理を実行する
-            onClick();
+            onDeleteRef.current(itemRef.current);
         }
-    }, [onClick]);
+    }, []);
     const destroyButtonIconAltSuffix = useMemo(() => localize({
         id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',
         defaultText: 'を削除',

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectedItem.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n  const onClick = useCallback(() => {\n    onDelete(item)\n  }, [item, onDelete])\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (EXEC_DESTROY_KEY.test(e.key)) {\n        e.stopPropagation()\n\n        // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n        // このタイミングで明示的に削除処理を実行する\n        onClick()\n      }\n    },\n    [onClick],\n  )\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"MultiSelectedItem.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n\n  const onDeleteRef = useRef(onDelete)\n  onDeleteRef.current = onDelete\n  const itemRef = useRef(item)\n  itemRef.current = item\n\n  const onClick = useCallback(() => {\n    onDeleteRef.current(itemRef.current)\n  }, [])\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (EXEC_DESTROY_KEY.test(e.key)) {\n      e.stopPropagation()\n\n      // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n      // このタイミングで明示的に削除処理を実行する\n      onDeleteRef.current(itemRef.current)\n    }\n  }, [])\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EACL,oHAAoH;AACtH,QAAA,SAAS,EAAE,4CAA4C;AACvD,QAAA,YAAY,EAAE;YACZ,uCAAuC;YACvC,cAAc;YACd,wBAAwB;YACxB,4DAA4D;YAC5D,gCAAgC;AACjC,SAAA;AACD,QAAA,gBAAgB,EACd,+GAA+G;AAClH,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,iEAAiE;AAC7E,aAAA;AACF,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,YAAY,EAAE,wBAAwB;AACvC,aAAA;AACD,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEI,SAAU,iBAAiB,CAAI,EACnC,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,SAAS,GACA,EAAA;IACT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI;AACjC,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,QAAQ,aAAa;AACxC,IAAA,MAAM,mBAAmB,GAAG,CAAA,EAAG,QAAQ,6BAA6B;AAEpE,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;QAEnF,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;AAClB,YAAA,SAAS,EAAE,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;AACxC,YAAA,YAAY,EAAE,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;YACxC,gBAAgB,EAAE,gBAAgB,EAAE;SACrC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;AAE9B,IAAA,MAAM,IAAI,IACRC,IAAA,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CACrDC,IAAC,SAAS,EAAA,EAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,EAAE,eAAe,YACtF,IAAI,CAAC,KAAK,EAAA,CACD,EAEX,SAAS,KACRA,GAAA,CAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,mBAAmB,EACjC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,UAAU,CAAC,YAAY,EAClC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GACtC,CACH,CAAA,EAAA,CACI,CACR;IAED,IAAI,YAAY,EAAE;QAChB,OAAOA,GAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAA,QAAA,EAAG,IAAI,EAAA,CAAW;IACvD;AAEA,IAAA,OAAO,IAAI;AACb;AAEA,MAAM,SAAS,GAAG,IAAI,CAOpB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,SAAS,EAAE,KAAI;AACjE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE7C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,cAAc,IAAI,QAAQ,CAAC,OAAO,EAAE;AACtC,YAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO;YAE7B,eAAe,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACtD;AACF,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAErC,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,YAC9C,QAAQ,EAAA,CACJ;AAEX,CAAC,CAAC;AAEF,MAAM,SAAS,GAAmB,IAAI;AACtC,MAAM,gBAAgB,GAAG,uBAAuB;AAEhD,MAAM,iBAAiB,GAAG,CAAK,EAC7B,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,GAMV,KAAI;AACH,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE;AAE9B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAC9B,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC;AAC5B,IAAA,OAAO,CAAC,OAAO,GAAG,IAAI;AAEtB,IAAA,MAAM,OAAO,GAAG,WAAW,CAAC,MAAK;AAC/B,QAAA,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAmC,KAAI;QACpE,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAChC,CAAC,CAAC,eAAe,EAAE;;;AAInB,YAAA,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;QACtC;IACF,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,0BAA0B,GAAG,OAAO,CACxC,MACE,QAAQ,CAAC;AACP,QAAA,EAAE,EAAE,qDAAqD;AACzD,QAAA,WAAW,EAAE,KAAK;AACnB,KAAA,CAAC,EACJ,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACED,IAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,EAAE,EAAA,iBAAA,EACK,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,YAAY,EAAE,EAC7C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,QAAA,EAAA,CAEpBC,GAAA,CAAC,kBAAkB,EAAA,EAAC,EAAE,EAAE,YAAY,EAAA,QAAA,EAAG,0BAA0B,EAAA,CAAsB,EACvFA,GAAA,CAAC,iBAAiB,IAAC,KAAK,EAAE,QAAQ,GAAG,eAAe,GAAG,SAAS,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,CAAA,EAAA,CAC3E;AAErB,CAAC;AACD,MAAM,aAAa,GAAG,SAAS,CAAC,iBAAiB,CAAC;;;;"}

package/lib/components/Dialog/DialogBody.cjs

@@ -5,10 +5,16 @@ 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 tailwind_backgroundColor = require('../../tailwind/backgroundColor.cjs');
 var tailwind_padding = require('../../tailwind/padding.cjs');
-require('../../themes/createTextColor.cjs');
+require('../../themes/createSpacing.cjs');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
 require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
+require('../../themes/createBackgroundColor.cjs');
+require('../../themes/createBorder.cjs');
 var components_Scroller_Scroller = require('../Scroller/Scroller.cjs');
 
 const classNameGenerator = index.tv({

package/lib/components/Dialog/DialogBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.cjs","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","paddingBlock","paddingInline","backgroundColor","useMemo","_jsx","Scroller"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;sBACRC,6BAAY;uBACZC,8BAAa;AACb,QAAA,cAAc,EAAEC,wCAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAGC,aAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAGA,aAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,cAAA,CAACC,qCAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}
+{"version":3,"file":"DialogBody.cjs","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","paddingBlock","paddingInline","backgroundColor","useMemo","_jsx","Scroller"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;sBACRC,6BAAY;uBACZC,8BAAa;AACb,QAAA,cAAc,EAAEC,wCAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAGC,aAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAGA,aAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,cAAA,CAACC,qCAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}

package/lib/components/Dialog/DialogBody.js

@@ -3,10 +3,16 @@ 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 { backgroundColor } from '../../tailwind/backgroundColor.js';
 import { paddingInline, paddingBlock } from '../../tailwind/padding.js';
-import '../../themes/createTextColor.js';
+import '../../themes/createSpacing.js';
 import '../../_virtual/index.js';
 import '../../_virtual/index2.js';
 import '../../themes/createColor.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
+import '../../themes/createBackgroundColor.js';
+import '../../themes/createBorder.js';
 import { Scroller } from '../Scroller/Scroller.js';
 
 const classNameGenerator = ce({

package/lib/components/Dialog/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;QACR,YAAY;QACZ,aAAa;AACb,QAAA,cAAc,EAAE,eAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,GAAA,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}
+{"version":3,"file":"DialogBody.js","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;QACR,YAAY;QACZ,aAAa;AACb,QAAA,cAAc,EAAE,eAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,GAAA,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}

package/lib/components/Dialog/DialogContentInner.cjs

@@ -6,10 +6,16 @@ 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_useHandleEscape = require('../../hooks/useHandleEscape.cjs');
 var tailwind_dialogSize = require('../../tailwind/dialogSize.cjs');
-require('../../themes/createTextColor.cjs');
+require('../../themes/createSpacing.cjs');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
 require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
+require('../../themes/createBackgroundColor.cjs');
+require('../../themes/createBorder.cjs');
 var components_Dialog_DialogOverlap = require('./DialogOverlap.cjs');
 var components_Dialog_FocusTrap = require('./FocusTrap.cjs');
 var components_Dialog_useBodyScrollLock = require('./useBodyScrollLock.cjs');

package/lib/components/Dialog/DialogContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentInner.cjs","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}
+{"version":3,"file":"DialogContentInner.cjs","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}