smarthr-ui 99.4.0 → 99.6.0

package/lib/components/AccordionPanel/AccordionPanelContent.cjs

@@ -25,7 +25,7 @@ const AccordionPanelContent = ({ className, ...rest }) => {
     const visible = React.useMemo(() => libs_map.getIsInclude(expandedItems, name), [expandedItems, name]);
     const wrapperRef = React.useRef(null);
     const actualClassName = React.useMemo(() => classNameGenerator({ className }), [className]);
-    return (jsxRuntime.jsx(Transition.default, { in: visible, timeout: 150, nodeRef: wrapperRef, children: (status) => (jsxRuntime.jsx("div", { ...rest, ref: wrapperRef, id: contentId, "aria-labelledby": triggerId, "aria-hidden": visible ? undefined : true, className: `${actualClassName} ${status}` })) }));
+    return (jsxRuntime.jsx(Transition.default, { nodeRef: wrapperRef, in: visible, timeout: 150, children: (status) => (jsxRuntime.jsx("div", { ...rest, ref: wrapperRef, id: contentId, className: `${actualClassName} ${status}`, "aria-labelledby": triggerId, "aria-hidden": visible ? undefined : true })) }));
 };
 
 exports.AccordionPanelContent = AccordionPanelContent;

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelContent.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype BaseProps = PropsWithChildren\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition in={visible} timeout={150} nodeRef={wrapperRef}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n          className={`${actualClassName} ${status}`}\n        />\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAgBF;;"}
+{"version":3,"file":"AccordionPanelContent.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype BaseProps = PropsWithChildren\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition nodeRef={wrapperRef} in={visible} timeout={150}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          className={`${actualClassName} ${status}`}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n        />\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAgBF;;"}

package/lib/components/AccordionPanel/AccordionPanelContent.js

@@ -23,7 +23,7 @@ const AccordionPanelContent = ({ className, ...rest }) => {
     const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name]);
     const wrapperRef = useRef(null);
     const actualClassName = useMemo(() => classNameGenerator({ className }), [className]);
-    return (jsx(Transition, { in: visible, timeout: 150, nodeRef: wrapperRef, children: (status) => (jsx("div", { ...rest, ref: wrapperRef, id: contentId, "aria-labelledby": triggerId, "aria-hidden": visible ? undefined : true, className: `${actualClassName} ${status}` })) }));
+    return (jsx(Transition, { nodeRef: wrapperRef, in: visible, timeout: 150, children: (status) => (jsx("div", { ...rest, ref: wrapperRef, id: contentId, className: `${actualClassName} ${status}`, "aria-labelledby": triggerId, "aria-hidden": visible ? undefined : true })) }));
 };
 
 export { AccordionPanelContent };

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelContent.js","sources":["../../../src/components/AccordionPanel/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype BaseProps = PropsWithChildren\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition in={visible} timeout={150} nodeRef={wrapperRef}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n          className={`${actualClassName} ${status}`}\n        />\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAgBF;;"}
+{"version":3,"file":"AccordionPanelContent.js","sources":["../../../src/components/AccordionPanel/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype BaseProps = PropsWithChildren\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition nodeRef={wrapperRef} in={visible} timeout={150}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          className={`${actualClassName} ${status}`}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n        />\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAgBF;;"}

package/lib/components/AccordionPanel/AccordionPanelItem.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 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/levelContext.cjs');
+require('../SectioningContent/client/components/LevelContext.cjs');
 require('styled-components');
 
 const AccordionPanelItemContext = React.createContext({

package/lib/components/AccordionPanel/AccordionPanelItem.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 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/levelContext.js';
+import '../SectioningContent/client/components/LevelContext.js';
 import 'styled-components';
 
 const AccordionPanelItemContext = createContext({

package/lib/components/AccordionPanel/AccordionPanelTrigger.cjs

@@ -56,11 +56,11 @@ const AccordionPanelTrigger = ({ children, className, headingType = 'blockTitle'
     const { name, contentId, triggerId } = React.useContext(components_AccordionPanel_AccordionPanelItem.AccordionPanelItemContext);
     const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } = React.useContext(components_AccordionPanel_AccordionPanel.AccordionPanelContext);
     const isExpanded = React.useMemo(() => libs_map.getIsInclude(expandedItems, name), [expandedItems, name]);
-    return (jsxRuntime.jsx(MemoizedHeadingButton, { ...rest, name: name, triggerId: triggerId, isExpanded: isExpanded, contentId: contentId, handleClickTrigger: handleClickTrigger, handleKeyDown: handleKeyDown, classNames: classNames, iconPosition: iconPosition, headingType: headingType, unrecommendedHeadingTag: unrecommendedHeadingTag, children: children }));
+    return (jsxRuntime.jsx(MemoizedHeadingButton, { ...rest, triggerId: triggerId, contentId: contentId, name: name, isExpanded: isExpanded, iconPosition: iconPosition, headingType: headingType, unrecommendedHeadingTag: unrecommendedHeadingTag, classNames: classNames, handleClickTrigger: handleClickTrigger, handleKeyDown: handleKeyDown, children: children }));
 };
 const MemoizedHeadingButton = React.memo(({ children, name, triggerId, isExpanded, contentId, handleClickTrigger, handleKeyDown, classNames, iconPosition, headingType, unrecommendedHeadingTag, ...rest }) => (
 // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
-jsxRuntime.jsx(components_Heading_Heading.Heading, { unrecommendedTag: unrecommendedHeadingTag, type: headingType, children: jsxRuntime.jsx("button", { ...rest, type: "button", value: name, id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, onClick: handleClickTrigger, onKeyDown: handleKeyDown, className: classNames.button, "data-component": "AccordionHeaderButton", children: jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { className: classNames.titleWrapper, align: "center", as: "span", children: [iconPosition === 'left' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretRightIcon, { className: classNames.leftIcon }), jsxRuntime.jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { className: classNames.rightIcon })] }) }) })));
+jsxRuntime.jsx(components_Heading_Heading.Heading, { type: headingType, unrecommendedTag: unrecommendedHeadingTag, children: jsxRuntime.jsx("button", { ...rest, type: "button", id: triggerId, value: name, className: classNames.button, "aria-expanded": isExpanded, "aria-controls": contentId, "data-component": "AccordionHeaderButton", onClick: handleClickTrigger, onKeyDown: handleKeyDown, children: jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { as: "span", align: "center", className: classNames.titleWrapper, children: [iconPosition === 'left' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretRightIcon, { className: classNames.leftIcon }), jsxRuntime.jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { className: classNames.rightIcon })] }) }) })));
 
 exports.AccordionPanelTrigger = AccordionPanelTrigger;
 //# sourceMappingURL=AccordionPanelTrigger.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelTrigger.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\nimport { Heading, type HeadingTagTypes } from '../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { TextProps } from '../Text'\n\ntype BaseProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      name={name}\n      triggerId={triggerId}\n      isExpanded={isExpanded}\n      contentId={contentId}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n      classNames={classNames}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  PropsWithChildren<\n    Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n      name: string\n      triggerId: string\n      isExpanded: boolean\n      contentId: string\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n      handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n      classNames: {\n        button: string\n        titleWrapper: string\n        leftIcon: string\n        rightIcon: string\n        title: string\n      }\n      iconPosition: 'left' | 'right'\n      headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n      unrecommendedHeadingTag?: HeadingTagTypes\n    }\n  >\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading unrecommendedTag={unrecommendedHeadingTag} type={headingType}>\n      <button\n        {...rest}\n        type=\"button\"\n        value={name}\n        id={triggerId}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n        className={classNames.button}\n        data-component=\"AccordionHeaderButton\"\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster className={classNames.titleWrapper} align=\"center\" as=\"span\">\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAoCI;AACAA;;"}
+{"version":3,"file":"AccordionPanelTrigger.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\nimport { Heading, type HeadingTagTypes } from '../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { TextProps } from '../Text'\n\ntype BaseProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      triggerId={triggerId}\n      contentId={contentId}\n      name={name}\n      isExpanded={isExpanded}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n      classNames={classNames}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  PropsWithChildren<\n    Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n      name: string\n      triggerId: string\n      isExpanded: boolean\n      contentId: string\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n      handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n      classNames: {\n        button: string\n        titleWrapper: string\n        leftIcon: string\n        rightIcon: string\n        title: string\n      }\n      iconPosition: 'left' | 'right'\n      headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n      unrecommendedHeadingTag?: HeadingTagTypes\n    }\n  >\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading type={headingType} unrecommendedTag={unrecommendedHeadingTag}>\n      <button\n        {...rest}\n        type=\"button\"\n        id={triggerId}\n        value={name}\n        className={classNames.button}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        data-component=\"AccordionHeaderButton\"\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster as=\"span\" align=\"center\" className={classNames.titleWrapper}>\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAoCI;AACAA;;"}

package/lib/components/AccordionPanel/AccordionPanelTrigger.js

@@ -54,11 +54,11 @@ const AccordionPanelTrigger = ({ children, className, headingType = 'blockTitle'
     const { name, contentId, triggerId } = useContext(AccordionPanelItemContext);
     const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } = useContext(AccordionPanelContext);
     const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name]);
-    return (jsx(MemoizedHeadingButton, { ...rest, name: name, triggerId: triggerId, isExpanded: isExpanded, contentId: contentId, handleClickTrigger: handleClickTrigger, handleKeyDown: handleKeyDown, classNames: classNames, iconPosition: iconPosition, headingType: headingType, unrecommendedHeadingTag: unrecommendedHeadingTag, children: children }));
+    return (jsx(MemoizedHeadingButton, { ...rest, triggerId: triggerId, contentId: contentId, name: name, isExpanded: isExpanded, iconPosition: iconPosition, headingType: headingType, unrecommendedHeadingTag: unrecommendedHeadingTag, classNames: classNames, handleClickTrigger: handleClickTrigger, handleKeyDown: handleKeyDown, children: children }));
 };
 const MemoizedHeadingButton = memo(({ children, name, triggerId, isExpanded, contentId, handleClickTrigger, handleKeyDown, classNames, iconPosition, headingType, unrecommendedHeadingTag, ...rest }) => (
 // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
-jsx(Heading, { unrecommendedTag: unrecommendedHeadingTag, type: headingType, children: jsx("button", { ...rest, type: "button", value: name, id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, onClick: handleClickTrigger, onKeyDown: handleKeyDown, className: classNames.button, "data-component": "AccordionHeaderButton", children: jsxs(Cluster, { className: classNames.titleWrapper, align: "center", as: "span", children: [iconPosition === 'left' && jsx(FaCaretRightIcon, { className: classNames.leftIcon }), jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsx(FaCaretDownIcon, { className: classNames.rightIcon })] }) }) })));
+jsx(Heading, { type: headingType, unrecommendedTag: unrecommendedHeadingTag, children: jsx("button", { ...rest, type: "button", id: triggerId, value: name, className: classNames.button, "aria-expanded": isExpanded, "aria-controls": contentId, "data-component": "AccordionHeaderButton", onClick: handleClickTrigger, onKeyDown: handleKeyDown, children: jsxs(Cluster, { as: "span", align: "center", className: classNames.titleWrapper, children: [iconPosition === 'left' && jsx(FaCaretRightIcon, { className: classNames.leftIcon }), jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsx(FaCaretDownIcon, { className: classNames.rightIcon })] }) }) })));
 
 export { AccordionPanelTrigger };
 //# sourceMappingURL=AccordionPanelTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelTrigger.js","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\nimport { Heading, type HeadingTagTypes } from '../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { TextProps } from '../Text'\n\ntype BaseProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      name={name}\n      triggerId={triggerId}\n      isExpanded={isExpanded}\n      contentId={contentId}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n      classNames={classNames}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  PropsWithChildren<\n    Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n      name: string\n      triggerId: string\n      isExpanded: boolean\n      contentId: string\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n      handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n      classNames: {\n        button: string\n        titleWrapper: string\n        leftIcon: string\n        rightIcon: string\n        title: string\n      }\n      iconPosition: 'left' | 'right'\n      headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n      unrecommendedHeadingTag?: HeadingTagTypes\n    }\n  >\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading unrecommendedTag={unrecommendedHeadingTag} type={headingType}>\n      <button\n        {...rest}\n        type=\"button\"\n        value={name}\n        id={triggerId}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n        className={classNames.button}\n        data-component=\"AccordionHeaderButton\"\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster className={classNames.titleWrapper} align=\"center\" as=\"span\">\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAkCA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAoCI;AACAA;;"}
+{"version":3,"file":"AccordionPanelTrigger.js","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../libs/map'\nimport { Heading, type HeadingTagTypes } from '../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { TextProps } from '../Text'\n\ntype BaseProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      triggerId={triggerId}\n      contentId={contentId}\n      name={name}\n      isExpanded={isExpanded}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n      classNames={classNames}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  PropsWithChildren<\n    Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n      name: string\n      triggerId: string\n      isExpanded: boolean\n      contentId: string\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n      handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n      classNames: {\n        button: string\n        titleWrapper: string\n        leftIcon: string\n        rightIcon: string\n        title: string\n      }\n      iconPosition: 'left' | 'right'\n      headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n      unrecommendedHeadingTag?: HeadingTagTypes\n    }\n  >\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading type={headingType} unrecommendedTag={unrecommendedHeadingTag}>\n      <button\n        {...rest}\n        type=\"button\"\n        id={triggerId}\n        value={name}\n        className={classNames.button}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        data-component=\"AccordionHeaderButton\"\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster as=\"span\" align=\"center\" className={classNames.titleWrapper}>\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAkCA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAoCI;AACAA;;"}

package/lib/components/AppHeader/AppHeader.cjs

@@ -2,18 +2,51 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var hooks_useLatest = require('../../hooks/useLatest.cjs');
 var components_AppHeader_components_desktop_DesktopHeader = require('./components/desktop/DesktopHeader.cjs');
 var components_AppHeader_components_mobile_MobileHeader = require('./components/mobile/MobileHeader.cjs');
 var components_AppHeader_hooks_useMediaQuery = require('./hooks/useMediaQuery.cjs');
 
-const AppHeader = ({ children, desktopAdditionalContent, desktopNavigationAdditionalContent, mobileAdditionalContent, ...rest }) => {
+const EMPTY_FEATURES = [];
+const AppHeader = ({ children, desktopAdditionalContent, desktopNavigationAdditionalContent, mobileAdditionalContent, features, fetchFeatures, ...rest }) => {
     // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、
     //  wovn の言語切替カスタム UI の挿入対象となる DOM ("wovn-embedded-widget-anchor" クラスを持った div) が複数描画されていると、
     //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。
     const isDesktop = components_AppHeader_hooks_useMediaQuery.useMediaQuery(components_AppHeader_hooks_useMediaQuery.mediaQuery.desktop);
+    const [lazyFeatures, setLazyFeatures] = React.useState({ loading: false, error: false, data: null });
+    const latest = hooks_useLatest.useLatest({ fetchFeatures, lazyFeatures });
+    const functions = React.useMemo(() => ({
+        handleOpenAppLauncher: () => {
+            // HINT: Desktop・Mobileの両ヘッダーが常にマウントされているため、取得中・取得済みの場合はスキップし、
+            //  どちらから開いても fetchFeatures の呼び出しが1回だけになるようにする
+            if (latest.fetchFeatures && !latest.lazyFeatures.loading && !latest.lazyFeatures.data) {
+                setLazyFeatures({ loading: true, error: false, data: null });
+                // HINT: 失敗時は次回オープンで再試行できるようにする
+                const handleError = () => setLazyFeatures({ loading: false, error: true, data: null });
+                try {
+                    latest
+                        .fetchFeatures()
+                        .then((data) => setLazyFeatures({ loading: false, error: false, data }), handleError);
+                }
+                catch {
+                    // HINT: fetchFeatures が Promise を返す前に同期的に throw した場合も、loading のままにしない
+                    handleError();
+                }
+            }
+        },
+    }), [latest]);
+    const resolvedFeatures = fetchFeatures
+        ? (lazyFeatures.data ?? EMPTY_FEATURES)
+        : (features ?? EMPTY_FEATURES);
+    const isAppLauncherAvailable = !!fetchFeatures || resolvedFeatures.length > 0;
+    // HINT: Desktopは Dropdown の onOpen（requestAnimationFrame経由）で取得を開始するため、
+    //  パネルが開いてから実際に取得が始まるまでに1フレームの猶予がある。
+    //  fetchFeatures 指定時に未取得かつ未エラーの状態はすべて取得中として扱い、その間に「該当なし」が表示されるのを防ぐ
+    const featuresLoading = !!fetchFeatures && lazyFeatures.data === null && !lazyFeatures.error;
     // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています
     // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_AppHeader_components_desktop_DesktopHeader.DesktopHeader, { ...rest, desktopAdditionalContent: desktopAdditionalContent, desktopNavigationAdditionalContent: desktopNavigationAdditionalContent, children: isDesktop ? children : undefined }), jsxRuntime.jsx(components_AppHeader_components_mobile_MobileHeader.MobileHeader, { ...rest, mobileAdditionalContent: mobileAdditionalContent, children: isDesktop ? undefined : children })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_AppHeader_components_desktop_DesktopHeader.DesktopHeader, { ...rest, desktopAdditionalContent: desktopAdditionalContent, desktopNavigationAdditionalContent: desktopNavigationAdditionalContent, features: resolvedFeatures, isAppLauncherAvailable: isAppLauncherAvailable, featuresLoading: featuresLoading, featuresError: lazyFeatures.error, handleOpenAppLauncher: functions.handleOpenAppLauncher, children: isDesktop ? children : undefined }), jsxRuntime.jsx(components_AppHeader_components_mobile_MobileHeader.MobileHeader, { ...rest, mobileAdditionalContent: mobileAdditionalContent, features: resolvedFeatures, isAppLauncherAvailable: isAppLauncherAvailable, featuresLoading: featuresLoading, featuresError: lazyFeatures.error, handleOpenAppLauncher: functions.handleOpenAppLauncher, children: isDesktop ? undefined : children })] }));
 };
 
 exports.AppHeader = AppHeader;

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.cjs","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client'\n\nimport { DesktopHeader } from './components/desktop/DesktopHeader'\nimport { MobileHeader } from './components/mobile/MobileHeader'\nimport { mediaQuery, useMediaQuery } from './hooks/useMediaQuery'\n\nimport type { HeaderProps } from './types'\nimport type { FC } from 'react'\n\nexport const AppHeader: FC<HeaderProps> = ({\n  children,\n  desktopAdditionalContent,\n  desktopNavigationAdditionalContent,\n  mobileAdditionalContent,\n  ...rest\n}) => {\n  // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、\n  //  wovn の言語切替カスタム UI の挿入対象となる DOM (\"wovn-embedded-widget-anchor\" クラスを持った div) が複数描画されていると、\n  //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています\n  // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです\n  return (\n    <>\n      <DesktopHeader\n        {...rest}\n        desktopAdditionalContent={desktopAdditionalContent}\n        desktopNavigationAdditionalContent={desktopNavigationAdditionalContent}\n      >\n        {isDesktop ? children : undefined}\n      </DesktopHeader>\n      <MobileHeader {...rest} mobileAdditionalContent={mobileAdditionalContent}>\n        {isDesktop ? undefined : children}\n      </MobileHeader>\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AASO;;;;;;;;AA4BP;;"}
+{"version":3,"file":"AppHeader.cjs","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\n\nimport { DesktopHeader } from './components/desktop/DesktopHeader'\nimport { MobileHeader } from './components/mobile/MobileHeader'\nimport { mediaQuery, useMediaQuery } from './hooks/useMediaQuery'\n\nimport type { HeaderProps, Launcher } from './types'\nimport type { FC } from 'react'\n\nconst EMPTY_FEATURES: Array<Launcher['feature']> = []\n\nexport const AppHeader: FC<HeaderProps> = ({\n  children,\n  desktopAdditionalContent,\n  desktopNavigationAdditionalContent,\n  mobileAdditionalContent,\n  features,\n  fetchFeatures,\n  ...rest\n}) => {\n  // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、\n  //  wovn の言語切替カスタム UI の挿入対象となる DOM (\"wovn-embedded-widget-anchor\" クラスを持った div) が複数描画されていると、\n  //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  const [lazyFeatures, setLazyFeatures] = useState<{\n    loading: boolean\n    error: boolean\n    data: Array<Launcher['feature']> | null\n  }>({ loading: false, error: false, data: null })\n\n  const latest = useLatest({ fetchFeatures, lazyFeatures })\n\n  const functions = useMemo(\n    () => ({\n      handleOpenAppLauncher: () => {\n        // HINT: Desktop・Mobileの両ヘッダーが常にマウントされているため、取得中・取得済みの場合はスキップし、\n        //  どちらから開いても fetchFeatures の呼び出しが1回だけになるようにする\n        if (latest.fetchFeatures && !latest.lazyFeatures.loading && !latest.lazyFeatures.data) {\n          setLazyFeatures({ loading: true, error: false, data: null })\n\n          // HINT: 失敗時は次回オープンで再試行できるようにする\n          const handleError = () => setLazyFeatures({ loading: false, error: true, data: null })\n\n          try {\n            latest\n              .fetchFeatures()\n              .then((data) => setLazyFeatures({ loading: false, error: false, data }), handleError)\n          } catch {\n            // HINT: fetchFeatures が Promise を返す前に同期的に throw した場合も、loading のままにしない\n            handleError()\n          }\n        }\n      },\n    }),\n    [latest],\n  )\n\n  const resolvedFeatures = fetchFeatures\n    ? (lazyFeatures.data ?? EMPTY_FEATURES)\n    : (features ?? EMPTY_FEATURES)\n  const isAppLauncherAvailable = !!fetchFeatures || resolvedFeatures.length > 0\n  // HINT: Desktopは Dropdown の onOpen（requestAnimationFrame経由）で取得を開始するため、\n  //  パネルが開いてから実際に取得が始まるまでに1フレームの猶予がある。\n  //  fetchFeatures 指定時に未取得かつ未エラーの状態はすべて取得中として扱い、その間に「該当なし」が表示されるのを防ぐ\n  const featuresLoading = !!fetchFeatures && lazyFeatures.data === null && !lazyFeatures.error\n\n  // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています\n  // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです\n  return (\n    <>\n      <DesktopHeader\n        {...rest}\n        desktopAdditionalContent={desktopAdditionalContent}\n        desktopNavigationAdditionalContent={desktopNavigationAdditionalContent}\n        features={resolvedFeatures}\n        isAppLauncherAvailable={isAppLauncherAvailable}\n        featuresLoading={featuresLoading}\n        featuresError={lazyFeatures.error}\n        handleOpenAppLauncher={functions.handleOpenAppLauncher}\n      >\n        {isDesktop ? children : undefined}\n      </DesktopHeader>\n      <MobileHeader\n        {...rest}\n        mobileAdditionalContent={mobileAdditionalContent}\n        features={resolvedFeatures}\n        isAppLauncherAvailable={isAppLauncherAvailable}\n        featuresLoading={featuresLoading}\n        featuresError={lazyFeatures.error}\n        handleOpenAppLauncher={functions.handleOpenAppLauncher}\n      >\n        {isDesktop ? undefined : children}\n      </MobileHeader>\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAaA;;;;;;;;AAwBE;;;;AAKM;AACE;;;AAKA;;AAEK;;;AAEH;;AAEA;;;;AAIP;;AAKD;AACA;;;;;AAKF;;;;AA+BF;;"}

package/lib/components/AppHeader/AppHeader.js

@@ -1,17 +1,50 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useLatest } from '../../hooks/useLatest.js';
 import { DesktopHeader } from './components/desktop/DesktopHeader.js';
 import { MobileHeader } from './components/mobile/MobileHeader.js';
 import { useMediaQuery, mediaQuery } from './hooks/useMediaQuery.js';
 
-const AppHeader = ({ children, desktopAdditionalContent, desktopNavigationAdditionalContent, mobileAdditionalContent, ...rest }) => {
+const EMPTY_FEATURES = [];
+const AppHeader = ({ children, desktopAdditionalContent, desktopNavigationAdditionalContent, mobileAdditionalContent, features, fetchFeatures, ...rest }) => {
     // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、
     //  wovn の言語切替カスタム UI の挿入対象となる DOM ("wovn-embedded-widget-anchor" クラスを持った div) が複数描画されていると、
     //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。
     const isDesktop = useMediaQuery(mediaQuery.desktop);
+    const [lazyFeatures, setLazyFeatures] = useState({ loading: false, error: false, data: null });
+    const latest = useLatest({ fetchFeatures, lazyFeatures });
+    const functions = useMemo(() => ({
+        handleOpenAppLauncher: () => {
+            // HINT: Desktop・Mobileの両ヘッダーが常にマウントされているため、取得中・取得済みの場合はスキップし、
+            //  どちらから開いても fetchFeatures の呼び出しが1回だけになるようにする
+            if (latest.fetchFeatures && !latest.lazyFeatures.loading && !latest.lazyFeatures.data) {
+                setLazyFeatures({ loading: true, error: false, data: null });
+                // HINT: 失敗時は次回オープンで再試行できるようにする
+                const handleError = () => setLazyFeatures({ loading: false, error: true, data: null });
+                try {
+                    latest
+                        .fetchFeatures()
+                        .then((data) => setLazyFeatures({ loading: false, error: false, data }), handleError);
+                }
+                catch {
+                    // HINT: fetchFeatures が Promise を返す前に同期的に throw した場合も、loading のままにしない
+                    handleError();
+                }
+            }
+        },
+    }), [latest]);
+    const resolvedFeatures = fetchFeatures
+        ? (lazyFeatures.data ?? EMPTY_FEATURES)
+        : (features ?? EMPTY_FEATURES);
+    const isAppLauncherAvailable = !!fetchFeatures || resolvedFeatures.length > 0;
+    // HINT: Desktopは Dropdown の onOpen（requestAnimationFrame経由）で取得を開始するため、
+    //  パネルが開いてから実際に取得が始まるまでに1フレームの猶予がある。
+    //  fetchFeatures 指定時に未取得かつ未エラーの状態はすべて取得中として扱い、その間に「該当なし」が表示されるのを防ぐ
+    const featuresLoading = !!fetchFeatures && lazyFeatures.data === null && !lazyFeatures.error;
     // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています
     // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです
-    return (jsxs(Fragment, { children: [jsx(DesktopHeader, { ...rest, desktopAdditionalContent: desktopAdditionalContent, desktopNavigationAdditionalContent: desktopNavigationAdditionalContent, children: isDesktop ? children : undefined }), jsx(MobileHeader, { ...rest, mobileAdditionalContent: mobileAdditionalContent, children: isDesktop ? undefined : children })] }));
+    return (jsxs(Fragment, { children: [jsx(DesktopHeader, { ...rest, desktopAdditionalContent: desktopAdditionalContent, desktopNavigationAdditionalContent: desktopNavigationAdditionalContent, features: resolvedFeatures, isAppLauncherAvailable: isAppLauncherAvailable, featuresLoading: featuresLoading, featuresError: lazyFeatures.error, handleOpenAppLauncher: functions.handleOpenAppLauncher, children: isDesktop ? children : undefined }), jsx(MobileHeader, { ...rest, mobileAdditionalContent: mobileAdditionalContent, features: resolvedFeatures, isAppLauncherAvailable: isAppLauncherAvailable, featuresLoading: featuresLoading, featuresError: lazyFeatures.error, handleOpenAppLauncher: functions.handleOpenAppLauncher, children: isDesktop ? undefined : children })] }));
 };
 
 export { AppHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client'\n\nimport { DesktopHeader } from './components/desktop/DesktopHeader'\nimport { MobileHeader } from './components/mobile/MobileHeader'\nimport { mediaQuery, useMediaQuery } from './hooks/useMediaQuery'\n\nimport type { HeaderProps } from './types'\nimport type { FC } from 'react'\n\nexport const AppHeader: FC<HeaderProps> = ({\n  children,\n  desktopAdditionalContent,\n  desktopNavigationAdditionalContent,\n  mobileAdditionalContent,\n  ...rest\n}) => {\n  // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、\n  //  wovn の言語切替カスタム UI の挿入対象となる DOM (\"wovn-embedded-widget-anchor\" クラスを持った div) が複数描画されていると、\n  //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています\n  // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです\n  return (\n    <>\n      <DesktopHeader\n        {...rest}\n        desktopAdditionalContent={desktopAdditionalContent}\n        desktopNavigationAdditionalContent={desktopNavigationAdditionalContent}\n      >\n        {isDesktop ? children : undefined}\n      </DesktopHeader>\n      <MobileHeader {...rest} mobileAdditionalContent={mobileAdditionalContent}>\n        {isDesktop ? undefined : children}\n      </MobileHeader>\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;;AASO;;;;;;;;AA4BP;;"}
+{"version":3,"file":"AppHeader.js","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\n\nimport { DesktopHeader } from './components/desktop/DesktopHeader'\nimport { MobileHeader } from './components/mobile/MobileHeader'\nimport { mediaQuery, useMediaQuery } from './hooks/useMediaQuery'\n\nimport type { HeaderProps, Launcher } from './types'\nimport type { FC } from 'react'\n\nconst EMPTY_FEATURES: Array<Launcher['feature']> = []\n\nexport const AppHeader: FC<HeaderProps> = ({\n  children,\n  desktopAdditionalContent,\n  desktopNavigationAdditionalContent,\n  mobileAdditionalContent,\n  features,\n  fetchFeatures,\n  ...rest\n}) => {\n  // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、\n  //  wovn の言語切替カスタム UI の挿入対象となる DOM (\"wovn-embedded-widget-anchor\" クラスを持った div) が複数描画されていると、\n  //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  const [lazyFeatures, setLazyFeatures] = useState<{\n    loading: boolean\n    error: boolean\n    data: Array<Launcher['feature']> | null\n  }>({ loading: false, error: false, data: null })\n\n  const latest = useLatest({ fetchFeatures, lazyFeatures })\n\n  const functions = useMemo(\n    () => ({\n      handleOpenAppLauncher: () => {\n        // HINT: Desktop・Mobileの両ヘッダーが常にマウントされているため、取得中・取得済みの場合はスキップし、\n        //  どちらから開いても fetchFeatures の呼び出しが1回だけになるようにする\n        if (latest.fetchFeatures && !latest.lazyFeatures.loading && !latest.lazyFeatures.data) {\n          setLazyFeatures({ loading: true, error: false, data: null })\n\n          // HINT: 失敗時は次回オープンで再試行できるようにする\n          const handleError = () => setLazyFeatures({ loading: false, error: true, data: null })\n\n          try {\n            latest\n              .fetchFeatures()\n              .then((data) => setLazyFeatures({ loading: false, error: false, data }), handleError)\n          } catch {\n            // HINT: fetchFeatures が Promise を返す前に同期的に throw した場合も、loading のままにしない\n            handleError()\n          }\n        }\n      },\n    }),\n    [latest],\n  )\n\n  const resolvedFeatures = fetchFeatures\n    ? (lazyFeatures.data ?? EMPTY_FEATURES)\n    : (features ?? EMPTY_FEATURES)\n  const isAppLauncherAvailable = !!fetchFeatures || resolvedFeatures.length > 0\n  // HINT: Desktopは Dropdown の onOpen（requestAnimationFrame経由）で取得を開始するため、\n  //  パネルが開いてから実際に取得が始まるまでに1フレームの猶予がある。\n  //  fetchFeatures 指定時に未取得かつ未エラーの状態はすべて取得中として扱い、その間に「該当なし」が表示されるのを防ぐ\n  const featuresLoading = !!fetchFeatures && lazyFeatures.data === null && !lazyFeatures.error\n\n  // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています\n  // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです\n  return (\n    <>\n      <DesktopHeader\n        {...rest}\n        desktopAdditionalContent={desktopAdditionalContent}\n        desktopNavigationAdditionalContent={desktopNavigationAdditionalContent}\n        features={resolvedFeatures}\n        isAppLauncherAvailable={isAppLauncherAvailable}\n        featuresLoading={featuresLoading}\n        featuresError={lazyFeatures.error}\n        handleOpenAppLauncher={functions.handleOpenAppLauncher}\n      >\n        {isDesktop ? children : undefined}\n      </DesktopHeader>\n      <MobileHeader\n        {...rest}\n        mobileAdditionalContent={mobileAdditionalContent}\n        features={resolvedFeatures}\n        isAppLauncherAvailable={isAppLauncherAvailable}\n        featuresLoading={featuresLoading}\n        featuresError={lazyFeatures.error}\n        handleOpenAppLauncher={functions.handleOpenAppLauncher}\n      >\n        {isDesktop ? undefined : children}\n      </MobileHeader>\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAaA;;;;;;;;AAwBE;;;;AAKM;AACE;;;AAKA;;AAEK;;;AAEH;;AAEA;;;;AAIP;;AAKD;AACA;;;;;AAKF;;;;AA+BF;;"}

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

@@ -14,7 +14,14 @@ require('../../../Button/UnstyledButton.cjs');
 var components_Icon_FaIcon = require('../../../Icon/FaIcon.cjs');
 require('../../../Icon/generateIcon.cjs');
 require('../../../Icon/OpenInNewTabIcon.cjs');
+require('../../../Layout/Stack/Stack.cjs');
+require('../../../Layout/Cluster/Cluster.cjs');
+require('../../../Layout/Reel/Reel.cjs');
+require('../../../Layout/Sidebar/Sidebar.cjs');
+var components_Layout_Center_Center = require('../../../Layout/Center/Center.cjs');
+require('../../../Layout/Container/Container.cjs');
 var components_LineClamp_LineClamp = require('../../../LineClamp/LineClamp.cjs');
+var components_Loader_Loader = require('../../../Loader/Loader.cjs');
 var components_Text_Text = require('../../../Text/Text.cjs');
 var components_AppHeader_hooks_useMediaQuery = require('../../hooks/useMediaQuery.cjs');
 var components_AppHeader_components_common_Translate = require('./Translate.cjs');
@@ -22,6 +29,8 @@ var components_AppHeader_components_common_Translate = require('./Translate.cjs'
 const classNameGenerator = index.tv({
     slots: {
         empty: ['shr-p-1 shr-text-center'],
+        loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],
+        loading: ['shr-py-3'],
         list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],
         listItem: [
             'smarthr-ui-AppLauncher-listItem',
@@ -31,20 +40,33 @@ const classNameGenerator = index.tv({
     },
 });
 const CLASS_NAMES = (() => {
-    const { empty, list, listItem } = classNameGenerator();
+    const { empty, loadError, loading, list, listItem } = classNameGenerator();
     return {
         empty: empty(),
+        loadError: loadError(),
+        loading: loading(),
         list: list(),
         listItem: listItem(),
     };
 })();
-const AppLauncherFeatures = ({ features, page }) => features.length === 0 ? jsxRuntime.jsx(EmptyList, {}) : jsxRuntime.jsx(FeatureList, { features: features, page: page });
+const AppLauncherFeatures = ({ features, page, loading, error }) => {
+    if (loading) {
+        return jsxRuntime.jsx(LoadingList, {});
+    }
+    if (error) {
+        return jsxRuntime.jsx(LoadErrorText, {});
+    }
+    return features.length === 0 ? jsxRuntime.jsx(EmptyList, {}) : jsxRuntime.jsx(FeatureList, { features: features, page: page });
+};
+const LoadingList = React.memo(() => (jsxRuntime.jsx(components_Layout_Center_Center.Center, { className: CLASS_NAMES.loading, children: jsxRuntime.jsx(components_Loader_Loader.Loader, {}) })));
+const LoadErrorText = React.memo(() => (jsxRuntime.jsx("div", { className: CLASS_NAMES.loadError, children: jsxRuntime.jsx(components_Text_Text.Text, { size: "S", children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/loadError", defaultText: `アプリ一覧の読み込みに失敗しました。
+時間をおいて、やり直してください。` }) }) })));
 const EmptyList = React.memo(() => (jsxRuntime.jsx("div", { className: CLASS_NAMES.empty, children: jsxRuntime.jsx(components_Text_Text.Text, { size: "S", children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/emptyText", defaultText: "\u8A72\u5F53\u3059\u308B\u30A2\u30D7\u30EA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F\u3002" }) }) }) })));
 const FeatureList = ({ features, page }) => {
     const isFavorite = page === 'favorite';
     return (jsxRuntime.jsx("ul", { className: CLASS_NAMES.list, children: features.map((feature) => (jsxRuntime.jsx(FeatureListItem, { href: feature.url, isFavorite: isFavorite, className: CLASS_NAMES.listItem, children: feature.name }, feature.id))) }));
 };
-const FeatureListItem = React.memo(({ href, children, isFavorite, className }) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(components_Button_AnchorButton.AnchorButton, { href: href, target: "_blank", prefix: isFavorite && jsxRuntime.jsx(components_Icon_FaIcon.FaStarIcon, {}), suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaArrowRightIcon, {}), variant: "text", wide: true, "data-favorite": isFavorite, className: className, children: jsxRuntime.jsx(FeatureName, { children: children }) }) })));
+const FeatureListItem = React.memo(({ href, children, isFavorite, className }) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(components_Button_AnchorButton.AnchorButton, { href: href, target: "_blank", variant: "text", wide: true, className: className, "data-favorite": isFavorite, prefix: isFavorite && jsxRuntime.jsx(components_Icon_FaIcon.FaStarIcon, {}), suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaArrowRightIcon, {}), children: jsxRuntime.jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {
     const isDesktop = components_AppHeader_hooks_useMediaQuery.useMediaQuery(components_AppHeader_hooks_useMediaQuery.mediaQuery.desktop);
     return isDesktop ? jsxRuntime.jsx(components_LineClamp_LineClamp.LineClamp, { maxLines: 2, children: children }) : children;

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFeatures.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { LineClamp } from '../../../LineClamp'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page }) =>\n  features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n      variant=\"text\"\n      wide\n      data-favorite={isFavorite}\n      className={className}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","memo","Text","Translate","Localizer","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery","LineClamp"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,yBAAyB,CAAC;AAClC,QAAA,IAAI,EAAE,CAAC,eAAe,EAAE,sCAAsC,CAAC;AAC/D,QAAA,QAAQ,EAAE;YACR,iCAAiC;YACjC,gJAAgJ;YAChJ,kDAAkD;AACnD,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAK;IACxB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE;IAEtD,OAAO;QACL,KAAK,EAAE,KAAK,EAAE;QACd,IAAI,EAAE,IAAI,EAAE;QACZ,QAAQ,EAAE,QAAQ,EAAE;KACrB;AACH,CAAC,GAAG;AAOG,MAAM,mBAAmB,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAC/D,QAAQ,CAAC,MAAM,KAAK,CAAC,GAAGC,eAAC,SAAS,EAAA,EAAA,CAAG,GAAGA,cAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI;AAErF,MAAM,SAAS,GAAGC,UAAI,CAAC,OACrBD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,CAAC,KAAK,YAC/BA,cAAA,CAACE,yBAAI,IAAC,IAAI,EAAC,GAAG,EAAA,QAAA,EACZF,eAACG,0DAAS,EAAA,EAAA,QAAA,EACRH,eAACI,wBAAS,EAAA,EACR,EAAE,EAAC,yCAAyC,EAC5C,WAAW,EAAC,oHAAqB,EAAA,CACjC,EAAA,CACQ,GACP,EAAA,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAI;AACpD,IAAA,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU;IAEtC,QACEJ,uBAAI,SAAS,EAAE,WAAW,CAAC,IAAI,EAAA,QAAA,EAC5B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpBA,cAAA,CAAC,eAAe,EAAA,EAEd,IAAI,EAAE,OAAO,CAAC,GAAG,EACjB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,WAAW,CAAC,QAAQ,EAAA,QAAA,EAE9B,OAAO,CAAC,IAAI,EAAA,EALR,OAAO,CAAC,EAAE,CAMC,CACnB,CAAC,EAAA,CACC;AAET,CAAC;AAED,MAAM,eAAe,GAAGC,UAAI,CAKzB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAC3CD,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,cAAA,CAACK,2CAAY,EAAA,EACX,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,MAAM,EAAE,UAAU,IAAIL,cAAA,CAACM,iCAAU,EAAA,EAAA,CAAG,EACpC,MAAM,EAAEN,cAAA,CAACO,uCAAgB,EAAA,EAAA,CAAG,EAC5B,OAAO,EAAC,MAAM,EACd,IAAI,EAAA,IAAA,EAAA,eAAA,EACW,UAAU,EACzB,SAAS,EAAE,SAAS,YAEpBP,cAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAe,EAAA,CACxB,EAAA,CACZ,CACN,CAAC;AAEF,MAAM,WAAW,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;IAC1D,MAAM,SAAS,GAAGQ,sDAAa,CAACC,mDAAU,CAAC,OAAO,CAAC;AAEnD,IAAA,OAAO,SAAS,GAAGT,cAAA,CAACU,wCAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAG,QAAQ,EAAA,CAAa,GAAG,QAAQ;AAC9E,CAAC;;;;"}
+{"version":3,"file":"AppLauncherFeatures.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { LineClamp } from '../../../LineClamp'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","memo","Center","Loader","Text","Localizer","Translate","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery","LineClamp"],"mappings":"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"}

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

@@ -3,6 +3,8 @@ import type { Launcher } from '../../types';
 type Props = {
     features: Array<Launcher['feature']>;
     page: Launcher['page'];
+    loading?: boolean;
+    error?: boolean;
 };
 export declare const AppLauncherFeatures: FC<Props>;
 export {};

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

@@ -12,7 +12,14 @@ import '../../../Button/UnstyledButton.js';
 import { FaArrowRightIcon, FaStarIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
 import '../../../Icon/OpenInNewTabIcon.js';
+import '../../../Layout/Stack/Stack.js';
+import '../../../Layout/Cluster/Cluster.js';
+import '../../../Layout/Reel/Reel.js';
+import '../../../Layout/Sidebar/Sidebar.js';
+import { Center } from '../../../Layout/Center/Center.js';
+import '../../../Layout/Container/Container.js';
 import { LineClamp } from '../../../LineClamp/LineClamp.js';
+import { Loader } from '../../../Loader/Loader.js';
 import { Text } from '../../../Text/Text.js';
 import { useMediaQuery, mediaQuery } from '../../hooks/useMediaQuery.js';
 import { Translate } from './Translate.js';
@@ -20,6 +27,8 @@ import { Translate } from './Translate.js';
 const classNameGenerator = ce({
     slots: {
         empty: ['shr-p-1 shr-text-center'],
+        loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],
+        loading: ['shr-py-3'],
         list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],
         listItem: [
             'smarthr-ui-AppLauncher-listItem',
@@ -29,20 +38,33 @@ const classNameGenerator = ce({
     },
 });
 const CLASS_NAMES = (() => {
-    const { empty, list, listItem } = classNameGenerator();
+    const { empty, loadError, loading, list, listItem } = classNameGenerator();
     return {
         empty: empty(),
+        loadError: loadError(),
+        loading: loading(),
         list: list(),
         listItem: listItem(),
     };
 })();
-const AppLauncherFeatures = ({ features, page }) => features.length === 0 ? jsx(EmptyList, {}) : jsx(FeatureList, { features: features, page: page });
+const AppLauncherFeatures = ({ features, page, loading, error }) => {
+    if (loading) {
+        return jsx(LoadingList, {});
+    }
+    if (error) {
+        return jsx(LoadErrorText, {});
+    }
+    return features.length === 0 ? jsx(EmptyList, {}) : jsx(FeatureList, { features: features, page: page });
+};
+const LoadingList = memo(() => (jsx(Center, { className: CLASS_NAMES.loading, children: jsx(Loader, {}) })));
+const LoadErrorText = memo(() => (jsx("div", { className: CLASS_NAMES.loadError, children: jsx(Text, { size: "S", children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/loadError", defaultText: `アプリ一覧の読み込みに失敗しました。
+時間をおいて、やり直してください。` }) }) })));
 const EmptyList = memo(() => (jsx("div", { className: CLASS_NAMES.empty, children: jsx(Text, { size: "S", children: jsx(Translate, { children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/emptyText", defaultText: "\u8A72\u5F53\u3059\u308B\u30A2\u30D7\u30EA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F\u3002" }) }) }) })));
 const FeatureList = ({ features, page }) => {
     const isFavorite = page === 'favorite';
     return (jsx("ul", { className: CLASS_NAMES.list, children: features.map((feature) => (jsx(FeatureListItem, { href: feature.url, isFavorite: isFavorite, className: CLASS_NAMES.listItem, children: feature.name }, feature.id))) }));
 };
-const FeatureListItem = memo(({ href, children, isFavorite, className }) => (jsx("li", { children: jsx(ForwardedAnchorButton, { href: href, target: "_blank", prefix: isFavorite && jsx(FaStarIcon, {}), suffix: jsx(FaArrowRightIcon, {}), variant: "text", wide: true, "data-favorite": isFavorite, className: className, children: jsx(FeatureName, { children: children }) }) })));
+const FeatureListItem = memo(({ href, children, isFavorite, className }) => (jsx("li", { children: jsx(ForwardedAnchorButton, { href: href, target: "_blank", variant: "text", wide: true, className: className, "data-favorite": isFavorite, prefix: isFavorite && jsx(FaStarIcon, {}), suffix: jsx(FaArrowRightIcon, {}), children: jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {
     const isDesktop = useMediaQuery(mediaQuery.desktop);
     return isDesktop ? jsx(LineClamp, { maxLines: 2, children: children }) : children;

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFeatures.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { LineClamp } from '../../../LineClamp'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page }) =>\n  features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n      variant=\"text\"\n      wide\n      data-favorite={isFavorite}\n      className={className}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","AnchorButton"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,yBAAyB,CAAC;AAClC,QAAA,IAAI,EAAE,CAAC,eAAe,EAAE,sCAAsC,CAAC;AAC/D,QAAA,QAAQ,EAAE;YACR,iCAAiC;YACjC,gJAAgJ;YAChJ,kDAAkD;AACnD,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAK;IACxB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE;IAEtD,OAAO;QACL,KAAK,EAAE,KAAK,EAAE;QACd,IAAI,EAAE,IAAI,EAAE;QACZ,QAAQ,EAAE,QAAQ,EAAE;KACrB;AACH,CAAC,GAAG;AAOG,MAAM,mBAAmB,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAC/D,QAAQ,CAAC,MAAM,KAAK,CAAC,GAAGC,IAAC,SAAS,EAAA,EAAA,CAAG,GAAGA,GAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI;AAErF,MAAM,SAAS,GAAG,IAAI,CAAC,OACrBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,CAAC,KAAK,YAC/BA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAA,QAAA,EACZA,IAAC,SAAS,EAAA,EAAA,QAAA,EACRA,IAAC,SAAS,EAAA,EACR,EAAE,EAAC,yCAAyC,EAC5C,WAAW,EAAC,oHAAqB,EAAA,CACjC,EAAA,CACQ,GACP,EAAA,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAI;AACpD,IAAA,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU;IAEtC,QACEA,YAAI,SAAS,EAAE,WAAW,CAAC,IAAI,EAAA,QAAA,EAC5B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpBA,GAAA,CAAC,eAAe,EAAA,EAEd,IAAI,EAAE,OAAO,CAAC,GAAG,EACjB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,WAAW,CAAC,QAAQ,EAAA,QAAA,EAE9B,OAAO,CAAC,IAAI,EAAA,EALR,OAAO,CAAC,EAAE,CAMC,CACnB,CAAC,EAAA,CACC;AAET,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,CAKzB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAC3CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAACC,qBAAY,EAAA,EACX,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,MAAM,EAAE,UAAU,IAAID,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EACpC,MAAM,EAAEA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAC5B,OAAO,EAAC,MAAM,EACd,IAAI,EAAA,IAAA,EAAA,eAAA,EACW,UAAU,EACzB,SAAS,EAAE,SAAS,YAEpBA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAe,EAAA,CACxB,EAAA,CACZ,CACN,CAAC;AAEF,MAAM,WAAW,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;IAC1D,MAAM,SAAS,GAAG,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;AAEnD,IAAA,OAAO,SAAS,GAAGA,GAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAG,QAAQ,EAAA,CAAa,GAAG,QAAQ;AAC9E,CAAC;;;;"}
+{"version":3,"file":"AppLauncherFeatures.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { LineClamp } from '../../../LineClamp'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","AnchorButton"],"mappings":"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"}

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

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 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 hooks_useTheme = require('../../../../hooks/useTheme.cjs');
+var hooks_client_useTheme = require('../../../../hooks/client/useTheme.cjs');
 require('../../../../intl/IntlProvider.cjs');
 require('react-intl');
 var intl_Localizer = require('../../../../intl/Localizer.cjs');
@@ -75,12 +75,12 @@ const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
             }
         }, 0);
     }, [onSelectSortType]);
-    return (jsxRuntime.jsxs(components_Dropdown_Dropdown.Dropdown, { children: [jsxRuntime.jsx(TriggerButton, { triggerRef: triggerRef, className: CLASS_NAMES.trigger, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownLabel", defaultText: "\u8868\u793A\u9806" }) }), jsxRuntime.jsx(components_Dropdown_DropdownContent.DropdownContent, { controllable: true, children: jsxRuntime.jsx("div", { role: "listbox", className: CLASS_NAMES.contentBody, children: options.map(([value, children], i) => (jsxRuntime.jsx(OptionButton, { value: value, selected: value === sortType, onClick: onClickOption, className: CLASS_NAMES.contentButton, children: children }, i))) }) })] }));
+    return (jsxRuntime.jsxs(components_Dropdown_Dropdown.Dropdown, { children: [jsxRuntime.jsx(TriggerButton, { triggerRef: triggerRef, className: CLASS_NAMES.trigger, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownLabel", defaultText: "\u8868\u793A\u9806" }) }), jsxRuntime.jsx(components_Dropdown_DropdownContent.DropdownContent, { controllable: true, children: jsxRuntime.jsx("div", { role: "listbox", className: CLASS_NAMES.contentBody, children: options.map(([value, children], i) => (jsxRuntime.jsx(OptionButton, { value: value, selected: value === sortType, className: CLASS_NAMES.contentButton, onClick: onClickOption, children: children }, i))) }) })] }));
 };
-const TriggerButton = React.memo(({ triggerRef, children, className }) => (jsxRuntime.jsx(components_Dropdown_DropdownTrigger.DropdownTrigger, { children: jsxRuntime.jsx(components_Button_Button.Button, { ref: triggerRef, size: "S", variant: "text", suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, {}), className: className, children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
+const TriggerButton = React.memo(({ triggerRef, children, className }) => (jsxRuntime.jsx(components_Dropdown_DropdownTrigger.DropdownTrigger, { children: jsxRuntime.jsx(components_Button_Button.Button, { ref: triggerRef, variant: "text", size: "S", className: className, suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, {}), children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
 const OptionButton = React.memo(({ value, selected, onClick, children, className }) => {
-    const theme = hooks_useTheme.useTheme();
-    return (jsxRuntime.jsx(components_Button_Button.Button, { value: value, role: "option", "aria-selected": selected, className: className, prefix: selected && (jsxRuntime.jsx(components_Icon_FaIcon.FaCheckIcon, { color: theme.textColor.main, alt: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownSelected", defaultText: "\u9078\u629E\u4E2D" }) }) })), onClick: onClick, children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }));
+    const theme = hooks_client_useTheme.useTheme();
+    return (jsxRuntime.jsx(components_Button_Button.Button, { role: "option", value: value, className: className, "aria-selected": selected, onClick: onClick, prefix: selected && (jsxRuntime.jsx(components_Icon_FaIcon.FaCheckIcon, { alt: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownSelected", defaultText: "\u9078\u629E\u4E2D" }) }), color: theme.textColor.main })), children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }));
 });
 
 exports.AppLauncherSortDropdown = AppLauncherSortDropdown;