smarthr-ui 87.2.0 → 89.0.0

package/lib/_virtual/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.4/vendor/react-innertext/index.cjs');
+var index = require('./../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.cjs');
 
-var reactInnertextExports = index.__require();
-var innerText = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(reactInnertextExports);
+var lodash_mergeExports = index.__require();
+var _merge = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_mergeExports);
 
-module.exports = innerText;
+module.exports = _merge;
 //# sourceMappingURL=index.cjs.map

package/lib/_virtual/index.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
+import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.4/vendor/react-innertext/index.js';
 
-var lodash_mergeExports = requireLodash_merge();
-var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
+var reactInnertextExports = requireReactInnertext();
+var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
 
-export { _merge as default };
+export { innerText as default };
 //# sourceMappingURL=index.js.map

package/lib/_virtual/index2.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.cjs');
+var index = require('./../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.cjs');
 
-var lodash_mergeExports = index.__require();
-var _merge = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_mergeExports);
+var lodash_rangeExports = index.__require();
+var _range = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_rangeExports);
 
-module.exports = _merge;
+module.exports = _range;
 //# sourceMappingURL=index2.cjs.map

package/lib/_virtual/index2.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
+import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
 
-var lodash_rangeExports = requireLodash_range();
-var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
+var lodash_mergeExports = requireLodash_merge();
+var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
 
-export { _range as default };
+export { _merge as default };
 //# sourceMappingURL=index2.js.map

package/lib/_virtual/index3.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.cjs');
+var index = require('./../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.4/vendor/react-innertext/index.cjs');
 
-var lodash_rangeExports = index.__require();
-var _range = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_rangeExports);
+var reactInnertextExports = index.__require();
+var innerText = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(reactInnertextExports);
 
-module.exports = _range;
+module.exports = innerText;
 //# sourceMappingURL=index3.cjs.map

package/lib/_virtual/index3.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.4/vendor/react-innertext/index.js';
+import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
 
-var reactInnertextExports = requireReactInnertext();
-var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
+var lodash_rangeExports = requireLodash_range();
+var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
 
-export { innerText as default };
+export { _range as default };
 //# sourceMappingURL=index3.js.map

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

@@ -8,7 +8,7 @@ const commonButtonClassNameGenerator = index.tv({
     base: [
         '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',
         '[&&]:hover:shr-bg-white-darken',
-        '[&&]:focus-visible:shr-bg-white-darken',
+        '[&&]:focus-visible:shr-focus-indicator [&&]:focus-visible:shr-bg-white-darken',
     ],
     variants: {
         prefix: {

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

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

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

@@ -6,7 +6,7 @@ const commonButtonClassNameGenerator = ce({
     base: [
         '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',
         '[&&]:hover:shr-bg-white-darken',
-        '[&&]:focus-visible:shr-bg-white-darken',
+        '[&&]:focus-visible:shr-focus-indicator [&&]:focus-visible:shr-bg-white-darken',
     ],
     variants: {
         prefix: {

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

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

package/lib/components/AppHeader/components/desktop/ReleaseNotesDropdown.cjs

@@ -66,8 +66,13 @@ const ReleaseNotesDropdown = ({ indexUrl, links, loading, error }) => {
 const ReleaseNoteDropdownTrigger = React.memo(({ children }) => (jsxRuntime.jsx(components_Dropdown_DropdownTrigger.DropdownTrigger, { children: jsxRuntime.jsx(components_Button_Button.Button, { suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, {}), className: "shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180", children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
 const StyledLoader = React.memo(() => (jsxRuntime.jsx(components_Layout_Center_Center.Center, { className: "shr-py-3", children: jsxRuntime.jsx(components_Loader_Loader.Loader, {}) })));
 const LoadErrorText = React.memo(({ children }) => (jsxRuntime.jsx("div", { className: "shr-whitespace-pre-wrap shr-p-0.75", children: jsxRuntime.jsx(components_Text_Text.Text, { children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
-const ArticleLink = React.memo(({ href, children }) => (jsxRuntime.jsx("div", { className: "shr-border-b-shorthand shr-border-dashed shr-p-0.75", children: jsxRuntime.jsx(components_TextLink_TextLink.TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: children }) })));
-const SeeAllTextLink = React.memo(({ href, children }) => (jsxRuntime.jsx("div", { className: "shr-p-0.75 shr-text-right", children: jsxRuntime.jsx(components_TextLink_TextLink.TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
+// HelpLinkではなくTextLinkを使用する理由:
+// - リリースノートは典型的なヘルプコンテンツではない
+// - rel="help"はW3C定義で「親要素とその子要素のための追加のヘルプ情報」を指すが、
+//   AppHeaderからのリリースノートは現在のページと直接関連するとは限らない
+// 参考: https://www.w3.org/TR/2010/WD-html5-20100624/links.html#link-type-help
+const ArticleLink = React.memo(({ href, children }) => (jsxRuntime.jsx("div", { className: "shr-border-b-shorthand shr-border-dashed shr-p-0.75", children: jsxRuntime.jsx(components_TextLink_TextLink.TextLink, { href: href, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: children }) })));
+const SeeAllTextLink = React.memo(({ href, children }) => (jsxRuntime.jsx("div", { className: "shr-p-0.75 shr-text-right", children: jsxRuntime.jsx(components_TextLink_TextLink.TextLink, { href: href, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
 
 exports.ReleaseNotesDropdown = ReleaseNotesDropdown;
 //# sourceMappingURL=ReleaseNotesDropdown.cjs.map

package/lib/components/AppHeader/components/desktop/ReleaseNotesDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNotesDropdown.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/ReleaseNotesDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport type { ReleaseNoteProps } from '../../types'\n\nconst wrapperClassNameGenerator = tv({\n  base: 'shr-w-[400px]',\n  variants: {\n    type: {\n      content: '',\n    },\n  },\n})\n\nconst BOX_SHADOW_STYLE = { boxShadow: 'none' }\n\nexport const ReleaseNotesDropdown: FC<ReleaseNoteProps> = ({ indexUrl, links, loading, error }) => {\n  const wrapperClassName = useMemo(() => wrapperClassNameGenerator(), [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      releaseNote: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotes',\n        defaultText: 'リリースノート',\n      }),\n      loadError: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className=\"shr-border-l-shorthand shr-ms-0.5\">\n      <Dropdown>\n        <ReleaseNoteDropdownTrigger>{translated.releaseNote}</ReleaseNoteDropdownTrigger>\n        <DropdownContent className=\"shr-mr-1.25\" controllable>\n          <div className=\"shr-w-[400px]\">\n            {loading ? (\n              <StyledLoader />\n            ) : error || !links ? (\n              <LoadErrorText>{translated.loadError}</LoadErrorText>\n            ) : (\n              <div className={wrapperClassName}>\n                {links.slice(0, 5).map(({ title, url }, index) => (\n                  <ArticleLink key={index} href={url}>\n                    {title}\n                  </ArticleLink>\n                ))}\n                <SeeAllTextLink href={indexUrl}>{translated.seeAll}</SeeAllTextLink>\n              </div>\n            )}\n          </div>\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  )\n}\n\nconst ReleaseNoteDropdownTrigger = memo<PropsWithChildren>(({ children }) => (\n  <DropdownTrigger>\n    <Button\n      suffix={<FaCaretDownIcon />}\n      className=\"shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\"\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst StyledLoader = memo(() => (\n  <Center className=\"shr-py-3\">\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo<PropsWithChildren>(({ children }) => (\n  <div className=\"shr-whitespace-pre-wrap shr-p-0.75\">\n    <Text>\n      <Translate>{children}</Translate>\n    </Text>\n  </div>\n))\n\nconst ArticleLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-border-b-shorthand shr-border-dashed shr-p-0.75\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      {children}\n    </TextLink>\n  </div>\n))\n\nconst SeeAllTextLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-p-0.75 shr-text-right\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      <Translate>{children}</Translate>\n    </TextLink>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACE;AACA;AACE;AACE;AACD;AACF;AACF;AAED;AAEO;AACL;AAEA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AA6BL;AAEA;AAWA;AAMA;AAQA;AAcA;;"}
+{"version":3,"file":"ReleaseNotesDropdown.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/ReleaseNotesDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport type { ReleaseNoteProps } from '../../types'\n\nconst wrapperClassNameGenerator = tv({\n  base: 'shr-w-[400px]',\n  variants: {\n    type: {\n      content: '',\n    },\n  },\n})\n\nconst BOX_SHADOW_STYLE = { boxShadow: 'none' }\n\nexport const ReleaseNotesDropdown: FC<ReleaseNoteProps> = ({ indexUrl, links, loading, error }) => {\n  const wrapperClassName = useMemo(() => wrapperClassNameGenerator(), [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      releaseNote: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotes',\n        defaultText: 'リリースノート',\n      }),\n      loadError: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className=\"shr-border-l-shorthand shr-ms-0.5\">\n      <Dropdown>\n        <ReleaseNoteDropdownTrigger>{translated.releaseNote}</ReleaseNoteDropdownTrigger>\n        <DropdownContent className=\"shr-mr-1.25\" controllable>\n          <div className=\"shr-w-[400px]\">\n            {loading ? (\n              <StyledLoader />\n            ) : error || !links ? (\n              <LoadErrorText>{translated.loadError}</LoadErrorText>\n            ) : (\n              <div className={wrapperClassName}>\n                {links.slice(0, 5).map(({ title, url }, index) => (\n                  <ArticleLink key={index} href={url}>\n                    {title}\n                  </ArticleLink>\n                ))}\n                <SeeAllTextLink href={indexUrl}>{translated.seeAll}</SeeAllTextLink>\n              </div>\n            )}\n          </div>\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  )\n}\n\nconst ReleaseNoteDropdownTrigger = memo<PropsWithChildren>(({ children }) => (\n  <DropdownTrigger>\n    <Button\n      suffix={<FaCaretDownIcon />}\n      className=\"shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\"\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst StyledLoader = memo(() => (\n  <Center className=\"shr-py-3\">\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo<PropsWithChildren>(({ children }) => (\n  <div className=\"shr-whitespace-pre-wrap shr-p-0.75\">\n    <Text>\n      <Translate>{children}</Translate>\n    </Text>\n  </div>\n))\n\n// HelpLinkではなくTextLinkを使用する理由:\n// - リリースノートは典型的なヘルプコンテンツではない\n// - rel=\"help\"はW3C定義で「親要素とその子要素のための追加のヘルプ情報」を指すが、\n//   AppHeaderからのリリースノートは現在のページと直接関連するとは限らない\n// 参考: https://www.w3.org/TR/2010/WD-html5-20100624/links.html#link-type-help\nconst ArticleLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-border-b-shorthand shr-border-dashed shr-p-0.75\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener\"\n      referrerPolicy=\"no-referrer-when-downgrade\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      {children}\n    </TextLink>\n  </div>\n))\n\nconst SeeAllTextLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-p-0.75 shr-text-right\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener\"\n      referrerPolicy=\"no-referrer-when-downgrade\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      <Translate>{children}</Translate>\n    </TextLink>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACE;AACA;AACE;AACE;AACD;AACF;AACF;AAED;AAEO;AACL;AAEA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AA6BL;AAEA;AAWA;AAMA;AAQA;AACA;AACA;AACA;AACA;AACA;AAeA;;"}

package/lib/components/AppHeader/components/desktop/ReleaseNotesDropdown.js

@@ -64,8 +64,13 @@ const ReleaseNotesDropdown = ({ indexUrl, links, loading, error }) => {
 const ReleaseNoteDropdownTrigger = memo(({ children }) => (jsx(DropdownTrigger, { children: jsx(Button, { suffix: jsx(FaCaretDownIcon, {}), className: "shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180", children: jsx(Translate, { children: children }) }) })));
 const StyledLoader = memo(() => (jsx(Center, { className: "shr-py-3", children: jsx(Loader, {}) })));
 const LoadErrorText = memo(({ children }) => (jsx("div", { className: "shr-whitespace-pre-wrap shr-p-0.75", children: jsx(Text, { children: jsx(Translate, { children: children }) }) })));
-const ArticleLink = memo(({ href, children }) => (jsx("div", { className: "shr-border-b-shorthand shr-border-dashed shr-p-0.75", children: jsx(TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: children }) })));
-const SeeAllTextLink = memo(({ href, children }) => (jsx("div", { className: "shr-p-0.75 shr-text-right", children: jsx(TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: jsx(Translate, { children: children }) }) })));
+// HelpLinkではなくTextLinkを使用する理由:
+// - リリースノートは典型的なヘルプコンテンツではない
+// - rel="help"はW3C定義で「親要素とその子要素のための追加のヘルプ情報」を指すが、
+//   AppHeaderからのリリースノートは現在のページと直接関連するとは限らない
+// 参考: https://www.w3.org/TR/2010/WD-html5-20100624/links.html#link-type-help
+const ArticleLink = memo(({ href, children }) => (jsx("div", { className: "shr-border-b-shorthand shr-border-dashed shr-p-0.75", children: jsx(TextLink, { href: href, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: children }) })));
+const SeeAllTextLink = memo(({ href, children }) => (jsx("div", { className: "shr-p-0.75 shr-text-right", children: jsx(TextLink, { href: href, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: "shr-leading-normal [&&]:shr-underline", style: BOX_SHADOW_STYLE, children: jsx(Translate, { children: children }) }) })));
 
 export { ReleaseNotesDropdown };
 //# sourceMappingURL=ReleaseNotesDropdown.js.map

package/lib/components/AppHeader/components/desktop/ReleaseNotesDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNotesDropdown.js","sources":["../../../../../src/components/AppHeader/components/desktop/ReleaseNotesDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport type { ReleaseNoteProps } from '../../types'\n\nconst wrapperClassNameGenerator = tv({\n  base: 'shr-w-[400px]',\n  variants: {\n    type: {\n      content: '',\n    },\n  },\n})\n\nconst BOX_SHADOW_STYLE = { boxShadow: 'none' }\n\nexport const ReleaseNotesDropdown: FC<ReleaseNoteProps> = ({ indexUrl, links, loading, error }) => {\n  const wrapperClassName = useMemo(() => wrapperClassNameGenerator(), [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      releaseNote: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotes',\n        defaultText: 'リリースノート',\n      }),\n      loadError: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className=\"shr-border-l-shorthand shr-ms-0.5\">\n      <Dropdown>\n        <ReleaseNoteDropdownTrigger>{translated.releaseNote}</ReleaseNoteDropdownTrigger>\n        <DropdownContent className=\"shr-mr-1.25\" controllable>\n          <div className=\"shr-w-[400px]\">\n            {loading ? (\n              <StyledLoader />\n            ) : error || !links ? (\n              <LoadErrorText>{translated.loadError}</LoadErrorText>\n            ) : (\n              <div className={wrapperClassName}>\n                {links.slice(0, 5).map(({ title, url }, index) => (\n                  <ArticleLink key={index} href={url}>\n                    {title}\n                  </ArticleLink>\n                ))}\n                <SeeAllTextLink href={indexUrl}>{translated.seeAll}</SeeAllTextLink>\n              </div>\n            )}\n          </div>\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  )\n}\n\nconst ReleaseNoteDropdownTrigger = memo<PropsWithChildren>(({ children }) => (\n  <DropdownTrigger>\n    <Button\n      suffix={<FaCaretDownIcon />}\n      className=\"shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\"\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst StyledLoader = memo(() => (\n  <Center className=\"shr-py-3\">\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo<PropsWithChildren>(({ children }) => (\n  <div className=\"shr-whitespace-pre-wrap shr-p-0.75\">\n    <Text>\n      <Translate>{children}</Translate>\n    </Text>\n  </div>\n))\n\nconst ArticleLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-border-b-shorthand shr-border-dashed shr-p-0.75\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      {children}\n    </TextLink>\n  </div>\n))\n\nconst SeeAllTextLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-p-0.75 shr-text-right\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      <Translate>{children}</Translate>\n    </TextLink>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACE;AACA;AACE;AACE;AACD;AACF;AACF;AAED;AAEO;AACL;AAEA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AA6BL;AAEA;AAWA;AAMA;AAQA;AAcA;;"}
+{"version":3,"file":"ReleaseNotesDropdown.js","sources":["../../../../../src/components/AppHeader/components/desktop/ReleaseNotesDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport type { ReleaseNoteProps } from '../../types'\n\nconst wrapperClassNameGenerator = tv({\n  base: 'shr-w-[400px]',\n  variants: {\n    type: {\n      content: '',\n    },\n  },\n})\n\nconst BOX_SHADOW_STYLE = { boxShadow: 'none' }\n\nexport const ReleaseNotesDropdown: FC<ReleaseNoteProps> = ({ indexUrl, links, loading, error }) => {\n  const wrapperClassName = useMemo(() => wrapperClassNameGenerator(), [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      releaseNote: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotes',\n        defaultText: 'リリースノート',\n      }),\n      loadError: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className=\"shr-border-l-shorthand shr-ms-0.5\">\n      <Dropdown>\n        <ReleaseNoteDropdownTrigger>{translated.releaseNote}</ReleaseNoteDropdownTrigger>\n        <DropdownContent className=\"shr-mr-1.25\" controllable>\n          <div className=\"shr-w-[400px]\">\n            {loading ? (\n              <StyledLoader />\n            ) : error || !links ? (\n              <LoadErrorText>{translated.loadError}</LoadErrorText>\n            ) : (\n              <div className={wrapperClassName}>\n                {links.slice(0, 5).map(({ title, url }, index) => (\n                  <ArticleLink key={index} href={url}>\n                    {title}\n                  </ArticleLink>\n                ))}\n                <SeeAllTextLink href={indexUrl}>{translated.seeAll}</SeeAllTextLink>\n              </div>\n            )}\n          </div>\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  )\n}\n\nconst ReleaseNoteDropdownTrigger = memo<PropsWithChildren>(({ children }) => (\n  <DropdownTrigger>\n    <Button\n      suffix={<FaCaretDownIcon />}\n      className=\"shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\"\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst StyledLoader = memo(() => (\n  <Center className=\"shr-py-3\">\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo<PropsWithChildren>(({ children }) => (\n  <div className=\"shr-whitespace-pre-wrap shr-p-0.75\">\n    <Text>\n      <Translate>{children}</Translate>\n    </Text>\n  </div>\n))\n\n// HelpLinkではなくTextLinkを使用する理由:\n// - リリースノートは典型的なヘルプコンテンツではない\n// - rel=\"help\"はW3C定義で「親要素とその子要素のための追加のヘルプ情報」を指すが、\n//   AppHeaderからのリリースノートは現在のページと直接関連するとは限らない\n// 参考: https://www.w3.org/TR/2010/WD-html5-20100624/links.html#link-type-help\nconst ArticleLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-border-b-shorthand shr-border-dashed shr-p-0.75\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener\"\n      referrerPolicy=\"no-referrer-when-downgrade\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      {children}\n    </TextLink>\n  </div>\n))\n\nconst SeeAllTextLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-p-0.75 shr-text-right\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener\"\n      referrerPolicy=\"no-referrer-when-downgrade\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      <Translate>{children}</Translate>\n    </TextLink>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACE;AACA;AACE;AACE;AACD;AACF;AACF;AAED;AAEO;AACL;AAEA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AA6BL;AAEA;AAWA;AAMA;AAQA;AACA;AACA;AACA;AACA;AACA;AAeA;;"}

package/lib/components/AppHeader/components/mobile/ReleaseNote.cjs

@@ -17,16 +17,22 @@ var components_Layout_Center_Center = require('../../../Layout/Center/Center.cjs
 require('../../../Layout/Container/Container.cjs');
 var components_Loader_Loader = require('../../../Loader/Loader.cjs');
 var components_Text_Text = require('../../../Text/Text.cjs');
+var components_TextLink_TextLink = require('../../../TextLink/TextLink.cjs');
+require('../../../TextLink/HelpLink/HelpLink.cjs');
+require('../../../TextLink/UpwardLink/UpwardLink.cjs');
 var components_AppHeader_components_common_Translate = require('../common/Translate.cjs');
 var components_AppHeader_components_mobile_ReleaseNoteContext = require('./ReleaseNoteContext.cjs');
 
 const classNameGenerator = index.tv({
     slots: {
-        anchor: ['shr-text-base shr-text-link [&&]:shr-underline', '[&&]:hover:shr-no-underline'],
+        anchor: [
+            'shr-text-base shr-text-link shr-shadow-none [&&]:shr-underline',
+            '[&&]:hover:shr-no-underline',
+        ],
         icon: ['shr-ms-0.5'],
         indexLinkWrapper: ['shr-mt-2 shr-text-end'],
         indexLinkAnchor: [
-            'shr-text-base shr-text-link [&&]:shr-no-underline',
+            'shr-text-base shr-text-link shr-shadow-none [&&]:shr-no-underline',
             '[&&]:hover:shr-underline',
         ],
     },
@@ -56,7 +62,7 @@ const ActualReleaseNote = ({ data }) => {
             indexLinkAnchor: indexLinkAnchor(),
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { children: [data.loading ? (jsxRuntime.jsx(components_Layout_Center_Center.Center, { children: jsxRuntime.jsx(components_Loader_Loader.Loader, {}) })) : data.error ? (jsxRuntime.jsx(components_Text_Text.Text, { children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.error }) })) : (jsxRuntime.jsx(components_Layout_Stack_Stack.Stack, { children: data.links.slice(0, 5).map((link) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", className: classNames.anchor, children: [link.title, jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, { className: classNames.icon })] }) }, link.url))) })), jsxRuntime.jsx("div", { className: classNames.indexLinkWrapper, children: jsxRuntime.jsxs("a", { href: data.indexUrl, target: "_blank", rel: "noopener noreferrer", className: classNames.indexLinkAnchor, children: [jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.seeAll }), jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, { className: classNames.icon })] }) })] }));
+    return (jsxRuntime.jsxs("div", { children: [data.loading ? (jsxRuntime.jsx(components_Layout_Center_Center.Center, { children: jsxRuntime.jsx(components_Loader_Loader.Loader, {}) })) : data.error ? (jsxRuntime.jsx(components_Text_Text.Text, { children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.error }) })) : (jsxRuntime.jsx(components_Layout_Stack_Stack.Stack, { children: data.links.slice(0, 5).map((link) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(components_TextLink_TextLink.TextLink, { href: link.url, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: classNames.anchor, suffix: jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, { className: classNames.icon }), children: link.title }) }, link.url))) })), jsxRuntime.jsx("div", { className: classNames.indexLinkWrapper, children: jsxRuntime.jsx(components_TextLink_TextLink.TextLink, { href: data.indexUrl, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: classNames.indexLinkAnchor, suffix: jsxRuntime.jsx(components_Icon_OpenInNewTabIcon.OpenInNewTabIcon, { className: classNames.icon }), children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.seeAll }) }) })] }));
 };
 
 exports.ReleaseNote = ReleaseNote;

package/lib/components/AppHeader/components/mobile/ReleaseNote.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNote.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/ReleaseNote.tsx"],"sourcesContent":["import { type FC, memo, useContext, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { OpenInNewTabIcon } from '../../../Icon'\nimport { Center, Stack } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { Translate } from '../common/Translate'\n\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nimport type { HeaderProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: ['shr-text-base shr-text-link [&&]:shr-underline', '[&&]:hover:shr-no-underline'],\n    icon: ['shr-ms-0.5'],\n    indexLinkWrapper: ['shr-mt-2 shr-text-end'],\n    indexLinkAnchor: [\n      'shr-text-base shr-text-link [&&]:shr-no-underline',\n      '[&&]:hover:shr-underline',\n    ],\n  },\n})\n\nexport const ReleaseNote = memo(() => {\n  const { releaseNote } = useContext(ReleaseNoteContext)\n\n  return releaseNote ? <ActualReleaseNote data={releaseNote} /> : null\n})\n\nconst ActualReleaseNote: FC<{\n  data: Exclude<Required<HeaderProps>['releaseNote'], null>\n}> = ({ data }) => {\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      error: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  const classNames = useMemo(() => {\n    const { anchor, icon, indexLinkWrapper, indexLinkAnchor } = classNameGenerator()\n\n    return {\n      anchor: anchor(),\n      icon: icon(),\n      indexLinkWrapper: indexLinkWrapper(),\n      indexLinkAnchor: indexLinkAnchor(),\n    }\n  }, [])\n\n  return (\n    <div>\n      {data.loading ? (\n        <Center>\n          <Loader />\n        </Center>\n      ) : data.error ? (\n        <Text>\n          <Translate>{translated.error}</Translate>\n        </Text>\n      ) : (\n        <Stack>\n          {data.links.slice(0, 5).map((link) => (\n            <div key={link.url}>\n              <a\n                href={link.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={classNames.anchor}\n              >\n                {link.title}\n                <OpenInNewTabIcon className={classNames.icon} />\n              </a>\n            </div>\n          ))}\n        </Stack>\n      )}\n\n      <div className={classNames.indexLinkWrapper}>\n        <a\n          href={data.indexUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className={classNames.indexLinkAnchor}\n        >\n          <Translate>{translated.seeAll}</Translate>\n          <OpenInNewTabIcon className={classNames.icon} />\n        </a>\n      </div>\n    </div>\n  )\n}\n"],"names":["tv","memo","useContext","ReleaseNoteContext","_jsx","useIntl","useMemo","_jsxs","Center","Loader","Text","Translate","Stack","OpenInNewTabIcon"],"mappings":"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"}
+{"version":3,"file":"ReleaseNote.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/ReleaseNote.tsx"],"sourcesContent":["import { type FC, memo, useContext, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { OpenInNewTabIcon } from '../../../Icon'\nimport { Center, Stack } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nimport type { HeaderProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: [\n      'shr-text-base shr-text-link shr-shadow-none [&&]:shr-underline',\n      '[&&]:hover:shr-no-underline',\n    ],\n    icon: ['shr-ms-0.5'],\n    indexLinkWrapper: ['shr-mt-2 shr-text-end'],\n    indexLinkAnchor: [\n      'shr-text-base shr-text-link shr-shadow-none [&&]:shr-no-underline',\n      '[&&]:hover:shr-underline',\n    ],\n  },\n})\n\nexport const ReleaseNote = memo(() => {\n  const { releaseNote } = useContext(ReleaseNoteContext)\n\n  return releaseNote ? <ActualReleaseNote data={releaseNote} /> : null\n})\n\nconst ActualReleaseNote: FC<{\n  data: Exclude<Required<HeaderProps>['releaseNote'], null>\n}> = ({ data }) => {\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      error: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  const classNames = useMemo(() => {\n    const { anchor, icon, indexLinkWrapper, indexLinkAnchor } = classNameGenerator()\n\n    return {\n      anchor: anchor(),\n      icon: icon(),\n      indexLinkWrapper: indexLinkWrapper(),\n      indexLinkAnchor: indexLinkAnchor(),\n    }\n  }, [])\n\n  return (\n    <div>\n      {data.loading ? (\n        <Center>\n          <Loader />\n        </Center>\n      ) : data.error ? (\n        <Text>\n          <Translate>{translated.error}</Translate>\n        </Text>\n      ) : (\n        <Stack>\n          {data.links.slice(0, 5).map((link) => (\n            <div key={link.url}>\n              <TextLink\n                href={link.url}\n                target=\"_blank\"\n                rel=\"noopener\"\n                referrerPolicy=\"no-referrer-when-downgrade\"\n                className={classNames.anchor}\n                suffix={<OpenInNewTabIcon className={classNames.icon} />}\n              >\n                {link.title}\n              </TextLink>\n            </div>\n          ))}\n        </Stack>\n      )}\n\n      <div className={classNames.indexLinkWrapper}>\n        <TextLink\n          href={data.indexUrl}\n          target=\"_blank\"\n          rel=\"noopener\"\n          referrerPolicy=\"no-referrer-when-downgrade\"\n          className={classNames.indexLinkAnchor}\n          suffix={<OpenInNewTabIcon className={classNames.icon} />}\n        >\n          <Translate>{translated.seeAll}</Translate>\n        </TextLink>\n      </div>\n    </div>\n  )\n}\n"],"names":["tv","memo","useContext","ReleaseNoteContext","_jsx","useIntl","useMemo","_jsxs","Center","Loader","Text","Translate","Stack","TextLink","OpenInNewTabIcon"],"mappings":"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"}

package/lib/components/AppHeader/components/mobile/ReleaseNote.js

@@ -15,16 +15,22 @@ import { Center } from '../../../Layout/Center/Center.js';
 import '../../../Layout/Container/Container.js';
 import { Loader } from '../../../Loader/Loader.js';
 import { Text } from '../../../Text/Text.js';
+import { TextLink } from '../../../TextLink/TextLink.js';
+import '../../../TextLink/HelpLink/HelpLink.js';
+import '../../../TextLink/UpwardLink/UpwardLink.js';
 import { Translate } from '../common/Translate.js';
 import { ReleaseNoteContext } from './ReleaseNoteContext.js';
 
 const classNameGenerator = ce({
     slots: {
-        anchor: ['shr-text-base shr-text-link [&&]:shr-underline', '[&&]:hover:shr-no-underline'],
+        anchor: [
+            'shr-text-base shr-text-link shr-shadow-none [&&]:shr-underline',
+            '[&&]:hover:shr-no-underline',
+        ],
         icon: ['shr-ms-0.5'],
         indexLinkWrapper: ['shr-mt-2 shr-text-end'],
         indexLinkAnchor: [
-            'shr-text-base shr-text-link [&&]:shr-no-underline',
+            'shr-text-base shr-text-link shr-shadow-none [&&]:shr-no-underline',
             '[&&]:hover:shr-underline',
         ],
     },
@@ -54,7 +60,7 @@ const ActualReleaseNote = ({ data }) => {
             indexLinkAnchor: indexLinkAnchor(),
         };
     }, []);
-    return (jsxs("div", { children: [data.loading ? (jsx(Center, { children: jsx(Loader, {}) })) : data.error ? (jsx(Text, { children: jsx(Translate, { children: translated.error }) })) : (jsx(Stack, { children: data.links.slice(0, 5).map((link) => (jsx("div", { children: jsxs("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", className: classNames.anchor, children: [link.title, jsx(OpenInNewTabIcon, { className: classNames.icon })] }) }, link.url))) })), jsx("div", { className: classNames.indexLinkWrapper, children: jsxs("a", { href: data.indexUrl, target: "_blank", rel: "noopener noreferrer", className: classNames.indexLinkAnchor, children: [jsx(Translate, { children: translated.seeAll }), jsx(OpenInNewTabIcon, { className: classNames.icon })] }) })] }));
+    return (jsxs("div", { children: [data.loading ? (jsx(Center, { children: jsx(Loader, {}) })) : data.error ? (jsx(Text, { children: jsx(Translate, { children: translated.error }) })) : (jsx(Stack, { children: data.links.slice(0, 5).map((link) => (jsx("div", { children: jsx(TextLink, { href: link.url, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: classNames.anchor, suffix: jsx(OpenInNewTabIcon, { className: classNames.icon }), children: link.title }) }, link.url))) })), jsx("div", { className: classNames.indexLinkWrapper, children: jsx(TextLink, { href: data.indexUrl, target: "_blank", rel: "noopener", referrerPolicy: "no-referrer-when-downgrade", className: classNames.indexLinkAnchor, suffix: jsx(OpenInNewTabIcon, { className: classNames.icon }), children: jsx(Translate, { children: translated.seeAll }) }) })] }));
 };
 
 export { ReleaseNote };

package/lib/components/AppHeader/components/mobile/ReleaseNote.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNote.js","sources":["../../../../../src/components/AppHeader/components/mobile/ReleaseNote.tsx"],"sourcesContent":["import { type FC, memo, useContext, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { OpenInNewTabIcon } from '../../../Icon'\nimport { Center, Stack } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { Translate } from '../common/Translate'\n\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nimport type { HeaderProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: ['shr-text-base shr-text-link [&&]:shr-underline', '[&&]:hover:shr-no-underline'],\n    icon: ['shr-ms-0.5'],\n    indexLinkWrapper: ['shr-mt-2 shr-text-end'],\n    indexLinkAnchor: [\n      'shr-text-base shr-text-link [&&]:shr-no-underline',\n      '[&&]:hover:shr-underline',\n    ],\n  },\n})\n\nexport const ReleaseNote = memo(() => {\n  const { releaseNote } = useContext(ReleaseNoteContext)\n\n  return releaseNote ? <ActualReleaseNote data={releaseNote} /> : null\n})\n\nconst ActualReleaseNote: FC<{\n  data: Exclude<Required<HeaderProps>['releaseNote'], null>\n}> = ({ data }) => {\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      error: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  const classNames = useMemo(() => {\n    const { anchor, icon, indexLinkWrapper, indexLinkAnchor } = classNameGenerator()\n\n    return {\n      anchor: anchor(),\n      icon: icon(),\n      indexLinkWrapper: indexLinkWrapper(),\n      indexLinkAnchor: indexLinkAnchor(),\n    }\n  }, [])\n\n  return (\n    <div>\n      {data.loading ? (\n        <Center>\n          <Loader />\n        </Center>\n      ) : data.error ? (\n        <Text>\n          <Translate>{translated.error}</Translate>\n        </Text>\n      ) : (\n        <Stack>\n          {data.links.slice(0, 5).map((link) => (\n            <div key={link.url}>\n              <a\n                href={link.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={classNames.anchor}\n              >\n                {link.title}\n                <OpenInNewTabIcon className={classNames.icon} />\n              </a>\n            </div>\n          ))}\n        </Stack>\n      )}\n\n      <div className={classNames.indexLinkWrapper}>\n        <a\n          href={data.indexUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className={classNames.indexLinkAnchor}\n        >\n          <Translate>{translated.seeAll}</Translate>\n          <OpenInNewTabIcon className={classNames.icon} />\n        </a>\n      </div>\n    </div>\n  )\n}\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ReleaseNote.js","sources":["../../../../../src/components/AppHeader/components/mobile/ReleaseNote.tsx"],"sourcesContent":["import { type FC, memo, useContext, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { OpenInNewTabIcon } from '../../../Icon'\nimport { Center, Stack } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nimport type { HeaderProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    anchor: [\n      'shr-text-base shr-text-link shr-shadow-none [&&]:shr-underline',\n      '[&&]:hover:shr-no-underline',\n    ],\n    icon: ['shr-ms-0.5'],\n    indexLinkWrapper: ['shr-mt-2 shr-text-end'],\n    indexLinkAnchor: [\n      'shr-text-base shr-text-link shr-shadow-none [&&]:shr-no-underline',\n      '[&&]:hover:shr-underline',\n    ],\n  },\n})\n\nexport const ReleaseNote = memo(() => {\n  const { releaseNote } = useContext(ReleaseNoteContext)\n\n  return releaseNote ? <ActualReleaseNote data={releaseNote} /> : null\n})\n\nconst ActualReleaseNote: FC<{\n  data: Exclude<Required<HeaderProps>['releaseNote'], null>\n}> = ({ data }) => {\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      error: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  const classNames = useMemo(() => {\n    const { anchor, icon, indexLinkWrapper, indexLinkAnchor } = classNameGenerator()\n\n    return {\n      anchor: anchor(),\n      icon: icon(),\n      indexLinkWrapper: indexLinkWrapper(),\n      indexLinkAnchor: indexLinkAnchor(),\n    }\n  }, [])\n\n  return (\n    <div>\n      {data.loading ? (\n        <Center>\n          <Loader />\n        </Center>\n      ) : data.error ? (\n        <Text>\n          <Translate>{translated.error}</Translate>\n        </Text>\n      ) : (\n        <Stack>\n          {data.links.slice(0, 5).map((link) => (\n            <div key={link.url}>\n              <TextLink\n                href={link.url}\n                target=\"_blank\"\n                rel=\"noopener\"\n                referrerPolicy=\"no-referrer-when-downgrade\"\n                className={classNames.anchor}\n                suffix={<OpenInNewTabIcon className={classNames.icon} />}\n              >\n                {link.title}\n              </TextLink>\n            </div>\n          ))}\n        </Stack>\n      )}\n\n      <div className={classNames.indexLinkWrapper}>\n        <TextLink\n          href={data.indexUrl}\n          target=\"_blank\"\n          rel=\"noopener\"\n          referrerPolicy=\"no-referrer-when-downgrade\"\n          className={classNames.indexLinkAnchor}\n          suffix={<OpenInNewTabIcon className={classNames.icon} />}\n        >\n          <Translate>{translated.seeAll}</Translate>\n        </TextLink>\n      </div>\n    </div>\n  )\n}\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}

package/lib/components/AppNavi/itemClassNameGenerator.cjs

@@ -7,7 +7,7 @@ const itemClassNameGenerator = index.tv({
         wrapper: [
             'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-text-grey shr-no-underline',
             'hover:shr-bg-white-darken',
-            'focus-visible:shr-focus-indicator--inner',
+            'focus-visible:shr-focus-indicator',
         ],
         icon: 'shr-fill-grey',
     },

package/lib/components/AppNavi/itemClassNameGenerator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"itemClassNameGenerator.cjs","sources":["../../../src/components/AppNavi/itemClassNameGenerator.ts"],"sourcesContent":["import { tv } from 'tailwind-variants'\n\nexport const itemClassNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-text-grey shr-no-underline',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator--inner',\n    ],\n    icon: 'shr-fill-grey',\n  },\n  variants: {\n    active: {\n      true: {\n        wrapper: [\n          'shr-relative shr-text-black',\n          'after:shr-absolute after:shr-bottom-0 after:shr-left-0 after:shr-right-0 after:shr-block after:shr-h-0.25 after:shr-bg-main after:shr-content-[\"\"]',\n        ],\n        icon: 'shr-fill-black',\n      },\n    },\n  },\n})\n"],"names":["tv"],"mappings":";;;;AAEO,MAAM,sBAAsB,GAAGA,QAAE,CAAC;AACvC,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,yMAAyM;YACzM,2BAA2B;YAC3B,0CAA0C;AAC3C,SAAA;AACD,QAAA,IAAI,EAAE,eAAe;AACtB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE;oBACP,6BAA6B;oBAC7B,oJAAoJ;AACrJ,iBAAA;AACD,gBAAA,IAAI,EAAE,gBAAgB;AACvB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"itemClassNameGenerator.cjs","sources":["../../../src/components/AppNavi/itemClassNameGenerator.ts"],"sourcesContent":["import { tv } from 'tailwind-variants'\n\nexport const itemClassNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-text-grey shr-no-underline',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n    ],\n    icon: 'shr-fill-grey',\n  },\n  variants: {\n    active: {\n      true: {\n        wrapper: [\n          'shr-relative shr-text-black',\n          'after:shr-absolute after:shr-bottom-0 after:shr-left-0 after:shr-right-0 after:shr-block after:shr-h-0.25 after:shr-bg-main after:shr-content-[\"\"]',\n        ],\n        icon: 'shr-fill-black',\n      },\n    },\n  },\n})\n"],"names":["tv"],"mappings":";;;;AAEO,MAAM,sBAAsB,GAAGA,QAAE,CAAC;AACvC,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,yMAAyM;YACzM,2BAA2B;YAC3B,mCAAmC;AACpC,SAAA;AACD,QAAA,IAAI,EAAE,eAAe;AACtB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE;oBACP,6BAA6B;oBAC7B,oJAAoJ;AACrJ,iBAAA;AACD,gBAAA,IAAI,EAAE,gBAAgB;AACvB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA;;;;"}

package/lib/components/AppNavi/itemClassNameGenerator.js

@@ -5,7 +5,7 @@ const itemClassNameGenerator = ce({
         wrapper: [
             'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-text-grey shr-no-underline',
             'hover:shr-bg-white-darken',
-            'focus-visible:shr-focus-indicator--inner',
+            'focus-visible:shr-focus-indicator',
         ],
         icon: 'shr-fill-grey',
     },

package/lib/components/AppNavi/itemClassNameGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"itemClassNameGenerator.js","sources":["../../../src/components/AppNavi/itemClassNameGenerator.ts"],"sourcesContent":["import { tv } from 'tailwind-variants'\n\nexport const itemClassNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-text-grey shr-no-underline',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator--inner',\n    ],\n    icon: 'shr-fill-grey',\n  },\n  variants: {\n    active: {\n      true: {\n        wrapper: [\n          'shr-relative shr-text-black',\n          'after:shr-absolute after:shr-bottom-0 after:shr-left-0 after:shr-right-0 after:shr-block after:shr-h-0.25 after:shr-bg-main after:shr-content-[\"\"]',\n        ],\n        icon: 'shr-fill-black',\n      },\n    },\n  },\n})\n"],"names":["tv"],"mappings":";;AAEO,MAAM,sBAAsB,GAAGA,EAAE,CAAC;AACvC,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,yMAAyM;YACzM,2BAA2B;YAC3B,0CAA0C;AAC3C,SAAA;AACD,QAAA,IAAI,EAAE,eAAe;AACtB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE;oBACP,6BAA6B;oBAC7B,oJAAoJ;AACrJ,iBAAA;AACD,gBAAA,IAAI,EAAE,gBAAgB;AACvB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"itemClassNameGenerator.js","sources":["../../../src/components/AppNavi/itemClassNameGenerator.ts"],"sourcesContent":["import { tv } from 'tailwind-variants'\n\nexport const itemClassNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-box-border shr-inline-flex shr-cursor-pointer shr-items-center shr-gap-0.5 shr-whitespace-nowrap shr-px-0.5 shr-py-0.75 shr-text-base shr-font-bold shr-leading-none shr-text-grey shr-no-underline',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n    ],\n    icon: 'shr-fill-grey',\n  },\n  variants: {\n    active: {\n      true: {\n        wrapper: [\n          'shr-relative shr-text-black',\n          'after:shr-absolute after:shr-bottom-0 after:shr-left-0 after:shr-right-0 after:shr-block after:shr-h-0.25 after:shr-bg-main after:shr-content-[\"\"]',\n        ],\n        icon: 'shr-fill-black',\n      },\n    },\n  },\n})\n"],"names":["tv"],"mappings":";;AAEO,MAAM,sBAAsB,GAAGA,EAAE,CAAC;AACvC,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,yMAAyM;YACzM,2BAA2B;YAC3B,mCAAmC;AACpC,SAAA;AACD,QAAA,IAAI,EAAE,eAAe;AACtB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE;oBACP,6BAA6B;oBAC7B,oJAAoJ;AACrJ,iBAAA;AACD,gBAAA,IAAI,EAAE,gBAAgB;AACvB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA;;;;"}

package/lib/components/Browser/BrowserItem.cjs

@@ -45,6 +45,7 @@ const classNameGenerator = index.tv({
                     'shr-bg-main shr-text-white',
                     'hover:shr-bg-main-darken',
                     'forced-colors:shr-bg-[Highlight]',
+                    'has-[:focus-visible]:shr-focus-indicator',
                 ],
             },
         },

package/lib/components/Browser/BrowserItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserItem.cjs","sources":["../../../src/components/Browser/BrowserItem.tsx"],"sourcesContent":["import { type ChangeEvent, type FC, type KeyboardEventHandler, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaAngleRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\nimport { Text } from '../Text'\n\nimport { getElementIdFromNode } from './utils'\n\nimport type { ItemNode } from './models'\n\nconst classNameGenerator = tv({\n  slots: {\n    label: [\n      'shr-block shr-rounded-m shr-px-1 shr-py-0.5',\n      'hover:shr-bg-white-darken',\n      'has-[:focus-visible]:shr-focus-indicator',\n    ],\n    input: 'shr-sr-only',\n  },\n  variants: {\n    selected: {\n      true: {\n        label: ['shr-bg-white-darken shr-font-bold', 'hover:shr-bg-column-darken'],\n      },\n      false: {},\n    },\n    hasChildren: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      hasChildren: false,\n      className: {\n        label: [\n          'shr-bg-main shr-text-white',\n          'hover:shr-bg-main-darken',\n          'forced-colors:shr-bg-[Highlight]',\n        ],\n      },\n    },\n  ],\n})\n\ntype Props = {\n  selected: boolean\n  itemValue: ItemNode['value']\n  itemLabel: ItemNode['label']\n  itemHasChildren: boolean\n  tabIndex: 0 | -1\n  columnIndex: number\n  onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nconst KEYDOWN_REGEX = /^((Arrow(Right|Left|Up|Down))|Enter| )$/\nconst HANDLE_KEYDOWN: KeyboardEventHandler = (e) => {\n  if (KEYDOWN_REGEX.test(e.key)) {\n    e.preventDefault()\n  }\n}\n\nexport const BrowserItem: FC<Props> = ({\n  selected,\n  itemValue,\n  itemLabel,\n  itemHasChildren,\n  tabIndex,\n  columnIndex,\n  onChangeInput,\n}) => {\n  const inputId = useMemo(() => getElementIdFromNode(itemValue), [itemValue])\n  const classNames = useMemo(() => {\n    const { label, input } = classNameGenerator({ selected, hasChildren: itemHasChildren })\n    return {\n      label: label(),\n      input: input(),\n    }\n  }, [selected, itemHasChildren])\n\n  return (\n    <label htmlFor={inputId} className={classNames.label}>\n      <input\n        className={classNames.input}\n        type=\"radio\"\n        id={inputId}\n        name={`column-${columnIndex}`}\n        value={itemValue}\n        tabIndex={tabIndex}\n        onKeyDown={HANDLE_KEYDOWN}\n        onChange={onChangeInput}\n        checked={selected}\n      />\n      <BodyCluster label={itemLabel} hasChildren={itemHasChildren} />\n    </label>\n  )\n}\n\nconst BodyCluster = memo<{ label: string; hasChildren: boolean }>(({ label, hasChildren }) => (\n  <Cluster align=\"center\" justify=\"space-between\" as=\"span\">\n    <Text>{label}</Text>\n    {hasChildren && <FaAngleRightIcon />}\n  </Cluster>\n))\n"],"names":["tv","useMemo","getElementIdFromNode","_jsxs","_jsx","memo","Cluster","Text","FaAngleRightIcon"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;YACL,6CAA6C;YAC7C,2BAA2B;YAC3B,0CAA0C;AAC3C,SAAA;AACD,QAAA,KAAK,EAAE,aAAa;AACrB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,CAAC,mCAAmC,EAAE,4BAA4B,CAAC;AAC3E,aAAA;AACD,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,SAAS,EAAE;AACT,gBAAA,KAAK,EAAE;oBACL,4BAA4B;oBAC5B,0BAA0B;oBAC1B,kCAAkC;AACnC,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAYF,MAAM,aAAa,GAAG,yCAAyC;AAC/D,MAAM,cAAc,GAAyB,CAAC,CAAC,KAAI;IACjD,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QAC7B,CAAC,CAAC,cAAc,EAAE;IACpB;AACF,CAAC;MAEY,WAAW,GAAc,CAAC,EACrC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,QAAQ,EACR,WAAW,EACX,aAAa,GACd,KAAI;AACH,IAAA,MAAM,OAAO,GAAGC,aAAO,CAAC,MAAMC,6CAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAC3E,IAAA,MAAM,UAAU,GAAGD,aAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;QACvF,OAAO;YACL,KAAK,EAAE,KAAK,EAAE;YACd,KAAK,EAAE,KAAK,EAAE;SACf;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AAE/B,IAAA,QACEE,eAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,QAAA,EAAA,CAClDC,0BACE,SAAS,EAAE,UAAU,CAAC,KAAK,EAC3B,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,CAAA,OAAA,EAAU,WAAW,CAAA,CAAE,EAC7B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,QAAQ,EAAA,CACjB,EACFA,cAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CACzD;AAEZ;AAEA,MAAM,WAAW,GAAGC,UAAI,CAA0C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MACvFF,eAAA,CAACG,yCAAO,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM,EAAA,QAAA,EAAA,CACvDF,cAAA,CAACG,yBAAI,EAAA,EAAA,QAAA,EAAE,KAAK,GAAQ,EACnB,WAAW,IAAIH,cAAA,CAACI,uCAAgB,KAAG,CAAA,EAAA,CAC5B,CACX,CAAC;;;;"}
+{"version":3,"file":"BrowserItem.cjs","sources":["../../../src/components/Browser/BrowserItem.tsx"],"sourcesContent":["import { type ChangeEvent, type FC, type KeyboardEventHandler, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaAngleRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\nimport { Text } from '../Text'\n\nimport { getElementIdFromNode } from './utils'\n\nimport type { ItemNode } from './models'\n\nconst classNameGenerator = tv({\n  slots: {\n    label: [\n      'shr-block shr-rounded-m shr-px-1 shr-py-0.5',\n      'hover:shr-bg-white-darken',\n      'has-[:focus-visible]:shr-focus-indicator',\n    ],\n    input: 'shr-sr-only',\n  },\n  variants: {\n    selected: {\n      true: {\n        label: ['shr-bg-white-darken shr-font-bold', 'hover:shr-bg-column-darken'],\n      },\n      false: {},\n    },\n    hasChildren: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      hasChildren: false,\n      className: {\n        label: [\n          'shr-bg-main shr-text-white',\n          'hover:shr-bg-main-darken',\n          'forced-colors:shr-bg-[Highlight]',\n          'has-[:focus-visible]:shr-focus-indicator',\n        ],\n      },\n    },\n  ],\n})\n\ntype Props = {\n  selected: boolean\n  itemValue: ItemNode['value']\n  itemLabel: ItemNode['label']\n  itemHasChildren: boolean\n  tabIndex: 0 | -1\n  columnIndex: number\n  onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nconst KEYDOWN_REGEX = /^((Arrow(Right|Left|Up|Down))|Enter| )$/\nconst HANDLE_KEYDOWN: KeyboardEventHandler = (e) => {\n  if (KEYDOWN_REGEX.test(e.key)) {\n    e.preventDefault()\n  }\n}\n\nexport const BrowserItem: FC<Props> = ({\n  selected,\n  itemValue,\n  itemLabel,\n  itemHasChildren,\n  tabIndex,\n  columnIndex,\n  onChangeInput,\n}) => {\n  const inputId = useMemo(() => getElementIdFromNode(itemValue), [itemValue])\n  const classNames = useMemo(() => {\n    const { label, input } = classNameGenerator({ selected, hasChildren: itemHasChildren })\n    return {\n      label: label(),\n      input: input(),\n    }\n  }, [selected, itemHasChildren])\n\n  return (\n    <label htmlFor={inputId} className={classNames.label}>\n      <input\n        className={classNames.input}\n        type=\"radio\"\n        id={inputId}\n        name={`column-${columnIndex}`}\n        value={itemValue}\n        tabIndex={tabIndex}\n        onKeyDown={HANDLE_KEYDOWN}\n        onChange={onChangeInput}\n        checked={selected}\n      />\n      <BodyCluster label={itemLabel} hasChildren={itemHasChildren} />\n    </label>\n  )\n}\n\nconst BodyCluster = memo<{ label: string; hasChildren: boolean }>(({ label, hasChildren }) => (\n  <Cluster align=\"center\" justify=\"space-between\" as=\"span\">\n    <Text>{label}</Text>\n    {hasChildren && <FaAngleRightIcon />}\n  </Cluster>\n))\n"],"names":["tv","useMemo","getElementIdFromNode","_jsxs","_jsx","memo","Cluster","Text","FaAngleRightIcon"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;YACL,6CAA6C;YAC7C,2BAA2B;YAC3B,0CAA0C;AAC3C,SAAA;AACD,QAAA,KAAK,EAAE,aAAa;AACrB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,CAAC,mCAAmC,EAAE,4BAA4B,CAAC;AAC3E,aAAA;AACD,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,SAAS,EAAE;AACT,gBAAA,KAAK,EAAE;oBACL,4BAA4B;oBAC5B,0BAA0B;oBAC1B,kCAAkC;oBAClC,0CAA0C;AAC3C,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAYF,MAAM,aAAa,GAAG,yCAAyC;AAC/D,MAAM,cAAc,GAAyB,CAAC,CAAC,KAAI;IACjD,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QAC7B,CAAC,CAAC,cAAc,EAAE;IACpB;AACF,CAAC;MAEY,WAAW,GAAc,CAAC,EACrC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,QAAQ,EACR,WAAW,EACX,aAAa,GACd,KAAI;AACH,IAAA,MAAM,OAAO,GAAGC,aAAO,CAAC,MAAMC,6CAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAC3E,IAAA,MAAM,UAAU,GAAGD,aAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;QACvF,OAAO;YACL,KAAK,EAAE,KAAK,EAAE;YACd,KAAK,EAAE,KAAK,EAAE;SACf;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AAE/B,IAAA,QACEE,eAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,QAAA,EAAA,CAClDC,0BACE,SAAS,EAAE,UAAU,CAAC,KAAK,EAC3B,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,CAAA,OAAA,EAAU,WAAW,CAAA,CAAE,EAC7B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,QAAQ,EAAA,CACjB,EACFA,cAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CACzD;AAEZ;AAEA,MAAM,WAAW,GAAGC,UAAI,CAA0C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MACvFF,eAAA,CAACG,yCAAO,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM,EAAA,QAAA,EAAA,CACvDF,cAAA,CAACG,yBAAI,EAAA,EAAA,QAAA,EAAE,KAAK,GAAQ,EACnB,WAAW,IAAIH,cAAA,CAACI,uCAAgB,KAAG,CAAA,EAAA,CAC5B,CACX,CAAC;;;;"}

package/lib/components/Browser/BrowserItem.js

@@ -43,6 +43,7 @@ const classNameGenerator = ce({
                     'shr-bg-main shr-text-white',
                     'hover:shr-bg-main-darken',
                     'forced-colors:shr-bg-[Highlight]',
+                    'has-[:focus-visible]:shr-focus-indicator',
                 ],
             },
         },

package/lib/components/Browser/BrowserItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserItem.js","sources":["../../../src/components/Browser/BrowserItem.tsx"],"sourcesContent":["import { type ChangeEvent, type FC, type KeyboardEventHandler, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaAngleRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\nimport { Text } from '../Text'\n\nimport { getElementIdFromNode } from './utils'\n\nimport type { ItemNode } from './models'\n\nconst classNameGenerator = tv({\n  slots: {\n    label: [\n      'shr-block shr-rounded-m shr-px-1 shr-py-0.5',\n      'hover:shr-bg-white-darken',\n      'has-[:focus-visible]:shr-focus-indicator',\n    ],\n    input: 'shr-sr-only',\n  },\n  variants: {\n    selected: {\n      true: {\n        label: ['shr-bg-white-darken shr-font-bold', 'hover:shr-bg-column-darken'],\n      },\n      false: {},\n    },\n    hasChildren: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      hasChildren: false,\n      className: {\n        label: [\n          'shr-bg-main shr-text-white',\n          'hover:shr-bg-main-darken',\n          'forced-colors:shr-bg-[Highlight]',\n        ],\n      },\n    },\n  ],\n})\n\ntype Props = {\n  selected: boolean\n  itemValue: ItemNode['value']\n  itemLabel: ItemNode['label']\n  itemHasChildren: boolean\n  tabIndex: 0 | -1\n  columnIndex: number\n  onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nconst KEYDOWN_REGEX = /^((Arrow(Right|Left|Up|Down))|Enter| )$/\nconst HANDLE_KEYDOWN: KeyboardEventHandler = (e) => {\n  if (KEYDOWN_REGEX.test(e.key)) {\n    e.preventDefault()\n  }\n}\n\nexport const BrowserItem: FC<Props> = ({\n  selected,\n  itemValue,\n  itemLabel,\n  itemHasChildren,\n  tabIndex,\n  columnIndex,\n  onChangeInput,\n}) => {\n  const inputId = useMemo(() => getElementIdFromNode(itemValue), [itemValue])\n  const classNames = useMemo(() => {\n    const { label, input } = classNameGenerator({ selected, hasChildren: itemHasChildren })\n    return {\n      label: label(),\n      input: input(),\n    }\n  }, [selected, itemHasChildren])\n\n  return (\n    <label htmlFor={inputId} className={classNames.label}>\n      <input\n        className={classNames.input}\n        type=\"radio\"\n        id={inputId}\n        name={`column-${columnIndex}`}\n        value={itemValue}\n        tabIndex={tabIndex}\n        onKeyDown={HANDLE_KEYDOWN}\n        onChange={onChangeInput}\n        checked={selected}\n      />\n      <BodyCluster label={itemLabel} hasChildren={itemHasChildren} />\n    </label>\n  )\n}\n\nconst BodyCluster = memo<{ label: string; hasChildren: boolean }>(({ label, hasChildren }) => (\n  <Cluster align=\"center\" justify=\"space-between\" as=\"span\">\n    <Text>{label}</Text>\n    {hasChildren && <FaAngleRightIcon />}\n  </Cluster>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;YACL,6CAA6C;YAC7C,2BAA2B;YAC3B,0CAA0C;AAC3C,SAAA;AACD,QAAA,KAAK,EAAE,aAAa;AACrB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,CAAC,mCAAmC,EAAE,4BAA4B,CAAC;AAC3E,aAAA;AACD,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,SAAS,EAAE;AACT,gBAAA,KAAK,EAAE;oBACL,4BAA4B;oBAC5B,0BAA0B;oBAC1B,kCAAkC;AACnC,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAYF,MAAM,aAAa,GAAG,yCAAyC;AAC/D,MAAM,cAAc,GAAyB,CAAC,CAAC,KAAI;IACjD,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QAC7B,CAAC,CAAC,cAAc,EAAE;IACpB;AACF,CAAC;MAEY,WAAW,GAAc,CAAC,EACrC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,QAAQ,EACR,WAAW,EACX,aAAa,GACd,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAC3E,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;QACvF,OAAO;YACL,KAAK,EAAE,KAAK,EAAE;YACd,KAAK,EAAE,KAAK,EAAE;SACf;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AAE/B,IAAA,QACEC,IAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,QAAA,EAAA,CAClDC,eACE,SAAS,EAAE,UAAU,CAAC,KAAK,EAC3B,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,CAAA,OAAA,EAAU,WAAW,CAAA,CAAE,EAC7B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,QAAQ,EAAA,CACjB,EACFA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CACzD;AAEZ;AAEA,MAAM,WAAW,GAAG,IAAI,CAA0C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MACvFD,IAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM,EAAA,QAAA,EAAA,CACvDC,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,KAAK,GAAQ,EACnB,WAAW,IAAIA,GAAA,CAAC,gBAAgB,KAAG,CAAA,EAAA,CAC5B,CACX,CAAC;;;;"}
+{"version":3,"file":"BrowserItem.js","sources":["../../../src/components/Browser/BrowserItem.tsx"],"sourcesContent":["import { type ChangeEvent, type FC, type KeyboardEventHandler, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaAngleRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\nimport { Text } from '../Text'\n\nimport { getElementIdFromNode } from './utils'\n\nimport type { ItemNode } from './models'\n\nconst classNameGenerator = tv({\n  slots: {\n    label: [\n      'shr-block shr-rounded-m shr-px-1 shr-py-0.5',\n      'hover:shr-bg-white-darken',\n      'has-[:focus-visible]:shr-focus-indicator',\n    ],\n    input: 'shr-sr-only',\n  },\n  variants: {\n    selected: {\n      true: {\n        label: ['shr-bg-white-darken shr-font-bold', 'hover:shr-bg-column-darken'],\n      },\n      false: {},\n    },\n    hasChildren: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      hasChildren: false,\n      className: {\n        label: [\n          'shr-bg-main shr-text-white',\n          'hover:shr-bg-main-darken',\n          'forced-colors:shr-bg-[Highlight]',\n          'has-[:focus-visible]:shr-focus-indicator',\n        ],\n      },\n    },\n  ],\n})\n\ntype Props = {\n  selected: boolean\n  itemValue: ItemNode['value']\n  itemLabel: ItemNode['label']\n  itemHasChildren: boolean\n  tabIndex: 0 | -1\n  columnIndex: number\n  onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nconst KEYDOWN_REGEX = /^((Arrow(Right|Left|Up|Down))|Enter| )$/\nconst HANDLE_KEYDOWN: KeyboardEventHandler = (e) => {\n  if (KEYDOWN_REGEX.test(e.key)) {\n    e.preventDefault()\n  }\n}\n\nexport const BrowserItem: FC<Props> = ({\n  selected,\n  itemValue,\n  itemLabel,\n  itemHasChildren,\n  tabIndex,\n  columnIndex,\n  onChangeInput,\n}) => {\n  const inputId = useMemo(() => getElementIdFromNode(itemValue), [itemValue])\n  const classNames = useMemo(() => {\n    const { label, input } = classNameGenerator({ selected, hasChildren: itemHasChildren })\n    return {\n      label: label(),\n      input: input(),\n    }\n  }, [selected, itemHasChildren])\n\n  return (\n    <label htmlFor={inputId} className={classNames.label}>\n      <input\n        className={classNames.input}\n        type=\"radio\"\n        id={inputId}\n        name={`column-${columnIndex}`}\n        value={itemValue}\n        tabIndex={tabIndex}\n        onKeyDown={HANDLE_KEYDOWN}\n        onChange={onChangeInput}\n        checked={selected}\n      />\n      <BodyCluster label={itemLabel} hasChildren={itemHasChildren} />\n    </label>\n  )\n}\n\nconst BodyCluster = memo<{ label: string; hasChildren: boolean }>(({ label, hasChildren }) => (\n  <Cluster align=\"center\" justify=\"space-between\" as=\"span\">\n    <Text>{label}</Text>\n    {hasChildren && <FaAngleRightIcon />}\n  </Cluster>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;YACL,6CAA6C;YAC7C,2BAA2B;YAC3B,0CAA0C;AAC3C,SAAA;AACD,QAAA,KAAK,EAAE,aAAa;AACrB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,CAAC,mCAAmC,EAAE,4BAA4B,CAAC;AAC3E,aAAA;AACD,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,SAAS,EAAE;AACT,gBAAA,KAAK,EAAE;oBACL,4BAA4B;oBAC5B,0BAA0B;oBAC1B,kCAAkC;oBAClC,0CAA0C;AAC3C,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAYF,MAAM,aAAa,GAAG,yCAAyC;AAC/D,MAAM,cAAc,GAAyB,CAAC,CAAC,KAAI;IACjD,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QAC7B,CAAC,CAAC,cAAc,EAAE;IACpB;AACF,CAAC;MAEY,WAAW,GAAc,CAAC,EACrC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,QAAQ,EACR,WAAW,EACX,aAAa,GACd,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAC3E,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;QACvF,OAAO;YACL,KAAK,EAAE,KAAK,EAAE;YACd,KAAK,EAAE,KAAK,EAAE;SACf;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AAE/B,IAAA,QACEC,IAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,QAAA,EAAA,CAClDC,eACE,SAAS,EAAE,UAAU,CAAC,KAAK,EAC3B,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,CAAA,OAAA,EAAU,WAAW,CAAA,CAAE,EAC7B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,QAAQ,EAAA,CACjB,EACFA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CACzD;AAEZ;AAEA,MAAM,WAAW,GAAG,IAAI,CAA0C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MACvFD,IAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM,EAAA,QAAA,EAAA,CACvDC,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,KAAK,GAAQ,EACnB,WAAW,IAAIA,GAAA,CAAC,gBAAgB,KAAG,CAAA,EAAA,CAC5B,CACX,CAAC;;;;"}

package/lib/components/Checkbox/Checkbox.cjs

@@ -21,7 +21,7 @@ const classNameGenerator = index.tv({
             'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',
             'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',
             'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',
-            'peer-focus-visible:shr-focus-indicator',
+            'peer-focus-visible:shr-focus-indicator--outer',
             'peer-hover:shr-shadow-input-hover',
             'shr-border-default',
             'peer-[[aria-invalid]]:shr-border-danger',

package/lib/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea\n            mixed={mixed}\n            className={classNames.iconWrap}\n            iconClassName={classNames.icon}\n          />\n        </span>\n\n        <LabeledChildren htmlFor={checkBoxId} className={classNames.label}>\n          {children}\n        </LabeledChildren>\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<Pick<Props, 'mixed'> & { className: string; iconClassName: string }>(\n  ({ mixed, className, iconClassName }) => (\n    <span className={className}>\n      {mixed ? (\n        <FaMinusIcon className={iconClassName} />\n      ) : (\n        <FaCheckIcon className={iconClassName} />\n      )}\n    </span>\n  ),\n)\n\nconst LabeledChildren = memo<PropsWithChildren<{ className: string; htmlFor: string }>>(\n  ({ children, htmlFor, className }) =>\n    children && (\n      <label htmlFor={htmlFor} className={className}>\n        {children}\n      </label>\n    ),\n)\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;;;AAQE;AACE;;AAEJ;AAEA;AACA;;AA6BF;AAGF;AAIA;AAYA;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea\n            mixed={mixed}\n            className={classNames.iconWrap}\n            iconClassName={classNames.icon}\n          />\n        </span>\n\n        <LabeledChildren htmlFor={checkBoxId} className={classNames.label}>\n          {children}\n        </LabeledChildren>\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<Pick<Props, 'mixed'> & { className: string; iconClassName: string }>(\n  ({ mixed, className, iconClassName }) => (\n    <span className={className}>\n      {mixed ? (\n        <FaMinusIcon className={iconClassName} />\n      ) : (\n        <FaCheckIcon className={iconClassName} />\n      )}\n    </span>\n  ),\n)\n\nconst LabeledChildren = memo<PropsWithChildren<{ className: string; htmlFor: string }>>(\n  ({ children, htmlFor, className }) =>\n    children && (\n      <label htmlFor={htmlFor} className={className}>\n        {children}\n      </label>\n    ),\n)\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;;;AAQE;AACE;;AAEJ;AAEA;AACA;;AA6BF;AAGF;AAIA;AAYA;;"}

package/lib/components/Checkbox/Checkbox.js

@@ -19,7 +19,7 @@ const classNameGenerator = ce({
             'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',
             'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',
             'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',
-            'peer-focus-visible:shr-focus-indicator',
+            'peer-focus-visible:shr-focus-indicator--outer',
             'peer-hover:shr-shadow-input-hover',
             'shr-border-default',
             'peer-[[aria-invalid]]:shr-border-danger',