smarthr-ui 97.0.0 → 98.1.0

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 require('../../../Button/Button.cjs');

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

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import '../../../Button/Button.js';

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

@@ -7,7 +7,7 @@ var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwind
 var hooks_useTheme = require('../../../../hooks/useTheme.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -5,7 +5,7 @@ import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tai
 import { useTheme } from '../../../../hooks/useTheme.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -7,7 +7,7 @@ var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwind
 var hooks_useTheme = require('../../../../hooks/useTheme.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 require('../../../Button/Button.cjs');
@@ -32,7 +32,7 @@ var components_SectioningContent_SectioningContent = require('../../../Sectionin
 require('../../../SectioningContent/levelContext.cjs');
 require('styled-components');
 var components_SideNav_SideNav = require('../../../SideNav/SideNav.cjs');
-require('../../../SideNav/SideNavItemButton.cjs');
+var components_SideNav_SideNavItemButton = require('../../../SideNav/SideNavItemButton.cjs');
 require('../../../TextLink/TextLink.cjs');
 var components_TextLink_HelpLink_HelpLink = require('../../../TextLink/HelpLink/HelpLink.cjs');
 require('../../../TextLink/UpwardLink/UpwardLink.cjs');
@@ -152,10 +152,10 @@ const SideNavs = React.memo(({ mode, page, changePage, translated, classNames })
             current: isAll,
         },
     ], [isAll, translated]);
-    const onClick = React.useCallback((_, id) => {
-        changePage(id);
+    const onClick = React.useCallback((e) => {
+        changePage(e.currentTarget.value);
     }, [changePage]);
-    return (jsxRuntime.jsxs("div", { className: classNames.side, children: [jsxRuntime.jsx(components_SideNav_SideNav.SideNav, { className: classNames.unselectedSideNav, size: "S", items: unselectedItems, onClick: onClick }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { children: [jsxRuntime.jsx(MemoizedSubSubBlockHeading, { className: classNames.sideNavHeading, children: translated.listText }), jsxRuntime.jsx(components_SideNav_SideNav.SideNav, { className: classNames.selectedSideNav, size: "S", items: selectedItems, onClick: onClick })] }), jsxRuntime.jsx(HelpLinkArea, { className: classNames.help, children: translated.helpText })] }));
+    return (jsxRuntime.jsxs("div", { className: classNames.side, children: [jsxRuntime.jsx(components_SideNav_SideNav.SideNav, { className: classNames.unselectedSideNav, size: "S", "aria-label": typeof translated.favorite === 'string' ? translated.favorite : undefined, children: unselectedItems.map((item) => (jsxRuntime.jsx(components_SideNav_SideNavItemButton.SideNavItemButton, { id: item.id, prefix: item.prefix, current: item.current, onClick: onClick, children: item.title }, item.id))) }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { children: [jsxRuntime.jsx(MemoizedSubSubBlockHeading, { className: classNames.sideNavHeading, children: translated.listText }), jsxRuntime.jsx(components_SideNav_SideNav.SideNav, { className: classNames.selectedSideNav, size: "S", "aria-label": typeof translated.listText === 'string' ? translated.listText : undefined, children: selectedItems.map((item) => (jsxRuntime.jsx(components_SideNav_SideNavItemButton.SideNavItemButton, { id: item.id, current: item.current, onClick: onClick, children: item.title }, item.id))) })] }), jsxRuntime.jsx(HelpLinkArea, { className: classNames.help, children: translated.helpText })] }));
 });
 const HelpLinkArea = React.memo(({ children, className }) => (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(components_TextLink_HelpLink_HelpLink.HelpLink, { href: "https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/", target: "_blank", children: children }) })));
 const MemoizedSubSubBlockHeading = React.memo(({ children, className }) => (jsxRuntime.jsx(components_Heading_Heading.Heading, { type: "subSubBlockTitle", className: className, children: children })));

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      searchArea,\n      inner,\n      side,\n      sideNav,\n      sideNavHeading,\n      help,\n      main,\n      mainInner,\n      contentHead,\n      scrollArea,\n    } = appLauncher()\n\n    return {\n      wrapper: wrapper(),\n      searchArea: searchArea(),\n      inner: inner(),\n      side: side(),\n      unselectedSideNav: sideNav({ selected: false }),\n      selectedSideNav: sideNav({ noIcon: true, selected: true }),\n      sideNavHeading: sideNavHeading(),\n      help: help(),\n      main: main(),\n      mainInner: mainInner(),\n      contentHead: contentHead(),\n      scrollArea: scrollArea(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (_: any, id: string) => {\n      changePage(id as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        items={unselectedItems}\n        onClick={onClick}\n      />\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          items={selectedItems}\n          onClick={onClick}\n        />\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      {children}\n    </Heading>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAEM;;AAaL;;;;;;;;AAqBI;;;;;;;;;AAUJ;AACA;AAOI;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGL;;AAME;AACA;;AAEF;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGN;;AA8CL;AAEA;AAMA;AAYE;AACA;AACA;AACA;AAEA;AAEI;AACE;;AAEA;AACA;AACD;AACF;AAGH;AAEI;AACE;;AAEA;AACD;AACF;;;AAOD;AAIF;AA0BF;AAEA;AAWA;;"}
+{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav, SideNavItemButton } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      searchArea,\n      inner,\n      side,\n      sideNav,\n      sideNavHeading,\n      help,\n      main,\n      mainInner,\n      contentHead,\n      scrollArea,\n    } = appLauncher()\n\n    return {\n      wrapper: wrapper(),\n      searchArea: searchArea(),\n      inner: inner(),\n      side: side(),\n      unselectedSideNav: sideNav({ selected: false }),\n      selectedSideNav: sideNav({ noIcon: true, selected: true }),\n      sideNavHeading: sideNavHeading(),\n      help: help(),\n      main: main(),\n      mainInner: mainInner(),\n      contentHead: contentHead(),\n      scrollArea: scrollArea(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      changePage(e.currentTarget.value as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        aria-label={typeof translated.favorite === 'string' ? translated.favorite : undefined}\n      >\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            prefix={item.prefix}\n            current={item.current}\n            onClick={onClick}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          aria-label={typeof translated.listText === 'string' ? translated.listText : undefined}\n        >\n          {selectedItems.map((item) => (\n            <SideNavItemButton key={item.id} id={item.id} current={item.current} onClick={onClick}>\n              {item.title}\n            </SideNavItemButton>\n          ))}\n        </SideNav>\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      {children}\n    </Heading>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAEM;;AAaL;;;;;;;;AAqBI;;;;;;;;;AAUJ;AACA;AAOI;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGL;;AAME;AACA;;AAEF;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGN;;AA8CL;AAEA;AAMA;AAYE;AACA;AACA;AACA;AAEA;AAEI;AACE;;AAEA;AACA;AACD;AACF;AAGH;AAEI;AACE;;AAEA;AACD;AACF;AAIH;AAEI;AACF;;AA8CJ;AAEA;AAWA;;"}

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

@@ -5,7 +5,7 @@ import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tai
 import { useTheme } from '../../../../hooks/useTheme.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import '../../../Button/Button.js';
@@ -30,7 +30,7 @@ import { Section } from '../../../SectioningContent/SectioningContent.js';
 import '../../../SectioningContent/levelContext.js';
 import 'styled-components';
 import { SideNav } from '../../../SideNav/SideNav.js';
-import '../../../SideNav/SideNavItemButton.js';
+import { SideNavItemButton } from '../../../SideNav/SideNavItemButton.js';
 import '../../../TextLink/TextLink.js';
 import { HelpLink } from '../../../TextLink/HelpLink/HelpLink.js';
 import '../../../TextLink/UpwardLink/UpwardLink.js';
@@ -150,10 +150,10 @@ const SideNavs = memo(({ mode, page, changePage, translated, classNames }) => {
             current: isAll,
         },
     ], [isAll, translated]);
-    const onClick = useCallback((_, id) => {
-        changePage(id);
+    const onClick = useCallback((e) => {
+        changePage(e.currentTarget.value);
     }, [changePage]);
-    return (jsxs("div", { className: classNames.side, children: [jsx(SideNav, { className: classNames.unselectedSideNav, size: "S", items: unselectedItems, onClick: onClick }), jsx("hr", {}), jsxs(Section, { children: [jsx(MemoizedSubSubBlockHeading, { className: classNames.sideNavHeading, children: translated.listText }), jsx(SideNav, { className: classNames.selectedSideNav, size: "S", items: selectedItems, onClick: onClick })] }), jsx(HelpLinkArea, { className: classNames.help, children: translated.helpText })] }));
+    return (jsxs("div", { className: classNames.side, children: [jsx(SideNav, { className: classNames.unselectedSideNav, size: "S", "aria-label": typeof translated.favorite === 'string' ? translated.favorite : undefined, children: unselectedItems.map((item) => (jsx(SideNavItemButton, { id: item.id, prefix: item.prefix, current: item.current, onClick: onClick, children: item.title }, item.id))) }), jsx("hr", {}), jsxs(Section, { children: [jsx(MemoizedSubSubBlockHeading, { className: classNames.sideNavHeading, children: translated.listText }), jsx(SideNav, { className: classNames.selectedSideNav, size: "S", "aria-label": typeof translated.listText === 'string' ? translated.listText : undefined, children: selectedItems.map((item) => (jsx(SideNavItemButton, { id: item.id, current: item.current, onClick: onClick, children: item.title }, item.id))) })] }), jsx(HelpLinkArea, { className: classNames.help, children: translated.helpText })] }));
 });
 const HelpLinkArea = memo(({ children, className }) => (jsx("div", { className: className, children: jsx(HelpLink, { href: "https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/", target: "_blank", children: children }) })));
 const MemoizedSubSubBlockHeading = memo(({ children, className }) => (jsx(Heading, { type: "subSubBlockTitle", className: className, children: children })));

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncher.js","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      searchArea,\n      inner,\n      side,\n      sideNav,\n      sideNavHeading,\n      help,\n      main,\n      mainInner,\n      contentHead,\n      scrollArea,\n    } = appLauncher()\n\n    return {\n      wrapper: wrapper(),\n      searchArea: searchArea(),\n      inner: inner(),\n      side: side(),\n      unselectedSideNav: sideNav({ selected: false }),\n      selectedSideNav: sideNav({ noIcon: true, selected: true }),\n      sideNavHeading: sideNavHeading(),\n      help: help(),\n      main: main(),\n      mainInner: mainInner(),\n      contentHead: contentHead(),\n      scrollArea: scrollArea(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (_: any, id: string) => {\n      changePage(id as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        items={unselectedItems}\n        onClick={onClick}\n      />\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          items={selectedItems}\n          onClick={onClick}\n        />\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      {children}\n    </Heading>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAEM;;AAaL;;;;;;;;AAqBI;;;;;;;;;AAUJ;AACA;AAOI;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGL;;AAME;AACA;;AAEF;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGN;;AA8CL;AAEA;AAMA;AAYE;AACA;AACA;AACA;AAEA;AAEI;AACE;;AAEA;AACA;AACD;AACF;AAGH;AAEI;AACE;;AAEA;AACD;AACF;;;AAOD;AAIF;AA0BF;AAEA;AAWA;;"}
+{"version":3,"file":"AppLauncher.js","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav, SideNavItemButton } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      searchArea,\n      inner,\n      side,\n      sideNav,\n      sideNavHeading,\n      help,\n      main,\n      mainInner,\n      contentHead,\n      scrollArea,\n    } = appLauncher()\n\n    return {\n      wrapper: wrapper(),\n      searchArea: searchArea(),\n      inner: inner(),\n      side: side(),\n      unselectedSideNav: sideNav({ selected: false }),\n      selectedSideNav: sideNav({ noIcon: true, selected: true }),\n      sideNavHeading: sideNavHeading(),\n      help: help(),\n      main: main(),\n      mainInner: mainInner(),\n      contentHead: contentHead(),\n      scrollArea: scrollArea(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      changePage(e.currentTarget.value as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        aria-label={typeof translated.favorite === 'string' ? translated.favorite : undefined}\n      >\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            prefix={item.prefix}\n            current={item.current}\n            onClick={onClick}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          aria-label={typeof translated.listText === 'string' ? translated.listText : undefined}\n        >\n          {selectedItems.map((item) => (\n            <SideNavItemButton key={item.id} id={item.id} current={item.current} onClick={onClick}>\n              {item.title}\n            </SideNavItemButton>\n          ))}\n        </SideNav>\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      {children}\n    </Heading>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAEM;;AAaL;;;;;;;;AAqBI;;;;;;;;;AAUJ;AACA;AAOI;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGL;;AAME;AACA;;AAEF;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGN;;AA8CL;AAEA;AAMA;AAYE;AACA;AACA;AACA;AAEA;AAEI;AACE;;AAEA;AACA;AACD;AACF;AAGH;AAEI;AACE;;AAEA;AACD;AACF;AAIH;AAEI;AACF;;AA8CJ;AAEA;AAWA;;"}

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var intl_localeMap = require('../../../../intl/localeMap.cjs');

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

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { localeMap } from '../../../../intl/localeMap.js';

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

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 require('../../../Button/Button.cjs');

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

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import '../../../Button/Button.js';

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

@@ -7,7 +7,7 @@ var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwind
 var hooks_useTheme = require('../../../../hooks/useTheme.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -5,7 +5,7 @@ import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tai
 import { useTheme } from '../../../../hooks/useTheme.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var intl_localeMap = require('../../../../intl/localeMap.cjs');

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

@@ -3,7 +3,7 @@ import { memo, useMemo, useCallback } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { localeMap } from '../../../../intl/localeMap.js';

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

@@ -7,7 +7,7 @@ var hooks_useHandleEscape = require('../../../../hooks/useHandleEscape.cjs');
 var hooks_usePortal = require('../../../../hooks/usePortal.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -5,7 +5,7 @@ import { useHandleEscape } from '../../../../hooks/useHandleEscape.js';
 import { usePortal } from '../../../../hooks/usePortal.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useCallback, useMemo, useId } from 'react';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');
@@ -24,7 +24,7 @@ var components_SectioningContent_SectioningContent = require('../../../Sectionin
 require('../../../SectioningContent/levelContext.cjs');
 require('styled-components');
 require('../../../Dialog/DialogBody.cjs');
-require('../../../Dialog/DialogContentResponseStatusMessage.cjs');
+require('../../../ResponseMessage/ResponseMessage.cjs');
 require('../../../Dialog/DialogHeading.cjs');
 require('../../../Dialog/dialogInnerStyle.cjs');
 require('../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.cjs');

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

@@ -3,7 +3,7 @@ import { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';
@@ -22,7 +22,7 @@ import { Section } from '../../../SectioningContent/SectioningContent.js';
 import '../../../SectioningContent/levelContext.js';
 import 'styled-components';
 import '../../../Dialog/DialogBody.js';
-import '../../../Dialog/DialogContentResponseStatusMessage.js';
+import '../../../ResponseMessage/ResponseMessage.js';
 import '../../../Dialog/DialogHeading.js';
 import '../../../Dialog/dialogInnerStyle.js';
 import '../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.js';

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

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');

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

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 require('../../../Icon/generateIcon.cjs');

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

@@ -3,7 +3,7 @@ import { memo, useContext, useMemo } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import '../../../Icon/generateIcon.js';

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

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');
@@ -25,7 +25,7 @@ require('../../../SectioningContent/SectioningContent.cjs');
 require('../../../SectioningContent/levelContext.cjs');
 require('styled-components');
 require('../../../Dialog/DialogBody.cjs');
-require('../../../Dialog/DialogContentResponseStatusMessage.cjs');
+require('../../../ResponseMessage/ResponseMessage.cjs');
 require('../../../Dialog/DialogHeading.cjs');
 require('../../../Dialog/dialogInnerStyle.cjs');
 require('../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.cjs');

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

@@ -3,7 +3,7 @@ import { memo, useMemo, useState, useCallback } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';
@@ -23,7 +23,7 @@ import '../../../SectioningContent/SectioningContent.js';
 import '../../../SectioningContent/levelContext.js';
 import 'styled-components';
 import '../../../Dialog/DialogBody.js';
-import '../../../Dialog/DialogContentResponseStatusMessage.js';
+import '../../../ResponseMessage/ResponseMessage.js';
 import '../../../Dialog/DialogHeading.js';
 import '../../../Dialog/dialogInnerStyle.js';
 import '../../../Dialog/ControlledStepFormDialog/StepFormDialogProvider.js';

package/lib/components/Browser/Browser.cjs

@@ -51,10 +51,14 @@ const Browser = ({ value, items, onSelectItem, className, ...rest }) => {
             return [];
         return [...node.getAncestors().map((n) => n.value), node.value];
     }, [rootNode, value]);
-    const selectedNode = React.useMemo(() => (value ? rootNode.findByValue(value) : undefined), [value, rootNode]);
+    const unstableRef = React.useRef({ onSelectItem, value, rootNode });
+    unstableRef.current = { onSelectItem, value, rootNode };
     // FIXME: focusメソッドのfocusVisibleが主要ブラウザでサポートされたら使うようにしたい(現状ではマウスクリックでもfocusのoutlineが出てしまう)
     // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus
     const onDelegateKeyDown = React.useCallback((e) => {
+        const selectedNode = unstableRef.current.value
+            ? unstableRef.current.rootNode.findByValue(unstableRef.current.value)
+            : undefined;
         if (!selectedNode) {
             return;
         }
@@ -84,16 +88,16 @@ const Browser = ({ value, items, onSelectItem, className, ...rest }) => {
         }
         if (target) {
             e.preventDefault();
-            onSelectItem?.(target.value);
+            unstableRef.current.onSelectItem?.(target.value);
             document.getElementById(components_Browser_utils.getElementIdFromNode(target.value))?.focus();
         }
-    }, [selectedNode, onSelectItem]);
-    const onChangeInput = React.useMemo(() => onSelectItem
-        ? (e) => onSelectItem(e.currentTarget.value)
-        : undefined, [onSelectItem]);
+    }, []);
+    const onChangeInput = React.useCallback((e) => {
+        unstableRef.current.onSelectItem?.(e.currentTarget.value);
+    }, []);
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    jsxRuntime.jsx("div", { ...rest, role: "application", onKeyDown: onDelegateKeyDown, className: classNames.wrapper, children: columns.map((colItems, index) => (jsxRuntime.jsx(components_Browser_BrowserColumn.BrowserColumn, { items: colItems, index: index, value: selectedPath[index], onChangeInput: onChangeInput, className: classNames.column }, index))) }));
+    jsxRuntime.jsx("div", { ...rest, role: "application", onKeyDown: onDelegateKeyDown, className: classNames.wrapper, children: columns.map((colItems, index) => (jsxRuntime.jsx(components_Browser_BrowserColumn.BrowserColumn, { items: colItems, index: index, value: selectedPath[index], onChangeInput: onSelectItem ? onChangeInput : undefined, className: classNames.column }, index))) }));
 };
 
 exports.Browser = Browser;