smarthr-ui 75.2.1 → 75.3.0

package/esm/_virtual/cjs.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/vendor/react-draggable/build/cjs/cjs.js';
+import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-draggable/build/cjs/cjs.js';
 
 var cjsExports = requireCjs();
 var Draggable = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);

package/esm/_virtual/index3.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.23_react@19.1.0/vendor/react-innertext/index.js';
+import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.23_react@19.1.1/vendor/react-innertext/index.js';
 
 var reactInnertextExports = requireReactInnertext();
 var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);

package/esm/components/AccordionPanel/AccordionPanelContent.js

@@ -5,7 +5,7 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import { getIsInclude } from '../../libs/map.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';
-import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/vendor/react-transition-group/esm/Transition.js';
+import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/Transition.js';
 
 const classNameGenerator = ce({
     base: [

package/esm/components/AppHeader/components/mobile/MenuDialog.js

@@ -25,7 +25,7 @@ import { Navigation } from './Navigation.js';
 import { NavigationContext } from './NavigationContext.js';
 import { ReleaseNote } from './ReleaseNote.js';
 import { ReleaseNoteContext } from './ReleaseNoteContext.js';
-import CSSTransition from './../../../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/vendor/react-transition-group/esm/CSSTransition.js';
+import CSSTransition from './../../../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/CSSTransition.js';
 
 const classNameGenerator = ce({
     slots: {

package/esm/components/Button/AnchorButton.d.ts

@@ -1,10 +1,12 @@
 import { type ComponentPropsWithoutRef, type ElementType, type FC } from 'react';
 import type { BaseProps } from './types';
 import type { ElementRefProps } from '../../types';
+type AnchorButtonVariant = Exclude<BaseProps['variant'], 'tertiary'>;
 type ElementProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, keyof Props<T> & ElementRefProps<T>>;
-type Props<T extends ElementType> = BaseProps & {
+type Props<T extends ElementType> = Omit<BaseProps, 'variant'> & {
     /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */
     elementAs?: T;
+    variant?: AnchorButtonVariant;
 };
 type AnchorButtonType = <T extends ElementType = 'a'>(props: Props<T> & ElementProps<T> & ElementRefProps<T>) => ReturnType<FC>;
 declare const ForwardedAnchorButton: AnchorButtonType & {

package/esm/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 { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledDetail } from './DisabledDetail'\n\nimport type { BaseProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof Props<T> & ElementRefProps<T>\n>\n\ntype Props<T extends ElementType> = BaseProps & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'default',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      disabledDetail,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      ...props\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    const button = (\n      <ButtonWrapper\n        {...props}\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={suffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!props.href && disabledDetail) {\n      return <DisabledDetail button={button} disabledDetail={disabledDetail} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: Props<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":";;;;;;;AA8BA;AACE;AACD;AAED;AAkBI;AAEA;AAmBA;;;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 { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledDetail } from './DisabledDetail'\n\nimport type { BaseProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\n// tertiaryはAnchorButtonでは使用不可\ntype AnchorButtonVariant = Exclude<BaseProps['variant'], 'tertiary'>\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof Props<T> & ElementRefProps<T>\n>\n\ntype Props<T extends ElementType> = Omit<BaseProps, 'variant'> & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  variant?: AnchorButtonVariant\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'default',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      disabledDetail,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      ...props\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    const button = (\n      <ButtonWrapper\n        {...props}\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={suffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!props.href && disabledDetail) {\n      return <DisabledDetail button={button} disabledDetail={disabledDetail} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: Props<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":";;;;;;;AAkCA;AACE;AACD;AAED;AAkBI;AAEA;AAmBA;;;AAIA;AACF;AAQF;AAIA;AACA;;"}

package/esm/components/Button/ButtonWrapper.js

@@ -99,6 +99,7 @@ const wrapperClassNameGenerator = ce({
             danger: {},
             skeleton: {},
             text: {},
+            tertiary: {},
         },
         size: {
             default: {},
@@ -243,6 +244,20 @@ const wrapperClassNameGenerator = ce({
                 '[&:not([href])]:shr-text-disabled',
             ],
         },
+        {
+            slots: ['button'],
+            variant: 'tertiary',
+            className: [
+                'shr-border-transparent',
+                'shr-bg-transparent',
+                'shr-text-link',
+                'shr-font-normal',
+                'focus-visible:shr-bg-white-darken',
+                'hover:shr-bg-white-darken',
+                'aria-disabled:shr-bg-transparent',
+                'aria-disabled:shr-text-link/50',
+            ],
+        },
         {
             slots: ['button', 'anchor'],
             variant: 'danger',
@@ -338,7 +353,7 @@ const wrapperClassNameGenerator = ce({
         },
         {
             slots: ['loader'],
-            variant: ['primary', 'danger', 'skeleton', 'text'],
+            variant: ['primary', 'danger', 'skeleton'],
             className: [
                 '[&_.smarthr-ui-Loader-line]:shr-border-white/50',
                 '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',
@@ -346,9 +361,14 @@ const wrapperClassNameGenerator = ce({
         },
         {
             slots: ['loader'],
-            variant: 'secondary',
+            variant: ['secondary', 'text'],
             className: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',
         },
+        {
+            slots: ['loader'],
+            variant: 'tertiary',
+            className: '[&_.smarthr-ui-Loader-line]:shr-border-link/50',
+        },
     ],
 });
 const innerClassNameGenerator = ce({

package/esm/components/Button/ButtonWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonWrapper.js","sources":["../../../src/components/Button/ButtonWrapper.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type ForwardedRef,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Loader } from '../Loader'\n\nimport type { Variant } from './types'\n\ntype BaseProps = PropsWithChildren<{\n  size: 'default' | 's'\n  wide: boolean\n  variant: Variant\n  $loading?: boolean\n  className: string\n  elementAs?: ElementType\n  prefix?: ReactNode\n  suffix?: ReactNode\n}>\n\ntype ButtonProps = BaseProps & {\n  isAnchor?: never\n  buttonRef?: ForwardedRef<HTMLButtonElement>\n}\ntype AnchorProps = BaseProps & {\n  isAnchor: true\n  anchorRef?: ForwardedRef<HTMLAnchorElement>\n}\ntype Props =\n  | (ButtonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps>)\n  | (AnchorProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof AnchorProps>)\n\nconst EVENT_CANCELLER = (e: MouseEvent<HTMLButtonElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\n// HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonのselector\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\nconst ICON_BUTTON_SELECTOR = ['.smarthr-ui-Icon', '.smarthr-ui-Icon-extended', 'svg', 'img'].reduce(\n  (prev, selector, index) =>\n    `${prev}${index !== 0 ? ',' : ''}.smarthr-ui-Button-body:only-child>${selector}:only-child`,\n  '',\n)\n\nexport function ButtonWrapper({\n  variant,\n  size,\n  wide = false,\n  $loading,\n  prefix,\n  suffix,\n  children,\n  className,\n  ...rest\n}: Props) {\n  const innerRef = useRef<HTMLElement>(null)\n  // HINT: squareは\n  //  null: Buttonのレンダリング前\n  //  boolean: レンダリング後\n  const [square, setSquare] = useState<null | boolean>(null)\n\n  useEffect(() => {\n    if (innerRef.current) {\n      // HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonの場合true\n      setSquare(!!innerRef.current.querySelector(ICON_BUTTON_SELECTOR))\n    }\n  }, [children])\n\n  const classNames = useMemo(() => {\n    const { button, anchor, loader } = wrapperClassNameGenerator({\n      variant,\n      size,\n      square: !!square,\n      loading: !!$loading,\n      wide,\n    })\n\n    const wrapper = rest.isAnchor ? anchor : button\n\n    return {\n      wrapper: wrapper({ className }),\n      loader: loader(),\n    }\n  }, [$loading, size, square, variant, wide, className, rest.isAnchor])\n  const innerClassName = useMemo(() => innerClassNameGenerator({ size }), [size])\n\n  let actualPrefix = prefix\n  let actualSuffix = suffix\n  let actualChildren = children\n\n  if ($loading) {\n    actualPrefix = undefined\n    const loader = <Loader size=\"s\" className={classNames.loader} role=\"presentation\" />\n\n    // HINT: squareは null | boolean のため、switchで判定する\n    // nullの場合にactualSuffixにloaderを突っ込んでしまうとsquareの計算が狂ってしまう\n    switch (square) {\n      case true:\n        actualChildren = loader\n        break\n      case false:\n        actualSuffix = loader\n        break\n    }\n  }\n\n  // HINT: 型の関係でisAnchorをrestから展開してしまうとa要素であることを\n  // 自動型づけできなくなってしまう\n  if (rest.isAnchor) {\n    const { anchorRef, elementAs, isAnchor: _, ...others } = rest\n    const Component = elementAs || 'a'\n\n    return (\n      <Component {...others} className={classNames.wrapper} ref={anchorRef}>\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </Component>\n    )\n  } else {\n    const { buttonRef, disabled, onClick, ...others } = rest\n\n    const disabledOnLoading = $loading || disabled\n\n    return (\n      // eslint-disable-next-line smarthr/best-practice-for-button-element\n      <button\n        {...others}\n        ref={buttonRef}\n        aria-disabled={disabledOnLoading}\n        className={classNames.wrapper}\n        onClick={disabledOnLoading ? EVENT_CANCELLER : onClick}\n      >\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </button>\n    )\n  }\n}\n\nconst wrapperClassNameGenerator = tv({\n  slots: {\n    button: [\n      'aria-disabled:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      'aria-disabled:shr-bg-clip-padding',\n      /* disabled ではなく aria-disabled で文字色が変わらないため、強制カラーモード時の色を指定 */\n      'aria-disabled:forced-colors:shr-border-[GrayText] aria-disabled:forced-colors:shr-text-[GrayText]',\n      '[&_.smarthr-ui-Icon]:forced-colors:aria-disabled:shr-fill-[GrayText]',\n    ],\n    anchor: [\n      'shr-no-underline',\n      '[&:not([href])]:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      '[&:not([href])]:shr-bg-clip-padding',\n      '[&_.smarthr-ui-Icon]:forced-colors:shr-fill-[LinkText]',\n      '[&:not([href])_.smarthr-ui-Icon]:forced-colors:shr-fill-[CanvasText]',\n    ],\n    loader: [\n      'shr-align-bottom',\n      '[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',\n    ],\n  },\n  variants: {\n    variant: {\n      primary: {},\n      secondary: {},\n      danger: {},\n      skeleton: {},\n      text: {},\n    },\n    size: {\n      default: {},\n      s: {},\n    },\n    square: {\n      true: {},\n    },\n    loading: {\n      true: {},\n    },\n    wide: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['button', 'anchor'],\n      className: [\n        'shr-box-border',\n        'shr-cursor-pointer',\n        'shr-inline-flex',\n        'shr-justify-center',\n        'shr-items-center',\n        'shr-gap-0.5',\n        'shr-text-center',\n        'shr-whitespace-nowrap',\n        'shr-rounded-m',\n        /* ボタンの高さを合わせるために指定 */\n        'shr-border-shorthand',\n        'shr-font-inherit',\n        'shr-font-bold',\n        'shr-leading-none',\n        'focus-visible:shr-focus-indicator',\n        'contrast-more:shr-border-high-contrast',\n        /* baseline より下の leading などの余白を埋める */\n        '[&_.smarthr-ui-Icon]:shr-block',\n        /** selector list は使えない\n         * via https://github.com/tailwindlabs/tailwindcss/issues/10576#issuecomment-1440703413\n         */\n        '[&_svg]:shr-block',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 's',\n      className: [\n        'shr-p-0.5',\n        'shr-text-sm',\n        /* ボタンラベルの line-height を 0 にしたため、高さを担保する */\n        'shr-min-h-[calc(theme(fontSize.sm)+theme(spacing.1)+theme(borderWidth.2))]',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'default',\n      className: ['shr-text-base'],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'default',\n      square: false,\n      className: 'shr-px-1 shr-py-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'default',\n      square: true,\n      className: 'shr-p-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      loading: true,\n      className: 'shr-flex-row-reverse',\n    },\n    {\n      slots: ['button', 'anchor'],\n      wide: true,\n      className: 'shr-w-full',\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'primary',\n      className: [\n        'shr-border-main',\n        'shr-bg-main',\n        'shr-text-white',\n        'focus-visible:shr-border-main-darken',\n        'focus-visible:shr-bg-main-darken',\n        'hover:shr-border-main-darken',\n        'hover:shr-bg-main-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'primary',\n      className: [\n        'aria-disabled:shr-border-main/50',\n        'aria-disabled:shr-bg-main/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'primary',\n      className: [\n        '[&:not([href])]:shr-border-main/50',\n        '[&:not([href])]:shr-bg-main/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'secondary',\n      className: [\n        'shr-border-default',\n        'shr-bg-white',\n        'shr-text-black',\n        'focus-visible:shr-border-darken',\n        'focus-visible:shr-bg-white-darken',\n        'focus-visible:contrast-more:shr-border-high-contrast',\n        'hover:shr-border-darken',\n        'hover:shr-bg-white-darken',\n        'hover:contrast-more:shr-border-high-contrast',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'secondary',\n      className: [\n        'aria-disabled:shr-border-disabled',\n        'aria-disabled:shr-bg-white-darken',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'secondary',\n      className: [\n        '[&:not([href])]:shr-border-disabled',\n        '[&:not([href])]:shr-bg-white-darken',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'danger',\n      className: [\n        'shr-border-danger',\n        'shr-bg-danger',\n        'shr-text-white',\n        'focus-visible:shr-border-danger-darken',\n        'focus-visible:shr-bg-danger-darken',\n        'hover:shr-border-danger-darken',\n        'hover:shr-bg-danger-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'danger',\n      className: [\n        'aria-disabled:shr-border-danger/50',\n        'aria-disabled:shr-bg-danger/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'danger',\n      className: [\n        '[&:not([href])]:shr-border-danger/50',\n        '[&:not([href])]:shr-bg-danger/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'skeleton',\n      className: [\n        'shr-border-white',\n        'shr-bg-transparent',\n        'shr-text-white',\n        'focus-visible:shr-border-white-darken',\n        'focus-visible:shr-bg-overlay',\n        'focus-visible:shr-text-white-darken',\n        'hover:shr-border-white-darken',\n        'hover:shr-bg-overlay',\n        'hover:shr-text-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'skeleton',\n      className: [\n        'aria-disabled:shr-border-white/50',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'skeleton',\n      className: [\n        '[&:not([href])]:shr-border-white/50',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'text',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-black',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'text',\n      className: [\n        'aria-disabled:shr-border-transparent',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'text',\n      className: [\n        '[&:not([href])]:shr-border-transparent',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['primary', 'danger', 'skeleton', 'text'],\n      className: [\n        '[&_.smarthr-ui-Loader-line]:shr-border-white/50',\n        '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: 'secondary',\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',\n    },\n  ],\n})\n\nconst innerClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Button-body',\n    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */\n    'shr-min-w-0',\n  ],\n  variants: {\n    size: {\n      default: '',\n      s: [\n        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */\n        'shr-leading-[0]',\n      ],\n    },\n  },\n})\n"],"names":["_jsx","_jsxs","tv"],"mappings":";;;;;AA0CA,MAAM,eAAe,GAAG,CAAC,CAAgC,KAAI;IAC3D,CAAC,CAAC,cAAc,EAAE;IAClB,CAAC,CAAC,eAAe,EAAE;AACrB,CAAC;AAED;AACA;AACA,MAAM,oBAAoB,GAAG,CAAC,kBAAkB,EAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CACjG,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,KACpB,CAAA,EAAG,IAAI,CAAA,EAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,mCAAA,EAAsC,QAAQ,aAAa,EAC7F,EAAE,CACH;AAEK,SAAU,aAAa,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACD,EAAA;AACN,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;;;;IAI1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC;IAE1D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;;AAEpB,YAAA,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACnE;AACF,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,yBAAyB,CAAC;YAC3D,OAAO;YACP,IAAI;YACJ,MAAM,EAAE,CAAC,CAAC,MAAM;YAChB,OAAO,EAAE,CAAC,CAAC,QAAQ;YACnB,IAAI;AACL,SAAA,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM;QAE/C,OAAO;AACL,YAAA,OAAO,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;YAC/B,MAAM,EAAE,MAAM,EAAE;SACjB;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AACrE,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,uBAAuB,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAE/E,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,cAAc,GAAG,QAAQ;IAE7B,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,SAAS;AACxB,QAAA,MAAM,MAAM,GAAGA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,EAAC,cAAc,GAAG;;;QAIpF,QAAQ,MAAM;AACZ,YAAA,KAAK,IAAI;gBACP,cAAc,GAAG,MAAM;gBACvB;AACF,YAAA,KAAK,KAAK;gBACR,YAAY,GAAG,MAAM;gBACrB;;IAEN;;;AAIA,IAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,QAAA,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI;AAC7D,QAAA,MAAM,SAAS,GAAG,SAAS,IAAI,GAAG;AAElC,QAAA,QACEC,IAAA,CAAC,SAAS,EAAA,EAAA,GAAK,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAA,QAAA,EAAA,CACjE,YAAY,EACbD,GAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAA,QAAA,EAC3C,cAAc,EAAA,CACV,EACN,YAAY,CAAA,EAAA,CACH;IAEhB;SAAO;AACL,QAAA,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI;AAExD,QAAA,MAAM,iBAAiB,GAAG,QAAQ,IAAI,QAAQ;QAE9C;;AAEE,QAAAC,IAAA,CAAA,QAAA,EAAA,EAAA,GACM,MAAM,EACV,GAAG,EAAE,SAAS,EAAA,eAAA,EACC,iBAAiB,EAChC,SAAS,EAAE,UAAU,CAAC,OAAO,EAC7B,OAAO,EAAE,iBAAiB,GAAG,eAAe,GAAG,OAAO,EAAA,QAAA,EAAA,CAErD,YAAY,EACbD,GAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,YAC3C,cAAc,EAAA,CACV,EACN,YAAY,CAAA,EAAA,CACN;IAEb;AACF;AAEA,MAAM,yBAAyB,GAAGE,EAAE,CAAC;AACnC,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;YACN,sCAAsC;;YAEtC,mCAAmC;;YAEnC,mGAAmG;YACnG,sEAAsE;AACvE,SAAA;AACD,QAAA,MAAM,EAAE;YACN,kBAAkB;YAClB,wCAAwC;;YAExC,qCAAqC;YACrC,wDAAwD;YACxD,sEAAsE;AACvE,SAAA;AACD,QAAA,MAAM,EAAE;YACN,kBAAkB;YAClB,iFAAiF;AAClF,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,IAAI,EAAE,EAAE;AACT,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,CAAC,EAAE,EAAE;AACN,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,EAAE;AACT,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,EAAE;AACT,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,EAAE;AACT,SAAA;AACF,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,SAAS,EAAE;gBACT,gBAAgB;gBAChB,oBAAoB;gBACpB,iBAAiB;gBACjB,oBAAoB;gBACpB,kBAAkB;gBAClB,aAAa;gBACb,iBAAiB;gBACjB,uBAAuB;gBACvB,eAAe;;gBAEf,sBAAsB;gBACtB,kBAAkB;gBAClB,eAAe;gBACf,kBAAkB;gBAClB,mCAAmC;gBACnC,wCAAwC;;gBAExC,gCAAgC;AAChC;;AAEG;gBACH,mBAAmB;AACpB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,SAAS,EAAE;gBACT,WAAW;gBACX,aAAa;;gBAEb,4EAA4E;AAC7E,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,CAAC,eAAe,CAAC;AAC7B,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,SAAS,EAAE,YAAY;AACxB,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,YAAY;AACxB,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE;gBACT,iBAAiB;gBACjB,aAAa;gBACb,gBAAgB;gBAChB,sCAAsC;gBACtC,kCAAkC;gBAClC,8BAA8B;gBAC9B,0BAA0B;AAC3B,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE;gBACT,kCAAkC;gBAClC,8BAA8B;gBAC9B,iCAAiC;AAClC,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE;gBACT,oCAAoC;gBACpC,gCAAgC;gBAChC,mCAAmC;AACpC,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,SAAS,EAAE;gBACT,oBAAoB;gBACpB,cAAc;gBACd,gBAAgB;gBAChB,iCAAiC;gBACjC,mCAAmC;gBACnC,sDAAsD;gBACtD,yBAAyB;gBACzB,2BAA2B;gBAC3B,8CAA8C;AAC/C,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,SAAS,EAAE;gBACT,mCAAmC;gBACnC,mCAAmC;gBACnC,iCAAiC;AAClC,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,SAAS,EAAE;gBACT,qCAAqC;gBACrC,qCAAqC;gBACrC,mCAAmC;AACpC,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,SAAS,EAAE;gBACT,mBAAmB;gBACnB,eAAe;gBACf,gBAAgB;gBAChB,wCAAwC;gBACxC,oCAAoC;gBACpC,gCAAgC;gBAChC,4BAA4B;AAC7B,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,SAAS,EAAE;gBACT,oCAAoC;gBACpC,gCAAgC;gBAChC,iCAAiC;AAClC,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,SAAS,EAAE;gBACT,sCAAsC;gBACtC,kCAAkC;gBAClC,mCAAmC;AACpC,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE;gBACT,kBAAkB;gBAClB,oBAAoB;gBACpB,gBAAgB;gBAChB,uCAAuC;gBACvC,8BAA8B;gBAC9B,qCAAqC;gBACrC,+BAA+B;gBAC/B,sBAAsB;gBACtB,6BAA6B;AAC9B,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE;gBACT,mCAAmC;gBACnC,kCAAkC;gBAClC,iCAAiC;AAClC,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE;gBACT,qCAAqC;gBACrC,oCAAoC;gBACpC,mCAAmC;AACpC,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3B,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,SAAS,EAAE;gBACT,wBAAwB;gBACxB,oBAAoB;gBACpB,gBAAgB;gBAChB,mCAAmC;gBACnC,2BAA2B;AAC5B,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,SAAS,EAAE;gBACT,sCAAsC;gBACtC,kCAAkC;gBAClC,iCAAiC;AAClC,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,SAAS,EAAE;gBACT,wCAAwC;gBACxC,oCAAoC;gBACpC,mCAAmC;AACpC,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC;AAClD,YAAA,SAAS,EAAE;gBACT,iDAAiD;gBACjD,qEAAqE;AACtE,aAAA;AACF,SAAA;AACD,QAAA;YACE,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,SAAS,EAAE,iDAAiD;AAC7D,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,uBAAuB,GAAGA,EAAE,CAAC;AACjC,IAAA,IAAI,EAAE;QACJ,wBAAwB;;QAExB,aAAa;AACd,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,CAAC,EAAE;;gBAED,iBAAiB;AAClB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"ButtonWrapper.js","sources":["../../../src/components/Button/ButtonWrapper.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type ForwardedRef,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Loader } from '../Loader'\n\nimport type { Variant } from './types'\n\ntype BaseProps = PropsWithChildren<{\n  size: 'default' | 's'\n  wide: boolean\n  variant: Variant\n  $loading?: boolean\n  className: string\n  elementAs?: ElementType\n  prefix?: ReactNode\n  suffix?: ReactNode\n}>\n\ntype ButtonProps = BaseProps & {\n  isAnchor?: never\n  buttonRef?: ForwardedRef<HTMLButtonElement>\n}\ntype AnchorProps = BaseProps & {\n  isAnchor: true\n  anchorRef?: ForwardedRef<HTMLAnchorElement>\n}\ntype Props =\n  | (ButtonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps>)\n  | (AnchorProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof AnchorProps>)\n\nconst EVENT_CANCELLER = (e: MouseEvent<HTMLButtonElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\n// HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonのselector\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\nconst ICON_BUTTON_SELECTOR = ['.smarthr-ui-Icon', '.smarthr-ui-Icon-extended', 'svg', 'img'].reduce(\n  (prev, selector, index) =>\n    `${prev}${index !== 0 ? ',' : ''}.smarthr-ui-Button-body:only-child>${selector}:only-child`,\n  '',\n)\n\nexport function ButtonWrapper({\n  variant,\n  size,\n  wide = false,\n  $loading,\n  prefix,\n  suffix,\n  children,\n  className,\n  ...rest\n}: Props) {\n  const innerRef = useRef<HTMLElement>(null)\n  // HINT: squareは\n  //  null: Buttonのレンダリング前\n  //  boolean: レンダリング後\n  const [square, setSquare] = useState<null | boolean>(null)\n\n  useEffect(() => {\n    if (innerRef.current) {\n      // HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonの場合true\n      setSquare(!!innerRef.current.querySelector(ICON_BUTTON_SELECTOR))\n    }\n  }, [children])\n\n  const classNames = useMemo(() => {\n    const { button, anchor, loader } = wrapperClassNameGenerator({\n      variant,\n      size,\n      square: !!square,\n      loading: !!$loading,\n      wide,\n    })\n\n    const wrapper = rest.isAnchor ? anchor : button\n\n    return {\n      wrapper: wrapper({ className }),\n      loader: loader(),\n    }\n  }, [$loading, size, square, variant, wide, className, rest.isAnchor])\n  const innerClassName = useMemo(() => innerClassNameGenerator({ size }), [size])\n\n  let actualPrefix = prefix\n  let actualSuffix = suffix\n  let actualChildren = children\n\n  if ($loading) {\n    actualPrefix = undefined\n    const loader = <Loader size=\"s\" className={classNames.loader} role=\"presentation\" />\n\n    // HINT: squareは null | boolean のため、switchで判定する\n    // nullの場合にactualSuffixにloaderを突っ込んでしまうとsquareの計算が狂ってしまう\n    switch (square) {\n      case true:\n        actualChildren = loader\n        break\n      case false:\n        actualSuffix = loader\n        break\n    }\n  }\n\n  // HINT: 型の関係でisAnchorをrestから展開してしまうとa要素であることを\n  // 自動型づけできなくなってしまう\n  if (rest.isAnchor) {\n    const { anchorRef, elementAs, isAnchor: _, ...others } = rest\n    const Component = elementAs || 'a'\n\n    return (\n      <Component {...others} className={classNames.wrapper} ref={anchorRef}>\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </Component>\n    )\n  } else {\n    const { buttonRef, disabled, onClick, ...others } = rest\n\n    const disabledOnLoading = $loading || disabled\n\n    return (\n      // eslint-disable-next-line smarthr/best-practice-for-button-element\n      <button\n        {...others}\n        ref={buttonRef}\n        aria-disabled={disabledOnLoading}\n        className={classNames.wrapper}\n        onClick={disabledOnLoading ? EVENT_CANCELLER : onClick}\n      >\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </button>\n    )\n  }\n}\n\nconst wrapperClassNameGenerator = tv({\n  slots: {\n    button: [\n      'aria-disabled:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      'aria-disabled:shr-bg-clip-padding',\n      /* disabled ではなく aria-disabled で文字色が変わらないため、強制カラーモード時の色を指定 */\n      'aria-disabled:forced-colors:shr-border-[GrayText] aria-disabled:forced-colors:shr-text-[GrayText]',\n      '[&_.smarthr-ui-Icon]:forced-colors:aria-disabled:shr-fill-[GrayText]',\n    ],\n    anchor: [\n      'shr-no-underline',\n      '[&:not([href])]:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      '[&:not([href])]:shr-bg-clip-padding',\n      '[&_.smarthr-ui-Icon]:forced-colors:shr-fill-[LinkText]',\n      '[&:not([href])_.smarthr-ui-Icon]:forced-colors:shr-fill-[CanvasText]',\n    ],\n    loader: [\n      'shr-align-bottom',\n      '[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',\n    ],\n  },\n  variants: {\n    variant: {\n      primary: {},\n      secondary: {},\n      danger: {},\n      skeleton: {},\n      text: {},\n      tertiary: {},\n    },\n    size: {\n      default: {},\n      s: {},\n    },\n    square: {\n      true: {},\n    },\n    loading: {\n      true: {},\n    },\n    wide: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['button', 'anchor'],\n      className: [\n        'shr-box-border',\n        'shr-cursor-pointer',\n        'shr-inline-flex',\n        'shr-justify-center',\n        'shr-items-center',\n        'shr-gap-0.5',\n        'shr-text-center',\n        'shr-whitespace-nowrap',\n        'shr-rounded-m',\n        /* ボタンの高さを合わせるために指定 */\n        'shr-border-shorthand',\n        'shr-font-inherit',\n        'shr-font-bold',\n        'shr-leading-none',\n        'focus-visible:shr-focus-indicator',\n        'contrast-more:shr-border-high-contrast',\n        /* baseline より下の leading などの余白を埋める */\n        '[&_.smarthr-ui-Icon]:shr-block',\n        /** selector list は使えない\n         * via https://github.com/tailwindlabs/tailwindcss/issues/10576#issuecomment-1440703413\n         */\n        '[&_svg]:shr-block',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 's',\n      className: [\n        'shr-p-0.5',\n        'shr-text-sm',\n        /* ボタンラベルの line-height を 0 にしたため、高さを担保する */\n        'shr-min-h-[calc(theme(fontSize.sm)+theme(spacing.1)+theme(borderWidth.2))]',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'default',\n      className: ['shr-text-base'],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'default',\n      square: false,\n      className: 'shr-px-1 shr-py-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'default',\n      square: true,\n      className: 'shr-p-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      loading: true,\n      className: 'shr-flex-row-reverse',\n    },\n    {\n      slots: ['button', 'anchor'],\n      wide: true,\n      className: 'shr-w-full',\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'primary',\n      className: [\n        'shr-border-main',\n        'shr-bg-main',\n        'shr-text-white',\n        'focus-visible:shr-border-main-darken',\n        'focus-visible:shr-bg-main-darken',\n        'hover:shr-border-main-darken',\n        'hover:shr-bg-main-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'primary',\n      className: [\n        'aria-disabled:shr-border-main/50',\n        'aria-disabled:shr-bg-main/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'primary',\n      className: [\n        '[&:not([href])]:shr-border-main/50',\n        '[&:not([href])]:shr-bg-main/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'secondary',\n      className: [\n        'shr-border-default',\n        'shr-bg-white',\n        'shr-text-black',\n        'focus-visible:shr-border-darken',\n        'focus-visible:shr-bg-white-darken',\n        'focus-visible:contrast-more:shr-border-high-contrast',\n        'hover:shr-border-darken',\n        'hover:shr-bg-white-darken',\n        'hover:contrast-more:shr-border-high-contrast',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'secondary',\n      className: [\n        'aria-disabled:shr-border-disabled',\n        'aria-disabled:shr-bg-white-darken',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'secondary',\n      className: [\n        '[&:not([href])]:shr-border-disabled',\n        '[&:not([href])]:shr-bg-white-darken',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'tertiary',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-link',\n        'shr-font-normal',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-link/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'danger',\n      className: [\n        'shr-border-danger',\n        'shr-bg-danger',\n        'shr-text-white',\n        'focus-visible:shr-border-danger-darken',\n        'focus-visible:shr-bg-danger-darken',\n        'hover:shr-border-danger-darken',\n        'hover:shr-bg-danger-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'danger',\n      className: [\n        'aria-disabled:shr-border-danger/50',\n        'aria-disabled:shr-bg-danger/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'danger',\n      className: [\n        '[&:not([href])]:shr-border-danger/50',\n        '[&:not([href])]:shr-bg-danger/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'skeleton',\n      className: [\n        'shr-border-white',\n        'shr-bg-transparent',\n        'shr-text-white',\n        'focus-visible:shr-border-white-darken',\n        'focus-visible:shr-bg-overlay',\n        'focus-visible:shr-text-white-darken',\n        'hover:shr-border-white-darken',\n        'hover:shr-bg-overlay',\n        'hover:shr-text-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'skeleton',\n      className: [\n        'aria-disabled:shr-border-white/50',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'skeleton',\n      className: [\n        '[&:not([href])]:shr-border-white/50',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'text',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-black',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'text',\n      className: [\n        'aria-disabled:shr-border-transparent',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'text',\n      className: [\n        '[&:not([href])]:shr-border-transparent',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['primary', 'danger', 'skeleton'],\n      className: [\n        '[&_.smarthr-ui-Loader-line]:shr-border-white/50',\n        '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['secondary', 'text'],\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',\n    },\n    {\n      slots: ['loader'],\n      variant: 'tertiary',\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-link/50',\n    },\n  ],\n})\n\nconst innerClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Button-body',\n    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */\n    'shr-min-w-0',\n  ],\n  variants: {\n    size: {\n      default: '',\n      s: [\n        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */\n        'shr-leading-[0]',\n      ],\n    },\n  },\n})\n"],"names":["_jsx","_jsxs","tv"],"mappings":"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"}

package/esm/components/Button/types.d.ts

@@ -34,4 +34,4 @@ export type BaseProps = PropsWithChildren<{
      */
     loading?: boolean;
 }>;
-export type Variant = 'primary' | 'secondary' | 'danger' | 'skeleton' | 'text';
+export type Variant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'skeleton' | 'text';

package/esm/components/Dialog/DialogOverlap.js

@@ -7,7 +7,7 @@ import '../Layout/Reel/Reel.js';
 import '../Layout/Sidebar/Sidebar.js';
 import { Center } from '../Layout/Center/Center.js';
 import '../Layout/Container/Container.js';
-import CSSTransition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/vendor/react-transition-group/esm/CSSTransition.js';
+import CSSTransition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/CSSTransition.js';
 
 const classNameGenerator = ce({
     base: [

package/esm/components/DropZone/DropZone.js

@@ -11,6 +11,7 @@ import '../Button/AnchorButton.js';
 import '../Button/UnstyledButton.js';
 import { FaFolderOpenIcon } from '../Icon/Icon.js';
 import '../Icon/generateIcon.js';
+import { VisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText.js';
 
 const classNameGenerator = ce({
     slots: {
@@ -18,7 +19,6 @@ const classNameGenerator = ce({
             'smarthr-ui-DropZone',
             'shr-border-shorthand shr-flex shr-flex-col shr-items-center shr-justify-center shr-bg-column shr-p-2.5',
         ],
-        input: 'shr-hidden',
         button: '',
     },
     variants: {
@@ -50,10 +50,9 @@ const DropZone = forwardRef(({ children, onSelectFiles, multiple = true, disable
     const fileRef = useRef(null);
     const [filesDraggedOver, setFilesDraggedOver] = useState(false);
     const classNames = useMemo(() => {
-        const { wrapper, input, button } = classNameGenerator({ filesDraggedOver, disabled, error });
+        const { wrapper, button } = classNameGenerator({ filesDraggedOver, disabled, error });
         return {
             wrapper: wrapper(),
-            input: input(),
             button: button(),
         };
     }, [disabled, error, filesDraggedOver]);
@@ -81,7 +80,7 @@ const DropZone = forwardRef(({ children, onSelectFiles, multiple = true, disable
     }, []);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, className: classNames.wrapper, children: [children, jsx(SelectButton, { onClick: onClickButton, disabled: disabled, className: classNames.button, decorators: decorators }), jsx("input", { ...props, "data-smarthr-ui-input": "true", ref: fileRef, type: "file", multiple: multiple, disabled: disabled, "aria-invalid": error || undefined, onChange: onChange, className: classNames.input })] }));
+    jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, className: classNames.wrapper, children: [children, jsx(SelectButton, { onClick: onClickButton, disabled: disabled, className: classNames.button, decorators: decorators }), jsx(VisuallyHiddenText, { children: jsx("input", { ...props, "data-smarthr-ui-input": "true", ref: fileRef, type: "file", multiple: multiple, disabled: disabled, "aria-invalid": error || undefined, onChange: onChange }) })] }));
 });
 const SelectButton = memo(({ onClick, decorators, ...rest }) => {
     const { localize } = useIntl();

package/esm/components/DropZone/DropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sources":["../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type ComponentPropsWithoutRef,\n  type DragEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useDecorators } from '../../hooks/useDecorators'\nimport { useIntl } from '../../intl'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon } from '../Icon'\n\nimport type { DecoratorsType } from '../../hooks/useDecorators'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DropZone',\n      'shr-border-shorthand shr-flex shr-flex-col shr-items-center shr-justify-center shr-bg-column shr-p-2.5',\n    ],\n    input: 'shr-hidden',\n    button: '',\n  },\n  variants: {\n    filesDraggedOver: {\n      true: {\n        wrapper: 'shr-border-main',\n      },\n      false: {\n        wrapper: 'shr-border-dashed',\n      },\n    },\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    error: {\n      true: {\n        button: 'shr-border-danger',\n      },\n    },\n  },\n})\n\ntype ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof DropZoneProps>\n\ntype DropZoneProps = PropsWithChildren<{\n  /**\n   * ボタンまたはドラッグ&ドロップでファイルが追加された時に発火するコールバック関数\n   */\n  onSelectFiles: (\n    e: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>,\n    files: FileList | null,\n  ) => void\n  /**\n   * 許可するファイル型を表す1つ以上の固有ファイル型指定子\n   * <b>（ドラッグ&ドロップの挙動には影響しません）</b>\n   */\n  accept?: string\n  /** 複数ファイルを選択できるかどうか */\n  multiple?: boolean\n  name?: string\n  disabled?: boolean\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネント内の文言を変更するための関数を設定 */\n  decorators?: DecoratorsType<'selectButtonLabel'>\n}>\n\nconst overrideEventDefault = (e: DragEvent<HTMLElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nexport const DropZone = forwardRef<HTMLInputElement, DropZoneProps & ElementProps>(\n  ({ children, onSelectFiles, multiple = true, disabled, error, decorators, ...props }, ref) => {\n    const fileRef = useRef<HTMLInputElement>(null)\n    const [filesDraggedOver, setFilesDraggedOver] = useState(false)\n    const classNames = useMemo(() => {\n      const { wrapper, input, button } = classNameGenerator({ filesDraggedOver, disabled, error })\n      return {\n        wrapper: wrapper(),\n        input: input(),\n        button: button(),\n      }\n    }, [disabled, error, filesDraggedOver])\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => fileRef.current,\n    )\n\n    const onDrop = useCallback(\n      (e: DragEvent<HTMLElement>) => {\n        overrideEventDefault(e)\n        setFilesDraggedOver(false)\n        onSelectFiles(e, e.dataTransfer.files)\n\n        if (fileRef.current) {\n          fileRef.current.files = e.dataTransfer.files\n        }\n      },\n      [setFilesDraggedOver, onSelectFiles],\n    )\n\n    const onDragOver = useCallback(\n      (e: DragEvent<HTMLElement>) => {\n        overrideEventDefault(e)\n        setFilesDraggedOver(true)\n      },\n      [setFilesDraggedOver],\n    )\n\n    const onDragLeave = useCallback(() => {\n      setFilesDraggedOver(false)\n    }, [setFilesDraggedOver])\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        onSelectFiles(e, e.target.files)\n      },\n      [onSelectFiles],\n    )\n\n    const onClickButton = useCallback(() => {\n      fileRef.current!.click()\n    }, [])\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        onDrop={onDrop}\n        onDragOver={onDragOver}\n        onDragLeave={onDragLeave}\n        className={classNames.wrapper}\n      >\n        {children}\n        <SelectButton\n          onClick={onClickButton}\n          disabled={disabled}\n          className={classNames.button}\n          decorators={decorators}\n        />\n        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n        <input\n          {...props}\n          data-smarthr-ui-input=\"true\"\n          ref={fileRef}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          aria-invalid={error || undefined}\n          onChange={onChange}\n          className={classNames.input}\n        />\n      </div>\n    )\n  },\n)\n\nconst SelectButton = memo<\n  ComponentPropsWithoutRef<typeof Button> &\n    Pick<DropZoneProps, 'decorators'> & { onClick: () => void }\n>(({ onClick, decorators, ...rest }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      selectButtonLabel: localize({\n        id: 'smarthr-ui/DropZone/selectButtonLabel',\n        defaultText: 'ファイルを選択',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators<'selectButtonLabel'>(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button {...rest} prefix={<FaFolderOpenIcon />} onClick={onClick}>\n      {decorated.selectButtonLabel}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAyBA;AACE;AACE;;;AAGC;AACD;AACA;AACD;AACD;AACE;AACE;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AA2BD;;;AAGA;AAEO;AAEH;;AAEA;AACE;;;;;;;;AAYF;;;;AAMI;;;AAGF;AAIF;;;AAIE;AAIF;;AAEA;AAEA;;AAGE;AAIF;AACE;;;;AAKA;AA2BJ;AAGF;AAIE;AAEA;;AAGM;AACA;;AAEH;;;AAWL;;"}
+{"version":3,"file":"DropZone.js","sources":["../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type ComponentPropsWithoutRef,\n  type DragEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useDecorators } from '../../hooks/useDecorators'\nimport { useIntl } from '../../intl'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport type { DecoratorsType } from '../../hooks/useDecorators'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DropZone',\n      'shr-border-shorthand shr-flex shr-flex-col shr-items-center shr-justify-center shr-bg-column shr-p-2.5',\n    ],\n    button: '',\n  },\n  variants: {\n    filesDraggedOver: {\n      true: {\n        wrapper: 'shr-border-main',\n      },\n      false: {\n        wrapper: 'shr-border-dashed',\n      },\n    },\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    error: {\n      true: {\n        button: 'shr-border-danger',\n      },\n    },\n  },\n})\n\ntype ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof DropZoneProps>\n\ntype DropZoneProps = PropsWithChildren<{\n  /**\n   * ボタンまたはドラッグ&ドロップでファイルが追加された時に発火するコールバック関数\n   */\n  onSelectFiles: (\n    e: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>,\n    files: FileList | null,\n  ) => void\n  /**\n   * 許可するファイル型を表す1つ以上の固有ファイル型指定子\n   * <b>（ドラッグ&ドロップの挙動には影響しません）</b>\n   */\n  accept?: string\n  /** 複数ファイルを選択できるかどうか */\n  multiple?: boolean\n  name?: string\n  disabled?: boolean\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネント内の文言を変更するための関数を設定 */\n  decorators?: DecoratorsType<'selectButtonLabel'>\n}>\n\nconst overrideEventDefault = (e: DragEvent<HTMLElement>) => {\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nexport const DropZone = forwardRef<HTMLInputElement, DropZoneProps & ElementProps>(\n  ({ children, onSelectFiles, multiple = true, disabled, error, decorators, ...props }, ref) => {\n    const fileRef = useRef<HTMLInputElement>(null)\n    const [filesDraggedOver, setFilesDraggedOver] = useState(false)\n    const classNames = useMemo(() => {\n      const { wrapper, button } = classNameGenerator({ filesDraggedOver, disabled, error })\n      return {\n        wrapper: wrapper(),\n        button: button(),\n      }\n    }, [disabled, error, filesDraggedOver])\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => fileRef.current,\n    )\n\n    const onDrop = useCallback(\n      (e: DragEvent<HTMLElement>) => {\n        overrideEventDefault(e)\n        setFilesDraggedOver(false)\n        onSelectFiles(e, e.dataTransfer.files)\n\n        if (fileRef.current) {\n          fileRef.current.files = e.dataTransfer.files\n        }\n      },\n      [setFilesDraggedOver, onSelectFiles],\n    )\n\n    const onDragOver = useCallback(\n      (e: DragEvent<HTMLElement>) => {\n        overrideEventDefault(e)\n        setFilesDraggedOver(true)\n      },\n      [setFilesDraggedOver],\n    )\n\n    const onDragLeave = useCallback(() => {\n      setFilesDraggedOver(false)\n    }, [setFilesDraggedOver])\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        onSelectFiles(e, e.target.files)\n      },\n      [onSelectFiles],\n    )\n\n    const onClickButton = useCallback(() => {\n      fileRef.current!.click()\n    }, [])\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        onDrop={onDrop}\n        onDragOver={onDragOver}\n        onDragLeave={onDragLeave}\n        className={classNames.wrapper}\n      >\n        {children}\n        <SelectButton\n          onClick={onClickButton}\n          disabled={disabled}\n          className={classNames.button}\n          decorators={decorators}\n        />\n        <VisuallyHiddenText>\n          {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n          <input\n            {...props}\n            data-smarthr-ui-input=\"true\"\n            ref={fileRef}\n            type=\"file\"\n            multiple={multiple}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            onChange={onChange}\n          />\n        </VisuallyHiddenText>\n      </div>\n    )\n  },\n)\n\nconst SelectButton = memo<\n  ComponentPropsWithoutRef<typeof Button> &\n    Pick<DropZoneProps, 'decorators'> & { onClick: () => void }\n>(({ onClick, decorators, ...rest }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      selectButtonLabel: localize({\n        id: 'smarthr-ui/DropZone/selectButtonLabel',\n        defaultText: 'ファイルを選択',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators<'selectButtonLabel'>(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button {...rest} prefix={<FaFolderOpenIcon />} onClick={onClick}>\n      {decorated.selectButtonLabel}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA0BA;AACE;AACE;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AA2BD;;;AAGA;AAEO;AAEH;;AAEA;AACE;;;;;;;AAWF;;;;AAMI;;;AAGF;AAIF;;;AAIE;AAIF;;AAEA;AAEA;;AAGE;AAIF;AACE;;;;AAKA;AA4BJ;AAGF;AAIE;AAEA;;AAGM;AACA;;AAEH;;;AAWL;;"}

package/esm/components/FileViewer/PDFViewer.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useState, useCallback, useMemo } from 'react';
-import './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.0_react@19.1.0__react@19.1.0/vendor/react-pdf/dist/esm/index.js';
+import './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/index.js';
 import { ReactPDFStyle } from './generatedReactPDFStyle.js';
-import Document from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.0_react@19.1.0__react@19.1.0/vendor/react-pdf/dist/esm/Document.js';
-import Page from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.0_react@19.1.0__react@19.1.0/vendor/react-pdf/dist/esm/Page.js';
+import Document from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/Document.js';
+import Page from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.23_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/Page.js';
 import { version as __webpack_exports__version, GlobalWorkerOptions as __webpack_exports__GlobalWorkerOptions } from './../../vendor/.pnpm/pdfjs-dist@4.8.69/vendor/pdfjs-dist/build/pdf.js';
 
 if (typeof window !== 'undefined') {

package/esm/components/FormControl/FormControl.js

@@ -209,15 +209,11 @@ const ActualFormControl = ({ title, titleType = 'blockTitle', subActionArea, dan
             if (inputId && labels.has(inputId)) {
                 return;
             }
-            let accessibleName = '';
-            if (input.hasAttribute('aria-label')) {
-                accessibleName = input.getAttribute('aria-label') || '';
-            }
-            else if (input.hasAttribute('title')) {
-                accessibleName = input.getAttribute('title') || '';
-            }
-            if (!accessibleName.includes(legendText)) {
-                input.setAttribute('aria-label', `${legendText} ${accessibleName}`.trim());
+            const accessibleName = input.hasAttribute('aria-label')
+                ? input.getAttribute('aria-label')
+                : null;
+            if (accessibleName && !accessibleName.includes(legendText)) {
+                input.setAttribute('aria-label', `${accessibleName} ${legendText} `.trim());
             }
         });
     }, [isFieldset, title]);

package/esm/components/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { StatusLabel } from '../StatusLabel'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassNameGenerator } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\n\ntype StatusLabelProps = ComponentProps<typeof StatusLabel>\ntype StatusLabelType = FunctionComponentElement<StatusLabelProps>\n\ntype Props = PropsWithChildren<{\n  /** グループのタイトル名 */\n  title: ReactNode\n  /** タイトルの見出しのタイプ */\n  titleType?: TextProps['styleType']\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトルの見出しを視覚的に隠すかどうか */\n  dangerouslyTitleHidden?: boolean\n  /** label 要素に適用する `htmlFor` 値 */\n  htmlFor?: string\n  /** label 要素に適用する `id` 値 */\n  labelId?: string\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\n  /** タイトルの隣に表示する `StatusLabel` の Props の配列 */\n  /**\n   * @deprecated statusLabelProps属性は非推奨です。statusLabelsを使ってください。\n   */\n  statusLabelProps?: StatusLabelProps | StatusLabelProps[]\n  /** タイトルの隣に表示する `StatusLabel` の配列 */\n  statusLabels?: StatusLabelType | StatusLabelType[]\n  /** タイトルの下に表示するヘルプメッセージ */\n  helpMessage?: ReactNode\n  /** タイトルの下に表示する入力例 */\n  exampleMessage?: ReactNode\n  /** タイトルの下に表示するエラーメッセージ */\n  errorMessages?: ReactNode | ReactNode[]\n  /** エラーがある場合に自動的に入力要素を error にするかどうか */\n  autoBindErrorInput?: boolean\n  /** フォームコントロールの下に表示する補足メッセージ */\n  supplementaryMessage?: ReactNode\n  /** `true` のとき、文字色を `TEXT_DISABLED` にする */\n  disabled?: boolean\n  as?: string | ComponentType<any>\n}>\ntype ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-FormControl',\n      'shr-mx-[unset] shr-border-none shr-p-[unset]',\n      'disabled:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-label_>_span]:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-exampleMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-errorMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-supplementaryMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-Input]:shr-border-default/50 [&:disabled_.smarthr-ui-Input]:shr-bg-white-darken',\n    ],\n    label: ['smarthr-ui-FormControl-label'],\n    errorList: ['shr-list-none'],\n    errorIcon: ['smarthr-ui-FormControl-errorMessage', 'shr-text-danger'],\n    underTitleStack: ['[&&&]:shr-mt-0'],\n    childrenWrapper: [],\n  },\n  variants: {\n    innerMargin: {\n      0: {},\n      0.25: {},\n      0.5: {},\n      0.75: {},\n      1: {},\n      1.25: {},\n      1.5: {},\n      2: {},\n      2.5: {},\n      3: {},\n      3.5: {},\n      4: {},\n      8: {},\n      X3S: {},\n      XXS: {},\n      XS: {},\n      S: {},\n      M: {},\n      L: {},\n      XL: {},\n      XXL: {},\n      X3L: {},\n    } as { [key in Gap]: string },\n    isFieldset: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // TODO: innerMarginが未指定、初期値の場合、かつFieldsetの場合、childrenの上部の余白を広げることで\n    // FormControltとの差をわかりやすくしている\n    // 微妙な方法ではあるので、必要に応じてinnerMarginではない属性を用意する\n    // https://kufuinc.slack.com/archives/CGC58MW01/p1737944965871159?thread_ts=1737541173.404369&cid=CGC58MW01\n    {\n      innerMargin: undefined,\n      isFieldset: true,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-1',\n      },\n    },\n    {\n      innerMargin: undefined,\n      isFieldset: false,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-0.5',\n      },\n    },\n  ],\n})\n\nconst SMARTHR_UI_INPUT_SELECTOR = '[data-smarthr-ui-input=\"true\"]'\n\nexport const ActualFormControl: FC<Props & ElementProps> = ({\n  title,\n  titleType = 'blockTitle',\n  subActionArea,\n  dangerouslyTitleHidden = false,\n  htmlFor,\n  labelId,\n  innerMargin,\n  statusLabels,\n  statusLabelProps,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...props\n}) => {\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const managedHtmlFor = htmlFor || defaultHtmlFor\n  const managedLabelId = labelId || defaultLabelId\n  const inputWrapperRef = useRef<HTMLDivElement>(null)\n  const isFieldset = as === 'fieldset'\n\n  const describedbyIds = useMemo(() => {\n    const temp = []\n\n    if (helpMessage) {\n      temp.push(`${managedHtmlFor}_helpMessage`)\n    }\n    if (exampleMessage) {\n      temp.push(`${managedHtmlFor}_exampleMessage`)\n    }\n    if (supplementaryMessage) {\n      temp.push(`${managedHtmlFor}_supplementaryMessage`)\n    }\n    if (errorMessages) {\n      temp.push(`${managedHtmlFor}_errorMessages`)\n    }\n\n    return temp.join(' ')\n  }, [helpMessage, exampleMessage, supplementaryMessage, errorMessages, managedHtmlFor])\n\n  const actualStatusLabels = useMemo(() => {\n    if (statusLabels) {\n      return (Array.isArray(statusLabels) ? statusLabels : [statusLabels]).map(\n        (statusLabel, index) => <Fragment key={index}>{statusLabel}</Fragment>,\n      )\n    }\n\n    if (!statusLabelProps) {\n      return []\n    }\n\n    const labelProps = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]\n\n    return labelProps.map((prop, index) => <StatusLabel {...prop} key={index} />)\n  }, [statusLabels, statusLabelProps])\n\n  const actualErrorMessages = useMemo(() => {\n    if (!errorMessages) {\n      return []\n    }\n\n    return Array.isArray(errorMessages) ? errorMessages : [errorMessages]\n  }, [errorMessages])\n\n  const actualInnerMargin = useMemo(() => innerMargin ?? 0.5, [innerMargin])\n\n  const classNames = useMemo(() => {\n    const { wrapper, label, errorList, errorIcon, underTitleStack, childrenWrapper } =\n      classNameGenerator({ innerMargin, isFieldset })\n\n    return {\n      wrapper: wrapper({ className }),\n      label: label({\n        className: dangerouslyTitleHidden ? visuallyHiddenTextClassNameGenerator() : '',\n      }),\n      errorList: errorList(),\n      errorIcon: errorIcon(),\n      underTitleStack: underTitleStack(),\n      childrenWrapper: childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, dangerouslyTitleHidden, className])\n\n  useEffect(() => {\n    if (\n      isFieldset ||\n      !inputWrapperRef?.current ||\n      // HINT: 対象idを持つ要素が既に存在する場合、何もしない\n      document.getElementById(managedHtmlFor)\n    ) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (!input) {\n      return\n    }\n\n    if (!input.getAttribute('id')) {\n      input.setAttribute('id', managedHtmlFor)\n    }\n\n    if (input instanceof HTMLInputElement && input.type === 'file') {\n      const attrName = 'aria-labelledby'\n      const inputLabelledByIds = input.getAttribute(attrName)\n\n      if (inputLabelledByIds) {\n        // InputFileの場合はlabel要素の可視ラベルをアクセシブルネームに含める\n        input.setAttribute(attrName, `${inputLabelledByIds} ${managedLabelId}`)\n      }\n    }\n  }, [managedHtmlFor, isFieldset, managedLabelId])\n\n  useEffect(() => {\n    if (!describedbyIds || !inputWrapperRef?.current) {\n      return\n    }\n\n    const inputWrapper = inputWrapperRef.current\n    const attrName = 'aria-describedby'\n\n    if (inputWrapper.querySelector(`[${attrName}=\"${describedbyIds}\"]`)) {\n      return\n    }\n\n    const input = inputWrapper.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attribute = input.getAttribute(attrName)\n\n      input.setAttribute(attrName, attribute ? `${attribute} ${describedbyIds}` : describedbyIds)\n    }\n  }, [describedbyIds])\n\n  useEffect(() => {\n    if (!autoBindErrorInput || !inputWrapperRef?.current) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attrName = 'aria-invalid'\n\n      if (actualErrorMessages.length > 0) {\n        input.setAttribute(attrName, 'true')\n      } else {\n        input.removeAttribute(attrName)\n      }\n    }\n  }, [actualErrorMessages.length, autoBindErrorInput])\n\n  // HINT: Fieldset内の可視ラベルが無いinputに、legend文言をアクセシブルネームに追加する\n  // https://waic.jp/translations/WCAG21/Understanding/label-in-name.html\n  useEffect(() => {\n    if (!isFieldset || !inputWrapperRef.current) return\n    const inputs = inputWrapperRef.current.querySelectorAll(SMARTHR_UI_INPUT_SELECTOR)\n    if (!inputs.length) return\n\n    const legendText = innerText(title)\n    if (!legendText) return\n\n    const labels = new Set(\n      Array.from(document.querySelectorAll('label[for]')).map((label) => label.getAttribute('for')),\n    )\n\n    inputs.forEach((input) => {\n      const inputId = input.getAttribute('id')\n      if (inputId && labels.has(inputId)) {\n        return\n      }\n\n      let accessibleName = ''\n      if (input.hasAttribute('aria-label')) {\n        accessibleName = input.getAttribute('aria-label') || ''\n      } else if (input.hasAttribute('title')) {\n        accessibleName = input.getAttribute('title') || ''\n      }\n\n      if (!accessibleName.includes(legendText)) {\n        input.setAttribute('aria-label', `${legendText} ${accessibleName}`.trim())\n      }\n    })\n  }, [isFieldset, title])\n\n  let body = (\n    <>\n      <HelpMessageParagraph helpMessage={helpMessage} managedHtmlFor={managedHtmlFor} />\n      <ExampleMessageText exampleMessage={exampleMessage} managedHtmlFor={managedHtmlFor} />\n      <ErrorMessageList\n        errorMessages={actualErrorMessages}\n        managedHtmlFor={managedHtmlFor}\n        classNames={classNames}\n      />\n      <div className={classNames.childrenWrapper} ref={inputWrapperRef}>\n        {children}\n      </div>\n      <SupplementaryMessageText\n        supplementaryMessage={supplementaryMessage}\n        managedHtmlFor={managedHtmlFor}\n      />\n    </>\n  )\n\n  // HINT: dangerouslyTitleHiddenの場合、body以下の余白の計算を簡略化するため\n  // Stackをネストし、そのStackに対してmargin-top: 0を指定する\n  // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる\n  if (dangerouslyTitleHidden) {\n    body = (\n      <Stack gap={actualInnerMargin} className={classNames.underTitleStack}>\n        {body}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack\n      {...props}\n      as={as}\n      gap={actualInnerMargin}\n      aria-describedby={isFieldset && describedbyIds ? describedbyIds : undefined}\n      className={classNames.wrapper}\n    >\n      <TitleCluster\n        isFieldset={isFieldset}\n        managedHtmlFor={managedHtmlFor}\n        managedLabelId={managedLabelId}\n        dangerouslyTitleHidden={dangerouslyTitleHidden}\n        titleType={titleType}\n        title={title}\n        statusLabels={actualStatusLabels}\n        subActionArea={subActionArea}\n        labelClassName={classNames.label}\n      />\n      {body}\n    </Stack>\n  )\n}\n\nconst TitleCluster = memo<\n  Pick<Props, 'dangerouslyTitleHidden' | 'title' | 'subActionArea'> & {\n    titleType: TextProps['styleType']\n    isFieldset: boolean\n    managedHtmlFor: string\n    managedLabelId: string\n    labelClassName: string\n    statusLabels: StatusLabelType[]\n  }\n>(\n  ({\n    isFieldset,\n    managedHtmlFor,\n    managedLabelId,\n    dangerouslyTitleHidden,\n    titleType,\n    title,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={titleType}>{title}</Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (dangerouslyTitleHidden) {\n        return {\n          label: null,\n          visuallyHidden: isFieldset\n            ? {\n                as: 'legend',\n              }\n            : {\n                as: 'label',\n                htmlFor: managedHtmlFor,\n                id: managedLabelId,\n              },\n        }\n      }\n\n      if (isFieldset) {\n        return {\n          label: { 'aria-hidden': 'true' } as const,\n          visuallyHidden: { as: 'legend' },\n        }\n      }\n\n      return {\n        label: {\n          as: 'label' as const,\n          htmlFor: managedHtmlFor,\n          id: managedLabelId,\n        },\n        visuallyHidden: null,\n      }\n    }, [managedLabelId, managedHtmlFor, dangerouslyTitleHidden, isFieldset])\n\n    return (\n      <>\n        {attrs.visuallyHidden && (\n          <VisuallyHiddenText {...attrs.visuallyHidden}>\n            {\n              // HINT: innerTextでは正しく文字が取得できない場合がある\n              // 安全策としてinnerTextが空を取得してきたらbody自体を埋めこみます\n              innerText(body) || body\n            }\n          </VisuallyHiddenText>\n        )}\n        {attrs.label && (\n          <Cluster\n            justify=\"space-between\"\n            // HINT: UI上、常にトップの要素になるため、Stackの計算が狂わないよう、\n            // 常にmargin-topを0にする\n            className=\"[&&&]:shr--mt-0\"\n          >\n            <Cluster {...attrs.label} align=\"center\" className={labelClassName}>\n              {body}\n            </Cluster>\n            {subActionArea && <div className=\"shr-grow\">{subActionArea}</div>}\n          </Cluster>\n        )}\n      </>\n    )\n  },\n)\n\nconst StatusLabelCluster = memo<{ statusLabels: StatusLabelType[] }>(({ statusLabels }) =>\n  statusLabels.length === 0 ? null : (\n    <Cluster gap={0.25} as=\"span\">\n      {statusLabels}\n    </Cluster>\n  ),\n)\n\nconst HelpMessageParagraph = memo<Pick<Props, 'helpMessage'> & { managedHtmlFor: string }>(\n  ({ helpMessage, managedHtmlFor }) =>\n    helpMessage ? (\n      <p className=\"smarthr-ui-FormControl-helpMessage\" id={`${managedHtmlFor}_helpMessage`}>\n        {helpMessage}\n      </p>\n    ) : null,\n)\n\nconst ExampleMessageText = memo<Pick<Props, 'exampleMessage'> & { managedHtmlFor: string }>(\n  ({ exampleMessage, managedHtmlFor }) =>\n    exampleMessage ? (\n      <Text\n        as=\"p\"\n        color=\"TEXT_GREY\"\n        italic\n        id={`${managedHtmlFor}_exampleMessage`}\n        className=\"smarthr-ui-FormControl-exampleMessage\"\n      >\n        {exampleMessage}\n      </Text>\n    ) : null,\n)\n\nconst ErrorMessageList = memo<{\n  errorMessages: ReactNode[]\n  managedHtmlFor: string\n  classNames: {\n    errorList: string\n    errorIcon: string\n  }\n}>(({ errorMessages, managedHtmlFor, classNames }) =>\n  errorMessages.length > 0 ? (\n    <div id={`${managedHtmlFor}_errorMessages`} className={classNames.errorList} role=\"alert\">\n      {errorMessages.map((message, index) => (\n        <p key={index}>\n          <FaCircleExclamationIcon text={message} className={classNames.errorIcon} />\n        </p>\n      ))}\n    </div>\n  ) : null,\n)\n\nconst SupplementaryMessageText = memo<\n  Pick<Props, 'supplementaryMessage'> & { managedHtmlFor: string }\n>(({ supplementaryMessage, managedHtmlFor }) =>\n  supplementaryMessage ? (\n    <Text\n      as=\"p\"\n      size=\"S\"\n      color=\"TEXT_GREY\"\n      id={`${managedHtmlFor}_supplementaryMessage`}\n      className=\"smarthr-ui-FormControl-supplementaryMessage\"\n    >\n      {supplementaryMessage}\n    </Text>\n  ) : null,\n)\n\nexport const FormControl: FC<Omit<Props & ElementProps, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAqEA;AACE;AACE;;;;;;;;;AASC;;;AAGD;;AAEA;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACD;AACF;AACD;;;;;AAKE;AACE;AACA;AACA;AACE;AACD;AACF;AACD;AACE;AACA;AACA;AACE;AACD;AACF;AACF;AACF;AAED;AAEO;AAoBL;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;;AAEI;;;AAMA;;AAGF;;AAGF;AAEA;;AAEI;;AAGF;AACF;AAEA;AAEA;;;AAKI;;;;;;;;;;;AAYF;;;AAIE;;;;;;;;AAYA;;;;;;;;;;;;;;;AAmBF;;;;;;;;AAYE;;AAEJ;;;;;;;;AAYI;AACE;;;AAEA;;;;;;;AAQJ;;;;;AAIA;AACA;;AAEA;AAIA;;;;;;AAOE;;;AAEO;;;;AAKL;;AAEJ;AACF;AAEA;;;;;AAuBE;;AAOF;AAsBF;AAEA;;AA4BI;;;AAGM;AACA;AACE;AACI;AACD;AACH;AACI;AACA;AACA;AACD;;;;;AAML;AACA;;;;AAKF;AACE;AACA;AACA;AACD;AACD;;;AAIJ;;;AAOU;;;AASF;AAUV;AAGF;AAQA;AASA;AAeA;AAmBA;AAgBO;;"}
+{"version":3,"file":"FormControl.js","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { StatusLabel } from '../StatusLabel'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassNameGenerator } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\n\ntype StatusLabelProps = ComponentProps<typeof StatusLabel>\ntype StatusLabelType = FunctionComponentElement<StatusLabelProps>\n\ntype Props = PropsWithChildren<{\n  /** グループのタイトル名 */\n  title: ReactNode\n  /** タイトルの見出しのタイプ */\n  titleType?: TextProps['styleType']\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトルの見出しを視覚的に隠すかどうか */\n  dangerouslyTitleHidden?: boolean\n  /** label 要素に適用する `htmlFor` 値 */\n  htmlFor?: string\n  /** label 要素に適用する `id` 値 */\n  labelId?: string\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\n  /** タイトルの隣に表示する `StatusLabel` の Props の配列 */\n  /**\n   * @deprecated statusLabelProps属性は非推奨です。statusLabelsを使ってください。\n   */\n  statusLabelProps?: StatusLabelProps | StatusLabelProps[]\n  /** タイトルの隣に表示する `StatusLabel` の配列 */\n  statusLabels?: StatusLabelType | StatusLabelType[]\n  /** タイトルの下に表示するヘルプメッセージ */\n  helpMessage?: ReactNode\n  /** タイトルの下に表示する入力例 */\n  exampleMessage?: ReactNode\n  /** タイトルの下に表示するエラーメッセージ */\n  errorMessages?: ReactNode | ReactNode[]\n  /** エラーがある場合に自動的に入力要素を error にするかどうか */\n  autoBindErrorInput?: boolean\n  /** フォームコントロールの下に表示する補足メッセージ */\n  supplementaryMessage?: ReactNode\n  /** `true` のとき、文字色を `TEXT_DISABLED` にする */\n  disabled?: boolean\n  as?: string | ComponentType<any>\n}>\ntype ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-FormControl',\n      'shr-mx-[unset] shr-border-none shr-p-[unset]',\n      'disabled:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-label_>_span]:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-exampleMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-errorMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-supplementaryMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-Input]:shr-border-default/50 [&:disabled_.smarthr-ui-Input]:shr-bg-white-darken',\n    ],\n    label: ['smarthr-ui-FormControl-label'],\n    errorList: ['shr-list-none'],\n    errorIcon: ['smarthr-ui-FormControl-errorMessage', 'shr-text-danger'],\n    underTitleStack: ['[&&&]:shr-mt-0'],\n    childrenWrapper: [],\n  },\n  variants: {\n    innerMargin: {\n      0: {},\n      0.25: {},\n      0.5: {},\n      0.75: {},\n      1: {},\n      1.25: {},\n      1.5: {},\n      2: {},\n      2.5: {},\n      3: {},\n      3.5: {},\n      4: {},\n      8: {},\n      X3S: {},\n      XXS: {},\n      XS: {},\n      S: {},\n      M: {},\n      L: {},\n      XL: {},\n      XXL: {},\n      X3L: {},\n    } as { [key in Gap]: string },\n    isFieldset: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // TODO: innerMarginが未指定、初期値の場合、かつFieldsetの場合、childrenの上部の余白を広げることで\n    // FormControltとの差をわかりやすくしている\n    // 微妙な方法ではあるので、必要に応じてinnerMarginではない属性を用意する\n    // https://kufuinc.slack.com/archives/CGC58MW01/p1737944965871159?thread_ts=1737541173.404369&cid=CGC58MW01\n    {\n      innerMargin: undefined,\n      isFieldset: true,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-1',\n      },\n    },\n    {\n      innerMargin: undefined,\n      isFieldset: false,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-0.5',\n      },\n    },\n  ],\n})\n\nconst SMARTHR_UI_INPUT_SELECTOR = '[data-smarthr-ui-input=\"true\"]'\n\nexport const ActualFormControl: FC<Props & ElementProps> = ({\n  title,\n  titleType = 'blockTitle',\n  subActionArea,\n  dangerouslyTitleHidden = false,\n  htmlFor,\n  labelId,\n  innerMargin,\n  statusLabels,\n  statusLabelProps,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...props\n}) => {\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const managedHtmlFor = htmlFor || defaultHtmlFor\n  const managedLabelId = labelId || defaultLabelId\n  const inputWrapperRef = useRef<HTMLDivElement>(null)\n  const isFieldset = as === 'fieldset'\n\n  const describedbyIds = useMemo(() => {\n    const temp = []\n\n    if (helpMessage) {\n      temp.push(`${managedHtmlFor}_helpMessage`)\n    }\n    if (exampleMessage) {\n      temp.push(`${managedHtmlFor}_exampleMessage`)\n    }\n    if (supplementaryMessage) {\n      temp.push(`${managedHtmlFor}_supplementaryMessage`)\n    }\n    if (errorMessages) {\n      temp.push(`${managedHtmlFor}_errorMessages`)\n    }\n\n    return temp.join(' ')\n  }, [helpMessage, exampleMessage, supplementaryMessage, errorMessages, managedHtmlFor])\n\n  const actualStatusLabels = useMemo(() => {\n    if (statusLabels) {\n      return (Array.isArray(statusLabels) ? statusLabels : [statusLabels]).map(\n        (statusLabel, index) => <Fragment key={index}>{statusLabel}</Fragment>,\n      )\n    }\n\n    if (!statusLabelProps) {\n      return []\n    }\n\n    const labelProps = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]\n\n    return labelProps.map((prop, index) => <StatusLabel {...prop} key={index} />)\n  }, [statusLabels, statusLabelProps])\n\n  const actualErrorMessages = useMemo(() => {\n    if (!errorMessages) {\n      return []\n    }\n\n    return Array.isArray(errorMessages) ? errorMessages : [errorMessages]\n  }, [errorMessages])\n\n  const actualInnerMargin = useMemo(() => innerMargin ?? 0.5, [innerMargin])\n\n  const classNames = useMemo(() => {\n    const { wrapper, label, errorList, errorIcon, underTitleStack, childrenWrapper } =\n      classNameGenerator({ innerMargin, isFieldset })\n\n    return {\n      wrapper: wrapper({ className }),\n      label: label({\n        className: dangerouslyTitleHidden ? visuallyHiddenTextClassNameGenerator() : '',\n      }),\n      errorList: errorList(),\n      errorIcon: errorIcon(),\n      underTitleStack: underTitleStack(),\n      childrenWrapper: childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, dangerouslyTitleHidden, className])\n\n  useEffect(() => {\n    if (\n      isFieldset ||\n      !inputWrapperRef?.current ||\n      // HINT: 対象idを持つ要素が既に存在する場合、何もしない\n      document.getElementById(managedHtmlFor)\n    ) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (!input) {\n      return\n    }\n\n    if (!input.getAttribute('id')) {\n      input.setAttribute('id', managedHtmlFor)\n    }\n\n    if (input instanceof HTMLInputElement && input.type === 'file') {\n      const attrName = 'aria-labelledby'\n      const inputLabelledByIds = input.getAttribute(attrName)\n\n      if (inputLabelledByIds) {\n        // InputFileの場合はlabel要素の可視ラベルをアクセシブルネームに含める\n        input.setAttribute(attrName, `${inputLabelledByIds} ${managedLabelId}`)\n      }\n    }\n  }, [managedHtmlFor, isFieldset, managedLabelId])\n\n  useEffect(() => {\n    if (!describedbyIds || !inputWrapperRef?.current) {\n      return\n    }\n\n    const inputWrapper = inputWrapperRef.current\n    const attrName = 'aria-describedby'\n\n    if (inputWrapper.querySelector(`[${attrName}=\"${describedbyIds}\"]`)) {\n      return\n    }\n\n    const input = inputWrapper.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attribute = input.getAttribute(attrName)\n\n      input.setAttribute(attrName, attribute ? `${attribute} ${describedbyIds}` : describedbyIds)\n    }\n  }, [describedbyIds])\n\n  useEffect(() => {\n    if (!autoBindErrorInput || !inputWrapperRef?.current) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attrName = 'aria-invalid'\n\n      if (actualErrorMessages.length > 0) {\n        input.setAttribute(attrName, 'true')\n      } else {\n        input.removeAttribute(attrName)\n      }\n    }\n  }, [actualErrorMessages.length, autoBindErrorInput])\n\n  // HINT: Fieldset内の可視ラベルが無いinputに、legend文言をアクセシブルネームに追加する\n  // https://waic.jp/translations/WCAG21/Understanding/label-in-name.html\n  useEffect(() => {\n    if (!isFieldset || !inputWrapperRef.current) return\n    const inputs = inputWrapperRef.current.querySelectorAll(SMARTHR_UI_INPUT_SELECTOR)\n    if (!inputs.length) return\n\n    const legendText = innerText(title)\n    if (!legendText) return\n\n    const labels = new Set(\n      Array.from(document.querySelectorAll('label[for]')).map((label) => label.getAttribute('for')),\n    )\n\n    inputs.forEach((input) => {\n      const inputId = input.getAttribute('id')\n      if (inputId && labels.has(inputId)) {\n        return\n      }\n\n      const accessibleName = input.hasAttribute('aria-label')\n        ? input.getAttribute('aria-label')\n        : null\n\n      if (accessibleName && !accessibleName.includes(legendText)) {\n        input.setAttribute('aria-label', `${accessibleName} ${legendText} `.trim())\n      }\n    })\n  }, [isFieldset, title])\n\n  let body = (\n    <>\n      <HelpMessageParagraph helpMessage={helpMessage} managedHtmlFor={managedHtmlFor} />\n      <ExampleMessageText exampleMessage={exampleMessage} managedHtmlFor={managedHtmlFor} />\n      <ErrorMessageList\n        errorMessages={actualErrorMessages}\n        managedHtmlFor={managedHtmlFor}\n        classNames={classNames}\n      />\n      <div className={classNames.childrenWrapper} ref={inputWrapperRef}>\n        {children}\n      </div>\n      <SupplementaryMessageText\n        supplementaryMessage={supplementaryMessage}\n        managedHtmlFor={managedHtmlFor}\n      />\n    </>\n  )\n\n  // HINT: dangerouslyTitleHiddenの場合、body以下の余白の計算を簡略化するため\n  // Stackをネストし、そのStackに対してmargin-top: 0を指定する\n  // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる\n  if (dangerouslyTitleHidden) {\n    body = (\n      <Stack gap={actualInnerMargin} className={classNames.underTitleStack}>\n        {body}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack\n      {...props}\n      as={as}\n      gap={actualInnerMargin}\n      aria-describedby={isFieldset && describedbyIds ? describedbyIds : undefined}\n      className={classNames.wrapper}\n    >\n      <TitleCluster\n        isFieldset={isFieldset}\n        managedHtmlFor={managedHtmlFor}\n        managedLabelId={managedLabelId}\n        dangerouslyTitleHidden={dangerouslyTitleHidden}\n        titleType={titleType}\n        title={title}\n        statusLabels={actualStatusLabels}\n        subActionArea={subActionArea}\n        labelClassName={classNames.label}\n      />\n      {body}\n    </Stack>\n  )\n}\n\nconst TitleCluster = memo<\n  Pick<Props, 'dangerouslyTitleHidden' | 'title' | 'subActionArea'> & {\n    titleType: TextProps['styleType']\n    isFieldset: boolean\n    managedHtmlFor: string\n    managedLabelId: string\n    labelClassName: string\n    statusLabels: StatusLabelType[]\n  }\n>(\n  ({\n    isFieldset,\n    managedHtmlFor,\n    managedLabelId,\n    dangerouslyTitleHidden,\n    titleType,\n    title,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={titleType}>{title}</Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (dangerouslyTitleHidden) {\n        return {\n          label: null,\n          visuallyHidden: isFieldset\n            ? {\n                as: 'legend',\n              }\n            : {\n                as: 'label',\n                htmlFor: managedHtmlFor,\n                id: managedLabelId,\n              },\n        }\n      }\n\n      if (isFieldset) {\n        return {\n          label: { 'aria-hidden': 'true' } as const,\n          visuallyHidden: { as: 'legend' },\n        }\n      }\n\n      return {\n        label: {\n          as: 'label' as const,\n          htmlFor: managedHtmlFor,\n          id: managedLabelId,\n        },\n        visuallyHidden: null,\n      }\n    }, [managedLabelId, managedHtmlFor, dangerouslyTitleHidden, isFieldset])\n\n    return (\n      <>\n        {attrs.visuallyHidden && (\n          <VisuallyHiddenText {...attrs.visuallyHidden}>\n            {\n              // HINT: innerTextでは正しく文字が取得できない場合がある\n              // 安全策としてinnerTextが空を取得してきたらbody自体を埋めこみます\n              innerText(body) || body\n            }\n          </VisuallyHiddenText>\n        )}\n        {attrs.label && (\n          <Cluster\n            justify=\"space-between\"\n            // HINT: UI上、常にトップの要素になるため、Stackの計算が狂わないよう、\n            // 常にmargin-topを0にする\n            className=\"[&&&]:shr--mt-0\"\n          >\n            <Cluster {...attrs.label} align=\"center\" className={labelClassName}>\n              {body}\n            </Cluster>\n            {subActionArea && <div className=\"shr-grow\">{subActionArea}</div>}\n          </Cluster>\n        )}\n      </>\n    )\n  },\n)\n\nconst StatusLabelCluster = memo<{ statusLabels: StatusLabelType[] }>(({ statusLabels }) =>\n  statusLabels.length === 0 ? null : (\n    <Cluster gap={0.25} as=\"span\">\n      {statusLabels}\n    </Cluster>\n  ),\n)\n\nconst HelpMessageParagraph = memo<Pick<Props, 'helpMessage'> & { managedHtmlFor: string }>(\n  ({ helpMessage, managedHtmlFor }) =>\n    helpMessage ? (\n      <p className=\"smarthr-ui-FormControl-helpMessage\" id={`${managedHtmlFor}_helpMessage`}>\n        {helpMessage}\n      </p>\n    ) : null,\n)\n\nconst ExampleMessageText = memo<Pick<Props, 'exampleMessage'> & { managedHtmlFor: string }>(\n  ({ exampleMessage, managedHtmlFor }) =>\n    exampleMessage ? (\n      <Text\n        as=\"p\"\n        color=\"TEXT_GREY\"\n        italic\n        id={`${managedHtmlFor}_exampleMessage`}\n        className=\"smarthr-ui-FormControl-exampleMessage\"\n      >\n        {exampleMessage}\n      </Text>\n    ) : null,\n)\n\nconst ErrorMessageList = memo<{\n  errorMessages: ReactNode[]\n  managedHtmlFor: string\n  classNames: {\n    errorList: string\n    errorIcon: string\n  }\n}>(({ errorMessages, managedHtmlFor, classNames }) =>\n  errorMessages.length > 0 ? (\n    <div id={`${managedHtmlFor}_errorMessages`} className={classNames.errorList} role=\"alert\">\n      {errorMessages.map((message, index) => (\n        <p key={index}>\n          <FaCircleExclamationIcon text={message} className={classNames.errorIcon} />\n        </p>\n      ))}\n    </div>\n  ) : null,\n)\n\nconst SupplementaryMessageText = memo<\n  Pick<Props, 'supplementaryMessage'> & { managedHtmlFor: string }\n>(({ supplementaryMessage, managedHtmlFor }) =>\n  supplementaryMessage ? (\n    <Text\n      as=\"p\"\n      size=\"S\"\n      color=\"TEXT_GREY\"\n      id={`${managedHtmlFor}_supplementaryMessage`}\n      className=\"smarthr-ui-FormControl-supplementaryMessage\"\n    >\n      {supplementaryMessage}\n    </Text>\n  ) : null,\n)\n\nexport const FormControl: FC<Omit<Props & ElementProps, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAqEA;AACE;AACE;;;;;;;;;AASC;;;AAGD;;AAEA;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACD;AACF;AACD;;;;;AAKE;AACE;AACA;AACA;AACE;AACD;AACF;AACD;AACE;AACA;AACA;AACE;AACD;AACF;AACF;AACF;AAED;AAEO;AAoBL;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;;AAEI;;;AAMA;;AAGF;;AAGF;AAEA;;AAEI;;AAGF;AACF;AAEA;AAEA;;;AAKI;;;;;;;;;;;AAYF;;;AAIE;;;;;;;;AAYA;;;;;;;;;;;;;;;AAmBF;;;;;;;;AAYE;;AAEJ;;;;;;;;AAYI;AACE;;;AAEA;;;;;;;AAQJ;;;;;AAIA;AACA;;AAEA;AAIA;;;;;AAME;AACE;;;AAIA;;AAEJ;AACF;AAEA;;;;;AAuBE;;AAOF;AAsBF;AAEA;;AA4BI;;;AAGM;AACA;AACE;AACI;AACD;AACH;AACI;AACA;AACA;AACD;;;;;AAML;AACA;;;;AAKF;AACE;AACA;AACA;AACD;AACD;;;AAIJ;;;AAOU;;;AASF;AAUV;AAGF;AAQA;AASA;AAeA;AAmBA;AAgBO;;"}

package/esm/components/Icon/Icon.js

@@ -1,4 +1,4 @@
-import { FaCheck, FaCircleInfo, FaCaretDown, FaEllipsis, FaCircleExclamation, FaTriangleExclamation, FaAngleDown, FaMagnifyingGlassMinus, FaMagnifyingGlassPlus, FaArrowRotateLeft, FaMagnifyingGlass, FaTrashCan, FaFolderOpen, FaUpRightFromSquare, FaCircleQuestion, FaArrowLeft, FaGrip, FaXmark, FaAnglesRight, FaChevronRight, FaAnglesLeft, FaChevronLeft, FaSortUp, FaSortDown, FaCaretRight, FaRotate, FaCircleCheck, FaCalendarDays, FaCirclePlus, FaCircleXmark, FaToolbox, FaGlobe, FaAngleRight, FaArrowRight, FaStar, FaUser, FaGear, FaGraduationCap, FaCaretUp, FaBars, FaUserLarge, FaAddressBook, FaAddressCard, FaAngleLeft, FaAngleUp, FaArrowDown, FaArrowDownWideShort, FaArrowRightArrowLeft, FaArrowRotateRight, FaArrowUp19, FaArrowUp, FaArrowUpWideShort, FaArrowsRotate, FaAsterisk, FaBabyCarriage, FaBan, FaBarsStaggered, FaBell, FaBellSlash, FaBolt, FaBook, FaBookOpen, FaBoxArchive, FaBuilding, FaBullhorn, FaCakeCandles, FaCalculator, FaCalendarCheck, FaCalendarXmark, FaCamera, FaCaretLeft, FaChartArea, FaChartBar, FaChartColumn, FaChartLine, FaChartPie, FaChevronDown, FaCircleDot, FaCircle, FaCircleMinus, FaCircleUser, FaClipboardCheck, FaClipboard, FaClipboardList, FaClipboardQuestion, FaClock, FaClockRotateLeft, FaCloudArrowDown, FaCloudArrowUp, FaCode, FaCommentDots, FaComment, FaComments, FaCompress, FaCopy, FaCube, FaCubes, FaDatabase, FaDoorOpen, FaDownLeftAndUpRightToCenter, FaEllipsisVertical, FaEnvelope, FaEnvelopeOpen, FaExpand, FaEye, FaEyeSlash, FaFileArrowDown, FaFileCirclePlus, FaFileCode, FaFileCsv, FaFileExcel, FaFileExport, FaFile, FaFileLines, FaFilePdf, FaFilePowerpoint, FaFileWord, FaFilter, FaFloppyDisk, FaFolder, FaFolderPlus, FaFont, FaGauge, FaGears, FaGripLines, FaGripLinesVertical, FaGripVertical, FaHourglassHalf, FaHouse, FaIdBadge, FaIdCard, FaImage, FaImages, FaInbox, FaIntercom, FaKey, FaLeftLong, FaLeftRight, FaLightbulb, FaLink, FaList, FaListOl, FaListUl, FaLock, FaLockOpen, FaMessage, FaMicrosoft, FaMoneyCheckDollar, FaPaintbrush, FaPaperPlane, FaPaperclip, FaPen, FaPenToSquare, FaPencil, FaPiggyBank, FaPlus, FaPowerOff, FaPrint, FaRegCircleQuestion, FaRegLightbulb, FaReply, FaRightFromBracket, FaRightLeft, FaRightLong, FaRightToBracket, FaRobot, FaRocket, FaRotateLeft, FaShareNodes, FaShieldHalved, FaSliders, FaSort, FaSquareCheck, FaSquareMinus, FaSquarePlus, FaSquarePollVertical, FaSuitcaseMedical, FaTable, FaTableList, FaTableColumns, FaTag, FaTags, FaThumbtack, FaTrash, FaTruck, FaTruckRampBox, FaUpDown, FaUpRightAndDownLeftFromCenter, FaUserCheck, FaUserClock, FaUserPen, FaUserPlus, FaUsers, FaWindowMaximize, FaWindowMinimize, FaWindowRestore, FaYenSign, FaMinus } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.0/vendor/react-icons/fa6/index.js';
+import { FaCheck, FaCircleInfo, FaCaretDown, FaEllipsis, FaCircleExclamation, FaTriangleExclamation, FaAngleDown, FaMagnifyingGlassMinus, FaMagnifyingGlassPlus, FaArrowRotateLeft, FaMagnifyingGlass, FaTrashCan, FaFolderOpen, FaUpRightFromSquare, FaCircleQuestion, FaArrowLeft, FaGrip, FaXmark, FaAnglesRight, FaChevronRight, FaAnglesLeft, FaChevronLeft, FaSortUp, FaSortDown, FaCaretRight, FaRotate, FaCircleCheck, FaCalendarDays, FaCirclePlus, FaCircleXmark, FaToolbox, FaGlobe, FaAngleRight, FaArrowRight, FaStar, FaUser, FaGear, FaGraduationCap, FaCaretUp, FaBars, FaUserLarge, FaAddressBook, FaAddressCard, FaAngleLeft, FaAngleUp, FaArrowDown, FaArrowDownWideShort, FaArrowRightArrowLeft, FaArrowRotateRight, FaArrowUp19, FaArrowUp, FaArrowUpWideShort, FaArrowsRotate, FaAsterisk, FaBabyCarriage, FaBan, FaBarsStaggered, FaBell, FaBellSlash, FaBolt, FaBook, FaBookOpen, FaBoxArchive, FaBuilding, FaBullhorn, FaCakeCandles, FaCalculator, FaCalendarCheck, FaCalendarXmark, FaCamera, FaCaretLeft, FaChartArea, FaChartBar, FaChartColumn, FaChartLine, FaChartPie, FaChevronDown, FaCircleDot, FaCircle, FaCircleMinus, FaCircleUser, FaClipboardCheck, FaClipboard, FaClipboardList, FaClipboardQuestion, FaClock, FaClockRotateLeft, FaCloudArrowDown, FaCloudArrowUp, FaCode, FaCommentDots, FaComment, FaComments, FaCompress, FaCopy, FaCube, FaCubes, FaDatabase, FaDoorOpen, FaDownLeftAndUpRightToCenter, FaEllipsisVertical, FaEnvelope, FaEnvelopeOpen, FaExpand, FaEye, FaEyeSlash, FaFileArrowDown, FaFileCirclePlus, FaFileCode, FaFileCsv, FaFileExcel, FaFileExport, FaFile, FaFileLines, FaFilePdf, FaFilePowerpoint, FaFileWord, FaFilter, FaFloppyDisk, FaFolder, FaFolderPlus, FaFont, FaGauge, FaGears, FaGripLines, FaGripLinesVertical, FaGripVertical, FaHourglassHalf, FaHouse, FaIdBadge, FaIdCard, FaImage, FaImages, FaInbox, FaIntercom, FaKey, FaLeftLong, FaLeftRight, FaLightbulb, FaLink, FaList, FaListOl, FaListUl, FaLock, FaLockOpen, FaMessage, FaMicrosoft, FaMoneyCheckDollar, FaPaintbrush, FaPaperPlane, FaPaperclip, FaPen, FaPenToSquare, FaPencil, FaPiggyBank, FaPlus, FaPowerOff, FaPrint, FaRegCircleQuestion, FaRegLightbulb, FaReply, FaRightFromBracket, FaRightLeft, FaRightLong, FaRightToBracket, FaRobot, FaRocket, FaRotateLeft, FaShareNodes, FaShieldHalved, FaSliders, FaSort, FaSquareCheck, FaSquareMinus, FaSquarePlus, FaSquarePollVertical, FaSuitcaseMedical, FaTable, FaTableList, FaTableColumns, FaTag, FaTags, FaThumbtack, FaTrash, FaTruck, FaTruckRampBox, FaUpDown, FaUpRightAndDownLeftFromCenter, FaUserCheck, FaUserClock, FaUserPen, FaUserPlus, FaUsers, FaWindowMaximize, FaWindowMinimize, FaWindowRestore, FaYenSign, FaMinus } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.1/vendor/react-icons/fa6/index.js';
 import { generateIcon } from './generateIcon.js';
 export { WarningIcon } from './WarningIcon.js';
 export { SparklesIcon } from './SparklesIcon.js';

package/esm/components/Icon/LanguageIcon.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { generateIcon } from './generateIcon.js';
-import { IconBase } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.0/vendor/react-icons/lib/iconBase.js';
+import { IconBase } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.1/vendor/react-icons/lib/iconBase.js';
 
 const LanguageIcon = /*#__PURE__*/ generateIcon((props) => (jsx(IconBase, { ...props, viewBox: "0 0 16 16", children: jsx("path", { fillRule: "evenodd", d: "M14.5 8c0 .606-.083 1.193-.238 1.75h-2.206c.066-.563.1-1.149.1-1.75s-.034-1.187-.1-1.75h2.206c.155.557.238 1.144.238 1.75Zm-3.955-1.75c.072.554.111 1.14.111 1.75 0 .61-.04 1.196-.111 1.75H5.424A13.58 13.58 0 0 1 5.312 8c0-.61.04-1.196.112-1.75h5.12Zm1.253-1.5h1.832a6.529 6.529 0 0 0-2.802-2.604c.408.729.74 1.613.97 2.604ZM7.988 1.5c.312.002.959.276 1.616 1.537.253.485.475 1.063.648 1.713H5.717c.173-.65.394-1.228.647-1.713.656-1.258 1.3-1.533 1.614-1.537h.01ZM7.968 0a8 8 0 0 0 0 16H8a8 8 0 1 0-.033-16Zm2.86 13.854a6.528 6.528 0 0 0 2.802-2.604h-1.832c-.23.99-.562 1.875-.97 2.604Zm-.576-2.604H5.717c.173.65.394 1.228.647 1.713.656 1.258 1.3 1.533 1.614 1.537h.01c.312-.002.959-.275 1.616-1.537a8.418 8.418 0 0 0 .648-1.713Zm-5.123 2.583c-.402-.725-.73-1.602-.958-2.583H2.37a6.53 6.53 0 0 0 2.76 2.583ZM3.913 9.75H1.738A6.506 6.506 0 0 1 1.5 8c0-.606.083-1.193.238-1.75h2.175a15.158 15.158 0 0 0 0 3.5Zm.258-5H2.37a6.53 6.53 0 0 1 2.76-2.583c-.403.725-.731 1.602-.959 2.583Z" }) })));
 

package/esm/components/Icon/SparklesIcon.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { generateIcon } from './generateIcon.js';
-import { IconBase } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.0/vendor/react-icons/lib/iconBase.js';
+import { IconBase } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.1/vendor/react-icons/lib/iconBase.js';
 
 const SparklesIcon = /*#__PURE__*/ generateIcon((props) => (jsx(IconBase, { ...props, viewBox: "0 0 16 16", children: jsx("path", { d: "M.373 8.616c-.497-.188-.497-.906 0-1.094l3.31-1.25a.578.578 0 0 0 .338-.345l1.225-3.38a.567.567 0 0 1 1.072 0l1.225 3.38c.058.16.181.285.337.345l3.31 1.25c.498.188.498.906 0 1.094l-3.31 1.25a.577.577 0 0 0-.337.345l-1.225 3.38a.567.567 0 0 1-1.072 0l-1.225-3.38a.577.577 0 0 0-.337-.344l-3.31-1.25ZM10.396 13.412c-.147-.056-.147-.269 0-.324l.982-.371a.17.17 0 0 0 .1-.102l.363-1.002a.168.168 0 0 1 .318 0l.363 1.002a.17.17 0 0 0 .1.102l.982.37c.147.056.147.27 0 .325l-.982.371a.17.17 0 0 0-.1.102l-.363 1.002a.168.168 0 0 1-.318 0l-.363-1.002a.17.17 0 0 0-.1-.102l-.982-.37ZM10.47 4.187c-.246-.093-.246-.448 0-.54l1.636-.619a.285.285 0 0 0 .167-.17l.605-1.67a.28.28 0 0 1 .53 0l.605 1.67c.029.079.09.141.167.17l1.636.618c.245.093.245.448 0 .541l-1.636.618a.285.285 0 0 0-.167.17l-.605 1.67a.28.28 0 0 1-.53 0l-.605-1.67a.285.285 0 0 0-.167-.17l-1.636-.618Z" }) })));
 

package/esm/components/Icon/WarningIcon.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { generateIcon } from './generateIcon.js';
-import { IconBase } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.0/vendor/react-icons/lib/iconBase.js';
+import { IconBase } from './../../vendor/.pnpm/react-icons@5.5.0_react@19.1.1/vendor/react-icons/lib/iconBase.js';
 
 const WarningIcon = /*#__PURE__*/ generateIcon((props) => (jsxs(IconBase, { ...props, viewBox: "0 0 16 16", children: [jsx("path", { d: "m8.863 1.745 6.75 11.5a.998.998 0 0 1-.862 1.505H1.25c-.358 0-.69-.193-.868-.502a1.005 1.005 0 0 1 .005-1.003l6.75-11.5a.998.998 0 0 1 1.725 0Z", className: "smarthr-ui-WarningIcon-wrapper shr-fill-warning-yellow shr-stroke-black shr-stroke-0.5" }), jsx("path", { className: "smarthr-ui-WarningIcon-mark shr-fill-black", d: "M8 5a.748.748 0 0 0-.75.75v3.5c0 .416.334.75.75.75s.75-.334.75-.75v-3.5A.748.748 0 0 0 8 5Zm1 7a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" })] })));
 

package/esm/components/InputFile/InputFile.js

@@ -129,7 +129,7 @@ const InputFile = forwardRef(({ className, size, label, hasFileList = true, onCh
         const newFiles = files.filter((_, i) => index !== i);
         updateFiles(newFiles);
     }, [files, inputRef, updateFiles]);
-    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [!disabled && hasFileList && files.length > 0 && (jsx(BaseColumn, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxs("li", { className: classNames.fileItem, children: [jsx("span", { className: "smarthr-ui-InputFile-fileName", children: file.name }), jsx(Button, { variant: "text", prefix: jsx(FaTrashCanIcon, {}), value: index, onClick: handleDelete, className: "smarthr-ui-InputFile-deleteButton", children: decorated.destroy })] }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...props, multiple: multiple || multiplyAppendable, "data-smarthr-ui-input": "true", type: "file", onChange: handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] })] }));
+    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [!disabled && hasFileList && files.length > 0 && (jsx(BaseColumn, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxs("li", { className: classNames.fileItem, children: [jsx("span", { className: "smarthr-ui-InputFile-fileName shr-wrap-break-word shr-min-w-[0]", children: file.name }), jsx(Button, { variant: "text", prefix: jsx(FaTrashCanIcon, {}), value: index, onClick: handleDelete, className: "smarthr-ui-InputFile-deleteButton", children: decorated.destroy })] }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...props, multiple: multiple || multiplyAppendable, "data-smarthr-ui-input": "true", type: "file", onChange: handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] })] }));
 });
 const StyledFaFolderOpenIcon = memo(({ className }) => (jsx("span", { className: className, children: jsx(FaFolderOpenIcon, {}) })));
 const LabelRender = memo(({ id, label }) => (jsx("span", { id: id, "aria-hidden": "true", children: label })));

package/esm/components/InputFile/InputFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputFile.js","sources":["../../../src/components/InputFile/InputFile.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'\nimport { useIntl } from '../../intl'\nimport { BaseColumn } from '../Base'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'\nimport { Stack } from '../Layout'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-InputFile shr-block',\n    fileList: ['smarthr-ui-InputFile-fileList', 'shr-list-none shr-self-stretch shr-text-base'],\n    fileItem: 'shr-flex shr-items-center',\n    inputWrapper: [\n      'shr-border-shorthand shr-relative shr-inline-flex shr-rounded-m shr-bg-white shr-font-bold shr-leading-none',\n      'contrast-more:shr-border-high-contrast',\n      'focus-within:shr-focus-indicator',\n      'has-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-InputFile-input',\n      'shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-opacity-0',\n      'file:shr-h-full file:shr-w-full file:shr-cursor-pointer',\n      'file:disabled:shr-cursor-not-allowed',\n    ],\n    prefix: 'shr-me-0.5 shr-inline-flex',\n  },\n  variants: {\n    size: {\n      default: {\n        inputWrapper: 'shr-px-1 shr-py-0.75 shr-text-base',\n      },\n      s: {\n        inputWrapper: 'shr-p-0.5 shr-text-sm',\n      },\n    },\n    disabled: {\n      true: {\n        inputWrapper: 'shr-border-disabled shr-bg-white-darken shr-text-disabled',\n      },\n      false: {\n        inputWrapper: 'hover:shr-border-darken hover:shr-bg-white-darken hover:shr-text-black',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport type Props = VariantProps<typeof classNameGenerator> & {\n  /** フォームのラベル */\n  label: ReactNode\n  /** ファイルの選択に変更があったときに発火するコールバック関数 */\n  onChange?: (files: File[]) => void\n  /** ファイルリストを表示するかどうか */\n  hasFileList?: boolean\n  /** コンポーネント内のテキストを変更する関数 */\n  decorators?: DecoratorsType<DecoratorKeyTypes>\n  error?: boolean\n  /** ファイル複数選択の際に、選択済みのファイルと結合するかどうか */\n  multiplyAppendable?: boolean\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'input'>, keyof Props>\ntype DecoratorKeyTypes = 'destroy'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(\n  (\n    {\n      className,\n      size,\n      label,\n      hasFileList = true,\n      onChange,\n      disabled = false,\n      multiple,\n      multiplyAppendable = false,\n      error,\n      decorators,\n      ...props\n    },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const labelId = useId()\n    const { localize } = useIntl()\n\n    const decoratorDefaultTexts = useMemo(\n      () => ({\n        destroy: localize({\n          id: 'smarthr-ui/InputFile/destroy',\n          defaultText: '削除',\n        }),\n      }),\n      [localize],\n    )\n\n    const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size, disabled }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [disabled, size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesDirectly = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const updateInputValue = useCallback(\n      (newFiles: File[]) => {\n        if (!inputRef.current) {\n          return\n        }\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesDirectly.current = true\n        inputRef.current.files = buff.files\n        isUpdatingFilesDirectly.current = false\n      },\n      [inputRef],\n    )\n\n    const updateFiles = useMemo(\n      () =>\n        onChange\n          ? (newFiles: File[]) => {\n              onChange(newFiles)\n              updateInputValue(newFiles)\n              setFiles(newFiles)\n            }\n          : setFiles,\n      [onChange, updateInputValue],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        // Safari において、input.files への直接代入時はonChangeを発火させない\n        if (isUpdatingFilesDirectly.current) {\n          return\n        }\n\n        const newFiles = Array.from(e.target.files ?? [])\n\n        if (multiplyAppendable) {\n          // multiplyAppendableの場合、すでに選択済みのファイルと結合する\n          updateFiles([...files, ...newFiles])\n        } else {\n          updateFiles(newFiles)\n        }\n      },\n      [files, isUpdatingFilesDirectly, updateFiles, multiplyAppendable],\n    )\n\n    const handleDelete = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        const index = parseInt(e.currentTarget.value, 10)\n        const newFiles = files.filter((_, i) => index !== i)\n\n        updateFiles(newFiles)\n      },\n      [files, inputRef, updateFiles],\n    )\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {!disabled && hasFileList && files.length > 0 && (\n          <BaseColumn as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <li key={index} className={classNames.fileItem}>\n                <span className=\"smarthr-ui-InputFile-fileName\">{file.name}</span>\n                <Button\n                  variant=\"text\"\n                  prefix={<FaTrashCanIcon />}\n                  value={index}\n                  onClick={handleDelete}\n                  className=\"smarthr-ui-InputFile-deleteButton\"\n                >\n                  {decorated.destroy}\n                </Button>\n              </li>\n            ))}\n          </BaseColumn>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...props}\n            multiple={multiple || multiplyAppendable}\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n      </Stack>\n    )\n  },\n)\n\nconst StyledFaFolderOpenIcon = memo<{ className: string }>(({ className }) => (\n  <span className={className}>\n    <FaFolderOpenIcon />\n  </span>\n))\n\nconst LabelRender = memo<{ id: string; label: ReactNode }>(({ id, label }) => (\n  <span id={id} aria-hidden=\"true\">\n    {label}\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyBA;AACE;AACE;AACA;AACA;AACA;;;;;AAKC;AACD;;;;;AAKC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;AACD;AACF;AAkBD;AAEO;;AAkBH;AACA;AAEA;;AAGM;AACA;;AAEH;;AAMH;AACE;;AAGE;;;;;;;;;AAUJ;AAEA;;AAMA;AAEI;;;AAGA;AACA;AACE;AACF;AAEA;;AAEA;AACF;AAIF;AAGM;;;;;;AASN;;AAGI;;;AAIA;;;;;;;;;AAYJ;AAEI;;;AAIA;AACA;;;AAOJ;AAsCF;AAGF;AAMA;;"}
+{"version":3,"file":"InputFile.js","sources":["../../../src/components/InputFile/InputFile.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'\nimport { useIntl } from '../../intl'\nimport { BaseColumn } from '../Base'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'\nimport { Stack } from '../Layout'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-InputFile shr-block',\n    fileList: ['smarthr-ui-InputFile-fileList', 'shr-list-none shr-self-stretch shr-text-base'],\n    fileItem: 'shr-flex shr-items-center',\n    inputWrapper: [\n      'shr-border-shorthand shr-relative shr-inline-flex shr-rounded-m shr-bg-white shr-font-bold shr-leading-none',\n      'contrast-more:shr-border-high-contrast',\n      'focus-within:shr-focus-indicator',\n      'has-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-InputFile-input',\n      'shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-opacity-0',\n      'file:shr-h-full file:shr-w-full file:shr-cursor-pointer',\n      'file:disabled:shr-cursor-not-allowed',\n    ],\n    prefix: 'shr-me-0.5 shr-inline-flex',\n  },\n  variants: {\n    size: {\n      default: {\n        inputWrapper: 'shr-px-1 shr-py-0.75 shr-text-base',\n      },\n      s: {\n        inputWrapper: 'shr-p-0.5 shr-text-sm',\n      },\n    },\n    disabled: {\n      true: {\n        inputWrapper: 'shr-border-disabled shr-bg-white-darken shr-text-disabled',\n      },\n      false: {\n        inputWrapper: 'hover:shr-border-darken hover:shr-bg-white-darken hover:shr-text-black',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport type Props = VariantProps<typeof classNameGenerator> & {\n  /** フォームのラベル */\n  label: ReactNode\n  /** ファイルの選択に変更があったときに発火するコールバック関数 */\n  onChange?: (files: File[]) => void\n  /** ファイルリストを表示するかどうか */\n  hasFileList?: boolean\n  /** コンポーネント内のテキストを変更する関数 */\n  decorators?: DecoratorsType<DecoratorKeyTypes>\n  error?: boolean\n  /** ファイル複数選択の際に、選択済みのファイルと結合するかどうか */\n  multiplyAppendable?: boolean\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'input'>, keyof Props>\ntype DecoratorKeyTypes = 'destroy'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(\n  (\n    {\n      className,\n      size,\n      label,\n      hasFileList = true,\n      onChange,\n      disabled = false,\n      multiple,\n      multiplyAppendable = false,\n      error,\n      decorators,\n      ...props\n    },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const labelId = useId()\n    const { localize } = useIntl()\n\n    const decoratorDefaultTexts = useMemo(\n      () => ({\n        destroy: localize({\n          id: 'smarthr-ui/InputFile/destroy',\n          defaultText: '削除',\n        }),\n      }),\n      [localize],\n    )\n\n    const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size, disabled }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [disabled, size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesDirectly = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const updateInputValue = useCallback(\n      (newFiles: File[]) => {\n        if (!inputRef.current) {\n          return\n        }\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesDirectly.current = true\n        inputRef.current.files = buff.files\n        isUpdatingFilesDirectly.current = false\n      },\n      [inputRef],\n    )\n\n    const updateFiles = useMemo(\n      () =>\n        onChange\n          ? (newFiles: File[]) => {\n              onChange(newFiles)\n              updateInputValue(newFiles)\n              setFiles(newFiles)\n            }\n          : setFiles,\n      [onChange, updateInputValue],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        // Safari において、input.files への直接代入時はonChangeを発火させない\n        if (isUpdatingFilesDirectly.current) {\n          return\n        }\n\n        const newFiles = Array.from(e.target.files ?? [])\n\n        if (multiplyAppendable) {\n          // multiplyAppendableの場合、すでに選択済みのファイルと結合する\n          updateFiles([...files, ...newFiles])\n        } else {\n          updateFiles(newFiles)\n        }\n      },\n      [files, isUpdatingFilesDirectly, updateFiles, multiplyAppendable],\n    )\n\n    const handleDelete = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        const index = parseInt(e.currentTarget.value, 10)\n        const newFiles = files.filter((_, i) => index !== i)\n\n        updateFiles(newFiles)\n      },\n      [files, inputRef, updateFiles],\n    )\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {!disabled && hasFileList && files.length > 0 && (\n          <BaseColumn as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <li key={index} className={classNames.fileItem}>\n                <span className=\"smarthr-ui-InputFile-fileName shr-wrap-break-word shr-min-w-[0]\">\n                  {file.name}\n                </span>\n                <Button\n                  variant=\"text\"\n                  prefix={<FaTrashCanIcon />}\n                  value={index}\n                  onClick={handleDelete}\n                  className=\"smarthr-ui-InputFile-deleteButton\"\n                >\n                  {decorated.destroy}\n                </Button>\n              </li>\n            ))}\n          </BaseColumn>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...props}\n            multiple={multiple || multiplyAppendable}\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n      </Stack>\n    )\n  },\n)\n\nconst StyledFaFolderOpenIcon = memo<{ className: string }>(({ className }) => (\n  <span className={className}>\n    <FaFolderOpenIcon />\n  </span>\n))\n\nconst LabelRender = memo<{ id: string; label: ReactNode }>(({ id, label }) => (\n  <span id={id} aria-hidden=\"true\">\n    {label}\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyBA;AACE;AACE;AACA;AACA;AACA;;;;;AAKC;AACD;;;;;AAKC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;AACD;AACF;AAkBD;AAEO;;AAkBH;AACA;AAEA;;AAGM;AACA;;AAEH;;AAMH;AACE;;AAGE;;;;;;;;;AAUJ;AAEA;;AAMA;AAEI;;;AAGA;AACA;AACE;AACF;AAEA;;AAEA;AACF;AAIF;AAGM;;;;;;AASN;;AAGI;;;AAIA;;;;;;;;;AAYJ;AAEI;;;AAIA;AACA;;;AAOJ;AAwCF;AAGF;AAMA;;"}

package/esm/components/Pagination/PaginationControllerItemButton.js

@@ -58,7 +58,7 @@ const PaginationControllerItemButton = ({ direction, disabled, double, targetPag
             },
         };
     }, [targetPage, disabled, hrefTemplate, linkAs]);
-    return (jsx(Component, { ...attrs, size: "s", className: "shr-rounded-s", children: jsx(Icon, { color: disabled ? 'TEXT_DISABLED' : 'TEXT_BLACK', alt: alt }) }));
+    return (jsx(Component, { ...attrs, variant: "secondary", size: "s", className: "shr-rounded-s", children: jsx(Icon, { color: disabled ? 'TEXT_DISABLED' : 'TEXT_BLACK', alt: alt }) }));
 };
 
 export { PaginationControllerItemButton };