smarthr-ui 99.6.0 → 99.6.1

package/lib/components/AccordionPanel/AccordionPanel.d.ts

@@ -29,7 +29,7 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
         bottom: string[];
         left: string[];
     };
-}, undefined, "smarthr-ui-AccordionPanel", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "smarthr-ui-AccordionPanel", import("tailwind-variants/dist/config.js").TVConfig<{
     rounded: {
         true: string[];
         false: string;
@@ -69,7 +69,7 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
         bottom: string[];
         left: string[];
     };
-}, undefined, "smarthr-ui-AccordionPanel", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "smarthr-ui-AccordionPanel", import("tailwind-variants/dist/config.js").TVConfig<{
     rounded: {
         true: string[];
         false: string;

package/lib/components/AccordionPanel/AccordionPanelItem.cjs

@@ -6,7 +6,6 @@ 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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var components_SectioningContent_SectioningContent = require('../SectioningContent/SectioningContent.cjs');
 require('../SectioningContent/client/components/LevelContext.cjs');
-require('styled-components');
 
 const AccordionPanelItemContext = React.createContext({
     name: '',

package/lib/components/AccordionPanel/AccordionPanelItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelItem.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイテムを識別するための名前 */\n  name: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'section'>, keyof BaseProps>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      <Section {...rest} className={actualClassName} />\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;;AAWF;;;"}
+{"version":3,"file":"AccordionPanelItem.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイテムを識別するための名前 */\n  name: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'section'>, keyof BaseProps>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      <Section {...rest} className={actualClassName} />\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAmBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;;AAWF;;;"}

package/lib/components/AccordionPanel/AccordionPanelItem.js

@@ -4,7 +4,6 @@ import { createContext, 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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { Section } from '../SectioningContent/SectioningContent.js';
 import '../SectioningContent/client/components/LevelContext.js';
-import 'styled-components';
 
 const AccordionPanelItemContext = createContext({
     name: '',

package/lib/components/AccordionPanel/AccordionPanelItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelItem.js","sources":["../../../src/components/AccordionPanel/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイテムを識別するための名前 */\n  name: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'section'>, keyof BaseProps>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      <Section {...rest} className={actualClassName} />\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAmBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;;AAWF;;"}
+{"version":3,"file":"AccordionPanelItem.js","sources":["../../../src/components/AccordionPanel/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイテムを識別するための名前 */\n  name: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'section'>, keyof BaseProps>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      <Section {...rest} className={actualClassName} />\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAmBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;;AAWF;;"}

package/lib/components/AppHeader/components/common/CommonButton.d.ts

@@ -14,7 +14,7 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: string[];
         false: string[];
     };
-}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
     prefix: {
         true: string[];
     };
@@ -74,7 +74,7 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: string[];
         false: string[];
     };
-}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
     prefix: {
         true: string[];
     };

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

@@ -31,7 +31,6 @@ require('../../../Layout/Container/Container.cjs');
 var components_Scroller_Scroller = require('../../../Scroller/Scroller.cjs');
 var components_SectioningContent_SectioningContent = require('../../../SectioningContent/SectioningContent.cjs');
 require('../../../SectioningContent/client/components/LevelContext.cjs');
-require('styled-components');
 var components_SideNav_SideNav = require('../../../SideNav/SideNav.cjs');
 var components_SideNav_SideNavItemButton = require('../../../SideNav/SideNavItemButton.cjs');
 require('../../../TextLink/TextLink.cjs');

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, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer, useLocalize } 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  loading?: boolean\n  error?: boolean\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\nconst CLASS_NAMES = (() => {\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\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures, loading, error }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n    callbackRef,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div ref={callbackRef} className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          value={searchQuery}\n          title={translated.searchInputTitle}\n          width=\"100%\"\n          onChange={onChangeSearchQuery}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster align=\"center\" justify=\"space-between\" className={CLASS_NAMES.contentHead}>\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures\n                features={features}\n                page={page}\n                loading={loading}\n                error={error}\n              />\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    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\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: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\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={CLASS_NAMES.side}>\n      <SideNav size=\"S\" className={CLASS_NAMES.unselectedSideNav} aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            current={item.current}\n            onClick={onClick}\n            prefix={item.prefix}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav size=\"S\" className={CLASS_NAMES.selectedSideNav} aria-labelledby={listHeadingId}>\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={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </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      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;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;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAeH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AA0DH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}
+{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer, useLocalize } 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  loading?: boolean\n  error?: boolean\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\nconst CLASS_NAMES = (() => {\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\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures, loading, error }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n    callbackRef,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div ref={callbackRef} className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          value={searchQuery}\n          title={translated.searchInputTitle}\n          width=\"100%\"\n          onChange={onChangeSearchQuery}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster align=\"center\" justify=\"space-between\" className={CLASS_NAMES.contentHead}>\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures\n                features={features}\n                page={page}\n                loading={loading}\n                error={error}\n              />\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    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\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: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\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={CLASS_NAMES.side}>\n      <SideNav size=\"S\" className={CLASS_NAMES.unselectedSideNav} aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            current={item.current}\n            onClick={onClick}\n            prefix={item.prefix}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav size=\"S\" className={CLASS_NAMES.selectedSideNav} aria-labelledby={listHeadingId}>\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={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </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      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;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;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAeH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AA0DH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}

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

@@ -29,7 +29,6 @@ import '../../../Layout/Container/Container.js';
 import { Scroller } from '../../../Scroller/Scroller.js';
 import { Section } from '../../../SectioningContent/SectioningContent.js';
 import '../../../SectioningContent/client/components/LevelContext.js';
-import 'styled-components';
 import { SideNav } from '../../../SideNav/SideNav.js';
 import { SideNavItemButton } from '../../../SideNav/SideNavItemButton.js';
 import '../../../TextLink/TextLink.js';

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, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer, useLocalize } 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  loading?: boolean\n  error?: boolean\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\nconst CLASS_NAMES = (() => {\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\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures, loading, error }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n    callbackRef,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div ref={callbackRef} className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          value={searchQuery}\n          title={translated.searchInputTitle}\n          width=\"100%\"\n          onChange={onChangeSearchQuery}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster align=\"center\" justify=\"space-between\" className={CLASS_NAMES.contentHead}>\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures\n                features={features}\n                page={page}\n                loading={loading}\n                error={error}\n              />\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    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\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: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\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={CLASS_NAMES.side}>\n      <SideNav size=\"S\" className={CLASS_NAMES.unselectedSideNav} aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            current={item.current}\n            onClick={onClick}\n            prefix={item.prefix}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav size=\"S\" className={CLASS_NAMES.selectedSideNav} aria-labelledby={listHeadingId}>\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={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </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      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;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;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAeH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AA0DH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}
+{"version":3,"file":"AppLauncher.js","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer, useLocalize } 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  loading?: boolean\n  error?: boolean\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\nconst CLASS_NAMES = (() => {\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\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures, loading, error }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n    callbackRef,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div ref={callbackRef} className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          value={searchQuery}\n          title={translated.searchInputTitle}\n          width=\"100%\"\n          onChange={onChangeSearchQuery}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster align=\"center\" justify=\"space-between\" className={CLASS_NAMES.contentHead}>\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures\n                features={features}\n                page={page}\n                loading={loading}\n                error={error}\n              />\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    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\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: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\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={CLASS_NAMES.side}>\n      <SideNav size=\"S\" className={CLASS_NAMES.unselectedSideNav} aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            current={item.current}\n            onClick={onClick}\n            prefix={item.prefix}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav size=\"S\" className={CLASS_NAMES.selectedSideNav} aria-labelledby={listHeadingId}>\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={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </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      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;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;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAeH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AA0DH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}

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

@@ -20,7 +20,6 @@ require('../../../Icon/generateIcon.cjs');
 require('../../../Icon/OpenInNewTabIcon.cjs');
 var components_SectioningContent_SectioningContent = require('../../../SectioningContent/SectioningContent.cjs');
 require('../../../SectioningContent/client/components/LevelContext.cjs');
-require('styled-components');
 var components_AppHeader_components_common_CommonButton = require('../common/CommonButton.cjs');
 
 const classNameGenerator = index.tv({

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

@@ -1 +1 @@
-{"version":3,"file":"LanguageSelector.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/LanguageSelector.tsx"],"sourcesContent":["import { type MouseEvent, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useAvailableLocales, useIntl } from '../../../../intl'\nimport { type Locale, localeMap } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCheckIcon, FaXmarkIcon } from '../../../Icon'\nimport { Section } from '../../../SectioningContent'\nimport { CommonButton } from '../common/CommonButton'\n\nimport type { LocaleProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    header: [\n      'shr-border-b-shorthand shr-flex shr-items-center shr-justify-between shr-gap-1 shr-px-1 shr-py-0.75',\n    ],\n    headerTitle: ['shr-font-normal [&&]:shr-text-base'],\n    buttonWrapper: ['shr-p-0.5'],\n    button: ['[&&:not(:has(svg))]:shr-ps-2.5'],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { header, headerTitle, buttonWrapper, button } = classNameGenerator()\n\n  return {\n    header: header(),\n    headerTitle: headerTitle(),\n    buttonWrapper: buttonWrapper(),\n    button: button(),\n  }\n})()\n\ntype Props = {\n  locale: LocaleProps\n  onClickClose: () => void\n}\n\nexport const LanguageSelector = memo<Props>(({ locale: localeProps, onClickClose }) => {\n  const { locale } = useIntl()\n  const availableLocales = useAvailableLocales()\n  const { locales } = useMemo(\n    () => ({\n      locales: Object.entries(localeMap).filter(([code]) =>\n        availableLocales.includes(code as Locale),\n      ),\n    }),\n    [availableLocales],\n  )\n\n  const onClickLocale = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      localeProps.onSelectLocale(e.currentTarget.value as Locale)\n    },\n    [localeProps],\n  )\n\n  return (\n    <Section>\n      <SelectorHeading\n        wrapperClassName={CLASS_NAMES.header}\n        className={CLASS_NAMES.headerTitle}\n        onClickClose={onClickClose}\n      />\n      <div className={CLASS_NAMES.buttonWrapper}>\n        {locales.map(([localeKey, label]) => (\n          <LocaleButton\n            key={localeKey}\n            value={localeKey as Locale}\n            selected={localeKey === locale}\n            className={CLASS_NAMES.button}\n            onClick={onClickLocale}\n          >\n            {label}\n          </LocaleButton>\n        ))}\n      </div>\n    </Section>\n  )\n})\n\nconst SelectorHeading = memo<\n  Pick<Props, 'onClickClose'> & { wrapperClassName: string; className: string }\n>(({ onClickClose, wrapperClassName, className }) => (\n  <div className={wrapperClassName}>\n    {/* eslint-disable-next-line smarthr/require-i18n-text */}\n    <Heading className={className}>Language</Heading>\n    <Button type=\"button\" size=\"S\" onClick={onClickClose}>\n      {/* eslint-disable-next-line smarthr/require-i18n-text */}\n      <FaXmarkIcon alt=\"close\" />\n    </Button>\n  </div>\n))\n\nconst LocaleButton = memo<{\n  value: Locale\n  selected: boolean\n  className: string\n  children: string\n  onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ value, selected, className, children, onClick }) => (\n  <CommonButton\n    elementAs=\"button\"\n    type=\"button\"\n    value={value}\n    className={className}\n    handleClick={onClick}\n    prefix={selected && <FaCheckIcon color=\"MAIN\" />}\n  >\n    {children}\n  </CommonButton>\n))\n"],"names":["tv","memo","useIntl","useAvailableLocales","useMemo","localeMap","useCallback","_jsxs","Section","_jsx","Heading","Button","FaXmarkIcon","CommonButton","FaCheckIcon"],"mappings":"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"}
+{"version":3,"file":"LanguageSelector.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/LanguageSelector.tsx"],"sourcesContent":["import { type MouseEvent, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useAvailableLocales, useIntl } from '../../../../intl'\nimport { type Locale, localeMap } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCheckIcon, FaXmarkIcon } from '../../../Icon'\nimport { Section } from '../../../SectioningContent'\nimport { CommonButton } from '../common/CommonButton'\n\nimport type { LocaleProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    header: [\n      'shr-border-b-shorthand shr-flex shr-items-center shr-justify-between shr-gap-1 shr-px-1 shr-py-0.75',\n    ],\n    headerTitle: ['shr-font-normal [&&]:shr-text-base'],\n    buttonWrapper: ['shr-p-0.5'],\n    button: ['[&&:not(:has(svg))]:shr-ps-2.5'],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { header, headerTitle, buttonWrapper, button } = classNameGenerator()\n\n  return {\n    header: header(),\n    headerTitle: headerTitle(),\n    buttonWrapper: buttonWrapper(),\n    button: button(),\n  }\n})()\n\ntype Props = {\n  locale: LocaleProps\n  onClickClose: () => void\n}\n\nexport const LanguageSelector = memo<Props>(({ locale: localeProps, onClickClose }) => {\n  const { locale } = useIntl()\n  const availableLocales = useAvailableLocales()\n  const { locales } = useMemo(\n    () => ({\n      locales: Object.entries(localeMap).filter(([code]) =>\n        availableLocales.includes(code as Locale),\n      ),\n    }),\n    [availableLocales],\n  )\n\n  const onClickLocale = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      localeProps.onSelectLocale(e.currentTarget.value as Locale)\n    },\n    [localeProps],\n  )\n\n  return (\n    <Section>\n      <SelectorHeading\n        wrapperClassName={CLASS_NAMES.header}\n        className={CLASS_NAMES.headerTitle}\n        onClickClose={onClickClose}\n      />\n      <div className={CLASS_NAMES.buttonWrapper}>\n        {locales.map(([localeKey, label]) => (\n          <LocaleButton\n            key={localeKey}\n            value={localeKey as Locale}\n            selected={localeKey === locale}\n            className={CLASS_NAMES.button}\n            onClick={onClickLocale}\n          >\n            {label}\n          </LocaleButton>\n        ))}\n      </div>\n    </Section>\n  )\n})\n\nconst SelectorHeading = memo<\n  Pick<Props, 'onClickClose'> & { wrapperClassName: string; className: string }\n>(({ onClickClose, wrapperClassName, className }) => (\n  <div className={wrapperClassName}>\n    {/* eslint-disable-next-line smarthr/require-i18n-text */}\n    <Heading className={className}>Language</Heading>\n    <Button type=\"button\" size=\"S\" onClick={onClickClose}>\n      {/* eslint-disable-next-line smarthr/require-i18n-text */}\n      <FaXmarkIcon alt=\"close\" />\n    </Button>\n  </div>\n))\n\nconst LocaleButton = memo<{\n  value: Locale\n  selected: boolean\n  className: string\n  children: string\n  onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ value, selected, className, children, onClick }) => (\n  <CommonButton\n    elementAs=\"button\"\n    type=\"button\"\n    value={value}\n    className={className}\n    handleClick={onClick}\n    prefix={selected && <FaCheckIcon color=\"MAIN\" />}\n  >\n    {children}\n  </CommonButton>\n))\n"],"names":["tv","memo","useIntl","useAvailableLocales","useMemo","localeMap","useCallback","_jsxs","Section","_jsx","Heading","Button","FaXmarkIcon","CommonButton","FaCheckIcon"],"mappings":"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"}

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

@@ -18,7 +18,6 @@ import '../../../Icon/generateIcon.js';
 import '../../../Icon/OpenInNewTabIcon.js';
 import { Section } from '../../../SectioningContent/SectioningContent.js';
 import '../../../SectioningContent/client/components/LevelContext.js';
-import 'styled-components';
 import { CommonButton } from '../common/CommonButton.js';
 
 const classNameGenerator = ce({

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

@@ -1 +1 @@
-{"version":3,"file":"LanguageSelector.js","sources":["../../../../../src/components/AppHeader/components/mobile/LanguageSelector.tsx"],"sourcesContent":["import { type MouseEvent, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useAvailableLocales, useIntl } from '../../../../intl'\nimport { type Locale, localeMap } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCheckIcon, FaXmarkIcon } from '../../../Icon'\nimport { Section } from '../../../SectioningContent'\nimport { CommonButton } from '../common/CommonButton'\n\nimport type { LocaleProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    header: [\n      'shr-border-b-shorthand shr-flex shr-items-center shr-justify-between shr-gap-1 shr-px-1 shr-py-0.75',\n    ],\n    headerTitle: ['shr-font-normal [&&]:shr-text-base'],\n    buttonWrapper: ['shr-p-0.5'],\n    button: ['[&&:not(:has(svg))]:shr-ps-2.5'],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { header, headerTitle, buttonWrapper, button } = classNameGenerator()\n\n  return {\n    header: header(),\n    headerTitle: headerTitle(),\n    buttonWrapper: buttonWrapper(),\n    button: button(),\n  }\n})()\n\ntype Props = {\n  locale: LocaleProps\n  onClickClose: () => void\n}\n\nexport const LanguageSelector = memo<Props>(({ locale: localeProps, onClickClose }) => {\n  const { locale } = useIntl()\n  const availableLocales = useAvailableLocales()\n  const { locales } = useMemo(\n    () => ({\n      locales: Object.entries(localeMap).filter(([code]) =>\n        availableLocales.includes(code as Locale),\n      ),\n    }),\n    [availableLocales],\n  )\n\n  const onClickLocale = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      localeProps.onSelectLocale(e.currentTarget.value as Locale)\n    },\n    [localeProps],\n  )\n\n  return (\n    <Section>\n      <SelectorHeading\n        wrapperClassName={CLASS_NAMES.header}\n        className={CLASS_NAMES.headerTitle}\n        onClickClose={onClickClose}\n      />\n      <div className={CLASS_NAMES.buttonWrapper}>\n        {locales.map(([localeKey, label]) => (\n          <LocaleButton\n            key={localeKey}\n            value={localeKey as Locale}\n            selected={localeKey === locale}\n            className={CLASS_NAMES.button}\n            onClick={onClickLocale}\n          >\n            {label}\n          </LocaleButton>\n        ))}\n      </div>\n    </Section>\n  )\n})\n\nconst SelectorHeading = memo<\n  Pick<Props, 'onClickClose'> & { wrapperClassName: string; className: string }\n>(({ onClickClose, wrapperClassName, className }) => (\n  <div className={wrapperClassName}>\n    {/* eslint-disable-next-line smarthr/require-i18n-text */}\n    <Heading className={className}>Language</Heading>\n    <Button type=\"button\" size=\"S\" onClick={onClickClose}>\n      {/* eslint-disable-next-line smarthr/require-i18n-text */}\n      <FaXmarkIcon alt=\"close\" />\n    </Button>\n  </div>\n))\n\nconst LocaleButton = memo<{\n  value: Locale\n  selected: boolean\n  className: string\n  children: string\n  onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ value, selected, className, children, onClick }) => (\n  <CommonButton\n    elementAs=\"button\"\n    type=\"button\"\n    value={value}\n    className={className}\n    handleClick={onClick}\n    prefix={selected && <FaCheckIcon color=\"MAIN\" />}\n  >\n    {children}\n  </CommonButton>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"LanguageSelector.js","sources":["../../../../../src/components/AppHeader/components/mobile/LanguageSelector.tsx"],"sourcesContent":["import { type MouseEvent, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useAvailableLocales, useIntl } from '../../../../intl'\nimport { type Locale, localeMap } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCheckIcon, FaXmarkIcon } from '../../../Icon'\nimport { Section } from '../../../SectioningContent'\nimport { CommonButton } from '../common/CommonButton'\n\nimport type { LocaleProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    header: [\n      'shr-border-b-shorthand shr-flex shr-items-center shr-justify-between shr-gap-1 shr-px-1 shr-py-0.75',\n    ],\n    headerTitle: ['shr-font-normal [&&]:shr-text-base'],\n    buttonWrapper: ['shr-p-0.5'],\n    button: ['[&&:not(:has(svg))]:shr-ps-2.5'],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { header, headerTitle, buttonWrapper, button } = classNameGenerator()\n\n  return {\n    header: header(),\n    headerTitle: headerTitle(),\n    buttonWrapper: buttonWrapper(),\n    button: button(),\n  }\n})()\n\ntype Props = {\n  locale: LocaleProps\n  onClickClose: () => void\n}\n\nexport const LanguageSelector = memo<Props>(({ locale: localeProps, onClickClose }) => {\n  const { locale } = useIntl()\n  const availableLocales = useAvailableLocales()\n  const { locales } = useMemo(\n    () => ({\n      locales: Object.entries(localeMap).filter(([code]) =>\n        availableLocales.includes(code as Locale),\n      ),\n    }),\n    [availableLocales],\n  )\n\n  const onClickLocale = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      localeProps.onSelectLocale(e.currentTarget.value as Locale)\n    },\n    [localeProps],\n  )\n\n  return (\n    <Section>\n      <SelectorHeading\n        wrapperClassName={CLASS_NAMES.header}\n        className={CLASS_NAMES.headerTitle}\n        onClickClose={onClickClose}\n      />\n      <div className={CLASS_NAMES.buttonWrapper}>\n        {locales.map(([localeKey, label]) => (\n          <LocaleButton\n            key={localeKey}\n            value={localeKey as Locale}\n            selected={localeKey === locale}\n            className={CLASS_NAMES.button}\n            onClick={onClickLocale}\n          >\n            {label}\n          </LocaleButton>\n        ))}\n      </div>\n    </Section>\n  )\n})\n\nconst SelectorHeading = memo<\n  Pick<Props, 'onClickClose'> & { wrapperClassName: string; className: string }\n>(({ onClickClose, wrapperClassName, className }) => (\n  <div className={wrapperClassName}>\n    {/* eslint-disable-next-line smarthr/require-i18n-text */}\n    <Heading className={className}>Language</Heading>\n    <Button type=\"button\" size=\"S\" onClick={onClickClose}>\n      {/* eslint-disable-next-line smarthr/require-i18n-text */}\n      <FaXmarkIcon alt=\"close\" />\n    </Button>\n  </div>\n))\n\nconst LocaleButton = memo<{\n  value: Locale\n  selected: boolean\n  className: string\n  children: string\n  onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ value, selected, className, children, onClick }) => (\n  <CommonButton\n    elementAs=\"button\"\n    type=\"button\"\n    value={value}\n    className={className}\n    handleClick={onClick}\n    prefix={selected && <FaCheckIcon color=\"MAIN\" />}\n  >\n    {children}\n  </CommonButton>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}

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

@@ -23,7 +23,6 @@ require('../../../Layout/Center/Center.cjs');
 require('../../../Layout/Container/Container.cjs');
 var components_SectioningContent_SectioningContent = require('../../../SectioningContent/SectioningContent.cjs');
 require('../../../SectioningContent/client/components/LevelContext.cjs');
-require('styled-components');
 var components_AppHeader_components_common_Translate = require('../common/Translate.cjs');
 
 const MenuAccordion = ({ title, children, ...rest }) => title ? (jsxRuntime.jsx(ActualMenuAccordion, { ...rest, title: title, children: children })) : (children);

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

@@ -1 +1 @@
-{"version":3,"file":"MenuAccordion.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/MenuAccordion.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useId,\n} from 'react'\n\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCaretDownIcon, FaCaretUpIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Section } from '../../../SectioningContent'\nimport { Translate } from '../common/Translate'\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<(isOpen: boolean) => boolean>\n  title: ReactNode\n}>\n\nexport const MenuAccordion: FC<Props> = ({ title, children, ...rest }) =>\n  title ? (\n    <ActualMenuAccordion {...rest} title={title}>\n      {children}\n    </ActualMenuAccordion>\n  ) : (\n    children\n  )\n\nconst ActualMenuAccordion: FC<Props> = ({ isOpen, children, ...rest }) => {\n  const id = useId()\n\n  return (\n    <Section>\n      <AccordionHeading {...rest} id={id} isOpen={isOpen} />\n      <div id={id}>{isOpen && <div className=\"shr-mt-0.5\">{children}</div>}</div>\n    </Section>\n  )\n}\n\nconst AccordionHeading = memo<Omit<Props, 'children'> & { id: string }>(\n  ({ isOpen, setIsOpen, title, id }) => {\n    const onClickButton = useCallback(() => setIsOpen((prev) => !prev), [setIsOpen])\n\n    return (\n      <Cluster justify=\"space-between\" align=\"center\">\n        <Heading type=\"subSubBlockTitle\">\n          <Translate>{title}</Translate>\n        </Heading>\n\n        <Button\n          size=\"S\"\n          className=\"[&&]:shr-min-h-0 [&&]:shr-p-0.25\"\n          aria-expanded={isOpen}\n          aria-controls={id}\n          onClick={onClickButton}\n        >\n          {isOpen ? (\n            <FaCaretUpIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenuAccordion\"\n                  defaultText=\"閉じる\"\n                />\n              }\n            />\n          ) : (\n            <FaCaretDownIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/openMenuAccordion\"\n                  defaultText=\"開く\"\n                />\n              }\n            />\n          )}\n        </Button>\n      </Cluster>\n    )\n  },\n)\n"],"names":["_jsx","useId","_jsxs","Section","memo","useCallback","Cluster","Heading","Translate","Button","FaCaretUpIcon","Localizer","FaCaretDownIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,aAAa,GAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KACnE,KAAK,IACHA,eAAC,mBAAmB,EAAA,EAAA,GAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACxC,QAAQ,EAAA,CACW,KAEtB,QAAQ;AAGZ,MAAM,mBAAmB,GAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;AACvE,IAAA,MAAM,EAAE,GAAGC,WAAK,EAAE;AAElB,IAAA,QACEC,eAAA,CAACC,sDAAO,EAAA,EAAA,QAAA,EAAA,CACNH,eAAC,gBAAgB,EAAA,EAAA,GAAK,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,EACtDA,cAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,EAAE,EAAA,QAAA,EAAG,MAAM,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,YAAY,YAAE,QAAQ,EAAA,CAAO,EAAA,CAAO,CAAA,EAAA,CACnE;AAEd,CAAC;AAED,MAAM,gBAAgB,GAAGI,UAAI,CAC3B,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,KAAI;IACnC,MAAM,aAAa,GAAGC,iBAAW,CAAC,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEhF,QACEH,gBAACI,yCAAO,EAAA,EAAC,OAAO,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC7CN,cAAA,CAACO,kCAAO,EAAA,EAAC,IAAI,EAAC,kBAAkB,EAAA,QAAA,EAC9BP,eAACQ,0DAAS,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAa,EAAA,CACtB,EAEVR,cAAA,CAACS,+BAAM,IACL,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,kCAAkC,EAAA,eAAA,EAC7B,MAAM,EAAA,eAAA,EACN,EAAE,EACjB,OAAO,EAAE,aAAa,EAAA,QAAA,EAErB,MAAM,IACLT,cAAA,CAACU,oCAAa,IACZ,GAAG,EACDV,eAACW,wBAAS,EAAA,EACR,EAAE,EAAC,sDAAsD,EACzD,WAAW,EAAC,oBAAK,EAAA,CACjB,EAAA,CAEJ,KAEFX,cAAA,CAACY,sCAAe,EAAA,EACd,GAAG,EACDZ,cAAA,CAACW,wBAAS,IACR,EAAE,EAAC,qDAAqD,EACxD,WAAW,EAAC,cAAI,EAAA,CAChB,GAEJ,CACH,EAAA,CACM,CAAA,EAAA,CACD;AAEd,CAAC,CACF;;;;"}
+{"version":3,"file":"MenuAccordion.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/MenuAccordion.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useId,\n} from 'react'\n\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCaretDownIcon, FaCaretUpIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Section } from '../../../SectioningContent'\nimport { Translate } from '../common/Translate'\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<(isOpen: boolean) => boolean>\n  title: ReactNode\n}>\n\nexport const MenuAccordion: FC<Props> = ({ title, children, ...rest }) =>\n  title ? (\n    <ActualMenuAccordion {...rest} title={title}>\n      {children}\n    </ActualMenuAccordion>\n  ) : (\n    children\n  )\n\nconst ActualMenuAccordion: FC<Props> = ({ isOpen, children, ...rest }) => {\n  const id = useId()\n\n  return (\n    <Section>\n      <AccordionHeading {...rest} id={id} isOpen={isOpen} />\n      <div id={id}>{isOpen && <div className=\"shr-mt-0.5\">{children}</div>}</div>\n    </Section>\n  )\n}\n\nconst AccordionHeading = memo<Omit<Props, 'children'> & { id: string }>(\n  ({ isOpen, setIsOpen, title, id }) => {\n    const onClickButton = useCallback(() => setIsOpen((prev) => !prev), [setIsOpen])\n\n    return (\n      <Cluster justify=\"space-between\" align=\"center\">\n        <Heading type=\"subSubBlockTitle\">\n          <Translate>{title}</Translate>\n        </Heading>\n\n        <Button\n          size=\"S\"\n          className=\"[&&]:shr-min-h-0 [&&]:shr-p-0.25\"\n          aria-expanded={isOpen}\n          aria-controls={id}\n          onClick={onClickButton}\n        >\n          {isOpen ? (\n            <FaCaretUpIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenuAccordion\"\n                  defaultText=\"閉じる\"\n                />\n              }\n            />\n          ) : (\n            <FaCaretDownIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/openMenuAccordion\"\n                  defaultText=\"開く\"\n                />\n              }\n            />\n          )}\n        </Button>\n      </Cluster>\n    )\n  },\n)\n"],"names":["_jsx","useId","_jsxs","Section","memo","useCallback","Cluster","Heading","Translate","Button","FaCaretUpIcon","Localizer","FaCaretDownIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,aAAa,GAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KACnE,KAAK,IACHA,eAAC,mBAAmB,EAAA,EAAA,GAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACxC,QAAQ,EAAA,CACW,KAEtB,QAAQ;AAGZ,MAAM,mBAAmB,GAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;AACvE,IAAA,MAAM,EAAE,GAAGC,WAAK,EAAE;AAElB,IAAA,QACEC,eAAA,CAACC,sDAAO,EAAA,EAAA,QAAA,EAAA,CACNH,eAAC,gBAAgB,EAAA,EAAA,GAAK,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,EACtDA,cAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,EAAE,EAAA,QAAA,EAAG,MAAM,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,YAAY,YAAE,QAAQ,EAAA,CAAO,EAAA,CAAO,CAAA,EAAA,CACnE;AAEd,CAAC;AAED,MAAM,gBAAgB,GAAGI,UAAI,CAC3B,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,KAAI;IACnC,MAAM,aAAa,GAAGC,iBAAW,CAAC,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEhF,QACEH,gBAACI,yCAAO,EAAA,EAAC,OAAO,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC7CN,cAAA,CAACO,kCAAO,EAAA,EAAC,IAAI,EAAC,kBAAkB,EAAA,QAAA,EAC9BP,eAACQ,0DAAS,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAa,EAAA,CACtB,EAEVR,cAAA,CAACS,+BAAM,IACL,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,kCAAkC,EAAA,eAAA,EAC7B,MAAM,EAAA,eAAA,EACN,EAAE,EACjB,OAAO,EAAE,aAAa,EAAA,QAAA,EAErB,MAAM,IACLT,cAAA,CAACU,oCAAa,IACZ,GAAG,EACDV,eAACW,wBAAS,EAAA,EACR,EAAE,EAAC,sDAAsD,EACzD,WAAW,EAAC,oBAAK,EAAA,CACjB,EAAA,CAEJ,KAEFX,cAAA,CAACY,sCAAe,EAAA,EACd,GAAG,EACDZ,cAAA,CAACW,wBAAS,IACR,EAAE,EAAC,qDAAqD,EACxD,WAAW,EAAC,cAAI,EAAA,CAChB,GAEJ,CACH,EAAA,CACM,CAAA,EAAA,CACD;AAEd,CAAC,CACF;;;;"}

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

@@ -21,7 +21,6 @@ import '../../../Layout/Center/Center.js';
 import '../../../Layout/Container/Container.js';
 import { Section } from '../../../SectioningContent/SectioningContent.js';
 import '../../../SectioningContent/client/components/LevelContext.js';
-import 'styled-components';
 import { Translate } from '../common/Translate.js';
 
 const MenuAccordion = ({ title, children, ...rest }) => title ? (jsx(ActualMenuAccordion, { ...rest, title: title, children: children })) : (children);

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

@@ -1 +1 @@
-{"version":3,"file":"MenuAccordion.js","sources":["../../../../../src/components/AppHeader/components/mobile/MenuAccordion.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useId,\n} from 'react'\n\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCaretDownIcon, FaCaretUpIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Section } from '../../../SectioningContent'\nimport { Translate } from '../common/Translate'\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<(isOpen: boolean) => boolean>\n  title: ReactNode\n}>\n\nexport const MenuAccordion: FC<Props> = ({ title, children, ...rest }) =>\n  title ? (\n    <ActualMenuAccordion {...rest} title={title}>\n      {children}\n    </ActualMenuAccordion>\n  ) : (\n    children\n  )\n\nconst ActualMenuAccordion: FC<Props> = ({ isOpen, children, ...rest }) => {\n  const id = useId()\n\n  return (\n    <Section>\n      <AccordionHeading {...rest} id={id} isOpen={isOpen} />\n      <div id={id}>{isOpen && <div className=\"shr-mt-0.5\">{children}</div>}</div>\n    </Section>\n  )\n}\n\nconst AccordionHeading = memo<Omit<Props, 'children'> & { id: string }>(\n  ({ isOpen, setIsOpen, title, id }) => {\n    const onClickButton = useCallback(() => setIsOpen((prev) => !prev), [setIsOpen])\n\n    return (\n      <Cluster justify=\"space-between\" align=\"center\">\n        <Heading type=\"subSubBlockTitle\">\n          <Translate>{title}</Translate>\n        </Heading>\n\n        <Button\n          size=\"S\"\n          className=\"[&&]:shr-min-h-0 [&&]:shr-p-0.25\"\n          aria-expanded={isOpen}\n          aria-controls={id}\n          onClick={onClickButton}\n        >\n          {isOpen ? (\n            <FaCaretUpIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenuAccordion\"\n                  defaultText=\"閉じる\"\n                />\n              }\n            />\n          ) : (\n            <FaCaretDownIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/openMenuAccordion\"\n                  defaultText=\"開く\"\n                />\n              }\n            />\n          )}\n        </Button>\n      </Cluster>\n    )\n  },\n)\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,aAAa,GAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KACnE,KAAK,IACHA,IAAC,mBAAmB,EAAA,EAAA,GAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACxC,QAAQ,EAAA,CACW,KAEtB,QAAQ;AAGZ,MAAM,mBAAmB,GAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;AACvE,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE;AAElB,IAAA,QACEC,IAAA,CAAC,OAAO,EAAA,EAAA,QAAA,EAAA,CACND,IAAC,gBAAgB,EAAA,EAAA,GAAK,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,EACtDA,GAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,EAAE,EAAA,QAAA,EAAG,MAAM,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,YAAY,YAAE,QAAQ,EAAA,CAAO,EAAA,CAAO,CAAA,EAAA,CACnE;AAEd,CAAC;AAED,MAAM,gBAAgB,GAAG,IAAI,CAC3B,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,KAAI;IACnC,MAAM,aAAa,GAAG,WAAW,CAAC,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEhF,QACEC,KAAC,OAAO,EAAA,EAAC,OAAO,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC7CD,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,kBAAkB,EAAA,QAAA,EAC9BA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAa,EAAA,CACtB,EAEVA,GAAA,CAAC,MAAM,IACL,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,kCAAkC,EAAA,eAAA,EAC7B,MAAM,EAAA,eAAA,EACN,EAAE,EACjB,OAAO,EAAE,aAAa,EAAA,QAAA,EAErB,MAAM,IACLA,GAAA,CAAC,aAAa,IACZ,GAAG,EACDA,IAAC,SAAS,EAAA,EACR,EAAE,EAAC,sDAAsD,EACzD,WAAW,EAAC,oBAAK,EAAA,CACjB,EAAA,CAEJ,KAEFA,GAAA,CAAC,eAAe,EAAA,EACd,GAAG,EACDA,GAAA,CAAC,SAAS,IACR,EAAE,EAAC,qDAAqD,EACxD,WAAW,EAAC,cAAI,EAAA,CAChB,GAEJ,CACH,EAAA,CACM,CAAA,EAAA,CACD;AAEd,CAAC,CACF;;;;"}
+{"version":3,"file":"MenuAccordion.js","sources":["../../../../../src/components/AppHeader/components/mobile/MenuAccordion.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useId,\n} from 'react'\n\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCaretDownIcon, FaCaretUpIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Section } from '../../../SectioningContent'\nimport { Translate } from '../common/Translate'\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<(isOpen: boolean) => boolean>\n  title: ReactNode\n}>\n\nexport const MenuAccordion: FC<Props> = ({ title, children, ...rest }) =>\n  title ? (\n    <ActualMenuAccordion {...rest} title={title}>\n      {children}\n    </ActualMenuAccordion>\n  ) : (\n    children\n  )\n\nconst ActualMenuAccordion: FC<Props> = ({ isOpen, children, ...rest }) => {\n  const id = useId()\n\n  return (\n    <Section>\n      <AccordionHeading {...rest} id={id} isOpen={isOpen} />\n      <div id={id}>{isOpen && <div className=\"shr-mt-0.5\">{children}</div>}</div>\n    </Section>\n  )\n}\n\nconst AccordionHeading = memo<Omit<Props, 'children'> & { id: string }>(\n  ({ isOpen, setIsOpen, title, id }) => {\n    const onClickButton = useCallback(() => setIsOpen((prev) => !prev), [setIsOpen])\n\n    return (\n      <Cluster justify=\"space-between\" align=\"center\">\n        <Heading type=\"subSubBlockTitle\">\n          <Translate>{title}</Translate>\n        </Heading>\n\n        <Button\n          size=\"S\"\n          className=\"[&&]:shr-min-h-0 [&&]:shr-p-0.25\"\n          aria-expanded={isOpen}\n          aria-controls={id}\n          onClick={onClickButton}\n        >\n          {isOpen ? (\n            <FaCaretUpIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenuAccordion\"\n                  defaultText=\"閉じる\"\n                />\n              }\n            />\n          ) : (\n            <FaCaretDownIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/openMenuAccordion\"\n                  defaultText=\"開く\"\n                />\n              }\n            />\n          )}\n        </Button>\n      </Cluster>\n    )\n  },\n)\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,aAAa,GAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KACnE,KAAK,IACHA,IAAC,mBAAmB,EAAA,EAAA,GAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACxC,QAAQ,EAAA,CACW,KAEtB,QAAQ;AAGZ,MAAM,mBAAmB,GAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;AACvE,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE;AAElB,IAAA,QACEC,IAAA,CAAC,OAAO,EAAA,EAAA,QAAA,EAAA,CACND,IAAC,gBAAgB,EAAA,EAAA,GAAK,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,EACtDA,GAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,EAAE,EAAA,QAAA,EAAG,MAAM,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,YAAY,YAAE,QAAQ,EAAA,CAAO,EAAA,CAAO,CAAA,EAAA,CACnE;AAEd,CAAC;AAED,MAAM,gBAAgB,GAAG,IAAI,CAC3B,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,KAAI;IACnC,MAAM,aAAa,GAAG,WAAW,CAAC,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEhF,QACEC,KAAC,OAAO,EAAA,EAAC,OAAO,EAAC,eAAe,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC7CD,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,kBAAkB,EAAA,QAAA,EAC9BA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAa,EAAA,CACtB,EAEVA,GAAA,CAAC,MAAM,IACL,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,kCAAkC,EAAA,eAAA,EAC7B,MAAM,EAAA,eAAA,EACN,EAAE,EACjB,OAAO,EAAE,aAAa,EAAA,QAAA,EAErB,MAAM,IACLA,GAAA,CAAC,aAAa,IACZ,GAAG,EACDA,IAAC,SAAS,EAAA,EACR,EAAE,EAAC,sDAAsD,EACzD,WAAW,EAAC,oBAAK,EAAA,CACjB,EAAA,CAEJ,KAEFA,GAAA,CAAC,eAAe,EAAA,EACd,GAAG,EACDA,GAAA,CAAC,SAAS,IACR,EAAE,EAAC,qDAAqD,EACxD,WAAW,EAAC,cAAI,EAAA,CAChB,GAEJ,CACH,EAAA,CACM,CAAA,EAAA,CACD;AAEd,CAAC,CACF;;;;"}

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

@@ -37,7 +37,6 @@ require('../../../Layout/Container/Container.cjs');
 var components_Scroller_Scroller = require('../../../Scroller/Scroller.cjs');
 var components_SectioningContent_SectioningContent = require('../../../SectioningContent/SectioningContent.cjs');
 require('../../../SectioningContent/client/components/LevelContext.cjs');
-require('styled-components');
 var components_AppHeader_components_mobile_AppLauncher = require('./AppLauncher.cjs');
 var components_AppHeader_components_mobile_AppLauncherContext = require('./AppLauncherContext.cjs');
 var components_AppHeader_components_mobile_MenuSubHeading = require('./MenuSubHeading.cjs');

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

@@ -1 +1 @@
-{"version":3,"file":"MenuDialog.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefCallback,\n  type RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useMergeRefs } from '../../../../hooks/client/useMergeRefs'\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  callbackRef: RefCallback<HTMLDivElement>\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ callbackRef, isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      nodeRef={domRef}\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      classNames=\"shr-sp-menu\"\n    >\n      <div ref={callbackRef} className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'callbackRef' | 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const {\n    features,\n    isAppLauncherAvailable,\n    featuresLoading,\n    featuresError,\n    isAppLauncherSelected,\n    setIsAppLauncherSelected,\n  } = useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(() => {\n    const clearAppLauncher = () => latest.setIsAppLauncherSelected(false)\n    const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false)\n    const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null)\n\n    return {\n      // HINT: Contentをanimationで非表示にしたい\n      // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n      // unmount時に操作内容のclearを行う\n      // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n      // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n      callbackRef: () => () => {\n        clearReleaseNote()\n        clearAppLauncher()\n        clearNavigationGroup()\n      },\n      clearAppLauncher,\n      clearReleaseNote,\n      clearNavigationGroup,\n      handleDialogClose: () => latest.setIsOpen(false),\n    }\n  }, [latest])\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(functions.callbackRef, domRef)\n\n  return (\n    <Section ref={mergedRef} role=\"dialog\" className={CLASS_NAMES.wrapper} aria-modal=\"true\">\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && isAppLauncherAvailable ? (\n        <AppLauncher features={features} loading={featuresLoading} error={featuresError} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","useRef","_jsx","FocusTrap","useContext","NavigationContext","ReleaseNoteContext","AppLauncherContext","useLocalize","useLatest","useMemo","useMergeRefs","_jsxs","Section","Cluster","MenuSubHeading","Button","FaXmarkIcon","Localizer","AppLauncher","Scroller","ReleaseNote","Navigation"],"mappings":"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"}
+{"version":3,"file":"MenuDialog.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefCallback,\n  type RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useMergeRefs } from '../../../../hooks/client/useMergeRefs'\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  callbackRef: RefCallback<HTMLDivElement>\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ callbackRef, isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      nodeRef={domRef}\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      classNames=\"shr-sp-menu\"\n    >\n      <div ref={callbackRef} className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'callbackRef' | 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const {\n    features,\n    isAppLauncherAvailable,\n    featuresLoading,\n    featuresError,\n    isAppLauncherSelected,\n    setIsAppLauncherSelected,\n  } = useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(() => {\n    const clearAppLauncher = () => latest.setIsAppLauncherSelected(false)\n    const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false)\n    const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null)\n\n    return {\n      // HINT: Contentをanimationで非表示にしたい\n      // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n      // unmount時に操作内容のclearを行う\n      // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n      // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n      callbackRef: () => () => {\n        clearReleaseNote()\n        clearAppLauncher()\n        clearNavigationGroup()\n      },\n      clearAppLauncher,\n      clearReleaseNote,\n      clearNavigationGroup,\n      handleDialogClose: () => latest.setIsOpen(false),\n    }\n  }, [latest])\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(functions.callbackRef, domRef)\n\n  return (\n    <Section ref={mergedRef} role=\"dialog\" className={CLASS_NAMES.wrapper} aria-modal=\"true\">\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && isAppLauncherAvailable ? (\n        <AppLauncher features={features} loading={featuresLoading} error={featuresError} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","useRef","_jsx","FocusTrap","useContext","NavigationContext","ReleaseNoteContext","AppLauncherContext","useLocalize","useLatest","useMemo","useMergeRefs","_jsxs","Section","Cluster","MenuSubHeading","Button","FaXmarkIcon","Localizer","AppLauncher","Scroller","ReleaseNote","Navigation"],"mappings":"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"}

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

@@ -35,7 +35,6 @@ import '../../../Layout/Container/Container.js';
 import { Scroller } from '../../../Scroller/Scroller.js';
 import { Section } from '../../../SectioningContent/SectioningContent.js';
 import '../../../SectioningContent/client/components/LevelContext.js';
-import 'styled-components';
 import { AppLauncher } from './AppLauncher.js';
 import { AppLauncherContext } from './AppLauncherContext.js';
 import { MenuSubHeading } from './MenuSubHeading.js';

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

@@ -1 +1 @@
-{"version":3,"file":"MenuDialog.js","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefCallback,\n  type RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useMergeRefs } from '../../../../hooks/client/useMergeRefs'\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  callbackRef: RefCallback<HTMLDivElement>\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ callbackRef, isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      nodeRef={domRef}\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      classNames=\"shr-sp-menu\"\n    >\n      <div ref={callbackRef} className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'callbackRef' | 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const {\n    features,\n    isAppLauncherAvailable,\n    featuresLoading,\n    featuresError,\n    isAppLauncherSelected,\n    setIsAppLauncherSelected,\n  } = useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(() => {\n    const clearAppLauncher = () => latest.setIsAppLauncherSelected(false)\n    const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false)\n    const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null)\n\n    return {\n      // HINT: Contentをanimationで非表示にしたい\n      // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n      // unmount時に操作内容のclearを行う\n      // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n      // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n      callbackRef: () => () => {\n        clearReleaseNote()\n        clearAppLauncher()\n        clearNavigationGroup()\n      },\n      clearAppLauncher,\n      clearReleaseNote,\n      clearNavigationGroup,\n      handleDialogClose: () => latest.setIsOpen(false),\n    }\n  }, [latest])\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(functions.callbackRef, domRef)\n\n  return (\n    <Section ref={mergedRef} role=\"dialog\" className={CLASS_NAMES.wrapper} aria-modal=\"true\">\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && isAppLauncherAvailable ? (\n        <AppLauncher features={features} loading={featuresLoading} error={featuresError} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"MenuDialog.js","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefCallback,\n  type RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useMergeRefs } from '../../../../hooks/client/useMergeRefs'\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  callbackRef: RefCallback<HTMLDivElement>\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ callbackRef, isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      nodeRef={domRef}\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      classNames=\"shr-sp-menu\"\n    >\n      <div ref={callbackRef} className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'callbackRef' | 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const {\n    features,\n    isAppLauncherAvailable,\n    featuresLoading,\n    featuresError,\n    isAppLauncherSelected,\n    setIsAppLauncherSelected,\n  } = useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(() => {\n    const clearAppLauncher = () => latest.setIsAppLauncherSelected(false)\n    const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false)\n    const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null)\n\n    return {\n      // HINT: Contentをanimationで非表示にしたい\n      // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n      // unmount時に操作内容のclearを行う\n      // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n      // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n      callbackRef: () => () => {\n        clearReleaseNote()\n        clearAppLauncher()\n        clearNavigationGroup()\n      },\n      clearAppLauncher,\n      clearReleaseNote,\n      clearNavigationGroup,\n      handleDialogClose: () => latest.setIsOpen(false),\n    }\n  }, [latest])\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(functions.callbackRef, domRef)\n\n  return (\n    <Section ref={mergedRef} role=\"dialog\" className={CLASS_NAMES.wrapper} aria-modal=\"true\">\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && isAppLauncherAvailable ? (\n        <AppLauncher features={features} loading={featuresLoading} error={featuresError} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}

package/lib/components/AppNavi/AppNavi.cjs

@@ -5,7 +5,6 @@ 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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var components_SectioningContent_SectioningContent = require('../SectioningContent/SectioningContent.cjs');
 require('../SectioningContent/client/components/LevelContext.cjs');
-require('styled-components');
 var components_StatusLabel_StatusLabel = require('../StatusLabel/StatusLabel.cjs');
 require('../StatusLabel/RequiredLabel/RequiredLabel.cjs');
 var components_AppNavi_AppNaviAnchor = require('./AppNaviAnchor.cjs');

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

@@ -1 +1 @@
-{"version":3,"file":"AppNavi.cjs","sources":["../../../src/components/AppNavi/AppNavi.tsx"],"sourcesContent":["import {\n  Children,\n  type ComponentPropsWithoutRef,\n  type FC,\n  Fragment,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useId,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Nav } from '../SectioningContent'\nimport { StatusLabel } from '../StatusLabel'\n\nimport { AppNaviAnchor, type AppNaviAnchorProps } from './AppNaviAnchor'\nimport { AppNaviButton, type AppNaviButtonProps } from './AppNaviButton'\nimport { AppNaviCustomTag, type AppNaviCustomTagProps } from './AppNaviCustomTag'\nimport { AppNaviDropdown, type AppNaviDropdownProps } from './AppNaviDropdown'\n\ntype BaseProps = PropsWithChildren<{\n  /** ラベルのテキスト */\n  label?: ReactNode\n  /** 表示するボタンの Props の配列\n   * @deprecated AppNaviButton などのコンポーネントを組み合わせて組み上げてください\n   */\n  buttons?: Array<\n    AppNaviButtonProps | AppNaviAnchorProps | AppNaviDropdownProps | AppNaviCustomTagProps\n  >\n  /** ドロップダウンにキャレットを表示するかどうか\n   * @deprecated キャレットの省略は非推奨です\n   */\n  displayDropdownCaret?: boolean\n  /** 追加の領域 */\n  additionalArea?: ReactNode\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppNavi',\n      'shr-flex shr-min-w-max shr-items-center shr-bg-white shr-px-1.5 shr-shadow-layer-1',\n    ],\n    statusLabel: ['smarthr-ui-AppNavi-label', 'shr-me-1 shr-shrink-0'],\n    buttonsEl: [\n      'smarthr-ui-AppNavi-buttons',\n      'shr-flex shr-items-stretch shr-gap-1 shr-self-stretch',\n    ],\n    listItem: ['smarthr-ui-AppNavi-listItem', 'shr-list-none'],\n    additionalAreaEl: 'shr-ms-auto',\n  },\n})\n\nconst { wrapper, statusLabel, buttonsEl, listItem, additionalAreaEl } = classNameGenerator()\nconst classNames = {\n  statusLabel: statusLabel(),\n  buttonsEl: buttonsEl(),\n  listItem: listItem(),\n  additionalAreaEl: additionalAreaEl(),\n}\n\nexport const AppNavi: FC<Props> = ({\n  label,\n  buttons,\n  className,\n  children,\n  displayDropdownCaret,\n  additionalArea,\n  ...rest\n}) => {\n  const labelId = useId()\n  const wrapperClassName = useMemo(() => wrapper({ className }), [className])\n\n  return (\n    <Nav {...rest} className={wrapperClassName} aria-labelledby={labelId}>\n      <MemoizedStatusLabel id={labelId}>{label}</MemoizedStatusLabel>\n      <ul className={classNames.buttonsEl}>\n        {buttons &&\n          buttons.map((button, i) => (\n            <li key={i} className={classNames.listItem}>\n              {'tag' in button ? (\n                <AppNaviCustomTag {...button} />\n              ) : 'href' in button ? (\n                <AppNaviAnchor {...button} />\n              ) : 'dropdownContent' in button ? (\n                <AppNaviDropdown {...button} displayCaret={displayDropdownCaret} />\n              ) : (\n                <AppNaviButton {...button} />\n              )}\n            </li>\n          ))}\n        {renderButtons(children)}\n      </ul>\n\n      {additionalArea && <div className={classNames.additionalAreaEl}>{additionalArea}</div>}\n    </Nav>\n  )\n}\n\nconst MemoizedStatusLabel = memo<PropsWithChildren<{ id: string }>>(\n  ({ id, children }) =>\n    children && (\n      <StatusLabel id={id} className={classNames.statusLabel} aria-hidden={true}>\n        {children}\n      </StatusLabel>\n    ),\n)\n\nconst renderButtons = (children: ReactNode) =>\n  Children.map(children, (child): ReactNode => {\n    if (!child || !isValidElement(child)) {\n      return null\n    }\n\n    if (child.type === Fragment) {\n      return renderButtons(child.props.children)\n    }\n\n    return <li className={classNames.listItem}>{child}</li>\n  })\n"],"names":["tv","useId","useMemo","_jsxs","Nav","_jsx","AppNaviCustomTag","AppNaviAnchor","AppNaviDropdown","AppNaviButton","memo","StatusLabel","Children","isValidElement","Fragment"],"mappings":";;;;;;;;;;;;;;;AAwCA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,oBAAoB;YACpB,oFAAoF;AACrF,SAAA;AACD,QAAA,WAAW,EAAE,CAAC,0BAA0B,EAAE,uBAAuB,CAAC;AAClE,QAAA,SAAS,EAAE;YACT,4BAA4B;YAC5B,uDAAuD;AACxD,SAAA;AACD,QAAA,QAAQ,EAAE,CAAC,6BAA6B,EAAE,eAAe,CAAC;AAC1D,QAAA,gBAAgB,EAAE,aAAa;AAChC,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAC5F,MAAM,UAAU,GAAG;IACjB,WAAW,EAAE,WAAW,EAAE;IAC1B,SAAS,EAAE,SAAS,EAAE;IACtB,QAAQ,EAAE,QAAQ,EAAE;IACpB,gBAAgB,EAAE,gBAAgB,EAAE;CACrC;MAEY,OAAO,GAAc,CAAC,EACjC,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,cAAc,EACd,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,OAAO,GAAGC,WAAK,EAAE;AACvB,IAAA,MAAM,gBAAgB,GAAGC,aAAO,CAAC,MAAM,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAE3E,IAAA,QACEC,eAAA,CAACC,kDAAG,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAA,iBAAA,EAAmB,OAAO,EAAA,QAAA,EAAA,CAClEC,cAAA,CAAC,mBAAmB,EAAA,EAAC,EAAE,EAAE,OAAO,EAAA,QAAA,EAAG,KAAK,EAAA,CAAuB,EAC/DF,eAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,UAAU,CAAC,SAAS,aAChC,OAAO;wBACN,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,MACpBE,uBAAY,SAAS,EAAE,UAAU,CAAC,QAAQ,YACvC,KAAK,IAAI,MAAM,IACdA,cAAA,CAACC,oDAAgB,OAAK,MAAM,EAAA,CAAI,IAC9B,MAAM,IAAI,MAAM,IAClBD,cAAA,CAACE,8CAAa,EAAA,EAAA,GAAK,MAAM,EAAA,CAAI,IAC3B,iBAAiB,IAAI,MAAM,IAC7BF,eAACG,kDAAe,EAAA,EAAA,GAAK,MAAM,EAAE,YAAY,EAAE,oBAAoB,EAAA,CAAI,KAEnEH,cAAA,CAACI,8CAAa,EAAA,EAAA,GAAK,MAAM,EAAA,CAAI,CAC9B,IATM,CAAC,CAUL,CACN,CAAC,EACH,aAAa,CAAC,QAAQ,CAAC,CAAA,EAAA,CACrB,EAEJ,cAAc,IAAIJ,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,YAAG,cAAc,EAAA,CAAO,CAAA,EAAA,CAClF;AAEV;AAEA,MAAM,mBAAmB,GAAGK,UAAI,CAC9B,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KACf,QAAQ,KACNL,cAAA,CAACM,8CAAW,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,WAAW,EAAA,aAAA,EAAe,IAAI,EAAA,QAAA,EACtE,QAAQ,EAAA,CACG,CACf,CACJ;AAED,MAAM,aAAa,GAAG,CAAC,QAAmB,KACxCC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAe;IAC1C,IAAI,CAAC,KAAK,IAAI,CAACC,oBAAc,CAAC,KAAK,CAAC,EAAE;AACpC,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,IAAI,KAAK,CAAC,IAAI,KAAKC,cAAQ,EAAE;QAC3B,OAAO,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5C;IAEA,OAAOT,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAA,QAAA,EAAG,KAAK,EAAA,CAAM;AACzD,CAAC,CAAC;;;;"}
+{"version":3,"file":"AppNavi.cjs","sources":["../../../src/components/AppNavi/AppNavi.tsx"],"sourcesContent":["import {\n  Children,\n  type ComponentPropsWithoutRef,\n  type FC,\n  Fragment,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useId,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Nav } from '../SectioningContent'\nimport { StatusLabel } from '../StatusLabel'\n\nimport { AppNaviAnchor, type AppNaviAnchorProps } from './AppNaviAnchor'\nimport { AppNaviButton, type AppNaviButtonProps } from './AppNaviButton'\nimport { AppNaviCustomTag, type AppNaviCustomTagProps } from './AppNaviCustomTag'\nimport { AppNaviDropdown, type AppNaviDropdownProps } from './AppNaviDropdown'\n\ntype BaseProps = PropsWithChildren<{\n  /** ラベルのテキスト */\n  label?: ReactNode\n  /** 表示するボタンの Props の配列\n   * @deprecated AppNaviButton などのコンポーネントを組み合わせて組み上げてください\n   */\n  buttons?: Array<\n    AppNaviButtonProps | AppNaviAnchorProps | AppNaviDropdownProps | AppNaviCustomTagProps\n  >\n  /** ドロップダウンにキャレットを表示するかどうか\n   * @deprecated キャレットの省略は非推奨です\n   */\n  displayDropdownCaret?: boolean\n  /** 追加の領域 */\n  additionalArea?: ReactNode\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppNavi',\n      'shr-flex shr-min-w-max shr-items-center shr-bg-white shr-px-1.5 shr-shadow-layer-1',\n    ],\n    statusLabel: ['smarthr-ui-AppNavi-label', 'shr-me-1 shr-shrink-0'],\n    buttonsEl: [\n      'smarthr-ui-AppNavi-buttons',\n      'shr-flex shr-items-stretch shr-gap-1 shr-self-stretch',\n    ],\n    listItem: ['smarthr-ui-AppNavi-listItem', 'shr-list-none'],\n    additionalAreaEl: 'shr-ms-auto',\n  },\n})\n\nconst { wrapper, statusLabel, buttonsEl, listItem, additionalAreaEl } = classNameGenerator()\nconst classNames = {\n  statusLabel: statusLabel(),\n  buttonsEl: buttonsEl(),\n  listItem: listItem(),\n  additionalAreaEl: additionalAreaEl(),\n}\n\nexport const AppNavi: FC<Props> = ({\n  label,\n  buttons,\n  className,\n  children,\n  displayDropdownCaret,\n  additionalArea,\n  ...rest\n}) => {\n  const labelId = useId()\n  const wrapperClassName = useMemo(() => wrapper({ className }), [className])\n\n  return (\n    <Nav {...rest} className={wrapperClassName} aria-labelledby={labelId}>\n      <MemoizedStatusLabel id={labelId}>{label}</MemoizedStatusLabel>\n      <ul className={classNames.buttonsEl}>\n        {buttons &&\n          buttons.map((button, i) => (\n            <li key={i} className={classNames.listItem}>\n              {'tag' in button ? (\n                <AppNaviCustomTag {...button} />\n              ) : 'href' in button ? (\n                <AppNaviAnchor {...button} />\n              ) : 'dropdownContent' in button ? (\n                <AppNaviDropdown {...button} displayCaret={displayDropdownCaret} />\n              ) : (\n                <AppNaviButton {...button} />\n              )}\n            </li>\n          ))}\n        {renderButtons(children)}\n      </ul>\n\n      {additionalArea && <div className={classNames.additionalAreaEl}>{additionalArea}</div>}\n    </Nav>\n  )\n}\n\nconst MemoizedStatusLabel = memo<PropsWithChildren<{ id: string }>>(\n  ({ id, children }) =>\n    children && (\n      <StatusLabel id={id} className={classNames.statusLabel} aria-hidden={true}>\n        {children}\n      </StatusLabel>\n    ),\n)\n\nconst renderButtons = (children: ReactNode) =>\n  Children.map(children, (child): ReactNode => {\n    if (!child || !isValidElement(child)) {\n      return null\n    }\n\n    if (child.type === Fragment) {\n      return renderButtons(child.props.children)\n    }\n\n    return <li className={classNames.listItem}>{child}</li>\n  })\n"],"names":["tv","useId","useMemo","_jsxs","Nav","_jsx","AppNaviCustomTag","AppNaviAnchor","AppNaviDropdown","AppNaviButton","memo","StatusLabel","Children","isValidElement","Fragment"],"mappings":"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"}

package/lib/components/AppNavi/AppNavi.js

@@ -3,7 +3,6 @@ import { memo, useId, useMemo, Children, isValidElement, Fragment } 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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { Nav } from '../SectioningContent/SectioningContent.js';
 import '../SectioningContent/client/components/LevelContext.js';
-import 'styled-components';
 import { StatusLabel } from '../StatusLabel/StatusLabel.js';
 import '../StatusLabel/RequiredLabel/RequiredLabel.js';
 import { AppNaviAnchor } from './AppNaviAnchor.js';