smarthr-ui 96.1.2 → 97.0.0

package/lib/components/Select/Select.js

@@ -1,5 +1,5 @@
 "use client";
-import { memo, createElement, useCallback, useMemo } from 'react';
+import { memo, createElement, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 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 { isMobileSafari, isIOS } from '../../libs/ua.js';
@@ -47,16 +47,6 @@ const classNameGenerator = ce({
     },
 });
 const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank, blankLabel, size, className, disabled, required, ...rest }, ref) => {
-    const handleChange = useCallback((e) => {
-        onChange?.(e);
-        if (onChangeValue) {
-            const flattenOptions = options.reduce((pre, cur) => pre.concat('value' in cur ? cur : cur.options), []);
-            const selectedOption = flattenOptions.find((option) => option.value === e.target.value);
-            if (selectedOption) {
-                onChangeValue(selectedOption.value);
-            }
-        }
-    }, [onChange, onChangeValue, options]);
     const classNames = useMemo(() => {
         const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator();
         const sizeProps = {
@@ -73,7 +63,17 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
         width: typeof width === 'number' ? `${width}px` : width,
     }), [width]);
     const actualBlankLabel = blankLabel ?? '';
-    return (jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: handleChange, "aria-invalid": error || undefined, disabled: disabled, 
+    return (jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: (e) => {
+                    onChange?.(e);
+                    if (onChangeValue) {
+                        const selectedOption = options
+                            .flatMap((option) => ('value' in option ? [option] : option.options))
+                            .find((option) => option.value === e.target.value);
+                        if (selectedOption) {
+                            onChangeValue(selectedOption.value);
+                        }
+                    }
+                }, "aria-invalid": error || undefined, disabled: disabled, 
                 // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
                 //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
                 //    - エラーメッセージが表示されない

package/lib/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype AbstractProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof AbstractProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLSelectElement>) => {\n      onChange?.(e)\n\n      if (onChangeValue) {\n        const flattenOptions = options.reduce(\n          (pre, cur) => pre.concat('value' in cur ? cur : cur.options),\n          [] as Array<Option<T>>,\n        )\n        const selectedOption = flattenOptions.find((option) => option.value === e.target.value)\n\n        if (selectedOption) {\n          onChangeValue(selectedOption.value)\n        }\n      }\n    },\n    [onChange, onChangeValue, options],\n  )\n\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={handleChange}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;AA+CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AAEI;;AAGE;;;AAOE;;;;AAOR;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;;;;;;;AAgBM;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype AbstractProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof AbstractProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;AAQQ;;;;AAKK;;AAGD;;;AAGN;;;;;;;AASA;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}

package/lib/components/TabBar/TabItem.cjs

@@ -38,18 +38,23 @@ const classNameGenerator = index.tv({
         ],
     },
 });
-const TabItem = ({ selected = false, disabled, disabledReason, ...rest }) => {
+const TabItem = ({ selected = false, disabled, disabledReason, onClick, ...rest }) => {
     const tabAttrs = {
         role: 'tab',
         'aria-selected': selected,
     };
+    const onClickRef = React.useRef(onClick);
+    onClickRef.current = onClick;
+    const actualOnClick = React.useCallback((e) => {
+        onClickRef.current(e);
+    }, []);
     if (disabled && disabledReason) {
         const Icon = disabledReason.icon || jsxRuntime.jsx(components_Icon_FaIcon.FaCircleInfoIcon, { color: "TEXT_GREY" });
-        return (jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { ...tabAttrs, message: disabledReason.message, "aria-disabled": disabled, className: "focus-visible:shr-focus-indicator", children: jsxRuntime.jsx(TabButton, { ...rest, disabled: disabled, suffix: Icon }) }));
+        return (jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { ...tabAttrs, message: disabledReason.message, "aria-disabled": disabled, className: "focus-visible:shr-focus-indicator", children: jsxRuntime.jsx(TabButton, { ...rest, onClick: actualOnClick, disabled: disabled, suffix: Icon }) }));
     }
-    return jsxRuntime.jsx(TabButton, { ...rest, ...tabAttrs, disabled: disabled });
+    return jsxRuntime.jsx(TabButton, { ...rest, ...tabAttrs, onClick: actualOnClick, disabled: disabled });
 };
-const TabButton = ({ id, children, suffix, onClick, className, ...rest }) => {
+const TabButton = React.memo(({ id, children, suffix, className, ...rest }) => {
     const classNames = React.useMemo(() => {
         const { wrapper, label, suffixWrapper } = classNameGenerator();
         return {
@@ -58,11 +63,8 @@ const TabButton = ({ id, children, suffix, onClick, className, ...rest }) => {
             suffixWrapper: suffixWrapper(),
         };
     }, [className]);
-    const actualOnClick = React.useCallback((e) => onClick(e.currentTarget.value), [onClick]);
-    return (jsxRuntime.jsxs(components_Button_UnstyledButton.UnstyledButton, { ...rest, type: "button", value: id, id: id, className: classNames.wrapper, onClick: actualOnClick, children: [jsxRuntime.jsx(TabLabel, { className: classNames.label, children: children }), jsxRuntime.jsx(TabButtonSuffix, { className: classNames.suffixWrapper, children: suffix })] }));
-};
-const TabLabel = React.memo(({ children, className }) => (jsxRuntime.jsx("span", { className: className, children: children })));
-const TabButtonSuffix = React.memo(({ children, className }) => children && jsxRuntime.jsx("span", { className: className, children: children }));
+    return (jsxRuntime.jsxs(components_Button_UnstyledButton.UnstyledButton, { ...rest, type: "button", value: id, id: id, className: classNames.wrapper, children: [jsxRuntime.jsx("span", { className: classNames.label, children: children }), suffix && jsxRuntime.jsx("span", { className: classNames.suffixWrapper, children: suffix })] }));
+});
 
 exports.TabItem = TabItem;
 //# sourceMappingURL=TabItem.cjs.map

package/lib/components/TabBar/TabItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.cjs","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-TabItem',\n      'shr-group/tabitem',\n      'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n      'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n      'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n    ],\n    label: [\n      'shr-font-bold shr-leading-none shr-text-grey',\n      'group-hover/tabitem:shr-text-black',\n      'group-disabled/tabitem:shr-text-grey/50',\n      'group-aria-selected/tabitem:shr-text-black',\n    ],\n    suffixWrapper: [\n      // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n      '-shr-my-0.25',\n      // 内包アイコンの leading を詰める\n      '[&_.smarthr-ui-Icon]:shr-block',\n    ],\n  },\n})\n\ntype AbstractProps = PropsWithChildren<{\n  /** タブの ID */\n  id: string\n  /** ボタン内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** `true` のとき、タブが選択状態のスタイルになる */\n  selected?: boolean\n  /** `true` のとき、タブを無効状態にしてクリック不能にする */\n  disabled?: boolean\n  /**\n   * 無効な理由\n   */\n  disabledReason?: {\n    icon?: ReactNode\n    message: ReactNode\n  }\n  /** タブをクリックした時に発火するコールバック関数 */\n  onClick: (tabId: string) => void\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({ selected = false, disabled, disabledReason, ...rest }) => {\n  const tabAttrs = {\n    role: 'tab',\n    'aria-selected': selected,\n  }\n\n  if (disabled && disabledReason) {\n    const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n    return (\n      <Tooltip\n        {...tabAttrs}\n        message={disabledReason.message}\n        aria-disabled={disabled}\n        className=\"focus-visible:shr-focus-indicator\"\n      >\n        <TabButton {...rest} disabled={disabled} suffix={Icon} />\n      </Tooltip>\n    )\n  }\n\n  return <TabButton {...rest} {...tabAttrs} disabled={disabled} />\n}\n\nconst TabButton: FC<Props> = ({ id, children, suffix, onClick, className, ...rest }) => {\n  const classNames = useMemo(() => {\n    const { wrapper, label, suffixWrapper } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      label: label(),\n      suffixWrapper: suffixWrapper(),\n    }\n  }, [className])\n\n  const actualOnClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => onClick(e.currentTarget.value),\n    [onClick],\n  )\n\n  return (\n    <UnstyledButton\n      {...rest}\n      type=\"button\"\n      value={id}\n      id={id}\n      className={classNames.wrapper}\n      onClick={actualOnClick}\n    >\n      <TabLabel className={classNames.label}>{children}</TabLabel>\n      <TabButtonSuffix className={classNames.suffixWrapper}>{suffix}</TabButtonSuffix>\n    </UnstyledButton>\n  )\n}\n\nconst TabLabel = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <span className={className}>{children}</span>\n))\nconst TabButtonSuffix = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => children && <span className={className}>{children}</span>,\n)\n"],"names":["tv","_jsx","FaCircleInfoIcon","Tooltip","useMemo","useCallback","_jsxs","UnstyledButton","memo"],"mappings":"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"}
+{"version":3,"file":"TabItem.cjs","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-TabItem',\n      'shr-group/tabitem',\n      'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n      'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n      'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n    ],\n    label: [\n      'shr-font-bold shr-leading-none shr-text-grey',\n      'group-hover/tabitem:shr-text-black',\n      'group-disabled/tabitem:shr-text-grey/50',\n      'group-aria-selected/tabitem:shr-text-black',\n    ],\n    suffixWrapper: [\n      // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n      '-shr-my-0.25',\n      // 内包アイコンの leading を詰める\n      '[&_.smarthr-ui-Icon]:shr-block',\n    ],\n  },\n})\n\ntype AbstractProps = PropsWithChildren<{\n  /** タブの ID */\n  id: string\n  /** ボタン内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** `true` のとき、タブが選択状態のスタイルになる */\n  selected?: boolean\n  /** `true` のとき、タブを無効状態にしてクリック不能にする */\n  disabled?: boolean\n  /**\n   * 無効な理由\n   */\n  disabledReason?: {\n    icon?: ReactNode\n    message: ReactNode\n  }\n  /** タブをクリックした時に発火するコールバック関数 */\n  onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({\n  selected = false,\n  disabled,\n  disabledReason,\n  onClick,\n  ...rest\n}) => {\n  const tabAttrs = {\n    role: 'tab',\n    'aria-selected': selected,\n  }\n  const onClickRef = useRef(onClick)\n  onClickRef.current = onClick\n\n  const actualOnClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    onClickRef.current(e)\n  }, [])\n\n  if (disabled && disabledReason) {\n    const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n    return (\n      <Tooltip\n        {...tabAttrs}\n        message={disabledReason.message}\n        aria-disabled={disabled}\n        className=\"focus-visible:shr-focus-indicator\"\n      >\n        <TabButton {...rest} onClick={actualOnClick} disabled={disabled} suffix={Icon} />\n      </Tooltip>\n    )\n  }\n\n  return <TabButton {...rest} {...tabAttrs} onClick={actualOnClick} disabled={disabled} />\n}\n\nconst TabButton = memo<PropsWithChildren<Props>>(({ id, children, suffix, className, ...rest }) => {\n  const classNames = useMemo(() => {\n    const { wrapper, label, suffixWrapper } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      label: label(),\n      suffixWrapper: suffixWrapper(),\n    }\n  }, [className])\n\n  return (\n    <UnstyledButton {...rest} type=\"button\" value={id} id={id} className={classNames.wrapper}>\n      <span className={classNames.label}>{children}</span>\n      {suffix && <span className={classNames.suffixWrapper}>{suffix}</span>}\n    </UnstyledButton>\n  )\n})\n"],"names":["tv","useRef","useCallback","_jsx","FaCircleInfoIcon","Tooltip","memo","useMemo","_jsxs","UnstyledButton"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,oBAAoB;YACpB,mBAAmB;YACnB,gFAAgF;YAChF,2BAA2B;YAC3B,yDAAyD;YACzD,6DAA6D;YAC7D,2QAA2Q;YAC3Q,uDAAuD;AACxD,SAAA;AACD,QAAA,KAAK,EAAE;YACL,8CAA8C;YAC9C,oCAAoC;YACpC,yCAAyC;YACzC,4CAA4C;AAC7C,SAAA;AACD,QAAA,aAAa,EAAE;;YAEb,cAAc;;YAEd,gCAAgC;AACjC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;MAwBW,OAAO,GAAc,CAAC,EACjC,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,cAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG;AACf,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,eAAe,EAAE,QAAQ;KAC1B;AACD,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAC,OAAO,CAAC;AAClC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,aAAa,GAAGC,iBAAW,CAAC,CAAC,CAAgC,KAAI;AACrE,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,IAAI,QAAQ,IAAI,cAAc,EAAE;AAC9B,QAAA,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,IAAIC,cAAA,CAACC,uCAAgB,EAAA,EAAC,KAAK,EAAC,WAAW,GAAG;AAE1E,QAAA,QACED,cAAA,CAACE,kCAAO,EAAA,EAAA,GACF,QAAQ,EACZ,OAAO,EAAE,cAAc,CAAC,OAAO,EAAA,eAAA,EAChB,QAAQ,EACvB,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAE7CF,cAAA,CAAC,SAAS,OAAK,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAA,CAAI,EAAA,CACzE;IAEd;AAEA,IAAA,OAAOA,cAAA,CAAC,SAAS,EAAA,EAAA,GAAK,IAAI,KAAM,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAI;AAC1F;AAEA,MAAM,SAAS,GAAGG,UAAI,CAA2B,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAChG,IAAA,MAAM,UAAU,GAAGC,aAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE;QAE9D,OAAO;AACL,YAAA,OAAO,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;YAC/B,KAAK,EAAE,KAAK,EAAE;YACd,aAAa,EAAE,aAAa,EAAE;SAC/B;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,QACEC,gBAACC,+CAAc,EAAA,EAAA,GAAK,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,aACtFN,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EACnD,MAAM,IAAIA,yBAAM,SAAS,EAAE,UAAU,CAAC,aAAa,YAAG,MAAM,EAAA,CAAQ,CAAA,EAAA,CACtD;AAErB,CAAC,CAAC;;;;"}

package/lib/components/TabBar/TabItem.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type FC, type PropsWithChildren, type ReactNode } from 'react';
+import { type ComponentProps, type FC, type MouseEvent, type PropsWithChildren, type ReactNode } from 'react';
 import { UnstyledButton } from '../Button';
 type AbstractProps = PropsWithChildren<{
     /** タブの ID */
@@ -17,7 +17,7 @@ type AbstractProps = PropsWithChildren<{
         message: ReactNode;
     };
     /** タブをクリックした時に発火するコールバック関数 */
-    onClick: (tabId: string) => void;
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 }>;
 type Props = AbstractProps & Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>;
 export declare const TabItem: FC<Props>;

package/lib/components/TabBar/TabItem.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useMemo, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useMemo, useRef, useCallback } 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 '../Button/Button.js';
 import '../Button/AnchorButton.js';
@@ -36,18 +36,23 @@ const classNameGenerator = ce({
         ],
     },
 });
-const TabItem = ({ selected = false, disabled, disabledReason, ...rest }) => {
+const TabItem = ({ selected = false, disabled, disabledReason, onClick, ...rest }) => {
     const tabAttrs = {
         role: 'tab',
         'aria-selected': selected,
     };
+    const onClickRef = useRef(onClick);
+    onClickRef.current = onClick;
+    const actualOnClick = useCallback((e) => {
+        onClickRef.current(e);
+    }, []);
     if (disabled && disabledReason) {
         const Icon = disabledReason.icon || jsx(FaCircleInfoIcon, { color: "TEXT_GREY" });
-        return (jsx(Tooltip, { ...tabAttrs, message: disabledReason.message, "aria-disabled": disabled, className: "focus-visible:shr-focus-indicator", children: jsx(TabButton, { ...rest, disabled: disabled, suffix: Icon }) }));
+        return (jsx(Tooltip, { ...tabAttrs, message: disabledReason.message, "aria-disabled": disabled, className: "focus-visible:shr-focus-indicator", children: jsx(TabButton, { ...rest, onClick: actualOnClick, disabled: disabled, suffix: Icon }) }));
     }
-    return jsx(TabButton, { ...rest, ...tabAttrs, disabled: disabled });
+    return jsx(TabButton, { ...rest, ...tabAttrs, onClick: actualOnClick, disabled: disabled });
 };
-const TabButton = ({ id, children, suffix, onClick, className, ...rest }) => {
+const TabButton = memo(({ id, children, suffix, className, ...rest }) => {
     const classNames = useMemo(() => {
         const { wrapper, label, suffixWrapper } = classNameGenerator();
         return {
@@ -56,11 +61,8 @@ const TabButton = ({ id, children, suffix, onClick, className, ...rest }) => {
             suffixWrapper: suffixWrapper(),
         };
     }, [className]);
-    const actualOnClick = useCallback((e) => onClick(e.currentTarget.value), [onClick]);
-    return (jsxs(UnstyledButton, { ...rest, type: "button", value: id, id: id, className: classNames.wrapper, onClick: actualOnClick, children: [jsx(TabLabel, { className: classNames.label, children: children }), jsx(TabButtonSuffix, { className: classNames.suffixWrapper, children: suffix })] }));
-};
-const TabLabel = memo(({ children, className }) => (jsx("span", { className: className, children: children })));
-const TabButtonSuffix = memo(({ children, className }) => children && jsx("span", { className: className, children: children }));
+    return (jsxs(UnstyledButton, { ...rest, type: "button", value: id, id: id, className: classNames.wrapper, children: [jsx("span", { className: classNames.label, children: children }), suffix && jsx("span", { className: classNames.suffixWrapper, children: suffix })] }));
+});
 
 export { TabItem };
 //# sourceMappingURL=TabItem.js.map

package/lib/components/TabBar/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-TabItem',\n      'shr-group/tabitem',\n      'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n      'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n      'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n    ],\n    label: [\n      'shr-font-bold shr-leading-none shr-text-grey',\n      'group-hover/tabitem:shr-text-black',\n      'group-disabled/tabitem:shr-text-grey/50',\n      'group-aria-selected/tabitem:shr-text-black',\n    ],\n    suffixWrapper: [\n      // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n      '-shr-my-0.25',\n      // 内包アイコンの leading を詰める\n      '[&_.smarthr-ui-Icon]:shr-block',\n    ],\n  },\n})\n\ntype AbstractProps = PropsWithChildren<{\n  /** タブの ID */\n  id: string\n  /** ボタン内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** `true` のとき、タブが選択状態のスタイルになる */\n  selected?: boolean\n  /** `true` のとき、タブを無効状態にしてクリック不能にする */\n  disabled?: boolean\n  /**\n   * 無効な理由\n   */\n  disabledReason?: {\n    icon?: ReactNode\n    message: ReactNode\n  }\n  /** タブをクリックした時に発火するコールバック関数 */\n  onClick: (tabId: string) => void\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({ selected = false, disabled, disabledReason, ...rest }) => {\n  const tabAttrs = {\n    role: 'tab',\n    'aria-selected': selected,\n  }\n\n  if (disabled && disabledReason) {\n    const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n    return (\n      <Tooltip\n        {...tabAttrs}\n        message={disabledReason.message}\n        aria-disabled={disabled}\n        className=\"focus-visible:shr-focus-indicator\"\n      >\n        <TabButton {...rest} disabled={disabled} suffix={Icon} />\n      </Tooltip>\n    )\n  }\n\n  return <TabButton {...rest} {...tabAttrs} disabled={disabled} />\n}\n\nconst TabButton: FC<Props> = ({ id, children, suffix, onClick, className, ...rest }) => {\n  const classNames = useMemo(() => {\n    const { wrapper, label, suffixWrapper } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      label: label(),\n      suffixWrapper: suffixWrapper(),\n    }\n  }, [className])\n\n  const actualOnClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => onClick(e.currentTarget.value),\n    [onClick],\n  )\n\n  return (\n    <UnstyledButton\n      {...rest}\n      type=\"button\"\n      value={id}\n      id={id}\n      className={classNames.wrapper}\n      onClick={actualOnClick}\n    >\n      <TabLabel className={classNames.label}>{children}</TabLabel>\n      <TabButtonSuffix className={classNames.suffixWrapper}>{suffix}</TabButtonSuffix>\n    </UnstyledButton>\n  )\n}\n\nconst TabLabel = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <span className={className}>{children}</span>\n))\nconst TabButtonSuffix = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => children && <span className={className}>{children}</span>,\n)\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"TabItem.js","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-TabItem',\n      'shr-group/tabitem',\n      'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n      'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n      'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n    ],\n    label: [\n      'shr-font-bold shr-leading-none shr-text-grey',\n      'group-hover/tabitem:shr-text-black',\n      'group-disabled/tabitem:shr-text-grey/50',\n      'group-aria-selected/tabitem:shr-text-black',\n    ],\n    suffixWrapper: [\n      // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n      '-shr-my-0.25',\n      // 内包アイコンの leading を詰める\n      '[&_.smarthr-ui-Icon]:shr-block',\n    ],\n  },\n})\n\ntype AbstractProps = PropsWithChildren<{\n  /** タブの ID */\n  id: string\n  /** ボタン内の末尾に表示する内容 */\n  suffix?: ReactNode\n  /** `true` のとき、タブが選択状態のスタイルになる */\n  selected?: boolean\n  /** `true` のとき、タブを無効状態にしてクリック不能にする */\n  disabled?: boolean\n  /**\n   * 無効な理由\n   */\n  disabledReason?: {\n    icon?: ReactNode\n    message: ReactNode\n  }\n  /** タブをクリックした時に発火するコールバック関数 */\n  onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({\n  selected = false,\n  disabled,\n  disabledReason,\n  onClick,\n  ...rest\n}) => {\n  const tabAttrs = {\n    role: 'tab',\n    'aria-selected': selected,\n  }\n  const onClickRef = useRef(onClick)\n  onClickRef.current = onClick\n\n  const actualOnClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    onClickRef.current(e)\n  }, [])\n\n  if (disabled && disabledReason) {\n    const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n    return (\n      <Tooltip\n        {...tabAttrs}\n        message={disabledReason.message}\n        aria-disabled={disabled}\n        className=\"focus-visible:shr-focus-indicator\"\n      >\n        <TabButton {...rest} onClick={actualOnClick} disabled={disabled} suffix={Icon} />\n      </Tooltip>\n    )\n  }\n\n  return <TabButton {...rest} {...tabAttrs} onClick={actualOnClick} disabled={disabled} />\n}\n\nconst TabButton = memo<PropsWithChildren<Props>>(({ id, children, suffix, className, ...rest }) => {\n  const classNames = useMemo(() => {\n    const { wrapper, label, suffixWrapper } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      label: label(),\n      suffixWrapper: suffixWrapper(),\n    }\n  }, [className])\n\n  return (\n    <UnstyledButton {...rest} type=\"button\" value={id} id={id} className={classNames.wrapper}>\n      <span className={classNames.label}>{children}</span>\n      {suffix && <span className={classNames.suffixWrapper}>{suffix}</span>}\n    </UnstyledButton>\n  )\n})\n"],"names":["tv","_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,oBAAoB;YACpB,mBAAmB;YACnB,gFAAgF;YAChF,2BAA2B;YAC3B,yDAAyD;YACzD,6DAA6D;YAC7D,2QAA2Q;YAC3Q,uDAAuD;AACxD,SAAA;AACD,QAAA,KAAK,EAAE;YACL,8CAA8C;YAC9C,oCAAoC;YACpC,yCAAyC;YACzC,4CAA4C;AAC7C,SAAA;AACD,QAAA,aAAa,EAAE;;YAEb,cAAc;;YAEd,gCAAgC;AACjC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;MAwBW,OAAO,GAAc,CAAC,EACjC,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,cAAc,EACd,OAAO,EACP,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG;AACf,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,eAAe,EAAE,QAAQ;KAC1B;AACD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;AAClC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgC,KAAI;AACrE,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,IAAI,QAAQ,IAAI,cAAc,EAAE;AAC9B,QAAA,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,IAAIC,GAAA,CAAC,gBAAgB,EAAA,EAAC,KAAK,EAAC,WAAW,GAAG;AAE1E,QAAA,QACEA,GAAA,CAAC,OAAO,EAAA,EAAA,GACF,QAAQ,EACZ,OAAO,EAAE,cAAc,CAAC,OAAO,EAAA,eAAA,EAChB,QAAQ,EACvB,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAE7CA,GAAA,CAAC,SAAS,OAAK,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAA,CAAI,EAAA,CACzE;IAEd;AAEA,IAAA,OAAOA,GAAA,CAAC,SAAS,EAAA,EAAA,GAAK,IAAI,KAAM,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAI;AAC1F;AAEA,MAAM,SAAS,GAAG,IAAI,CAA2B,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAChG,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE;QAE9D,OAAO;AACL,YAAA,OAAO,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;YAC/B,KAAK,EAAE,KAAK,EAAE;YACd,aAAa,EAAE,aAAa,EAAE;SAC/B;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,QACEC,KAAC,cAAc,EAAA,EAAA,GAAK,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,aACtFD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EACnD,MAAM,IAAIA,cAAM,SAAS,EAAE,UAAU,CAAC,aAAa,YAAG,MAAM,EAAA,CAAQ,CAAA,EAAA,CACtD;AAErB,CAAC,CAAC;;;;"}

package/lib/hooks/useHandleEscape.cjs

@@ -5,19 +5,19 @@ var React = require('react');
 // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
 // Esc is a IE/Edge specific value
 const ESCAPE_KEY_REGEX = /^Esc(ape)?$/;
-const useHandleEscape = (cb) => {
+const useHandleEscape = (memoizedCallback) => {
     React.useEffect(() => {
-        if (!cb) {
+        if (!memoizedCallback) {
             return;
         }
         const handleKeyPress = (e) => {
             if (ESCAPE_KEY_REGEX.test(e.key)) {
-                cb();
+                memoizedCallback();
             }
         };
         document.addEventListener('keydown', handleKeyPress);
         return () => document.removeEventListener('keydown', handleKeyPress);
-    }, [cb]);
+    }, [memoizedCallback]);
 };
 
 exports.useHandleEscape = useHandleEscape;

package/lib/hooks/useHandleEscape.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleEscape.cjs","sources":["../../src/hooks/useHandleEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\n// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n// Esc is a IE/Edge specific value\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\n\nexport const useHandleEscape = (cb?: () => void) => {\n  useEffect(() => {\n    if (!cb) {\n      return\n    }\n\n    const handleKeyPress = (e: KeyboardEvent) => {\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        cb()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress)\n\n    return () => document.removeEventListener('keydown', handleKeyPress)\n  }, [cb])\n}\n"],"names":["useEffect"],"mappings":";;;;AAEA;AACA;AACA,MAAM,gBAAgB,GAAG,aAAa;AAE/B,MAAM,eAAe,GAAG,CAAC,EAAe,KAAI;IACjDA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,EAAE,EAAE;YACP;QACF;AAEA,QAAA,MAAM,cAAc,GAAG,CAAC,CAAgB,KAAI;YAC1C,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;AAChC,gBAAA,EAAE,EAAE;YACN;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC;QAEpD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC;AACtE,IAAA,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACV;;;;"}
+{"version":3,"file":"useHandleEscape.cjs","sources":["../../src/hooks/useHandleEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\n// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n// Esc is a IE/Edge specific value\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\n\nexport const useHandleEscape = (memoizedCallback?: () => void) => {\n  useEffect(() => {\n    if (!memoizedCallback) {\n      return\n    }\n\n    const handleKeyPress = (e: KeyboardEvent) => {\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        memoizedCallback()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress)\n\n    return () => document.removeEventListener('keydown', handleKeyPress)\n  }, [memoizedCallback])\n}\n"],"names":["useEffect"],"mappings":";;;;AAEA;AACA;AACA,MAAM,gBAAgB,GAAG,aAAa;AAE/B,MAAM,eAAe,GAAG,CAAC,gBAA6B,KAAI;IAC/DA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,gBAAgB,EAAE;YACrB;QACF;AAEA,QAAA,MAAM,cAAc,GAAG,CAAC,CAAgB,KAAI;YAC1C,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;AAChC,gBAAA,gBAAgB,EAAE;YACpB;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC;QAEpD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC;AACtE,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxB;;;;"}

package/lib/hooks/useHandleEscape.d.ts

@@ -1 +1 @@
-export declare const useHandleEscape: (cb?: () => void) => void;
+export declare const useHandleEscape: (memoizedCallback?: () => void) => void;

package/lib/hooks/useHandleEscape.js

@@ -3,19 +3,19 @@ import { useEffect } from 'react';
 // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
 // Esc is a IE/Edge specific value
 const ESCAPE_KEY_REGEX = /^Esc(ape)?$/;
-const useHandleEscape = (cb) => {
+const useHandleEscape = (memoizedCallback) => {
     useEffect(() => {
-        if (!cb) {
+        if (!memoizedCallback) {
             return;
         }
         const handleKeyPress = (e) => {
             if (ESCAPE_KEY_REGEX.test(e.key)) {
-                cb();
+                memoizedCallback();
             }
         };
         document.addEventListener('keydown', handleKeyPress);
         return () => document.removeEventListener('keydown', handleKeyPress);
-    }, [cb]);
+    }, [memoizedCallback]);
 };
 
 export { useHandleEscape };

package/lib/hooks/useHandleEscape.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHandleEscape.js","sources":["../../src/hooks/useHandleEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\n// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n// Esc is a IE/Edge specific value\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\n\nexport const useHandleEscape = (cb?: () => void) => {\n  useEffect(() => {\n    if (!cb) {\n      return\n    }\n\n    const handleKeyPress = (e: KeyboardEvent) => {\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        cb()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress)\n\n    return () => document.removeEventListener('keydown', handleKeyPress)\n  }, [cb])\n}\n"],"names":[],"mappings":";;AAEA;AACA;AACA,MAAM,gBAAgB,GAAG,aAAa;AAE/B,MAAM,eAAe,GAAG,CAAC,EAAe,KAAI;IACjD,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,EAAE,EAAE;YACP;QACF;AAEA,QAAA,MAAM,cAAc,GAAG,CAAC,CAAgB,KAAI;YAC1C,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;AAChC,gBAAA,EAAE,EAAE;YACN;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC;QAEpD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC;AACtE,IAAA,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACV;;;;"}
+{"version":3,"file":"useHandleEscape.js","sources":["../../src/hooks/useHandleEscape.ts"],"sourcesContent":["import { useEffect } from 'react'\n\n// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n// Esc is a IE/Edge specific value\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\n\nexport const useHandleEscape = (memoizedCallback?: () => void) => {\n  useEffect(() => {\n    if (!memoizedCallback) {\n      return\n    }\n\n    const handleKeyPress = (e: KeyboardEvent) => {\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        memoizedCallback()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress)\n\n    return () => document.removeEventListener('keydown', handleKeyPress)\n  }, [memoizedCallback])\n}\n"],"names":[],"mappings":";;AAEA;AACA;AACA,MAAM,gBAAgB,GAAG,aAAa;AAE/B,MAAM,eAAe,GAAG,CAAC,gBAA6B,KAAI;IAC/D,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,gBAAgB,EAAE;YACrB;QACF;AAEA,QAAA,MAAM,cAAc,GAAG,CAAC,CAAgB,KAAI;YAC1C,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;AAChC,gBAAA,gBAAgB,EAAE;YACpB;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC;QAEpD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC;AACtE,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxB;;;;"}

package/lib/intl/Localizer.d.ts

@@ -1,10 +1,10 @@
 import { FormattedMessage as ReactIntlFormattedMessage } from 'react-intl';
-import type { ja } from './locales';
+import type { typedJa } from './locales';
 import type { ComponentProps } from 'react';
-type Messages = Record<keyof typeof ja, string>;
+type Messages = Record<keyof typeof typedJa, string>;
 type Props<Id extends keyof Messages> = {
     id: Id;
-    defaultText: (typeof ja)[Id];
+    defaultText: (typeof typedJa)[Id];
     values?: ComponentProps<typeof ReactIntlFormattedMessage>['values'];
 };
 export declare const Localizer: <ID extends keyof Messages>({ values, id, defaultText, ...rest }: Props<ID>) => import("react/jsx-runtime").JSX.Element;

package/lib/intl/locales/en_us.json.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+var enUs = {
+	"smarthr-ui/common/language": "English",
+	"smarthr-ui/ActionDialog/closeButtonLabel": "Cancel",
+	"smarthr-ui/AppHeader/school": "SmartHR School",
+	"smarthr-ui/AppHeader/help": "Help",
+	"smarthr-ui/AppHeader/userSettings": "Personal Settings",
+	"smarthr-ui/AppHeader/releaseNotes": "Release Notes",
+	"smarthr-ui/AppHeader/releaseNotesLoadError": "Failed to load the release notes. Please try again later.",
+	"smarthr-ui/AppHeader/seeAllReleaseNotes": "View all release notes",
+	"smarthr-ui/AppHeader/DesktopHeader/appLauncherLabel": "Apps",
+	"smarthr-ui/AppHeader/MobileHeader/account": "Account",
+	"smarthr-ui/AppHeader/MobileHeader/openMenu": "Open menu",
+	"smarthr-ui/AppHeader/MobileHeader/closeMenu": "Close menu",
+	"smarthr-ui/AppHeader/MobileHeader/allAppButton": "All Apps",
+	"smarthr-ui/AppHeader/MobileHeader/managementMenu": "Admin Menu",
+	"smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes": "Latest Release Notes",
+	"smarthr-ui/AppHeader/MobileHeader/back": "Back",
+	"smarthr-ui/AppHeader/MobileHeader/openMenuAccordion": "Open",
+	"smarthr-ui/AppHeader/MobileHeader/closeMenuAccordion": "Close",
+	"smarthr-ui/AppHeader/Launcher/searchInputTitle": "Enter the name of the App.",
+	"smarthr-ui/AppHeader/Launcher/favoriteModeText": "Favorite Apps",
+	"smarthr-ui/AppHeader/Launcher/allModeText": "All Apps",
+	"smarthr-ui/AppHeader/Launcher/listText": "App List",
+	"smarthr-ui/AppHeader/Launcher/helpText": "About Favorite Apps",
+	"smarthr-ui/AppHeader/Launcher/searchResultText": "Search results",
+	"smarthr-ui/AppHeader/Launcher/emptyText": "App not found.",
+	"smarthr-ui/AppHeader/Launcher/sortDropdownLabel": "Sort by",
+	"smarthr-ui/AppHeader/Launcher/sortDropdownSelected": "Selected",
+	"smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault": "Default order",
+	"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc": "App name (A→Z)",
+	"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc": "App name (Z→A)",
+	"smarthr-ui/AppLauncher/showAllText": "View all",
+	"smarthr-ui/AppLauncher/triggerLabel": "Apps",
+	"smarthr-ui/Browser/notFoundDescription": "Try changing the filter criteria.",
+	"smarthr-ui/Browser/notFoundTitle": "No items found.",
+	"smarthr-ui/Button/loading": "In Progress",
+	"smarthr-ui/Calendar/currentYear": "Current year",
+	"smarthr-ui/Calendar/nextMonth": "Next month",
+	"smarthr-ui/Calendar/previousMonth": "Previous month",
+	"smarthr-ui/Calendar/selectYear": "Select year",
+	"smarthr-ui/Combobox/addItemButtonLabel": "Add “{name}”",
+	"smarthr-ui/Combobox/loadingText": "In Progress",
+	"smarthr-ui/Combobox/noResultsText": "No matching results found.",
+	"smarthr-ui/DropdownMenuButton/triggerActive": "Hide options",
+	"smarthr-ui/DropdownMenuButton/triggerInactive": "Show options",
+	"smarthr-ui/DropZone/selectButtonLabel": "Choose file to upload",
+	"smarthr-ui/FileViewer/rotateAlt": "Rotate Left",
+	"smarthr-ui/FileViewer/scaleDownAlt": "Zoom Out",
+	"smarthr-ui/FileViewer/scaleRateLabel": "Zoom Factor (%)",
+	"smarthr-ui/FileViewer/scaleUpAlt": "Zoom In",
+	"smarthr-ui/FileViewer/unsupportedFileText": "Unsupported file format.",
+	"smarthr-ui/FilterDropdown/applyText": "Apply",
+	"smarthr-ui/FilterDropdown/cancelText": "Cancel",
+	"smarthr-ui/FilterDropdown/resetText": "Clear filters",
+	"smarthr-ui/FilterDropdown/status": "Filters applied",
+	"smarthr-ui/FilterDropdown/triggerText": "Filter",
+	"smarthr-ui/FormDialog/closeButtonLabel": "Cancel",
+	"smarthr-ui/InformationPanel/closeButtonLabel": "Close",
+	"smarthr-ui/InformationPanel/openButtonLabel": "Open",
+	"smarthr-ui/InputFile/destroy": "Delete",
+	"smarthr-ui/LanguageSwitcher/checkIconAlt": "Selected",
+	"smarthr-ui/Loader/alt": "In Progress",
+	"smarthr-ui/MessageDialog/closeButtonLabel": "Close",
+	"smarthr-ui/ModelessDialog/closeButtonIconAlt": "Close",
+	"smarthr-ui/ModelessDialog/dialogHandlerAriaLabel": "Dialog position",
+	"smarthr-ui/ModelessDialog/dialogHandlerAriaRoleDescription": "Can be dragged",
+	"smarthr-ui/ModelessDialog/dialogHandlerDescription": "Can be moved up, down, left, or right using arrow keys",
+	"smarthr-ui/ModelessDialog/dialogHandlerLiveRegionText": "{top}px from top, {left}px from left",
+	"smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix": ": remove",
+	"smarthr-ui/MultiCombobox/selectedListAriaLabel": "Selected items",
+	"smarthr-ui/NotificationBar/closeButtonIconAlt": "Close",
+	"smarthr-ui/Pagination/controllerItemButtonFirstLabel": "First",
+	"smarthr-ui/Pagination/controllerItemButtonLastLabel": "Last",
+	"smarthr-ui/Pagination/controllerItemButtonNextLabel": "Next",
+	"smarthr-ui/Pagination/controllerItemButtonPreviousLabel": "Previous",
+	"smarthr-ui/Pagination/itemButtonLabel": "Page {page}",
+	"smarthr-ui/Pagination/navigationLabel": "Pagination",
+	"smarthr-ui/RequiredLabel/text": "Required",
+	"smarthr-ui/SearchInput/iconAlt": "Search",
+	"smarthr-ui/SideMenu/navigationLabel": "Sidebar",
+	"smarthr-ui/SingleCombobox/destroyButtonIconAlt": "Clear",
+	"smarthr-ui/SortDropdown/applyText": "Apply",
+	"smarthr-ui/SortDropdown/ascLabel": "Ascending",
+	"smarthr-ui/SortDropdown/cancelText": "Cancel",
+	"smarthr-ui/SortDropdown/descLabel": "Descending",
+	"smarthr-ui/SortDropdown/sortFieldLabel": "Sort items",
+	"smarthr-ui/SortDropdown/sortOrderLegend": "Order",
+	"smarthr-ui/StepFormDialog/backButtonLabel": "Back",
+	"smarthr-ui/StepFormDialog/closeButtonLabel": "Cancel",
+	"smarthr-ui/StepFormDialog/nextButtonLabel": "Next",
+	"smarthr-ui/StepStatusIcon/closedAlt": "Interrupted",
+	"smarthr-ui/StepStatusIcon/completedAlt": "Completed",
+	"smarthr-ui/Textarea/availableLetters": "{availableLetters} characters left",
+	"smarthr-ui/Textarea/maxLettersExceeded": "{exceededLetters} characters over limit",
+	"smarthr-ui/Textarea/screenReaderMaxLettersDescription": "Maximum {maxLetters} characters",
+	"smarthr-ui/OpenInNewTabIcon/openInNewTab": "Open in another tab",
+	"smarthr-ui/Th/sortDirectionAsc": "Ascending",
+	"smarthr-ui/Th/sortDirectionDesc": "Descending",
+	"smarthr-ui/Th/sortDirectionNone": "No sorting",
+	"smarthr-ui/ThCheckbox/checkAllInvisibleLabel": "Select/Deselect All",
+	"smarthr-ui/ThCheckbox/checkColumnName": "Select",
+	"smarthr-ui/ErrorScreen/homeLink": "Back to Home",
+	"smarthr-ui/ErrorScreen/smarthrLink": "Back to SmartHR",
+	"smarthr-ui/AuthErrorScreen/title": "Authentication Issue",
+	"smarthr-ui/ForbiddenErrorScreen/title": "You don’t have permission to view this page",
+	"smarthr-ui/ForbiddenErrorScreen/description": "For more details, please contact the administrator at your company.",
+	"smarthr-ui/NotFoundErrorScreen/title": "Page Not Found",
+	"smarthr-ui/NotFoundErrorScreen/description": "The page you are looking for is temporarily unavailable, or it may have been moved or deleted.",
+	"smarthr-ui/UnauthorizedErrorScreen/title": "Logged Out Due to Inactivity",
+	"smarthr-ui/UnauthorizedErrorScreen/description1": "You have been automatically logged out due to inactivity.",
+	"smarthr-ui/UnauthorizedErrorScreen/description2": "Please log in again to access the requested page.",
+	"smarthr-ui/UnauthorizedErrorScreen/reLoginButton": "Log in again",
+	"smarthr-ui/UnexpectedErrorScreen/title": "Unexpected Error",
+	"smarthr-ui/UnexpectedErrorScreen/apology": "We apologize for the inconvenience.",
+	"smarthr-ui/UnexpectedErrorScreen/possibleCause": "This error may have occurred due to a temporary connection issue, your device or browser settings, or the contents of the file you uploaded.",
+	"smarthr-ui/UnexpectedErrorScreen/pleaseRetry": "We apologize for the trouble. Please try the following:",
+	"smarthr-ui/UnexpectedErrorScreen/retryItem1": "Wait a moment, then try again.",
+	"smarthr-ui/UnexpectedErrorScreen/retryItem2": "Check {maintenanceLink}. Note that the information about maintenance and major system issues may take some time to be posted.",
+	"smarthr-ui/UnexpectedErrorScreen/ifNotResolved": "If the issues is not resolved, try the steps below:",
+	"smarthr-ui/UnexpectedErrorScreen/checkItem1": "Check if you’re using a recommended browser/settings (see {environmentLink})",
+	"smarthr-ui/UnexpectedErrorScreen/checkItem2": "Try clearing your browser’s cookies and cache. For details, see {cookieCacheLink}.",
+	"smarthr-ui/UnexpectedErrorScreen/contactAdmin": "If the issue persists after checking the above, please contact your company’s HR representative, or another person with SmartHR administrator privileges, and provide the information listed here: {errorInfoLink}.",
+	"smarthr-ui/UnexpectedErrorScreen/adminContact": "If you have SmartHR administrator privileges, please contact us using the chat icon in the lower right and provide the following information: {errorInfoLink}.",
+	"smarthr-ui/UnexpectedErrorScreen/maintenanceLink": "Maintenance & Service Alerts",
+	"smarthr-ui/UnexpectedErrorScreen/environmentLink": "SmartHR system requirements",
+	"smarthr-ui/UnexpectedErrorScreen/cookieCacheLink": "Q. How do I clear my browser’s cookies and cache?",
+	"smarthr-ui/UnexpectedErrorScreen/errorOccursInformation": "Information needed to investigate the error"
+};
+
+module.exports = enUs;
+//# sourceMappingURL=en_us.json.cjs.map

package/lib/intl/locales/en_us.json.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"en_us.json.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}