smarthr-ui 96.1.0 → 96.1.2

package/lib/components/Text/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\n\nimport type { AbstractSize, CharRelativeSize } from '../../themes'\nimport type { Gap } from '../../types'\n\ntype StyleType =\n  | 'screenTitle'\n  | 'sectionTitle'\n  | 'blockTitle'\n  | 'subBlockTitle'\n  | 'subSubBlockTitle'\n\nexport const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof classNameGenerator> } = {\n  screenTitle: {\n    size: 'XL',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  sectionTitle: {\n    size: 'L',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  blockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n  },\n  subBlockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n  subSubBlockTitle: {\n    size: 'S',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n}\nconst UNDEFINED_STYLE_VALUES = {\n  size: undefined,\n  leading: undefined,\n  weight: undefined,\n  color: undefined,\n}\n\nconst classNameGenerator = tv({\n  variants: {\n    size: {\n      XXS: 'shr-text-2xs',\n      XS: 'shr-text-xs',\n      S: 'shr-text-sm',\n      M: 'shr-text-base',\n      L: 'shr-text-lg',\n      XL: 'shr-text-xl',\n      XXL: 'shr-text-2xl',\n    },\n    weight: {\n      normal: 'shr-font-normal',\n      bold: 'shr-font-bold',\n    },\n    italic: {\n      true: 'shr-italic',\n    },\n    color: {\n      TEXT_BLACK: 'shr-text-black',\n      TEXT_WHITE: 'shr-text-white',\n      TEXT_GREY: 'shr-text-grey',\n      TEXT_DISABLED: 'shr-text-disabled',\n      TEXT_LINK: 'shr-text-link',\n      inherit: 'shr-text-color-inherit',\n    },\n    leading: {\n      NONE: 'shr-leading-none',\n      TIGHT: 'shr-leading-tight',\n      NORMAL: 'shr-leading-normal',\n      LOOSE: 'shr-leading-loose',\n    },\n    whiteSpace: {\n      normal: 'shr-whitespace-normal',\n      nowrap: 'shr-whitespace-nowrap',\n      pre: 'shr-whitespace-pre',\n      'pre-line': 'shr-whitespace-pre-line',\n      'pre-wrap': 'shr-whitespace-pre-wrap',\n    },\n    maxLines: {\n      1: 'shr-inline-block shr-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      2: 'shr-line-clamp-[2]',\n      3: 'shr-line-clamp-[3]',\n      4: 'shr-line-clamp-[4]',\n      5: 'shr-line-clamp-[5]',\n      6: 'shr-line-clamp-[6]',\n    },\n  },\n})\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Icon-extended smarthr-ui-Icon-withText shr-group/iconWrapper shr-inline-flex shr-items-baseline',\n  ],\n  variants: {\n    gap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      '-0.25': '-shr-gap-x-0.25',\n      '-0.5': '-shr-gap-x-0.5',\n      '-0.75': '-shr-gap-x-0.75',\n      '-1': '-shr-gap-x-1',\n      '-1.25': '-shr-gap-x-1.25',\n      '-1.5': '-shr-gap-x-1.5',\n      '-2': '-shr-gap-x-2',\n      '-2.5': '-shr-gap-x-2.5',\n      '-3': '-shr-gap-x-3',\n      '-3.5': '-shr-gap-x-3.5',\n      '-4': '-shr-gap-x-4',\n      '-8': '-shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n  },\n})\n\ntype ActualIconType =\n  | undefined\n  | {\n      /** テキスト左に設置するアイコン */\n      prefix?: ReactNode\n      /** テキスト右に設置するアイコン */\n      suffix?: ReactNode\n      /** アイコンと並べるテキストとの溝 */\n      gap?: CharRelativeSize | AbstractSize\n    }\ntype IconType = ActualIconType | ReactNode\n\n// VariantProps を使うとコメントが書けない〜🥹\nexport type TextProps<T extends ElementType = 'span'> = VariantProps<typeof classNameGenerator> & {\n  /** テキストコンポーネントの HTML タグ名。初期値は span */\n  as?: T\n  /** 強調するかどうかの真偽値。指定すると em 要素になる */\n  emphasis?: boolean\n  /** 見た目の種類 */\n  styleType?: StyleType\n  /** 設置するアイコン */\n  icon?: IconType\n}\n\nconst iconObjectConverter = (icon: ReactNode) => (icon ? { prefix: icon } : undefined)\n\nconst ActualText = <T extends ElementType = 'span'>({\n  emphasis,\n  styleType,\n  icon: orgIcon,\n  weight = emphasis ? 'bold' : undefined,\n  as: Component = emphasis ? 'em' : 'span',\n  size,\n  italic,\n  color,\n  leading,\n  whiteSpace,\n  maxLines,\n  className,\n  children,\n  ...rest\n}: PropsWithChildren<TextProps<T> & ComponentProps<T>>) => {\n  if (maxLines !== undefined && (maxLines < 1 || maxLines > 6)) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const icon = useObjectAttributes<IconType, ActualIconType>(orgIcon, iconObjectConverter)\n  const actualClassName = useMemo(() => {\n    const styleTypeValues = styleType\n      ? STYLE_TYPE_MAP[styleType as StyleType]\n      : UNDEFINED_STYLE_VALUES\n\n    return classNameGenerator({\n      size: size || styleTypeValues.size,\n      weight: weight || styleTypeValues.weight,\n      color: color || styleTypeValues.color,\n      leading: leading || styleTypeValues.leading,\n      italic,\n      whiteSpace,\n      maxLines,\n      className,\n    })\n  }, [size, weight, italic, color, leading, whiteSpace, maxLines, className, styleType])\n  const wrapperClassName = useMemo(\n    () => (icon ? wrapperClassNameGenerator({ gap: icon.gap || 0.25 }) : ''),\n    [icon],\n  )\n\n  return (\n    <Component {...rest} className={actualClassName}>\n      {icon ? (\n        <span className={wrapperClassName}>\n          {icon.prefix}\n          {children}\n          {icon.suffix}\n        </span>\n      ) : (\n        children\n      )}\n    </Component>\n  )\n}\n\nexport const Text = memo(ActualText) as typeof ActualText\n"],"names":["tv","useObjectAttributes","useMemo","_jsx","_jsxs","memo"],"mappings":"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"}
+{"version":3,"file":"Text.cjs","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\n\nimport type { AbstractSize, CharRelativeSize } from '../../themes'\nimport type { Gap } from '../../types'\n\ntype StyleType =\n  | 'screenTitle'\n  | 'sectionTitle'\n  | 'blockTitle'\n  | 'subBlockTitle'\n  | 'subSubBlockTitle'\n\nexport const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof classNameGenerator> } = {\n  screenTitle: {\n    size: 'XL',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  sectionTitle: {\n    size: 'L',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  blockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n  },\n  subBlockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n  subSubBlockTitle: {\n    size: 'S',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n}\nconst UNDEFINED_STYLE_VALUES = {\n  size: undefined,\n  leading: undefined,\n  weight: undefined,\n  color: undefined,\n}\n\nconst classNameGenerator = tv({\n  variants: {\n    size: {\n      XXS: 'shr-text-2xs',\n      XS: 'shr-text-xs',\n      S: 'shr-text-sm',\n      M: 'shr-text-base',\n      L: 'shr-text-lg',\n      XL: 'shr-text-xl',\n      XXL: 'shr-text-2xl',\n    },\n    weight: {\n      normal: 'shr-font-normal',\n      bold: 'shr-font-bold',\n    },\n    italic: {\n      true: 'shr-italic',\n    },\n    color: {\n      TEXT_BLACK: 'shr-text-black',\n      TEXT_WHITE: 'shr-text-white',\n      TEXT_GREY: 'shr-text-grey',\n      TEXT_DISABLED: 'shr-text-disabled',\n      TEXT_LINK: 'shr-text-link',\n      inherit: 'shr-text-color-inherit',\n    },\n    leading: {\n      NONE: 'shr-leading-none',\n      TIGHT: 'shr-leading-tight',\n      NORMAL: 'shr-leading-normal',\n      LOOSE: 'shr-leading-loose',\n    },\n    whiteSpace: {\n      normal: 'shr-whitespace-normal',\n      nowrap: 'shr-whitespace-nowrap',\n      pre: 'shr-whitespace-pre',\n      'pre-line': 'shr-whitespace-pre-line',\n      'pre-wrap': 'shr-whitespace-pre-wrap',\n    },\n    maxLines: {\n      1: 'shr-inline-block shr-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      2: 'shr-line-clamp-[2]',\n      3: 'shr-line-clamp-[3]',\n      4: 'shr-line-clamp-[4]',\n      5: 'shr-line-clamp-[5]',\n      6: 'shr-line-clamp-[6]',\n    },\n  },\n})\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Icon-extended smarthr-ui-Icon-withText shr-group/iconWrapper shr-inline-flex shr-items-baseline',\n  ],\n  variants: {\n    gap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      '-0.25': '-shr-gap-x-0.25',\n      '-0.5': '-shr-gap-x-0.5',\n      '-0.75': '-shr-gap-x-0.75',\n      '-1': '-shr-gap-x-1',\n      '-1.25': '-shr-gap-x-1.25',\n      '-1.5': '-shr-gap-x-1.5',\n      '-2': '-shr-gap-x-2',\n      '-2.5': '-shr-gap-x-2.5',\n      '-3': '-shr-gap-x-3',\n      '-3.5': '-shr-gap-x-3.5',\n      '-4': '-shr-gap-x-4',\n      '-8': '-shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n  },\n})\n\ntype ActualIconType =\n  | undefined\n  | {\n      /** テキスト左に設置するアイコン */\n      prefix?: ReactNode\n      /** テキスト右に設置するアイコン */\n      suffix?: ReactNode\n      /** アイコンと並べるテキストとの溝 */\n      gap?: CharRelativeSize | AbstractSize\n    }\ntype IconType = ActualIconType | ReactNode\n\n// VariantProps を使うとコメントが書けない〜🥹\nexport type TextProps<T extends ElementType = 'span'> = VariantProps<typeof classNameGenerator> & {\n  /** テキストコンポーネントの HTML タグ名。初期値は span */\n  as?: T\n  /** 強調するかどうかの真偽値。指定すると em 要素になる */\n  emphasis?: boolean\n  /** 見た目の種類 */\n  styleType?: StyleType\n  /** 設置するアイコン */\n  icon?: IconType\n}\n\nconst iconObjectConverter = (icon: ReactNode) => (icon ? { prefix: icon } : undefined)\n\nconst ActualText = <T extends ElementType = 'span'>({\n  emphasis,\n  styleType,\n  icon: orgIcon,\n  weight = emphasis ? 'bold' : undefined,\n  as: Component = emphasis ? 'em' : 'span',\n  size,\n  italic,\n  color,\n  leading,\n  whiteSpace,\n  maxLines,\n  className,\n  children,\n  ...rest\n}: PropsWithChildren<TextProps<T> & ComponentProps<T>>) => {\n  if (maxLines !== undefined && (maxLines < 1 || maxLines > 6)) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const icon = useObjectAttributes<IconType, ActualIconType>(orgIcon, iconObjectConverter)\n  const actualClassName = useMemo(() => {\n    const styleTypeValues = styleType\n      ? STYLE_TYPE_MAP[styleType as StyleType]\n      : UNDEFINED_STYLE_VALUES\n\n    return classNameGenerator({\n      size: size || styleTypeValues.size,\n      weight: weight || styleTypeValues.weight,\n      color: color || styleTypeValues.color,\n      leading: leading || styleTypeValues.leading,\n      italic,\n      whiteSpace,\n      maxLines,\n      className,\n    })\n  }, [size, weight, italic, color, leading, whiteSpace, maxLines, className, styleType])\n  const hasIcon = !!icon\n  const iconGap = icon?.gap\n\n  const wrapperClassName = useMemo(\n    () => (hasIcon ? wrapperClassNameGenerator({ gap: iconGap || 0.25 }) : ''),\n    [hasIcon, iconGap],\n  )\n\n  return (\n    <Component {...rest} className={actualClassName}>\n      {icon ? (\n        <span className={wrapperClassName}>\n          {icon.prefix}\n          {children}\n          {icon.suffix}\n        </span>\n      ) : (\n        children\n      )}\n    </Component>\n  )\n}\n\nexport const Text = memo(ActualText) as typeof ActualText\n"],"names":["tv","useObjectAttributes","useMemo","_jsx","_jsxs","memo"],"mappings":";;;;;;;AAsBO,MAAM,cAAc,GAAoE;AAC7F,IAAA,WAAW,EAAE;AACX,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,WAAW;AACnB,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,WAAW;AACnB,KAAA;;AAEH,MAAM,sBAAsB,GAAG;AAC7B,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,SAAS;CACjB;AAED,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,GAAG,EAAE,cAAc;AACnB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,eAAe;AAClB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,GAAG,EAAE,cAAc;AACpB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,eAAe;AACtB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,YAAY;AACnB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,aAAa,EAAE,mBAAmB;AAClC,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,OAAO,EAAE,wBAAwB;AAClC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,kBAAkB;AACxB,YAAA,KAAK,EAAE,mBAAmB;AAC1B,YAAA,MAAM,EAAE,oBAAoB;AAC5B,YAAA,KAAK,EAAE,mBAAmB;AAC3B,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,MAAM,EAAE,uBAAuB;AAC/B,YAAA,MAAM,EAAE,uBAAuB;AAC/B,YAAA,GAAG,EAAE,oBAAoB;AACzB,YAAA,UAAU,EAAE,yBAAyB;AACrC,YAAA,UAAU,EAAE,yBAAyB;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,CAAC,EAAE,8GAA8G;AACjH,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACxB,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,yBAAyB,GAAGA,QAAE,CAAC;AACnC,IAAA,IAAI,EAAE;QACJ,4GAA4G;AAC7G,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,GAAG,EAAE;AACH,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,IAAI,EAAE,gBAAgB;AACtB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,IAAI,EAAE,gBAAgB;AACtB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,IAAI,EAAE,gBAAgB;AACtB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,GAAG,EAAE,gBAAgB;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,CAAC,EAAE,eAAe;AAClB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,eAAe;AAClB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,aAAa;AACS,SAAA;AAC9B,KAAA;AACF,CAAA,CAAC;AA0BF,MAAM,mBAAmB,GAAG,CAAC,IAAe,MAAM,IAAI,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAEtF,MAAM,UAAU,GAAG,CAAiC,EAClD,QAAQ,EACR,SAAS,EACT,IAAI,EAAE,OAAO,EACb,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,EACtC,EAAE,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,EACxC,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EAC6C,KAAI;AACxD,IAAA,IAAI,QAAQ,KAAK,SAAS,KAAK,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAC,EAAE;AAC5D,QAAA,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC;IACpD;IAEA,MAAM,IAAI,GAAGC,6CAAmB,CAA2B,OAAO,EAAE,mBAAmB,CAAC;AACxF,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAK;QACnC,MAAM,eAAe,GAAG;AACtB,cAAE,cAAc,CAAC,SAAsB;cACrC,sBAAsB;AAE1B,QAAA,OAAO,kBAAkB,CAAC;AACxB,YAAA,IAAI,EAAE,IAAI,IAAI,eAAe,CAAC,IAAI;AAClC,YAAA,MAAM,EAAE,MAAM,IAAI,eAAe,CAAC,MAAM;AACxC,YAAA,KAAK,EAAE,KAAK,IAAI,eAAe,CAAC,KAAK;AACrC,YAAA,OAAO,EAAE,OAAO,IAAI,eAAe,CAAC,OAAO;YAC3C,MAAM;YACN,UAAU;YACV,QAAQ;YACR,SAAS;AACV,SAAA,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AACtF,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI;AACtB,IAAA,MAAM,OAAO,GAAG,IAAI,EAAE,GAAG;AAEzB,IAAA,MAAM,gBAAgB,GAAGA,aAAO,CAC9B,OAAO,OAAO,GAAG,yBAAyB,CAAC,EAAE,GAAG,EAAE,OAAO,IAAI,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAC1E,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB;AAED,IAAA,QACEC,cAAA,CAAC,SAAS,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAC5C,IAAI,IACHC,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAAA,CAC9B,IAAI,CAAC,MAAM,EACX,QAAQ,EACR,IAAI,CAAC,MAAM,CAAA,EAAA,CACP,KAEP,QAAQ,CACT,EAAA,CACS;AAEhB,CAAC;MAEY,IAAI,GAAGC,UAAI,CAAC,UAAU;;;;;"}

package/lib/components/Text/Text.js

@@ -151,7 +151,9 @@ const ActualText = ({ emphasis, styleType, icon: orgIcon, weight = emphasis ? 'b
             className,
         });
     }, [size, weight, italic, color, leading, whiteSpace, maxLines, className, styleType]);
-    const wrapperClassName = useMemo(() => (icon ? wrapperClassNameGenerator({ gap: icon.gap || 0.25 }) : ''), [icon]);
+    const hasIcon = !!icon;
+    const iconGap = icon?.gap;
+    const wrapperClassName = useMemo(() => (hasIcon ? wrapperClassNameGenerator({ gap: iconGap || 0.25 }) : ''), [hasIcon, iconGap]);
     return (jsx(Component, { ...rest, className: actualClassName, children: icon ? (jsxs("span", { className: wrapperClassName, children: [icon.prefix, children, icon.suffix] })) : (children) }));
 };
 const Text = memo(ActualText);

package/lib/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\n\nimport type { AbstractSize, CharRelativeSize } from '../../themes'\nimport type { Gap } from '../../types'\n\ntype StyleType =\n  | 'screenTitle'\n  | 'sectionTitle'\n  | 'blockTitle'\n  | 'subBlockTitle'\n  | 'subSubBlockTitle'\n\nexport const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof classNameGenerator> } = {\n  screenTitle: {\n    size: 'XL',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  sectionTitle: {\n    size: 'L',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  blockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n  },\n  subBlockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n  subSubBlockTitle: {\n    size: 'S',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n}\nconst UNDEFINED_STYLE_VALUES = {\n  size: undefined,\n  leading: undefined,\n  weight: undefined,\n  color: undefined,\n}\n\nconst classNameGenerator = tv({\n  variants: {\n    size: {\n      XXS: 'shr-text-2xs',\n      XS: 'shr-text-xs',\n      S: 'shr-text-sm',\n      M: 'shr-text-base',\n      L: 'shr-text-lg',\n      XL: 'shr-text-xl',\n      XXL: 'shr-text-2xl',\n    },\n    weight: {\n      normal: 'shr-font-normal',\n      bold: 'shr-font-bold',\n    },\n    italic: {\n      true: 'shr-italic',\n    },\n    color: {\n      TEXT_BLACK: 'shr-text-black',\n      TEXT_WHITE: 'shr-text-white',\n      TEXT_GREY: 'shr-text-grey',\n      TEXT_DISABLED: 'shr-text-disabled',\n      TEXT_LINK: 'shr-text-link',\n      inherit: 'shr-text-color-inherit',\n    },\n    leading: {\n      NONE: 'shr-leading-none',\n      TIGHT: 'shr-leading-tight',\n      NORMAL: 'shr-leading-normal',\n      LOOSE: 'shr-leading-loose',\n    },\n    whiteSpace: {\n      normal: 'shr-whitespace-normal',\n      nowrap: 'shr-whitespace-nowrap',\n      pre: 'shr-whitespace-pre',\n      'pre-line': 'shr-whitespace-pre-line',\n      'pre-wrap': 'shr-whitespace-pre-wrap',\n    },\n    maxLines: {\n      1: 'shr-inline-block shr-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      2: 'shr-line-clamp-[2]',\n      3: 'shr-line-clamp-[3]',\n      4: 'shr-line-clamp-[4]',\n      5: 'shr-line-clamp-[5]',\n      6: 'shr-line-clamp-[6]',\n    },\n  },\n})\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Icon-extended smarthr-ui-Icon-withText shr-group/iconWrapper shr-inline-flex shr-items-baseline',\n  ],\n  variants: {\n    gap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      '-0.25': '-shr-gap-x-0.25',\n      '-0.5': '-shr-gap-x-0.5',\n      '-0.75': '-shr-gap-x-0.75',\n      '-1': '-shr-gap-x-1',\n      '-1.25': '-shr-gap-x-1.25',\n      '-1.5': '-shr-gap-x-1.5',\n      '-2': '-shr-gap-x-2',\n      '-2.5': '-shr-gap-x-2.5',\n      '-3': '-shr-gap-x-3',\n      '-3.5': '-shr-gap-x-3.5',\n      '-4': '-shr-gap-x-4',\n      '-8': '-shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n  },\n})\n\ntype ActualIconType =\n  | undefined\n  | {\n      /** テキスト左に設置するアイコン */\n      prefix?: ReactNode\n      /** テキスト右に設置するアイコン */\n      suffix?: ReactNode\n      /** アイコンと並べるテキストとの溝 */\n      gap?: CharRelativeSize | AbstractSize\n    }\ntype IconType = ActualIconType | ReactNode\n\n// VariantProps を使うとコメントが書けない〜🥹\nexport type TextProps<T extends ElementType = 'span'> = VariantProps<typeof classNameGenerator> & {\n  /** テキストコンポーネントの HTML タグ名。初期値は span */\n  as?: T\n  /** 強調するかどうかの真偽値。指定すると em 要素になる */\n  emphasis?: boolean\n  /** 見た目の種類 */\n  styleType?: StyleType\n  /** 設置するアイコン */\n  icon?: IconType\n}\n\nconst iconObjectConverter = (icon: ReactNode) => (icon ? { prefix: icon } : undefined)\n\nconst ActualText = <T extends ElementType = 'span'>({\n  emphasis,\n  styleType,\n  icon: orgIcon,\n  weight = emphasis ? 'bold' : undefined,\n  as: Component = emphasis ? 'em' : 'span',\n  size,\n  italic,\n  color,\n  leading,\n  whiteSpace,\n  maxLines,\n  className,\n  children,\n  ...rest\n}: PropsWithChildren<TextProps<T> & ComponentProps<T>>) => {\n  if (maxLines !== undefined && (maxLines < 1 || maxLines > 6)) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const icon = useObjectAttributes<IconType, ActualIconType>(orgIcon, iconObjectConverter)\n  const actualClassName = useMemo(() => {\n    const styleTypeValues = styleType\n      ? STYLE_TYPE_MAP[styleType as StyleType]\n      : UNDEFINED_STYLE_VALUES\n\n    return classNameGenerator({\n      size: size || styleTypeValues.size,\n      weight: weight || styleTypeValues.weight,\n      color: color || styleTypeValues.color,\n      leading: leading || styleTypeValues.leading,\n      italic,\n      whiteSpace,\n      maxLines,\n      className,\n    })\n  }, [size, weight, italic, color, leading, whiteSpace, maxLines, className, styleType])\n  const wrapperClassName = useMemo(\n    () => (icon ? wrapperClassNameGenerator({ gap: icon.gap || 0.25 }) : ''),\n    [icon],\n  )\n\n  return (\n    <Component {...rest} className={actualClassName}>\n      {icon ? (\n        <span className={wrapperClassName}>\n          {icon.prefix}\n          {children}\n          {icon.suffix}\n        </span>\n      ) : (\n        children\n      )}\n    </Component>\n  )\n}\n\nexport const Text = memo(ActualText) as typeof ActualText\n"],"names":["tv","_jsx","_jsxs"],"mappings":";;;;;AAsBO,MAAM,cAAc,GAAoE;AAC7F,IAAA,WAAW,EAAE;AACX,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,WAAW;AACnB,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,WAAW;AACnB,KAAA;;AAEH,MAAM,sBAAsB,GAAG;AAC7B,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,SAAS;CACjB;AAED,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,GAAG,EAAE,cAAc;AACnB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,eAAe;AAClB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,GAAG,EAAE,cAAc;AACpB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,eAAe;AACtB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,YAAY;AACnB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,aAAa,EAAE,mBAAmB;AAClC,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,OAAO,EAAE,wBAAwB;AAClC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,kBAAkB;AACxB,YAAA,KAAK,EAAE,mBAAmB;AAC1B,YAAA,MAAM,EAAE,oBAAoB;AAC5B,YAAA,KAAK,EAAE,mBAAmB;AAC3B,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,MAAM,EAAE,uBAAuB;AAC/B,YAAA,MAAM,EAAE,uBAAuB;AAC/B,YAAA,GAAG,EAAE,oBAAoB;AACzB,YAAA,UAAU,EAAE,yBAAyB;AACrC,YAAA,UAAU,EAAE,yBAAyB;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,CAAC,EAAE,8GAA8G;AACjH,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACvB,YAAA,CAAC,EAAE,oBAAoB;AACxB,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,yBAAyB,GAAGA,EAAE,CAAC;AACnC,IAAA,IAAI,EAAE;QACJ,4GAA4G;AAC7G,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,GAAG,EAAE;AACH,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,IAAI,EAAE,gBAAgB;AACtB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,IAAI,EAAE,gBAAgB;AACtB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,IAAI,EAAE,gBAAgB;AACtB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,GAAG,EAAE,gBAAgB;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,CAAC,EAAE,eAAe;AAClB,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,eAAe;AAClB,YAAA,EAAE,EAAE,aAAa;AACjB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,aAAa;AACS,SAAA;AAC9B,KAAA;AACF,CAAA,CAAC;AA0BF,MAAM,mBAAmB,GAAG,CAAC,IAAe,MAAM,IAAI,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAEtF,MAAM,UAAU,GAAG,CAAiC,EAClD,QAAQ,EACR,SAAS,EACT,IAAI,EAAE,OAAO,EACb,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,EACtC,EAAE,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,EACxC,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EAC6C,KAAI;AACxD,IAAA,IAAI,QAAQ,KAAK,SAAS,KAAK,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAC,EAAE;AAC5D,QAAA,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC;IACpD;IAEA,MAAM,IAAI,GAAG,mBAAmB,CAA2B,OAAO,EAAE,mBAAmB,CAAC;AACxF,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;QACnC,MAAM,eAAe,GAAG;AACtB,cAAE,cAAc,CAAC,SAAsB;cACrC,sBAAsB;AAE1B,QAAA,OAAO,kBAAkB,CAAC;AACxB,YAAA,IAAI,EAAE,IAAI,IAAI,eAAe,CAAC,IAAI;AAClC,YAAA,MAAM,EAAE,MAAM,IAAI,eAAe,CAAC,MAAM;AACxC,YAAA,KAAK,EAAE,KAAK,IAAI,eAAe,CAAC,KAAK;AACrC,YAAA,OAAO,EAAE,OAAO,IAAI,eAAe,CAAC,OAAO;YAC3C,MAAM;YACN,UAAU;YACV,QAAQ;YACR,SAAS;AACV,SAAA,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AACtF,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAC9B,OAAO,IAAI,GAAG,yBAAyB,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EACxE,CAAC,IAAI,CAAC,CACP;AAED,IAAA,QACEC,GAAA,CAAC,SAAS,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAC5C,IAAI,IACHC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAAA,CAC9B,IAAI,CAAC,MAAM,EACX,QAAQ,EACR,IAAI,CAAC,MAAM,CAAA,EAAA,CACP,KAEP,QAAQ,CACT,EAAA,CACS;AAEhB,CAAC;MAEY,IAAI,GAAG,IAAI,CAAC,UAAU;;;;"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\n\nimport type { AbstractSize, CharRelativeSize } from '../../themes'\nimport type { Gap } from '../../types'\n\ntype StyleType =\n  | 'screenTitle'\n  | 'sectionTitle'\n  | 'blockTitle'\n  | 'subBlockTitle'\n  | 'subSubBlockTitle'\n\nexport const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof classNameGenerator> } = {\n  screenTitle: {\n    size: 'XL',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  sectionTitle: {\n    size: 'L',\n    leading: 'TIGHT',\n    weight: 'normal',\n  },\n  blockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n  },\n  subBlockTitle: {\n    size: 'M',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n  subSubBlockTitle: {\n    size: 'S',\n    leading: 'TIGHT',\n    weight: 'bold',\n    color: 'TEXT_GREY',\n  },\n}\nconst UNDEFINED_STYLE_VALUES = {\n  size: undefined,\n  leading: undefined,\n  weight: undefined,\n  color: undefined,\n}\n\nconst classNameGenerator = tv({\n  variants: {\n    size: {\n      XXS: 'shr-text-2xs',\n      XS: 'shr-text-xs',\n      S: 'shr-text-sm',\n      M: 'shr-text-base',\n      L: 'shr-text-lg',\n      XL: 'shr-text-xl',\n      XXL: 'shr-text-2xl',\n    },\n    weight: {\n      normal: 'shr-font-normal',\n      bold: 'shr-font-bold',\n    },\n    italic: {\n      true: 'shr-italic',\n    },\n    color: {\n      TEXT_BLACK: 'shr-text-black',\n      TEXT_WHITE: 'shr-text-white',\n      TEXT_GREY: 'shr-text-grey',\n      TEXT_DISABLED: 'shr-text-disabled',\n      TEXT_LINK: 'shr-text-link',\n      inherit: 'shr-text-color-inherit',\n    },\n    leading: {\n      NONE: 'shr-leading-none',\n      TIGHT: 'shr-leading-tight',\n      NORMAL: 'shr-leading-normal',\n      LOOSE: 'shr-leading-loose',\n    },\n    whiteSpace: {\n      normal: 'shr-whitespace-normal',\n      nowrap: 'shr-whitespace-nowrap',\n      pre: 'shr-whitespace-pre',\n      'pre-line': 'shr-whitespace-pre-line',\n      'pre-wrap': 'shr-whitespace-pre-wrap',\n    },\n    maxLines: {\n      1: 'shr-inline-block shr-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      2: 'shr-line-clamp-[2]',\n      3: 'shr-line-clamp-[3]',\n      4: 'shr-line-clamp-[4]',\n      5: 'shr-line-clamp-[5]',\n      6: 'shr-line-clamp-[6]',\n    },\n  },\n})\n\nconst wrapperClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Icon-extended smarthr-ui-Icon-withText shr-group/iconWrapper shr-inline-flex shr-items-baseline',\n  ],\n  variants: {\n    gap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      '-0.25': '-shr-gap-x-0.25',\n      '-0.5': '-shr-gap-x-0.5',\n      '-0.75': '-shr-gap-x-0.75',\n      '-1': '-shr-gap-x-1',\n      '-1.25': '-shr-gap-x-1.25',\n      '-1.5': '-shr-gap-x-1.5',\n      '-2': '-shr-gap-x-2',\n      '-2.5': '-shr-gap-x-2.5',\n      '-3': '-shr-gap-x-3',\n      '-3.5': '-shr-gap-x-3.5',\n      '-4': '-shr-gap-x-4',\n      '-8': '-shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n  },\n})\n\ntype ActualIconType =\n  | undefined\n  | {\n      /** テキスト左に設置するアイコン */\n      prefix?: ReactNode\n      /** テキスト右に設置するアイコン */\n      suffix?: ReactNode\n      /** アイコンと並べるテキストとの溝 */\n      gap?: CharRelativeSize | AbstractSize\n    }\ntype IconType = ActualIconType | ReactNode\n\n// VariantProps を使うとコメントが書けない〜🥹\nexport type TextProps<T extends ElementType = 'span'> = VariantProps<typeof classNameGenerator> & {\n  /** テキストコンポーネントの HTML タグ名。初期値は span */\n  as?: T\n  /** 強調するかどうかの真偽値。指定すると em 要素になる */\n  emphasis?: boolean\n  /** 見た目の種類 */\n  styleType?: StyleType\n  /** 設置するアイコン */\n  icon?: IconType\n}\n\nconst iconObjectConverter = (icon: ReactNode) => (icon ? { prefix: icon } : undefined)\n\nconst ActualText = <T extends ElementType = 'span'>({\n  emphasis,\n  styleType,\n  icon: orgIcon,\n  weight = emphasis ? 'bold' : undefined,\n  as: Component = emphasis ? 'em' : 'span',\n  size,\n  italic,\n  color,\n  leading,\n  whiteSpace,\n  maxLines,\n  className,\n  children,\n  ...rest\n}: PropsWithChildren<TextProps<T> & ComponentProps<T>>) => {\n  if (maxLines !== undefined && (maxLines < 1 || maxLines > 6)) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const icon = useObjectAttributes<IconType, ActualIconType>(orgIcon, iconObjectConverter)\n  const actualClassName = useMemo(() => {\n    const styleTypeValues = styleType\n      ? STYLE_TYPE_MAP[styleType as StyleType]\n      : UNDEFINED_STYLE_VALUES\n\n    return classNameGenerator({\n      size: size || styleTypeValues.size,\n      weight: weight || styleTypeValues.weight,\n      color: color || styleTypeValues.color,\n      leading: leading || styleTypeValues.leading,\n      italic,\n      whiteSpace,\n      maxLines,\n      className,\n    })\n  }, [size, weight, italic, color, leading, whiteSpace, maxLines, className, styleType])\n  const hasIcon = !!icon\n  const iconGap = icon?.gap\n\n  const wrapperClassName = useMemo(\n    () => (hasIcon ? wrapperClassNameGenerator({ gap: iconGap || 0.25 }) : ''),\n    [hasIcon, iconGap],\n  )\n\n  return (\n    <Component {...rest} className={actualClassName}>\n      {icon ? (\n        <span className={wrapperClassName}>\n          {icon.prefix}\n          {children}\n          {icon.suffix}\n        </span>\n      ) : (\n        children\n      )}\n    </Component>\n  )\n}\n\nexport const Text = memo(ActualText) as typeof ActualText\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}

package/lib/components/TextLink/TextLink.cjs

@@ -36,37 +36,23 @@ const prefixWrapperClassName = prefixWrapper();
 const suffixWrapperClassName = suffixWrapper();
 const ActualTextLink = React.forwardRef(({ elementAs, href, target, rel, onClick, children, prefix, suffix, className, size, ...rest }, ref) => {
     const Anchor = elementAs || 'a';
-    const actualSuffix = React.useMemo(() => {
-        // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
-        if (target === '_blank' && !prefix && suffix === undefined) {
-            return jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, {});
-        }
-        return suffix;
-    }, [prefix, suffix, target]);
-    const actualHref = React.useMemo(() => {
-        if (href) {
-            return href;
-        }
-        if (onClick) {
-            return '';
-        }
-        return undefined;
-    }, [href, onClick]);
-    const actualRel = React.useMemo(() => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel), [rel, target]);
+    // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
+    const actualSuffix = target === '_blank' && !prefix && suffix === undefined ? jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, {}) : suffix;
+    const actualHref = href ? href : onClick ? '' : undefined;
+    const actualRel = rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel;
     const anchorClassName = React.useMemo(() => anchor({ size, className }), [size, className]);
-    const actualOnClick = React.useMemo(() => {
-        if (!onClick) {
-            return undefined;
+    const onClickRef = React.useRef(onClick);
+    onClickRef.current = onClick;
+    const actualOnClick = React.useCallback((e) => {
+        if (!onClickRef.current) {
+            return;
         }
-        if (href) {
-            return onClick;
-        }
-        return (e) => {
+        if (!href) {
             e.preventDefault();
-            onClick(e);
-        };
-    }, [onClick, href]);
-    return (jsxRuntime.jsxs(Anchor, { ...rest, ref: ref, href: actualHref, target: target, rel: actualRel, onClick: actualOnClick, className: anchorClassName, children: [prefix && jsxRuntime.jsx("span", { className: prefixWrapperClassName, children: prefix }), children, actualSuffix && jsxRuntime.jsx("span", { className: suffixWrapperClassName, children: actualSuffix })] }));
+        }
+        onClickRef.current(e);
+    }, [href]);
+    return (jsxRuntime.jsxs(Anchor, { ...rest, ref: ref, href: actualHref, target: target, rel: actualRel, onClick: onClick && actualOnClick, className: anchorClassName, children: [prefix && jsxRuntime.jsx("span", { className: prefixWrapperClassName, children: prefix }), children, actualSuffix && jsxRuntime.jsx("span", { className: suffixWrapperClassName, children: actualSuffix })] }));
 });
 const TextLink = React.memo(ActualTextLink);
 

package/lib/components/TextLink/TextLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.cjs","sources":["../../../src/components/TextLink/TextLink.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type MouseEvent,\n  type PropsWithoutRef,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  (keyof Props<T> & ElementRefProps<T>) | 'color'\n>\n\ntype Props<T extends ElementType> = VariantProps<typeof classNameGenerator> & {\n  /** リンクをクリックした時に発火するコールバック関数 */\n  onClick?: (e: MouseEvent) => void\n  /** テキストの前に表示するアイコン */\n  prefix?: ReactNode\n  /** テキストの後ろに表示するアイコン */\n  suffix?: ReactNode\n  /** TextLinkを利用しつつnext/linkなどと併用する場合に指定する */\n  elementAs?: T\n}\n\ntype TextLinkComponent = <T extends ElementType = 'a'>(\n  props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: [\n      'shr-text-link shr-no-underline shr-shadow-underline',\n      'forced-colors:shr-underline',\n      '[&:not([href])]:shr-shadow-none [&:not([href])]:forced-colors:shr-no-underline',\n      '[.smarthr-ui-Th_&]:shr-text-link-darken',\n    ],\n    prefixWrapper: 'shr-me-0.25 shr-align-middle',\n    suffixWrapper: 'shr-ms-0.25 shr-align-middle',\n  },\n  variants: {\n    size: {\n      XS: {\n        anchor: 'shr-text-xs',\n      },\n      S: {\n        anchor: 'shr-text-sm',\n      },\n      M: {\n        anchor: 'shr-text-base',\n      },\n    },\n  },\n})\nconst { anchor, prefixWrapper, suffixWrapper } = classNameGenerator()\nconst prefixWrapperClassName = prefixWrapper()\nconst suffixWrapperClassName = suffixWrapper()\n\nconst ActualTextLink: TextLinkComponent = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      elementAs,\n      href,\n      target,\n      rel,\n      onClick,\n      children,\n      prefix,\n      suffix,\n      className,\n      size,\n      ...rest\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ) => {\n    const Anchor = elementAs || 'a'\n    const actualSuffix = useMemo(() => {\n      // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n      if (target === '_blank' && !prefix && suffix === undefined) {\n        return <OpenInNewTabIcon />\n      }\n\n      return suffix\n    }, [prefix, suffix, target])\n    const actualHref = useMemo(() => {\n      if (href) {\n        return href\n      }\n\n      if (onClick) {\n        return ''\n      }\n\n      return undefined\n    }, [href, onClick])\n    const actualRel = useMemo(\n      () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),\n      [rel, target],\n    )\n    const anchorClassName = useMemo(() => anchor({ size, className }), [size, className])\n\n    const actualOnClick = useMemo(() => {\n      if (!onClick) {\n        return undefined\n      }\n\n      if (href) {\n        return onClick\n      }\n\n      return (e: MouseEvent) => {\n        e.preventDefault()\n        onClick(e)\n      }\n    }, [onClick, href])\n\n    return (\n      <Anchor\n        {...rest}\n        ref={ref}\n        href={actualHref}\n        target={target}\n        rel={actualRel}\n        onClick={actualOnClick}\n        className={anchorClassName}\n      >\n        {prefix && <span className={prefixWrapperClassName}>{prefix}</span>}\n        {children}\n        {actualSuffix && <span className={suffixWrapperClassName}>{actualSuffix}</span>}\n      </Anchor>\n    )\n  },\n)\n\nexport const TextLink = memo(ActualTextLink) as typeof ActualTextLink\n"],"names":["tv","forwardRef","useMemo","_jsx","OpenInNewTabIcon","_jsxs","memo"],"mappings":";;;;;;;;AAsCA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;YACN,qDAAqD;YACrD,6BAA6B;YAC7B,gFAAgF;YAChF,yCAAyC;AAC1C,SAAA;AACD,QAAA,aAAa,EAAE,8BAA8B;AAC7C,QAAA,aAAa,EAAE,8BAA8B;AAC9C,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE;AACF,gBAAA,MAAM,EAAE,aAAa;AACtB,aAAA;AACD,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,aAAa;AACtB,aAAA;AACD,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,eAAe;AACxB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AACF,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE;AACrE,MAAM,sBAAsB,GAAG,aAAa,EAAE;AAC9C,MAAM,sBAAsB,GAAG,aAAa,EAAE;AAE9C,MAAM,cAAc,GAAsBC,gBAAU,CAClD,CACE,EACE,SAAS,EACT,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,IAAI,EACJ,GAAG,IAAI,EACqC,EAC9C,GAAuB,KACrB;AACF,IAAA,MAAM,MAAM,GAAG,SAAS,IAAI,GAAG;AAC/B,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,MAAK;;QAEhC,IAAI,MAAM,KAAK,QAAQ,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,SAAS,EAAE;YAC1D,OAAOC,cAAA,CAACC,iDAAgB,EAAA,EAAA,CAAG;QAC7B;AAEA,QAAA,OAAO,MAAM;IACf,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAC5B,IAAA,MAAM,UAAU,GAAGF,aAAO,CAAC,MAAK;QAC9B,IAAI,IAAI,EAAE;AACR,YAAA,OAAO,IAAI;QACb;QAEA,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,EAAE;QACX;AAEA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACnB,IAAA,MAAM,SAAS,GAAGA,aAAO,CACvB,OAAO,GAAG,KAAK,SAAS,IAAI,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,GAAG,CAAC,EAC9E,CAAC,GAAG,EAAE,MAAM,CAAC,CACd;IACD,MAAM,eAAe,GAAGA,aAAO,CAAC,MAAM,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAErF,IAAA,MAAM,aAAa,GAAGA,aAAO,CAAC,MAAK;QACjC,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS;QAClB;QAEA,IAAI,IAAI,EAAE;AACR,YAAA,OAAO,OAAO;QAChB;QAEA,OAAO,CAAC,CAAa,KAAI;YACvB,CAAC,CAAC,cAAc,EAAE;YAClB,OAAO,CAAC,CAAC,CAAC;AACZ,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEnB,QACEG,eAAA,CAAC,MAAM,EAAA,EAAA,GACD,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAEzB,MAAM,IAAIF,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,sBAAsB,EAAA,QAAA,EAAG,MAAM,EAAA,CAAQ,EAClE,QAAQ,EACR,YAAY,IAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,sBAAsB,EAAA,QAAA,EAAG,YAAY,EAAA,CAAQ,CAAA,EAAA,CACxE;AAEb,CAAC,CACF;MAEY,QAAQ,GAAGG,UAAI,CAAC,cAAc;;;;"}
+{"version":3,"file":"TextLink.cjs","sources":["../../../src/components/TextLink/TextLink.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type MouseEvent,\n  type PropsWithoutRef,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  (keyof Props<T> & ElementRefProps<T>) | 'color'\n>\n\ntype Props<T extends ElementType> = VariantProps<typeof classNameGenerator> & {\n  /** リンクをクリックした時に発火するコールバック関数 */\n  onClick?: (e: MouseEvent) => void\n  /** テキストの前に表示するアイコン */\n  prefix?: ReactNode\n  /** テキストの後ろに表示するアイコン */\n  suffix?: ReactNode\n  /** TextLinkを利用しつつnext/linkなどと併用する場合に指定する */\n  elementAs?: T\n}\n\ntype TextLinkComponent = <T extends ElementType = 'a'>(\n  props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: [\n      'shr-text-link shr-no-underline shr-shadow-underline',\n      'forced-colors:shr-underline',\n      '[&:not([href])]:shr-shadow-none [&:not([href])]:forced-colors:shr-no-underline',\n      '[.smarthr-ui-Th_&]:shr-text-link-darken',\n    ],\n    prefixWrapper: 'shr-me-0.25 shr-align-middle',\n    suffixWrapper: 'shr-ms-0.25 shr-align-middle',\n  },\n  variants: {\n    size: {\n      XS: {\n        anchor: 'shr-text-xs',\n      },\n      S: {\n        anchor: 'shr-text-sm',\n      },\n      M: {\n        anchor: 'shr-text-base',\n      },\n    },\n  },\n})\nconst { anchor, prefixWrapper, suffixWrapper } = classNameGenerator()\nconst prefixWrapperClassName = prefixWrapper()\nconst suffixWrapperClassName = suffixWrapper()\n\nconst ActualTextLink: TextLinkComponent = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      elementAs,\n      href,\n      target,\n      rel,\n      onClick,\n      children,\n      prefix,\n      suffix,\n      className,\n      size,\n      ...rest\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ) => {\n    const Anchor = elementAs || 'a'\n    // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n    const actualSuffix =\n      target === '_blank' && !prefix && suffix === undefined ? <OpenInNewTabIcon /> : suffix\n    const actualHref = href ? href : onClick ? '' : undefined\n    const actualRel = rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel\n    const anchorClassName = useMemo(() => anchor({ size, className }), [size, className])\n\n    const onClickRef = useRef(onClick)\n    onClickRef.current = onClick\n\n    const actualOnClick = useCallback(\n      (e: MouseEvent) => {\n        if (!onClickRef.current) {\n          return\n        }\n\n        if (!href) {\n          e.preventDefault()\n        }\n        onClickRef.current(e)\n      },\n      [href],\n    )\n\n    return (\n      <Anchor\n        {...rest}\n        ref={ref}\n        href={actualHref}\n        target={target}\n        rel={actualRel}\n        onClick={onClick && actualOnClick}\n        className={anchorClassName}\n      >\n        {prefix && <span className={prefixWrapperClassName}>{prefix}</span>}\n        {children}\n        {actualSuffix && <span className={suffixWrapperClassName}>{actualSuffix}</span>}\n      </Anchor>\n    )\n  },\n)\n\nexport const TextLink = memo(ActualTextLink) as typeof ActualTextLink\n"],"names":["tv","forwardRef","_jsx","OpenInNewTabIcon","useMemo","useRef","useCallback","_jsxs","memo"],"mappings":";;;;;;;;AAwCA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;YACN,qDAAqD;YACrD,6BAA6B;YAC7B,gFAAgF;YAChF,yCAAyC;AAC1C,SAAA;AACD,QAAA,aAAa,EAAE,8BAA8B;AAC7C,QAAA,aAAa,EAAE,8BAA8B;AAC9C,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE;AACF,gBAAA,MAAM,EAAE,aAAa;AACtB,aAAA;AACD,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,aAAa;AACtB,aAAA;AACD,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,eAAe;AACxB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AACF,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE;AACrE,MAAM,sBAAsB,GAAG,aAAa,EAAE;AAC9C,MAAM,sBAAsB,GAAG,aAAa,EAAE;AAE9C,MAAM,cAAc,GAAsBC,gBAAU,CAClD,CACE,EACE,SAAS,EACT,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,IAAI,EACJ,GAAG,IAAI,EACqC,EAC9C,GAAuB,KACrB;AACF,IAAA,MAAM,MAAM,GAAG,SAAS,IAAI,GAAG;;IAE/B,MAAM,YAAY,GAChB,MAAM,KAAK,QAAQ,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,SAAS,GAAGC,cAAA,CAACC,iDAAgB,KAAG,GAAG,MAAM;AACxF,IAAA,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE,GAAG,SAAS;AACzD,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,SAAS,IAAI,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,GAAG;IACxF,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAM,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAErF,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAC,OAAO,CAAC;AAClC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,aAAa,GAAGC,iBAAW,CAC/B,CAAC,CAAa,KAAI;AAChB,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACvB;QACF;QAEA,IAAI,CAAC,IAAI,EAAE;YACT,CAAC,CAAC,cAAc,EAAE;QACpB;AACA,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AACvB,IAAA,CAAC,EACD,CAAC,IAAI,CAAC,CACP;IAED,QACEC,eAAA,CAAC,MAAM,EAAA,EAAA,GACD,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO,IAAI,aAAa,EACjC,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAEzB,MAAM,IAAIL,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,sBAAsB,EAAA,QAAA,EAAG,MAAM,EAAA,CAAQ,EAClE,QAAQ,EACR,YAAY,IAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,sBAAsB,EAAA,QAAA,EAAG,YAAY,EAAA,CAAQ,CAAA,EAAA,CACxE;AAEb,CAAC,CACF;MAEY,QAAQ,GAAGM,UAAI,CAAC,cAAc;;;;"}

package/lib/components/TextLink/TextLink.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo, memo } from 'react';
+import { forwardRef, useMemo, useRef, useCallback, memo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../Icon/generateIcon.js';
 import { OpenInNewTabIcon } from '../Icon/OpenInNewTabIcon.js';
@@ -34,37 +34,23 @@ const prefixWrapperClassName = prefixWrapper();
 const suffixWrapperClassName = suffixWrapper();
 const ActualTextLink = forwardRef(({ elementAs, href, target, rel, onClick, children, prefix, suffix, className, size, ...rest }, ref) => {
     const Anchor = elementAs || 'a';
-    const actualSuffix = useMemo(() => {
-        // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
-        if (target === '_blank' && !prefix && suffix === undefined) {
-            return jsx(OpenInNewTabIcon, {});
-        }
-        return suffix;
-    }, [prefix, suffix, target]);
-    const actualHref = useMemo(() => {
-        if (href) {
-            return href;
-        }
-        if (onClick) {
-            return '';
-        }
-        return undefined;
-    }, [href, onClick]);
-    const actualRel = useMemo(() => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel), [rel, target]);
+    // target="_blank" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている
+    const actualSuffix = target === '_blank' && !prefix && suffix === undefined ? jsx(OpenInNewTabIcon, {}) : suffix;
+    const actualHref = href ? href : onClick ? '' : undefined;
+    const actualRel = rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel;
     const anchorClassName = useMemo(() => anchor({ size, className }), [size, className]);
-    const actualOnClick = useMemo(() => {
-        if (!onClick) {
-            return undefined;
+    const onClickRef = useRef(onClick);
+    onClickRef.current = onClick;
+    const actualOnClick = useCallback((e) => {
+        if (!onClickRef.current) {
+            return;
         }
-        if (href) {
-            return onClick;
-        }
-        return (e) => {
+        if (!href) {
             e.preventDefault();
-            onClick(e);
-        };
-    }, [onClick, href]);
-    return (jsxs(Anchor, { ...rest, ref: ref, href: actualHref, target: target, rel: actualRel, onClick: actualOnClick, className: anchorClassName, children: [prefix && jsx("span", { className: prefixWrapperClassName, children: prefix }), children, actualSuffix && jsx("span", { className: suffixWrapperClassName, children: actualSuffix })] }));
+        }
+        onClickRef.current(e);
+    }, [href]);
+    return (jsxs(Anchor, { ...rest, ref: ref, href: actualHref, target: target, rel: actualRel, onClick: onClick && actualOnClick, className: anchorClassName, children: [prefix && jsx("span", { className: prefixWrapperClassName, children: prefix }), children, actualSuffix && jsx("span", { className: suffixWrapperClassName, children: actualSuffix })] }));
 });
 const TextLink = memo(ActualTextLink);
 

package/lib/components/TextLink/TextLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.js","sources":["../../../src/components/TextLink/TextLink.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type MouseEvent,\n  type PropsWithoutRef,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  (keyof Props<T> & ElementRefProps<T>) | 'color'\n>\n\ntype Props<T extends ElementType> = VariantProps<typeof classNameGenerator> & {\n  /** リンクをクリックした時に発火するコールバック関数 */\n  onClick?: (e: MouseEvent) => void\n  /** テキストの前に表示するアイコン */\n  prefix?: ReactNode\n  /** テキストの後ろに表示するアイコン */\n  suffix?: ReactNode\n  /** TextLinkを利用しつつnext/linkなどと併用する場合に指定する */\n  elementAs?: T\n}\n\ntype TextLinkComponent = <T extends ElementType = 'a'>(\n  props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: [\n      'shr-text-link shr-no-underline shr-shadow-underline',\n      'forced-colors:shr-underline',\n      '[&:not([href])]:shr-shadow-none [&:not([href])]:forced-colors:shr-no-underline',\n      '[.smarthr-ui-Th_&]:shr-text-link-darken',\n    ],\n    prefixWrapper: 'shr-me-0.25 shr-align-middle',\n    suffixWrapper: 'shr-ms-0.25 shr-align-middle',\n  },\n  variants: {\n    size: {\n      XS: {\n        anchor: 'shr-text-xs',\n      },\n      S: {\n        anchor: 'shr-text-sm',\n      },\n      M: {\n        anchor: 'shr-text-base',\n      },\n    },\n  },\n})\nconst { anchor, prefixWrapper, suffixWrapper } = classNameGenerator()\nconst prefixWrapperClassName = prefixWrapper()\nconst suffixWrapperClassName = suffixWrapper()\n\nconst ActualTextLink: TextLinkComponent = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      elementAs,\n      href,\n      target,\n      rel,\n      onClick,\n      children,\n      prefix,\n      suffix,\n      className,\n      size,\n      ...rest\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ) => {\n    const Anchor = elementAs || 'a'\n    const actualSuffix = useMemo(() => {\n      // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n      if (target === '_blank' && !prefix && suffix === undefined) {\n        return <OpenInNewTabIcon />\n      }\n\n      return suffix\n    }, [prefix, suffix, target])\n    const actualHref = useMemo(() => {\n      if (href) {\n        return href\n      }\n\n      if (onClick) {\n        return ''\n      }\n\n      return undefined\n    }, [href, onClick])\n    const actualRel = useMemo(\n      () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),\n      [rel, target],\n    )\n    const anchorClassName = useMemo(() => anchor({ size, className }), [size, className])\n\n    const actualOnClick = useMemo(() => {\n      if (!onClick) {\n        return undefined\n      }\n\n      if (href) {\n        return onClick\n      }\n\n      return (e: MouseEvent) => {\n        e.preventDefault()\n        onClick(e)\n      }\n    }, [onClick, href])\n\n    return (\n      <Anchor\n        {...rest}\n        ref={ref}\n        href={actualHref}\n        target={target}\n        rel={actualRel}\n        onClick={actualOnClick}\n        className={anchorClassName}\n      >\n        {prefix && <span className={prefixWrapperClassName}>{prefix}</span>}\n        {children}\n        {actualSuffix && <span className={suffixWrapperClassName}>{actualSuffix}</span>}\n      </Anchor>\n    )\n  },\n)\n\nexport const TextLink = memo(ActualTextLink) as typeof ActualTextLink\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"TextLink.js","sources":["../../../src/components/TextLink/TextLink.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type MouseEvent,\n  type PropsWithoutRef,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../Icon'\n\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  (keyof Props<T> & ElementRefProps<T>) | 'color'\n>\n\ntype Props<T extends ElementType> = VariantProps<typeof classNameGenerator> & {\n  /** リンクをクリックした時に発火するコールバック関数 */\n  onClick?: (e: MouseEvent) => void\n  /** テキストの前に表示するアイコン */\n  prefix?: ReactNode\n  /** テキストの後ろに表示するアイコン */\n  suffix?: ReactNode\n  /** TextLinkを利用しつつnext/linkなどと併用する場合に指定する */\n  elementAs?: T\n}\n\ntype TextLinkComponent = <T extends ElementType = 'a'>(\n  props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: [\n      'shr-text-link shr-no-underline shr-shadow-underline',\n      'forced-colors:shr-underline',\n      '[&:not([href])]:shr-shadow-none [&:not([href])]:forced-colors:shr-no-underline',\n      '[.smarthr-ui-Th_&]:shr-text-link-darken',\n    ],\n    prefixWrapper: 'shr-me-0.25 shr-align-middle',\n    suffixWrapper: 'shr-ms-0.25 shr-align-middle',\n  },\n  variants: {\n    size: {\n      XS: {\n        anchor: 'shr-text-xs',\n      },\n      S: {\n        anchor: 'shr-text-sm',\n      },\n      M: {\n        anchor: 'shr-text-base',\n      },\n    },\n  },\n})\nconst { anchor, prefixWrapper, suffixWrapper } = classNameGenerator()\nconst prefixWrapperClassName = prefixWrapper()\nconst suffixWrapperClassName = suffixWrapper()\n\nconst ActualTextLink: TextLinkComponent = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      elementAs,\n      href,\n      target,\n      rel,\n      onClick,\n      children,\n      prefix,\n      suffix,\n      className,\n      size,\n      ...rest\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ) => {\n    const Anchor = elementAs || 'a'\n    // target=\"_blank\" だが OpenInNewTabIcon を表示したくない場合 suffix に null を指定すれば表示しないようにしている\n    const actualSuffix =\n      target === '_blank' && !prefix && suffix === undefined ? <OpenInNewTabIcon /> : suffix\n    const actualHref = href ? href : onClick ? '' : undefined\n    const actualRel = rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel\n    const anchorClassName = useMemo(() => anchor({ size, className }), [size, className])\n\n    const onClickRef = useRef(onClick)\n    onClickRef.current = onClick\n\n    const actualOnClick = useCallback(\n      (e: MouseEvent) => {\n        if (!onClickRef.current) {\n          return\n        }\n\n        if (!href) {\n          e.preventDefault()\n        }\n        onClickRef.current(e)\n      },\n      [href],\n    )\n\n    return (\n      <Anchor\n        {...rest}\n        ref={ref}\n        href={actualHref}\n        target={target}\n        rel={actualRel}\n        onClick={onClick && actualOnClick}\n        className={anchorClassName}\n      >\n        {prefix && <span className={prefixWrapperClassName}>{prefix}</span>}\n        {children}\n        {actualSuffix && <span className={suffixWrapperClassName}>{actualSuffix}</span>}\n      </Anchor>\n    )\n  },\n)\n\nexport const TextLink = memo(ActualTextLink) as typeof ActualTextLink\n"],"names":["tv","_jsx","_jsxs"],"mappings":";;;;;;AAwCA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;YACN,qDAAqD;YACrD,6BAA6B;YAC7B,gFAAgF;YAChF,yCAAyC;AAC1C,SAAA;AACD,QAAA,aAAa,EAAE,8BAA8B;AAC7C,QAAA,aAAa,EAAE,8BAA8B;AAC9C,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE;AACF,gBAAA,MAAM,EAAE,aAAa;AACtB,aAAA;AACD,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,aAAa;AACtB,aAAA;AACD,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,eAAe;AACxB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AACF,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE;AACrE,MAAM,sBAAsB,GAAG,aAAa,EAAE;AAC9C,MAAM,sBAAsB,GAAG,aAAa,EAAE;AAE9C,MAAM,cAAc,GAAsB,UAAU,CAClD,CACE,EACE,SAAS,EACT,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,IAAI,EACJ,GAAG,IAAI,EACqC,EAC9C,GAAuB,KACrB;AACF,IAAA,MAAM,MAAM,GAAG,SAAS,IAAI,GAAG;;IAE/B,MAAM,YAAY,GAChB,MAAM,KAAK,QAAQ,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,SAAS,GAAGC,GAAA,CAAC,gBAAgB,KAAG,GAAG,MAAM;AACxF,IAAA,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE,GAAG,SAAS;AACzD,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,SAAS,IAAI,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,GAAG;IACxF,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAErF,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;AAClC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAa,KAAI;AAChB,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACvB;QACF;QAEA,IAAI,CAAC,IAAI,EAAE;YACT,CAAC,CAAC,cAAc,EAAE;QACpB;AACA,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AACvB,IAAA,CAAC,EACD,CAAC,IAAI,CAAC,CACP;IAED,QACEC,IAAA,CAAC,MAAM,EAAA,EAAA,GACD,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO,IAAI,aAAa,EACjC,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAEzB,MAAM,IAAID,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,sBAAsB,EAAA,QAAA,EAAG,MAAM,EAAA,CAAQ,EAClE,QAAQ,EACR,YAAY,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,sBAAsB,EAAA,QAAA,EAAG,YAAY,EAAA,CAAQ,CAAA,EAAA,CACxE;AAEb,CAAC,CACF;MAEY,QAAQ,GAAG,IAAI,CAAC,cAAc;;;;"}

package/lib/components/TextLink/UpwardLink/UpwardLink.cjs

@@ -9,12 +9,12 @@ require('../../../themes/createSpacing.cjs');
 require('../../../_virtual/index.cjs');
 require('../../../_virtual/index2.cjs');
 require('../../../themes/createColor.cjs');
+require('../../../themes/createTextColor.cjs');
+require('styled-components');
 require('../../../themes/createShadow/defaultShadow.cjs');
 require('../../../themes/createWidth.cjs');
 require('../../../themes/createBackgroundColor.cjs');
 require('../../../themes/createBorder.cjs');
-require('styled-components');
-require('../../../themes/createTextColor.cjs');
 require('../../../hooks/useTheme.cjs');
 var components_Icon_FaIcon = require('../../Icon/FaIcon.cjs');
 require('../../Icon/generateIcon.cjs');

package/lib/components/TextLink/UpwardLink/UpwardLink.js

@@ -7,12 +7,12 @@ import '../../../themes/createSpacing.js';
 import '../../../_virtual/index.js';
 import '../../../_virtual/index2.js';
 import '../../../themes/createColor.js';
+import '../../../themes/createTextColor.js';
+import 'styled-components';
 import '../../../themes/createShadow/defaultShadow.js';
 import '../../../themes/createWidth.js';
 import '../../../themes/createBackgroundColor.js';
 import '../../../themes/createBorder.js';
-import 'styled-components';
-import '../../../themes/createTextColor.js';
 import '../../../hooks/useTheme.js';
 import { FaArrowLeftIcon } from '../../Icon/FaIcon.js';
 import '../../Icon/generateIcon.js';

package/lib/components/Textarea/Textarea.cjs

@@ -14,14 +14,14 @@ var libs_debounce = require('../../libs/debounce.cjs');
 require('../../themes/createSpacing.cjs');
 var themes_createFontSize = require('../../themes/createFontSize.cjs');
 require('../../themes/createColor.cjs');
-require('../../themes/createShadow/defaultShadow.cjs');
-require('../../themes/createWidth.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
 require('../../themes/createBackgroundColor.cjs');
 require('../../themes/createBorder.cjs');
-require('styled-components');
-require('../../themes/createTextColor.cjs');
 var components_VisuallyHiddenText_VisuallyHiddenText = require('../VisuallyHiddenText/VisuallyHiddenText.cjs');
 
 const getStringLength = (value) => {
@@ -76,6 +76,8 @@ const Textarea = React.forwardRef(({ autoFocus, maxLetters, width, className, au
     const [interimRows, setInterimRows] = React.useState(rows);
     const [count, setCount] = React.useState(currentValue ? getStringLength(currentValue) : 0);
     const [srCounterMessage, setSrCounterMessage] = React.useState('');
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
     const buildAvailableLetters = React.useCallback((availableLetters) => (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters } })), []);
     const buildmaxLettersExceeded = React.useCallback((exceededLetters) => (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters } })), []);
     const buildScreenReaderMaxLettersDescription = React.useCallback((internalMaxLetters) => (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters: internalMaxLetters } })), []);
@@ -121,9 +123,8 @@ const Textarea = React.forwardRef(({ autoFocus, maxLetters, width, className, au
             e.target.rows = currentRows;
             setInterimRows(currentRows);
         }
-        onChange?.(e);
+        onChangeRef.current?.(e);
     }, [
-        onChange,
         debouncedUpdateCount,
         debouncedUpdateSrCounterMessage,
         autoResize,

package/lib/components/Textarea/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type ReactNode,\n  forwardRef,\n  startTransition,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype AbstractProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'textarea'>, keyof AbstractProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    textareaEl: [\n      'smarthr-ui-Textarea-textarea',\n      'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      'placeholder:shr-text-grey',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black',\n  },\n  variants: {\n    error: {\n      true: {\n        counter: 'shr-text-danger',\n      },\n    },\n  },\n  defaultVariants: {\n    error: false,\n  },\n})\n\nconst calculateIdealRows = (\n  element: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!element) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    element.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(\n  (\n    {\n      autoFocus,\n      maxLetters,\n      width,\n      className,\n      autoResize = false,\n      maxRows = Infinity,\n      rows = 2,\n      error,\n      onChange,\n      value,\n      defaultValue,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const maxLettersId = useId()\n    const maxLettersNoticeId = `${maxLettersId}-notice`\n    const actualMaxLettersId = maxLetters ? maxLettersId : undefined\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const currentValue = defaultValue || value\n    const [interimRows, setInterimRows] = useState(rows)\n    const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)\n    const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n    const buildAvailableLetters = useCallback(\n      (availableLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/availableLetters\"\n          defaultText=\"あと{availableLetters}文字\"\n          values={{ availableLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildmaxLettersExceeded = useCallback(\n      (exceededLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n          defaultText=\"{exceededLetters}文字オーバー\"\n          values={{ exceededLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildScreenReaderMaxLettersDescription = useCallback(\n      (internalMaxLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters: internalMaxLetters }}\n        />\n      ),\n      [],\n    )\n\n    const getCounterMessage = useCallback(\n      (counterValue: number) => {\n        if (maxLetters === undefined) return\n\n        if (counterValue > maxLetters) {\n          // {count}文字オーバー\n          return <>{buildmaxLettersExceeded(counterValue - maxLetters)}</>\n        }\n\n        // あと{count}文字\n        return <>{buildAvailableLetters(maxLetters - counterValue)}</>\n      },\n      [maxLetters, buildAvailableLetters, buildmaxLettersExceeded],\n    )\n\n    const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])\n\n    useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n      ref,\n      () => textareaRef.current,\n    )\n\n    const debouncedUpdateCount = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                setCount(getStringLength(newValue))\n              })\n            }, 200)\n          : undefined,\n      [maxLetters],\n    )\n\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const debouncedUpdateSrCounterMessage = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                const counterText = getCounterMessage(getStringLength(newValue))\n\n                if (counterText) {\n                  setSrCounterMessage(counterText)\n                }\n              })\n            }, 1000)\n          : undefined,\n      [maxLetters, getCounterMessage],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = e.target.value\n        debouncedUpdateCount?.(newValue)\n        debouncedUpdateSrCounterMessage?.(newValue)\n\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = rows\n\n        if (autoResize) {\n          const currentRows = calculateIdealRows(e.target, maxRows, theme.leading.NORMAL)\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        onChange?.(e)\n      },\n      [\n        onChange,\n        debouncedUpdateCount,\n        debouncedUpdateSrCounterMessage,\n        autoResize,\n        maxRows,\n        rows,\n        theme.leading.NORMAL,\n      ],\n    )\n\n    // autoFocus時に、フォーカスを当てる\n    useEffect(() => {\n      if (autoFocus && textareaRef && textareaRef.current) {\n        textareaRef.current.focus()\n      }\n    }, [autoFocus])\n\n    // autoResize時に、初期値での高さを指定\n    useEffect(() => {\n      if (autoResize && textareaRef.current) {\n        setInterimRows(calculateIdealRows(textareaRef.current, maxRows, theme.leading.NORMAL))\n      }\n    }, [setInterimRows, maxRows, autoResize, theme.leading.NORMAL])\n\n    // value 変更時にもカウントを更新する\n    useEffect(() => {\n      if (value && maxLetters) {\n        debouncedUpdateCount?.(value)\n        debouncedUpdateSrCounterMessage?.(value)\n      }\n    }, [maxLetters, debouncedUpdateCount, debouncedUpdateSrCounterMessage, value])\n\n    const textareaStyle = useMemo(\n      () => ({ width: typeof width === 'number' ? `${width}px` : width }),\n      [width],\n    )\n    const countError = maxLetters && count > maxLetters\n    const classNames = useMemo(() => {\n      const { textareaEl, counter } = classNameGenerator()\n\n      return {\n        textarea: textareaEl({ className }),\n        counter: counter({ error: !!countError }),\n      }\n    }, [countError, className])\n\n    const body = (\n      <textarea\n        {...rest}\n        {...(maxLetters && { 'aria-describedby': `${maxLettersNoticeId} ${actualMaxLettersId}` })}\n        data-smarthr-ui-input=\"true\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        ref={textareaRef}\n        aria-invalid={error || countError || undefined}\n        rows={interimRows}\n        className={classNames.textarea}\n        style={textareaStyle}\n      />\n    )\n\n    return maxLetters ? (\n      <span className=\"shr-relative\">\n        {body}\n        <VisuallyHiddenText id={maxLettersNoticeId}>\n          {buildScreenReaderMaxLettersDescription(maxLetters)}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText aria-live=\"polite\">{srCounterMessage}</VisuallyHiddenText>\n        <span id={actualMaxLettersId} aria-hidden={true} className={classNames.counter}>\n          {counterVisualMessage}\n        </span>\n      </span>\n    ) : (\n      body\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;AACE;;;;;;;;AAQC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACF;AACD;AACE;AACD;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAkBH;AACA;AACA;;AAGA;AACA;;;;AAKA;AAWA;AAWA;AAWA;;;AAII;;;;;;;AAWJ;;AAOA;AAGM;;AAEM;AACF;;AAEJ;;AAKN;AAGM;;;;;;AAOI;;;AAMV;AAEI;AACA;AACA;;AAGA;;AAGE;;AAEA;;;AAIF;AACF;;;;;;;;AASC;;;;AAMC;;AAEJ;;;AAIE;AACE;;AAEJ;;;AAIE;AACE;AACA;;;AAIJ;AAIA;AACA;;;AAII;;;AAGJ;;;AAgCF;;"}
+{"version":3,"file":"Textarea.cjs","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type ReactNode,\n  forwardRef,\n  startTransition,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype AbstractProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'textarea'>, keyof AbstractProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    textareaEl: [\n      'smarthr-ui-Textarea-textarea',\n      'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      'placeholder:shr-text-grey',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black',\n  },\n  variants: {\n    error: {\n      true: {\n        counter: 'shr-text-danger',\n      },\n    },\n  },\n  defaultVariants: {\n    error: false,\n  },\n})\n\nconst calculateIdealRows = (\n  element: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!element) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    element.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(\n  (\n    {\n      autoFocus,\n      maxLetters,\n      width,\n      className,\n      autoResize = false,\n      maxRows = Infinity,\n      rows = 2,\n      error,\n      onChange,\n      value,\n      defaultValue,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const maxLettersId = useId()\n    const maxLettersNoticeId = `${maxLettersId}-notice`\n    const actualMaxLettersId = maxLetters ? maxLettersId : undefined\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const currentValue = defaultValue || value\n    const [interimRows, setInterimRows] = useState(rows)\n    const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)\n    const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n    const onChangeRef = useRef(onChange)\n    onChangeRef.current = onChange\n\n    const buildAvailableLetters = useCallback(\n      (availableLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/availableLetters\"\n          defaultText=\"あと{availableLetters}文字\"\n          values={{ availableLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildmaxLettersExceeded = useCallback(\n      (exceededLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n          defaultText=\"{exceededLetters}文字オーバー\"\n          values={{ exceededLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildScreenReaderMaxLettersDescription = useCallback(\n      (internalMaxLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters: internalMaxLetters }}\n        />\n      ),\n      [],\n    )\n\n    const getCounterMessage = useCallback(\n      (counterValue: number) => {\n        if (maxLetters === undefined) return\n\n        if (counterValue > maxLetters) {\n          // {count}文字オーバー\n          return <>{buildmaxLettersExceeded(counterValue - maxLetters)}</>\n        }\n\n        // あと{count}文字\n        return <>{buildAvailableLetters(maxLetters - counterValue)}</>\n      },\n      [maxLetters, buildAvailableLetters, buildmaxLettersExceeded],\n    )\n\n    const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])\n\n    useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n      ref,\n      () => textareaRef.current,\n    )\n\n    const debouncedUpdateCount = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                setCount(getStringLength(newValue))\n              })\n            }, 200)\n          : undefined,\n      [maxLetters],\n    )\n\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const debouncedUpdateSrCounterMessage = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                const counterText = getCounterMessage(getStringLength(newValue))\n\n                if (counterText) {\n                  setSrCounterMessage(counterText)\n                }\n              })\n            }, 1000)\n          : undefined,\n      [maxLetters, getCounterMessage],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = e.target.value\n        debouncedUpdateCount?.(newValue)\n        debouncedUpdateSrCounterMessage?.(newValue)\n\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = rows\n\n        if (autoResize) {\n          const currentRows = calculateIdealRows(e.target, maxRows, theme.leading.NORMAL)\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        onChangeRef.current?.(e)\n      },\n      [\n        debouncedUpdateCount,\n        debouncedUpdateSrCounterMessage,\n        autoResize,\n        maxRows,\n        rows,\n        theme.leading.NORMAL,\n      ],\n    )\n\n    // autoFocus時に、フォーカスを当てる\n    useEffect(() => {\n      if (autoFocus && textareaRef && textareaRef.current) {\n        textareaRef.current.focus()\n      }\n    }, [autoFocus])\n\n    // autoResize時に、初期値での高さを指定\n    useEffect(() => {\n      if (autoResize && textareaRef.current) {\n        setInterimRows(calculateIdealRows(textareaRef.current, maxRows, theme.leading.NORMAL))\n      }\n    }, [setInterimRows, maxRows, autoResize, theme.leading.NORMAL])\n\n    // value 変更時にもカウントを更新する\n    useEffect(() => {\n      if (value && maxLetters) {\n        debouncedUpdateCount?.(value)\n        debouncedUpdateSrCounterMessage?.(value)\n      }\n    }, [maxLetters, debouncedUpdateCount, debouncedUpdateSrCounterMessage, value])\n\n    const textareaStyle = useMemo(\n      () => ({ width: typeof width === 'number' ? `${width}px` : width }),\n      [width],\n    )\n    const countError = maxLetters && count > maxLetters\n    const classNames = useMemo(() => {\n      const { textareaEl, counter } = classNameGenerator()\n\n      return {\n        textarea: textareaEl({ className }),\n        counter: counter({ error: !!countError }),\n      }\n    }, [countError, className])\n\n    const body = (\n      <textarea\n        {...rest}\n        {...(maxLetters && { 'aria-describedby': `${maxLettersNoticeId} ${actualMaxLettersId}` })}\n        data-smarthr-ui-input=\"true\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        ref={textareaRef}\n        aria-invalid={error || countError || undefined}\n        rows={interimRows}\n        className={classNames.textarea}\n        style={textareaStyle}\n      />\n    )\n\n    return maxLetters ? (\n      <span className=\"shr-relative\">\n        {body}\n        <VisuallyHiddenText id={maxLettersNoticeId}>\n          {buildScreenReaderMaxLettersDescription(maxLetters)}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText aria-live=\"polite\">{srCounterMessage}</VisuallyHiddenText>\n        <span id={actualMaxLettersId} aria-hidden={true} className={classNames.counter}>\n          {counterVisualMessage}\n        </span>\n      </span>\n    ) : (\n      body\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;AACE;;;;;;;;AAQC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACF;AACD;AACE;AACD;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAkBH;AACA;AACA;;AAGA;AACA;;;;AAKA;AACA;AAEA;AAWA;AAWA;AAWA;;;AAII;;;;;;;AAWJ;;AAOA;AAGM;;AAEM;AACF;;AAEJ;;AAKN;AAGM;;;;;;AAOI;;;AAMV;AAEI;AACA;AACA;;AAGA;;AAGE;;AAEA;;;AAIF;AACF;;;;;;;AAQC;;;;AAMC;;AAEJ;;;AAIE;AACE;;AAEJ;;;AAIE;AACE;AACA;;;AAIJ;AAIA;AACA;;;AAII;;;AAGJ;;;AAgCF;;"}

package/lib/components/Textarea/Textarea.js

@@ -12,14 +12,14 @@ import { debounce } from '../../libs/debounce.js';
 import '../../themes/createSpacing.js';
 import { defaultHtmlFontSize } from '../../themes/createFontSize.js';
 import '../../themes/createColor.js';
-import '../../themes/createShadow/defaultShadow.js';
-import '../../themes/createWidth.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
 import '../../_virtual/index.js';
 import '../../_virtual/index2.js';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
 import '../../themes/createBackgroundColor.js';
 import '../../themes/createBorder.js';
-import 'styled-components';
-import '../../themes/createTextColor.js';
 import { VisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText.js';
 
 const getStringLength = (value) => {
@@ -74,6 +74,8 @@ const Textarea = forwardRef(({ autoFocus, maxLetters, width, className, autoResi
     const [interimRows, setInterimRows] = useState(rows);
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0);
     const [srCounterMessage, setSrCounterMessage] = useState('');
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
     const buildAvailableLetters = useCallback((availableLetters) => (jsx(Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters } })), []);
     const buildmaxLettersExceeded = useCallback((exceededLetters) => (jsx(Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters } })), []);
     const buildScreenReaderMaxLettersDescription = useCallback((internalMaxLetters) => (jsx(Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters: internalMaxLetters } })), []);
@@ -119,9 +121,8 @@ const Textarea = forwardRef(({ autoFocus, maxLetters, width, className, autoResi
             e.target.rows = currentRows;
             setInterimRows(currentRows);
         }
-        onChange?.(e);
+        onChangeRef.current?.(e);
     }, [
-        onChange,
         debouncedUpdateCount,
         debouncedUpdateSrCounterMessage,
         autoResize,

package/lib/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type ReactNode,\n  forwardRef,\n  startTransition,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype AbstractProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'textarea'>, keyof AbstractProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    textareaEl: [\n      'smarthr-ui-Textarea-textarea',\n      'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      'placeholder:shr-text-grey',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black',\n  },\n  variants: {\n    error: {\n      true: {\n        counter: 'shr-text-danger',\n      },\n    },\n  },\n  defaultVariants: {\n    error: false,\n  },\n})\n\nconst calculateIdealRows = (\n  element: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!element) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    element.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(\n  (\n    {\n      autoFocus,\n      maxLetters,\n      width,\n      className,\n      autoResize = false,\n      maxRows = Infinity,\n      rows = 2,\n      error,\n      onChange,\n      value,\n      defaultValue,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const maxLettersId = useId()\n    const maxLettersNoticeId = `${maxLettersId}-notice`\n    const actualMaxLettersId = maxLetters ? maxLettersId : undefined\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const currentValue = defaultValue || value\n    const [interimRows, setInterimRows] = useState(rows)\n    const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)\n    const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n    const buildAvailableLetters = useCallback(\n      (availableLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/availableLetters\"\n          defaultText=\"あと{availableLetters}文字\"\n          values={{ availableLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildmaxLettersExceeded = useCallback(\n      (exceededLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n          defaultText=\"{exceededLetters}文字オーバー\"\n          values={{ exceededLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildScreenReaderMaxLettersDescription = useCallback(\n      (internalMaxLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters: internalMaxLetters }}\n        />\n      ),\n      [],\n    )\n\n    const getCounterMessage = useCallback(\n      (counterValue: number) => {\n        if (maxLetters === undefined) return\n\n        if (counterValue > maxLetters) {\n          // {count}文字オーバー\n          return <>{buildmaxLettersExceeded(counterValue - maxLetters)}</>\n        }\n\n        // あと{count}文字\n        return <>{buildAvailableLetters(maxLetters - counterValue)}</>\n      },\n      [maxLetters, buildAvailableLetters, buildmaxLettersExceeded],\n    )\n\n    const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])\n\n    useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n      ref,\n      () => textareaRef.current,\n    )\n\n    const debouncedUpdateCount = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                setCount(getStringLength(newValue))\n              })\n            }, 200)\n          : undefined,\n      [maxLetters],\n    )\n\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const debouncedUpdateSrCounterMessage = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                const counterText = getCounterMessage(getStringLength(newValue))\n\n                if (counterText) {\n                  setSrCounterMessage(counterText)\n                }\n              })\n            }, 1000)\n          : undefined,\n      [maxLetters, getCounterMessage],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = e.target.value\n        debouncedUpdateCount?.(newValue)\n        debouncedUpdateSrCounterMessage?.(newValue)\n\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = rows\n\n        if (autoResize) {\n          const currentRows = calculateIdealRows(e.target, maxRows, theme.leading.NORMAL)\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        onChange?.(e)\n      },\n      [\n        onChange,\n        debouncedUpdateCount,\n        debouncedUpdateSrCounterMessage,\n        autoResize,\n        maxRows,\n        rows,\n        theme.leading.NORMAL,\n      ],\n    )\n\n    // autoFocus時に、フォーカスを当てる\n    useEffect(() => {\n      if (autoFocus && textareaRef && textareaRef.current) {\n        textareaRef.current.focus()\n      }\n    }, [autoFocus])\n\n    // autoResize時に、初期値での高さを指定\n    useEffect(() => {\n      if (autoResize && textareaRef.current) {\n        setInterimRows(calculateIdealRows(textareaRef.current, maxRows, theme.leading.NORMAL))\n      }\n    }, [setInterimRows, maxRows, autoResize, theme.leading.NORMAL])\n\n    // value 変更時にもカウントを更新する\n    useEffect(() => {\n      if (value && maxLetters) {\n        debouncedUpdateCount?.(value)\n        debouncedUpdateSrCounterMessage?.(value)\n      }\n    }, [maxLetters, debouncedUpdateCount, debouncedUpdateSrCounterMessage, value])\n\n    const textareaStyle = useMemo(\n      () => ({ width: typeof width === 'number' ? `${width}px` : width }),\n      [width],\n    )\n    const countError = maxLetters && count > maxLetters\n    const classNames = useMemo(() => {\n      const { textareaEl, counter } = classNameGenerator()\n\n      return {\n        textarea: textareaEl({ className }),\n        counter: counter({ error: !!countError }),\n      }\n    }, [countError, className])\n\n    const body = (\n      <textarea\n        {...rest}\n        {...(maxLetters && { 'aria-describedby': `${maxLettersNoticeId} ${actualMaxLettersId}` })}\n        data-smarthr-ui-input=\"true\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        ref={textareaRef}\n        aria-invalid={error || countError || undefined}\n        rows={interimRows}\n        className={classNames.textarea}\n        style={textareaStyle}\n      />\n    )\n\n    return maxLetters ? (\n      <span className=\"shr-relative\">\n        {body}\n        <VisuallyHiddenText id={maxLettersNoticeId}>\n          {buildScreenReaderMaxLettersDescription(maxLetters)}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText aria-live=\"polite\">{srCounterMessage}</VisuallyHiddenText>\n        <span id={actualMaxLettersId} aria-hidden={true} className={classNames.counter}>\n          {counterVisualMessage}\n        </span>\n      </span>\n    ) : (\n      body\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+CA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;AACE;;;;;;;;AAQC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACF;AACD;AACE;AACD;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAkBH;AACA;AACA;;AAGA;AACA;;;;AAKA;AAWA;AAWA;AAWA;;;AAII;;;;;;;AAWJ;;AAOA;AAGM;;AAEM;AACF;;AAEJ;;AAKN;AAGM;;;;;;AAOI;;;AAMV;AAEI;AACA;AACA;;AAGA;;AAGE;;AAEA;;;AAIF;AACF;;;;;;;;AASC;;;;AAMC;;AAEJ;;;AAIE;AACE;;AAEJ;;;AAIE;AACE;AACA;;;AAIJ;AAIA;AACA;;;AAII;;;AAGJ;;;AAgCF;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type ReactNode,\n  forwardRef,\n  startTransition,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Localizer } from '../../intl'\nimport { debounce } from '../../libs/debounce'\nimport { defaultHtmlFontSize } from '../../themes'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype AbstractProps = {\n  /** 入力値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 自動でフォーカスされるかどうか */\n  autoFocus?: boolean\n  /** 自動で広がるかどうか */\n  autoResize?: boolean\n  /** 最大行数。超えるとスクロールする。初期値は無限 */\n  maxRows?: number\n  /** 行数の初期値。省略した場合は2 */\n  rows?: number\n  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */\n  maxLetters?: number\n  /**\n   * placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。\n   */\n  placeholder?: string\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'textarea'>, keyof AbstractProps>\ntype TextareaValue = string | number | readonly string[]\n\nconst getStringLength = (value: TextareaValue) => {\n  const formattedValue =\n    typeof value === 'number' || typeof value === 'string'\n      ? `${value}`\n      : Array.isArray(value)\n        ? value.join(',')\n        : ''\n\n  // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt\n  const surrogatePairs = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]/g\n  return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    textareaEl: [\n      'smarthr-ui-Textarea-textarea',\n      'shr-border-shorthand shr-my-[unset] shr-box-border shr-rounded-m shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      'placeholder:shr-text-grey',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black',\n  },\n  variants: {\n    error: {\n      true: {\n        counter: 'shr-text-danger',\n      },\n    },\n  },\n  defaultVariants: {\n    error: false,\n  },\n})\n\nconst calculateIdealRows = (\n  element: HTMLTextAreaElement | null | undefined,\n  maxRows: number,\n  lineHeightNormal: number,\n): number => {\n  if (!element) {\n    return 0\n  }\n\n  // 現在の入力値に応じた行数\n  const currentInputValueRows = Math.floor(\n    element.scrollHeight / (defaultHtmlFontSize * lineHeightNormal),\n  )\n\n  return currentInputValueRows < maxRows ? currentInputValueRows : maxRows\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(\n  (\n    {\n      autoFocus,\n      maxLetters,\n      width,\n      className,\n      autoResize = false,\n      maxRows = Infinity,\n      rows = 2,\n      error,\n      onChange,\n      value,\n      defaultValue,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const maxLettersId = useId()\n    const maxLettersNoticeId = `${maxLettersId}-notice`\n    const actualMaxLettersId = maxLetters ? maxLettersId : undefined\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const currentValue = defaultValue || value\n    const [interimRows, setInterimRows] = useState(rows)\n    const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)\n    const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')\n\n    const onChangeRef = useRef(onChange)\n    onChangeRef.current = onChange\n\n    const buildAvailableLetters = useCallback(\n      (availableLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/availableLetters\"\n          defaultText=\"あと{availableLetters}文字\"\n          values={{ availableLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildmaxLettersExceeded = useCallback(\n      (exceededLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/maxLettersExceeded\"\n          defaultText=\"{exceededLetters}文字オーバー\"\n          values={{ exceededLetters }}\n        />\n      ),\n      [],\n    )\n\n    const buildScreenReaderMaxLettersDescription = useCallback(\n      (internalMaxLetters: number): ReactNode => (\n        <Localizer\n          id=\"smarthr-ui/Textarea/screenReaderMaxLettersDescription\"\n          defaultText=\"最大{maxLetters}文字入力できます\"\n          values={{ maxLetters: internalMaxLetters }}\n        />\n      ),\n      [],\n    )\n\n    const getCounterMessage = useCallback(\n      (counterValue: number) => {\n        if (maxLetters === undefined) return\n\n        if (counterValue > maxLetters) {\n          // {count}文字オーバー\n          return <>{buildmaxLettersExceeded(counterValue - maxLetters)}</>\n        }\n\n        // あと{count}文字\n        return <>{buildAvailableLetters(maxLetters - counterValue)}</>\n      },\n      [maxLetters, buildAvailableLetters, buildmaxLettersExceeded],\n    )\n\n    const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])\n\n    useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(\n      ref,\n      () => textareaRef.current,\n    )\n\n    const debouncedUpdateCount = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                setCount(getStringLength(newValue))\n              })\n            }, 200)\n          : undefined,\n      [maxLetters],\n    )\n\n    // countが連続で更新されると、スクリーンリーダーが古い値を読み上げてしまうため、メッセージの更新を遅延しています\n    const debouncedUpdateSrCounterMessage = useMemo(\n      () =>\n        maxLetters\n          ? debounce((newValue: TextareaValue) => {\n              startTransition(() => {\n                const counterText = getCounterMessage(getStringLength(newValue))\n\n                if (counterText) {\n                  setSrCounterMessage(counterText)\n                }\n              })\n            }, 1000)\n          : undefined,\n      [maxLetters, getCounterMessage],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = e.target.value\n        debouncedUpdateCount?.(newValue)\n        debouncedUpdateSrCounterMessage?.(newValue)\n\n        // rowsを初期化 TextareaのscrollHeightが文字列削除時に変更されないため\n        e.target.rows = rows\n\n        if (autoResize) {\n          const currentRows = calculateIdealRows(e.target, maxRows, theme.leading.NORMAL)\n          // rowsを直接反映 Textareaのrows propsが状態を変更しても反映されないため\n          e.target.rows = currentRows\n          setInterimRows(currentRows)\n        }\n\n        onChangeRef.current?.(e)\n      },\n      [\n        debouncedUpdateCount,\n        debouncedUpdateSrCounterMessage,\n        autoResize,\n        maxRows,\n        rows,\n        theme.leading.NORMAL,\n      ],\n    )\n\n    // autoFocus時に、フォーカスを当てる\n    useEffect(() => {\n      if (autoFocus && textareaRef && textareaRef.current) {\n        textareaRef.current.focus()\n      }\n    }, [autoFocus])\n\n    // autoResize時に、初期値での高さを指定\n    useEffect(() => {\n      if (autoResize && textareaRef.current) {\n        setInterimRows(calculateIdealRows(textareaRef.current, maxRows, theme.leading.NORMAL))\n      }\n    }, [setInterimRows, maxRows, autoResize, theme.leading.NORMAL])\n\n    // value 変更時にもカウントを更新する\n    useEffect(() => {\n      if (value && maxLetters) {\n        debouncedUpdateCount?.(value)\n        debouncedUpdateSrCounterMessage?.(value)\n      }\n    }, [maxLetters, debouncedUpdateCount, debouncedUpdateSrCounterMessage, value])\n\n    const textareaStyle = useMemo(\n      () => ({ width: typeof width === 'number' ? `${width}px` : width }),\n      [width],\n    )\n    const countError = maxLetters && count > maxLetters\n    const classNames = useMemo(() => {\n      const { textareaEl, counter } = classNameGenerator()\n\n      return {\n        textarea: textareaEl({ className }),\n        counter: counter({ error: !!countError }),\n      }\n    }, [countError, className])\n\n    const body = (\n      <textarea\n        {...rest}\n        {...(maxLetters && { 'aria-describedby': `${maxLettersNoticeId} ${actualMaxLettersId}` })}\n        data-smarthr-ui-input=\"true\"\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        ref={textareaRef}\n        aria-invalid={error || countError || undefined}\n        rows={interimRows}\n        className={classNames.textarea}\n        style={textareaStyle}\n      />\n    )\n\n    return maxLetters ? (\n      <span className=\"shr-relative\">\n        {body}\n        <VisuallyHiddenText id={maxLettersNoticeId}>\n          {buildScreenReaderMaxLettersDescription(maxLetters)}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText aria-live=\"polite\">{srCounterMessage}</VisuallyHiddenText>\n        <span id={actualMaxLettersId} aria-hidden={true} className={classNames.counter}>\n          {counterVisualMessage}\n        </span>\n      </span>\n    ) : (\n      body\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+CA;;;AAIM;AACE;;;;AAKN;AACF;AAEA;AACE;AACE;;;;;;;;AAQC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACF;AACD;AACE;AACD;AACF;AAED;;AAMI;;;AAIF;;AAKF;AAEO;AAkBH;AACA;AACA;;AAGA;AACA;;;;AAKA;AACA;AAEA;AAWA;AAWA;AAWA;;;AAII;;;;;;;AAWJ;;AAOA;AAGM;;AAEM;AACF;;AAEJ;;AAKN;AAGM;;;;;;AAOI;;;AAMV;AAEI;AACA;AACA;;AAGA;;AAGE;;AAEA;;;AAIF;AACF;;;;;;;AAQC;;;;AAMC;;AAEJ;;;AAIE;AACE;;AAEJ;;;AAIE;AACE;AACA;;;AAIJ;AAIA;AACA;;;AAII;;;AAGJ;;;AAgCF;;"}