smarthr-ui 79.2.0 → 81.0.0

package/esm/_virtual/cjs.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-draggable/build/cjs/cjs.js';
+import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/vendor/react-draggable/build/cjs/cjs.js';
 
 var cjsExports = requireCjs();
 var Draggable = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);

package/esm/_virtual/index3.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.26_react@19.2.0/vendor/react-innertext/index.js';
+import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.27_react@19.2.3/vendor/react-innertext/index.js';
 
 var reactInnertextExports = requireReactInnertext();
 var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);

package/esm/components/AccordionPanel/AccordionPanel.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps, type FC, type PropsWithChildren, type RefObject } from 'react';
-type Props = PropsWithChildren<{
+type AbstractProps = PropsWithChildren<{
     /** アイコンの左右位置 */
     iconPosition?: 'left' | 'right';
     /** 複数のパネルを同時に開くことを許容するかどうか */
@@ -9,7 +9,7 @@ type Props = PropsWithChildren<{
     /** トリガのクリックイベントを処理するハンドラ */
     onClick?: (expandedItems: string[]) => void;
 }>;
-type ElementProps = Omit<ComponentProps<'div'>, keyof Props>;
+type Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>;
 export declare const AccordionPanelContext: import("react").Context<{
     iconPosition: "left" | "right";
     expandedItems: Map<string, string>;
@@ -18,5 +18,5 @@ export declare const AccordionPanelContext: import("react").Context<{
     onClickTrigger?: (itemName: string, isExpanded: boolean) => void;
     onClickProps?: (expandedItems: string[]) => void;
 }>;
-export declare const AccordionPanel: FC<Props & ElementProps>;
+export declare const AccordionPanel: FC<Props>;
 export {};

package/esm/components/AccordionPanel/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sources":["../../../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { flatArrayToMap } from '../../libs/map'\n\nimport { getNewExpandedItems } from './accordionPanelHelper'\n\ntype Props = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n}>\ntype ElementProps = Omit<ComponentProps<'div'>, keyof Props>\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  expandableMultiply: boolean\n  parentRef: RefObject<HTMLDivElement> | null\n  onClickTrigger?: (itemName: string, isExpanded: boolean) => void\n  onClickProps?: (expandedItems: string[]) => void\n}>({\n  iconPosition: 'left',\n  expandedItems: new Map(),\n  expandableMultiply: true,\n  parentRef: null,\n})\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n})\n\nexport const AccordionPanel: FC<Props & ElementProps> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = [],\n  className,\n  onClick: onClickProps,\n  ...props\n}) => {\n  const [expandedItems, setExpanded] = useState(flatArrayToMap(defaultExpanded))\n  const parentRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  const onClickTrigger = useCallback(\n    (itemName: string, isExpanded: boolean) => {\n      setExpanded(getNewExpandedItems(expandedItems, itemName, isExpanded, expandableMultiply))\n    },\n    [expandableMultiply, expandedItems],\n  )\n\n  useEffect(() => {\n    if (defaultExpanded.length > 0) setExpanded(flatArrayToMap(defaultExpanded))\n  }, [defaultExpanded])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        onClickTrigger,\n        onClickProps,\n        expandedItems,\n        iconPosition,\n        expandableMultiply,\n        parentRef,\n      }}\n    >\n      <div {...props} ref={parentRef} role=\"presentation\" className={actualClassName} />\n    </AccordionPanelContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAgCO;AAQL;;AAEA;AACA;AACD;AAED;AACE;AACD;AAEM;AAQL;AACA;AACA;;AAII;AACF;;AAKA;AAAgC;AAClC;AAEA;;;;;;;AASK;AAKP;;"}
+{"version":3,"file":"AccordionPanel.js","sources":["../../../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { flatArrayToMap } from '../../libs/map'\n\nimport { getNewExpandedItems } from './accordionPanelHelper'\n\ntype AbstractProps = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n}>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  expandableMultiply: boolean\n  parentRef: RefObject<HTMLDivElement> | null\n  onClickTrigger?: (itemName: string, isExpanded: boolean) => void\n  onClickProps?: (expandedItems: string[]) => void\n}>({\n  iconPosition: 'left',\n  expandedItems: new Map(),\n  expandableMultiply: true,\n  parentRef: null,\n})\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = [],\n  className,\n  onClick: onClickProps,\n  ...props\n}) => {\n  const [expandedItems, setExpanded] = useState(flatArrayToMap(defaultExpanded))\n  const parentRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  const onClickTrigger = useCallback(\n    (itemName: string, isExpanded: boolean) => {\n      setExpanded(getNewExpandedItems(expandedItems, itemName, isExpanded, expandableMultiply))\n    },\n    [expandableMultiply, expandedItems],\n  )\n\n  useEffect(() => {\n    if (defaultExpanded.length > 0) setExpanded(flatArrayToMap(defaultExpanded))\n  }, [defaultExpanded])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        onClickTrigger,\n        onClickProps,\n        expandedItems,\n        iconPosition,\n        expandableMultiply,\n        parentRef,\n      }}\n    >\n      <div {...props} ref={parentRef} role=\"presentation\" className={actualClassName} />\n    </AccordionPanelContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAgCO;AAQL;;AAEA;AACA;AACD;AAED;AACE;AACD;AAEM;AAQL;AACA;AACA;;AAII;AACF;;AAKA;AAAgC;AAClC;AAEA;;;;;;;AASK;AAKP;;"}

package/esm/components/AccordionPanel/AccordionPanelContent.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
-type Props = PropsWithChildren;
-type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>;
-export declare const AccordionPanelContent: FC<Props & ElementProps>;
+type AbstractProps = PropsWithChildren;
+type Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps>;
+export declare const AccordionPanelContent: FC<Props>;
 export {};

package/esm/components/AccordionPanel/AccordionPanelContent.js

@@ -5,7 +5,7 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import { getIsInclude } from '../../libs/map.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';
-import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-transition-group/esm/Transition.js';
+import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.3_react@19.2.3__react@19.2.3/vendor/react-transition-group/esm/Transition.js';
 
 const classNameGenerator = ce({
     base: [

package/esm/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 Props = PropsWithChildren\ntype ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>\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 & ElementProps> = ({ className, ...props }) => {\n  const { name } = 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          {...props}\n          ref={wrapperRef}\n          id={`${name}-content`}\n          aria-labelledby={`${name}-trigger`}\n          aria-hidden={visible ? undefined : true}\n          className={`${actualClassName} ${status}`}\n        />\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;;;;AAIL;AACA;AAEA;AAcF;;"}
+{"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 AbstractProps = PropsWithChildren\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps>\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, ...props }) => {\n  const { name } = 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          {...props}\n          ref={wrapperRef}\n          id={`${name}-content`}\n          aria-labelledby={`${name}-trigger`}\n          aria-hidden={visible ? undefined : true}\n          className={`${actualClassName} ${status}`}\n        />\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;;;;AAIL;AACA;AAEA;AAcF;;"}

package/esm/components/AccordionPanel/AccordionPanelItem.d.ts

@@ -1,11 +1,11 @@
 import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
-type Props = PropsWithChildren<{
+type AbstractProps = PropsWithChildren<{
     /** アイテムを識別するための名前 */
     name: string;
 }>;
-type ElementProps = Omit<ComponentPropsWithoutRef<'section'>, keyof Props>;
+type Props = AbstractProps & Omit<ComponentPropsWithoutRef<'section'>, keyof AbstractProps>;
 export declare const AccordionPanelItemContext: import("react").Context<{
     name: string;
 }>;
-export declare const AccordionPanelItem: FC<Props & ElementProps>;
+export declare const AccordionPanelItem: FC<Props>;
 export {};

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

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

package/esm/components/AccordionPanel/AccordionPanelTrigger.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
 import { type HeadingTagTypes } from '../Heading';
 import type { TextProps } from '../Text';
-type Props = PropsWithChildren<{
+type AbstractProps = PropsWithChildren<{
     /** ヘッダ部分のテキストのスタイル */
     headingType?: Exclude<TextProps['styleType'], 'screenTitle'>;
     /**
@@ -9,6 +9,6 @@ type Props = PropsWithChildren<{
      */
     headingTag?: HeadingTagTypes;
 }>;
-type ElementProps = Omit<ComponentPropsWithoutRef<'button'>, keyof Props>;
-export declare const AccordionPanelTrigger: FC<Props & ElementProps>;
+type Props = AbstractProps & Omit<ComponentPropsWithoutRef<'button'>, keyof AbstractProps>;
+export declare const AccordionPanelTrigger: FC<Props>;
 export {};

package/esm/components/AccordionPanel/AccordionPanelTrigger.js

@@ -5,8 +5,9 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import { getIsInclude, mapToKeyArray } from '../../libs/map.js';
 import { Heading } from '../Heading/Heading.js';
 import '../Heading/PageHeading/PageHeading.js';
-import { FaCaretRightIcon, FaCaretDownIcon } from '../Icon/Icon.js';
+import { FaCaretRightIcon, FaCaretDownIcon } from '../Icon/FaIcon.js';
 import '../Icon/generateIcon.js';
+import '../Icon/OpenInNewTabIcon.js';
 import '../Layout/Stack/Stack.js';
 import { Cluster } from '../Layout/Cluster/Cluster.js';
 import '../Layout/Reel/Reel.js';

package/esm/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  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude, mapToKeyArray } 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'\nimport {\n  focusFirstSibling,\n  focusLastSibling,\n  focusNextSibling,\n  focusPreviousSibling,\n  getNewExpandedItems,\n} from './accordionPanelHelper'\n\nimport type { TextProps } from '../Text'\n\ntype Props = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * @deprecated headingTag属性は非推奨です\n   */\n  headingTag?: HeadingTagTypes\n}>\ntype ElementProps = Omit<ComponentPropsWithoutRef<'button'>, keyof Props>\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      // Base 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Base に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Base_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Base_>_.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 & ElementProps> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  headingTag,\n  ...props\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 } = useContext(AccordionPanelItemContext)\n  const {\n    iconPosition,\n    expandedItems,\n    onClickTrigger,\n    onClickProps,\n    expandableMultiply,\n    parentRef,\n  } = useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  const actualOnClickTrigger = useMemo(\n    () =>\n      onClickTrigger\n        ? (e: MouseEvent<HTMLButtonElement>) => onClickTrigger(e.currentTarget.value, !isExpanded)\n        : undefined,\n    [isExpanded, onClickTrigger],\n  )\n  const actualOnClickProps = useMemo(\n    () =>\n      onClickProps\n        ? (e: MouseEvent<HTMLButtonElement>) => {\n            const newExpandedItems = getNewExpandedItems(\n              expandedItems,\n              e.currentTarget.value,\n              !isExpanded,\n              expandableMultiply,\n            )\n            onClickProps(mapToKeyArray(newExpandedItems))\n          }\n        : undefined,\n    [isExpanded, expandedItems, expandableMultiply, onClickProps],\n  )\n  const handleClick = useMemo(() => {\n    if (actualOnClickTrigger) {\n      if (actualOnClickProps) {\n        return (e: MouseEvent<HTMLButtonElement>) => {\n          actualOnClickTrigger(e)\n          actualOnClickProps(e)\n        }\n      }\n\n      return actualOnClickTrigger\n    } else if (actualOnClickProps) {\n      return actualOnClickProps\n    }\n\n    return undefined\n  }, [actualOnClickProps, actualOnClickTrigger])\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = useCallback(\n    (e): void => {\n      if (!parentRef?.current) {\n        return\n      }\n\n      const item = e.target as HTMLElement\n\n      switch (e.key) {\n        case 'Home': {\n          e.preventDefault()\n          focusFirstSibling(parentRef.current)\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          focusLastSibling(parentRef.current)\n          break\n        }\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          e.preventDefault()\n          focusPreviousSibling(item, parentRef.current)\n          break\n        }\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          e.preventDefault()\n          focusNextSibling(item, parentRef.current)\n          break\n        }\n      }\n    },\n    [parentRef],\n  )\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading tag={headingTag} type={headingType}>\n      <button\n        {...props}\n        type=\"button\"\n        value={name}\n        id={`${name}-trigger`}\n        aria-expanded={isExpanded}\n        aria-controls={`${name}-content`}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        className={classNames.button}\n        data-component=\"AccordionHeaderButton\"\n      >\n        <MemoizedTitle iconPosition={iconPosition} classNames={classNames}>\n          {children}\n        </MemoizedTitle>\n      </button>\n    </Heading>\n  )\n}\n\nconst MemoizedTitle = memo<\n  PropsWithChildren<{\n    iconPosition: undefined | 'left' | 'right'\n    classNames: { leftIcon: string; rightIcon: string; title: string; titleWrapper: string }\n  }>\n>(({ classNames, iconPosition, children }) => (\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))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA0CA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;;AAGA;;AAWA;AAGM;;AAIN;AAGM;AACI;AAMA;;AAEJ;AAGN;;;;;;AAMM;;AAGF;;;AAEA;;AAGF;AACF;AAEA;AAEI;;;AAIA;AAEA;;;AAGI;;;;;AAKA;;;AAGF;;;AAGE;;;AAGF;;;AAGE;;;;AAIN;;;AAMA;AAmBJ;AAEA;;"}
+{"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  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude, mapToKeyArray } 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'\nimport {\n  focusFirstSibling,\n  focusLastSibling,\n  focusNextSibling,\n  focusPreviousSibling,\n  getNewExpandedItems,\n} from './accordionPanelHelper'\n\nimport type { TextProps } from '../Text'\n\ntype AbstractProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * @deprecated headingTag属性は非推奨です\n   */\n  headingTag?: HeadingTagTypes\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'button'>, keyof AbstractProps>\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      // Base 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Base に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Base_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Base_>_.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  headingTag,\n  ...props\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 } = useContext(AccordionPanelItemContext)\n  const {\n    iconPosition,\n    expandedItems,\n    onClickTrigger,\n    onClickProps,\n    expandableMultiply,\n    parentRef,\n  } = useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  const actualOnClickTrigger = useMemo(\n    () =>\n      onClickTrigger\n        ? (e: MouseEvent<HTMLButtonElement>) => onClickTrigger(e.currentTarget.value, !isExpanded)\n        : undefined,\n    [isExpanded, onClickTrigger],\n  )\n  const actualOnClickProps = useMemo(\n    () =>\n      onClickProps\n        ? (e: MouseEvent<HTMLButtonElement>) => {\n            const newExpandedItems = getNewExpandedItems(\n              expandedItems,\n              e.currentTarget.value,\n              !isExpanded,\n              expandableMultiply,\n            )\n            onClickProps(mapToKeyArray(newExpandedItems))\n          }\n        : undefined,\n    [isExpanded, expandedItems, expandableMultiply, onClickProps],\n  )\n  const handleClick = useMemo(() => {\n    if (actualOnClickTrigger) {\n      if (actualOnClickProps) {\n        return (e: MouseEvent<HTMLButtonElement>) => {\n          actualOnClickTrigger(e)\n          actualOnClickProps(e)\n        }\n      }\n\n      return actualOnClickTrigger\n    } else if (actualOnClickProps) {\n      return actualOnClickProps\n    }\n\n    return undefined\n  }, [actualOnClickProps, actualOnClickTrigger])\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = useCallback(\n    (e): void => {\n      if (!parentRef?.current) {\n        return\n      }\n\n      const item = e.target as HTMLElement\n\n      switch (e.key) {\n        case 'Home': {\n          e.preventDefault()\n          focusFirstSibling(parentRef.current)\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          focusLastSibling(parentRef.current)\n          break\n        }\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          e.preventDefault()\n          focusPreviousSibling(item, parentRef.current)\n          break\n        }\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          e.preventDefault()\n          focusNextSibling(item, parentRef.current)\n          break\n        }\n      }\n    },\n    [parentRef],\n  )\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading tag={headingTag} type={headingType}>\n      <button\n        {...props}\n        type=\"button\"\n        value={name}\n        id={`${name}-trigger`}\n        aria-expanded={isExpanded}\n        aria-controls={`${name}-content`}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        className={classNames.button}\n        data-component=\"AccordionHeaderButton\"\n      >\n        <MemoizedTitle iconPosition={iconPosition} classNames={classNames}>\n          {children}\n        </MemoizedTitle>\n      </button>\n    </Heading>\n  )\n}\n\nconst MemoizedTitle = memo<\n  PropsWithChildren<{\n    iconPosition: undefined | 'left' | 'right'\n    classNames: { leftIcon: string; rightIcon: string; title: string; titleWrapper: string }\n  }>\n>(({ classNames, iconPosition, children }) => (\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))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;;AAGA;;AAWA;AAGM;;AAIN;AAGM;AACI;AAMA;;AAEJ;AAGN;;;;;;AAMM;;AAGF;;;AAEA;;AAGF;AACF;AAEA;AAEI;;;AAIA;AAEA;;;AAGI;;;;;AAKA;;;AAGF;;;AAGE;;;AAGF;;;AAGE;;;;AAIN;;;AAMA;AAmBJ;AAEA;;"}

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

@@ -7,8 +7,9 @@ import 'react-intl';
 import '../../../Button/Button.js';
 import { AnchorButton as ForwardedAnchorButton } from '../../../Button/AnchorButton.js';
 import '../../../Button/UnstyledButton.js';
-import { FaArrowRightIcon, FaStarIcon } from '../../../Icon/Icon.js';
+import { FaArrowRightIcon, FaStarIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
+import '../../../Icon/OpenInNewTabIcon.js';
 import { LineClamp } from '../../../LineClamp/LineClamp.js';
 import { Text } from '../../../Text/Text.js';
 import { useMediaQuery, mediaQuery } from '../../hooks/useMediaQuery.js';

package/esm/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, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } 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\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  const className = useMemo(() => {\n    const { empty } = classNameGenerator()\n\n    return empty()\n  }, [])\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/AppHeader/Launcher/emptyText',\n        defaultText: '該当するアプリが見つかりませんでした。',\n      }),\n    [localize],\n  )\n\n  return (\n    <div className={className}>\n      <Text size=\"S\">\n        <Translate>{translated}</Translate>\n      </Text>\n    </div>\n  )\n})\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const classNames = useMemo(() => {\n    const { list, listItem } = classNameGenerator()\n\n    return {\n      list: list(),\n      listItem: listItem(),\n    }\n  }, [])\n\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={classNames.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={classNames.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":"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"}
+{"version":3,"file":"AppLauncherFeatures.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } 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\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  const className = useMemo(() => {\n    const { empty } = classNameGenerator()\n\n    return empty()\n  }, [])\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/AppHeader/Launcher/emptyText',\n        defaultText: '該当するアプリが見つかりませんでした。',\n      }),\n    [localize],\n  )\n\n  return (\n    <div className={className}>\n      <Text size=\"S\">\n        <Translate>{translated}</Translate>\n      </Text>\n    </div>\n  )\n})\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const classNames = useMemo(() => {\n    const { list, listItem } = classNameGenerator()\n\n    return {\n      list: list(),\n      listItem: listItem(),\n    }\n  }, [])\n\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={classNames.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={classNames.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":"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"}

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

@@ -16,8 +16,9 @@ import '../../../Dropdown/FilterDropdown/FilterDropdown.js';
 import '../../../Dropdown/DropdownMenuButton/DropdownMenuButton.js';
 import '../../../Dropdown/DropdownMenuButton/DropdownMenuGroup.js';
 import '../../../Dropdown/SortDropdown/SortDropdown.js';
-import { FaCaretDownIcon, FaCheckIcon } from '../../../Icon/Icon.js';
+import { FaCaretDownIcon, FaCheckIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
+import '../../../Icon/OpenInNewTabIcon.js';
 import { Translate } from './Translate.js';
 
 const classNameGenerator = ce({

package/esm/components/AppHeader/components/common/AppLauncherSortDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherSortDropdown.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherSortDropdown.tsx"],"sourcesContent":["import {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { textColor } from '../../../../themes'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon } from '../../../Icon'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppLauncher-SortDropdown-trigger',\n      'shr-gap-0.25 shr-text-grey',\n      '[&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n    ],\n    contentBody: ['shr-px-0.25 shr-py-0.5', 'shr-flex shr-flex-col shr-items-stretch'],\n    contentButton: [\n      'shr-justify-start shr-border-none shr-py-0.75 shr-pl-2.5 shr-font-normal',\n      'aria-selected:shr-pl-1',\n    ],\n  },\n})\n\ntype Props = {\n  sortType: Launcher['sortType']\n  onSelectSortType: (sortType: Launcher['sortType']) => void\n}\n\nexport const AppLauncherSortDropdown: FC<Props> = ({ sortType, onSelectSortType }) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const classNames = useMemo(() => {\n    const { trigger, contentBody, contentButton } = classNameGenerator()\n\n    return {\n      trigger: trigger(),\n      contentBody: contentBody(),\n      contentButton: contentButton(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      label: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownLabel',\n        defaultText: '表示順',\n      }),\n      selected: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n      default: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault',\n        defaultText: 'デフォルト',\n      }),\n      asc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc',\n        defaultText: 'アプリ名の昇順',\n      }),\n      desc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc',\n        defaultText: 'アプリ名の降順',\n      }),\n    }),\n    [localize],\n  )\n\n  const options = useMemo(\n    () => [\n      ['default', translated.default],\n      ['name/asc', translated.asc],\n      ['name/desc', translated.desc],\n    ],\n    [translated],\n  )\n\n  const onClickOption = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectSortType(e.currentTarget.value as Launcher['sortType'])\n\n      // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない\n      // そのため、無理矢理クリックイベントを発生させて実現している\n      setTimeout(() => {\n        if (triggerRef.current) {\n          triggerRef.current.click()\n          triggerRef.current.focus()\n        }\n      }, 0)\n    },\n    [onSelectSortType],\n  )\n\n  return (\n    <Dropdown>\n      <TriggerButton triggerRef={triggerRef} className={classNames.trigger}>\n        {translated.label}\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={classNames.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              selectedAlt={translated.selected}\n              onClick={onClickOption}\n              className={classNames.contentButton}\n            >\n              {children}\n            </OptionButton>\n          ))}\n        </div>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst TriggerButton = memo<\n  PropsWithChildren<{ triggerRef: RefObject<HTMLButtonElement>; className: string }>\n>(({ triggerRef, children, className }) => (\n  <DropdownTrigger>\n    <Button\n      ref={triggerRef}\n      size=\"s\"\n      variant=\"text\"\n      suffix={<FaCaretDownIcon />}\n      className={className}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    selectedAlt: string\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, selectedAlt, onClick, children, className }) => (\n  <Button\n    value={value}\n    role=\"option\"\n    aria-selected={selected}\n    className={className}\n    prefix={\n      selected && <FaCheckIcon color={textColor.main} alt={<Translate>{selectedAlt}</Translate>} />\n    }\n    onClick={onClick}\n  >\n    <Translate>{children}</Translate>\n  </Button>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"AppLauncherSortDropdown.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherSortDropdown.tsx"],"sourcesContent":["import {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { textColor } from '../../../../themes'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon } from '../../../Icon'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppLauncher-SortDropdown-trigger',\n      'shr-gap-0.25 shr-text-grey',\n      '[&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n    ],\n    contentBody: ['shr-px-0.25 shr-py-0.5', 'shr-flex shr-flex-col shr-items-stretch'],\n    contentButton: [\n      'shr-justify-start shr-border-none shr-py-0.75 shr-pl-2.5 shr-font-normal',\n      'aria-selected:shr-pl-1',\n    ],\n  },\n})\n\ntype Props = {\n  sortType: Launcher['sortType']\n  onSelectSortType: (sortType: Launcher['sortType']) => void\n}\n\nexport const AppLauncherSortDropdown: FC<Props> = ({ sortType, onSelectSortType }) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const classNames = useMemo(() => {\n    const { trigger, contentBody, contentButton } = classNameGenerator()\n\n    return {\n      trigger: trigger(),\n      contentBody: contentBody(),\n      contentButton: contentButton(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      label: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownLabel',\n        defaultText: '表示順',\n      }),\n      selected: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n      default: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault',\n        defaultText: 'デフォルト',\n      }),\n      asc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc',\n        defaultText: 'アプリ名の昇順',\n      }),\n      desc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc',\n        defaultText: 'アプリ名の降順',\n      }),\n    }),\n    [localize],\n  )\n\n  const options = useMemo(\n    () => [\n      ['default', translated.default],\n      ['name/asc', translated.asc],\n      ['name/desc', translated.desc],\n    ],\n    [translated],\n  )\n\n  const onClickOption = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectSortType(e.currentTarget.value as Launcher['sortType'])\n\n      // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない\n      // そのため、無理矢理クリックイベントを発生させて実現している\n      setTimeout(() => {\n        if (triggerRef.current) {\n          triggerRef.current.click()\n          triggerRef.current.focus()\n        }\n      }, 0)\n    },\n    [onSelectSortType],\n  )\n\n  return (\n    <Dropdown>\n      <TriggerButton triggerRef={triggerRef} className={classNames.trigger}>\n        {translated.label}\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={classNames.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              selectedAlt={translated.selected}\n              onClick={onClickOption}\n              className={classNames.contentButton}\n            >\n              {children}\n            </OptionButton>\n          ))}\n        </div>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst TriggerButton = memo<\n  PropsWithChildren<{ triggerRef: RefObject<HTMLButtonElement>; className: string }>\n>(({ triggerRef, children, className }) => (\n  <DropdownTrigger>\n    <Button\n      ref={triggerRef}\n      size=\"s\"\n      variant=\"text\"\n      suffix={<FaCaretDownIcon />}\n      className={className}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    selectedAlt: string\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, selectedAlt, onClick, children, className }) => (\n  <Button\n    value={value}\n    role=\"option\"\n    aria-selected={selected}\n    className={className}\n    prefix={\n      selected && <FaCheckIcon color={textColor.main} alt={<Translate>{selectedAlt}</Translate>} />\n    }\n    onClick={onClick}\n  >\n    <Translate>{children}</Translate>\n  </Button>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}

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

@@ -10,8 +10,9 @@ import '../../../Button/AnchorButton.js';
 import { UnstyledButton } from '../../../Button/UnstyledButton.js';
 import { Heading } from '../../../Heading/Heading.js';
 import '../../../Heading/PageHeading/PageHeading.js';
-import { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon/Icon.js';
+import { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
+import '../../../Icon/OpenInNewTabIcon.js';
 import '../../../Input/Input.js';
 import '../../../Input/CurrencyInput/CurrencyInput.js';
 import { SearchInput } from '../../../Input/SearchInput/SearchInput.js';

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

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

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

@@ -21,8 +21,9 @@ import { LanguageSwitcher } from '../../../Header/LanguageSwitcher/LanguageSwitc
 import { HeaderLink } from '../../../Header/HeaderLink.js';
 import '../../../Header/HeaderDropdownMenuButton.js';
 import '../../../Header/AppLauncher/AppLauncher.js';
-import { FaToolboxIcon, FaGraduationCapIcon, FaRegCircleQuestionIcon, FaCircleQuestionIcon } from '../../../Icon/Icon.js';
+import { FaToolboxIcon, FaGraduationCapIcon, FaRegCircleQuestionIcon, FaCircleQuestionIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
+import '../../../Icon/OpenInNewTabIcon.js';
 import '../../../Layout/Stack/Stack.js';
 import { Cluster } from '../../../Layout/Cluster/Cluster.js';
 import '../../../Layout/Reel/Reel.js';

package/esm/components/AppHeader/components/desktop/DesktopHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopHeader.js","sources":["../../../../../src/components/AppHeader/components/desktop/DesktopHeader.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { localeMap } from '../../../../intl/localeMap'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { Header, HeaderLink, LanguageSwitcher } from '../../../Header'\nimport {\n  FaCircleQuestionIcon,\n  FaGraduationCapIcon,\n  FaRegCircleQuestionIcon,\n  FaToolboxIcon,\n} from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Translate } from '../common/Translate'\n\nimport { AppLauncher } from './AppLauncher'\nimport { Navigation } from './Navigation'\nimport { UserInfo } from './UserInfo'\n\nimport type { HeaderProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'max-[751px]:!shr-hidden',\n    appsButton: [\n      'shr-border-none shr-bg-transparent shr-px-0.25 shr-font-normal shr-text-white',\n      'hover:shr-border-transparent hover:shr-bg-transparent',\n      'focus-visible:shr-border-transparent focus-visible:shr-bg-transparent',\n      'forced-colors:shr-border-shorthand',\n    ],\n  },\n})\n\nexport const DesktopHeader: FC<HeaderProps> = ({\n  enableNew,\n  className = '',\n  appName,\n  tenants,\n  currentTenantId,\n  schoolUrl,\n  helpPageUrl,\n  children,\n  userInfo,\n  desktopAdditionalContent,\n  navigations,\n  desktopNavigationAdditionalContent,\n  releaseNote,\n  features,\n  locale: localeProps,\n  ...props\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, appsButton } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      appsButton: appsButton(),\n    }\n  }, [className])\n\n  const { localize, locale } = useIntl()\n  const translated = useMemo(\n    () => ({\n      appLauncherLabel: localize({\n        id: 'smarthr-ui/AppHeader/DesktopHeader/appLauncherLabel',\n        defaultText: 'アプリ',\n      }),\n      school: localize({ id: 'smarthr-ui/AppHeader/school', defaultText: 'スクール' }),\n      help: localize({ id: 'smarthr-ui/AppHeader/help', defaultText: 'ヘルプ' }),\n    }),\n    [localize],\n  )\n\n  return (\n    <>\n      <Header\n        {...props}\n        enableNew={enableNew}\n        className={classNames.wrapper}\n        featureName={appName}\n        tenants={tenants}\n        currentTenantId={currentTenantId}\n      >\n        <Cluster align=\"center\" className=\"shr--me-0.25\">\n          {!enableNew && (\n            <>\n              {features && features.length > 0 && (\n                <Dropdown>\n                  <AppLauncherButton enableNew={enableNew} className={classNames.appsButton}>\n                    {translated.appLauncherLabel}\n                  </AppLauncherButton>\n                  <DropdownContent controllable>\n                    <AppLauncher features={features} />\n                  </DropdownContent>\n                </Dropdown>\n              )}\n\n              {schoolUrl && (\n                <HeaderLink\n                  href={schoolUrl}\n                  prefix={<FaGraduationCapIcon />}\n                  className=\"shr-flex shr-items-center shr-py-0.75 shr-leading-none\"\n                >\n                  <Translate>{translated.school}</Translate>\n                </HeaderLink>\n              )}\n            </>\n          )}\n\n          {helpPageUrl && (\n            <HeaderLink\n              href={helpPageUrl}\n              prefix={enableNew ? <FaRegCircleQuestionIcon /> : <FaCircleQuestionIcon />}\n              className={\n                enableNew ? undefined : 'shr-flex shr-items-center shr-py-0.75 shr-leading-none'\n              }\n              enableNew={enableNew}\n            >\n              <Translate>{translated.help}</Translate>\n            </HeaderLink>\n          )}\n\n          {localeProps && (\n            <LanguageSwitcher\n              localeMap={localeMap}\n              locale={locale}\n              onLanguageSelect={localeProps.onSelectLocale as (locale: string) => void}\n              enableNew={enableNew}\n            />\n          )}\n\n          {children}\n\n          {userInfo && (\n            <UserInfo\n              {...userInfo}\n              tenants={tenants}\n              currentTenantId={currentTenantId}\n              desktopAdditionalContent={desktopAdditionalContent}\n              enableNew={enableNew}\n            />\n          )}\n        </Cluster>\n      </Header>\n\n      {navigations && (\n        <Navigation\n          appName={appName}\n          navigations={navigations}\n          additionalContent={desktopNavigationAdditionalContent}\n          releaseNote={releaseNote}\n          enableNew={enableNew}\n        />\n      )}\n    </>\n  )\n}\n\nconst AppLauncherButton = memo<\n  Pick<HeaderProps, 'enableNew'> & PropsWithChildren<{ className: string }>\n>(({ enableNew, children, className }) => (\n  <DropdownTrigger>\n    <Button prefix={enableNew ?? <FaToolboxIcon />} className={className}>\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n"],"names":["tv","_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"DesktopHeader.js","sources":["../../../../../src/components/AppHeader/components/desktop/DesktopHeader.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { localeMap } from '../../../../intl/localeMap'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { Header, HeaderLink, LanguageSwitcher } from '../../../Header'\nimport {\n  FaCircleQuestionIcon,\n  FaGraduationCapIcon,\n  FaRegCircleQuestionIcon,\n  FaToolboxIcon,\n} from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Translate } from '../common/Translate'\n\nimport { AppLauncher } from './AppLauncher'\nimport { Navigation } from './Navigation'\nimport { UserInfo } from './UserInfo'\n\nimport type { HeaderProps } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'max-[751px]:!shr-hidden',\n    appsButton: [\n      'shr-border-none shr-bg-transparent shr-px-0.25 shr-font-normal shr-text-white',\n      'hover:shr-border-transparent hover:shr-bg-transparent',\n      'focus-visible:shr-border-transparent focus-visible:shr-bg-transparent',\n      'forced-colors:shr-border-shorthand',\n    ],\n  },\n})\n\nexport const DesktopHeader: FC<HeaderProps> = ({\n  enableNew,\n  className = '',\n  appName,\n  tenants,\n  currentTenantId,\n  schoolUrl,\n  helpPageUrl,\n  children,\n  userInfo,\n  desktopAdditionalContent,\n  navigations,\n  desktopNavigationAdditionalContent,\n  releaseNote,\n  features,\n  locale: localeProps,\n  ...props\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, appsButton } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      appsButton: appsButton(),\n    }\n  }, [className])\n\n  const { localize, locale } = useIntl()\n  const translated = useMemo(\n    () => ({\n      appLauncherLabel: localize({\n        id: 'smarthr-ui/AppHeader/DesktopHeader/appLauncherLabel',\n        defaultText: 'アプリ',\n      }),\n      school: localize({ id: 'smarthr-ui/AppHeader/school', defaultText: 'スクール' }),\n      help: localize({ id: 'smarthr-ui/AppHeader/help', defaultText: 'ヘルプ' }),\n    }),\n    [localize],\n  )\n\n  return (\n    <>\n      <Header\n        {...props}\n        enableNew={enableNew}\n        className={classNames.wrapper}\n        featureName={appName}\n        tenants={tenants}\n        currentTenantId={currentTenantId}\n      >\n        <Cluster align=\"center\" className=\"shr--me-0.25\">\n          {!enableNew && (\n            <>\n              {features && features.length > 0 && (\n                <Dropdown>\n                  <AppLauncherButton enableNew={enableNew} className={classNames.appsButton}>\n                    {translated.appLauncherLabel}\n                  </AppLauncherButton>\n                  <DropdownContent controllable>\n                    <AppLauncher features={features} />\n                  </DropdownContent>\n                </Dropdown>\n              )}\n\n              {schoolUrl && (\n                <HeaderLink\n                  href={schoolUrl}\n                  prefix={<FaGraduationCapIcon />}\n                  className=\"shr-flex shr-items-center shr-py-0.75 shr-leading-none\"\n                >\n                  <Translate>{translated.school}</Translate>\n                </HeaderLink>\n              )}\n            </>\n          )}\n\n          {helpPageUrl && (\n            <HeaderLink\n              href={helpPageUrl}\n              prefix={enableNew ? <FaRegCircleQuestionIcon /> : <FaCircleQuestionIcon />}\n              className={\n                enableNew ? undefined : 'shr-flex shr-items-center shr-py-0.75 shr-leading-none'\n              }\n              enableNew={enableNew}\n            >\n              <Translate>{translated.help}</Translate>\n            </HeaderLink>\n          )}\n\n          {localeProps && (\n            <LanguageSwitcher\n              localeMap={localeMap}\n              locale={locale}\n              onLanguageSelect={localeProps.onSelectLocale as (locale: string) => void}\n              enableNew={enableNew}\n            />\n          )}\n\n          {children}\n\n          {userInfo && (\n            <UserInfo\n              {...userInfo}\n              tenants={tenants}\n              currentTenantId={currentTenantId}\n              desktopAdditionalContent={desktopAdditionalContent}\n              enableNew={enableNew}\n            />\n          )}\n        </Cluster>\n      </Header>\n\n      {navigations && (\n        <Navigation\n          appName={appName}\n          navigations={navigations}\n          additionalContent={desktopNavigationAdditionalContent}\n          releaseNote={releaseNote}\n          enableNew={enableNew}\n        />\n      )}\n    </>\n  )\n}\n\nconst AppLauncherButton = memo<\n  Pick<HeaderProps, 'enableNew'> & PropsWithChildren<{ className: string }>\n>(({ enableNew, children, className }) => (\n  <DropdownTrigger>\n    <Button prefix={enableNew ?? <FaToolboxIcon />} className={className}>\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n"],"names":["tv","_jsxs","_Fragment","_jsx"],"mappings":"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"}

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

@@ -16,8 +16,9 @@ import '../../../Dropdown/FilterDropdown/FilterDropdown.js';
 import '../../../Dropdown/DropdownMenuButton/DropdownMenuButton.js';
 import '../../../Dropdown/DropdownMenuButton/DropdownMenuGroup.js';
 import '../../../Dropdown/SortDropdown/SortDropdown.js';
-import { FaCaretDownIcon } from '../../../Icon/Icon.js';
+import { FaCaretDownIcon } 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';

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

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNotesDropdown.js","sources":["../../../../../src/components/AppHeader/components/desktop/ReleaseNotesDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport type { ReleaseNoteProps } from '../../types'\n\nconst wrapperClassNameGenerator = tv({\n  base: 'shr-w-[400px]',\n  variants: {\n    type: {\n      content: '',\n    },\n  },\n})\n\nconst BOX_SHADOW_STYLE = { boxShadow: 'none' }\n\nexport const ReleaseNotesDropdown: FC<ReleaseNoteProps> = ({ indexUrl, links, loading, error }) => {\n  const wrapperClassName = useMemo(() => wrapperClassNameGenerator(), [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      releaseNote: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotes',\n        defaultText: 'リリースノート',\n      }),\n      loadError: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className=\"shr-border-l-shorthand shr-ms-0.5\">\n      <Dropdown>\n        <ReleaseNoteDropdownTrigger>{translated.releaseNote}</ReleaseNoteDropdownTrigger>\n        <DropdownContent className=\"shr-mr-1.25\" controllable>\n          <div className=\"shr-w-[400px]\">\n            {loading ? (\n              <StyledLoader />\n            ) : error || !links ? (\n              <LoadErrorText>{translated.loadError}</LoadErrorText>\n            ) : (\n              <div className={wrapperClassName}>\n                {links.slice(0, 5).map(({ title, url }, index) => (\n                  <ArticleLink key={index} href={url}>\n                    {title}\n                  </ArticleLink>\n                ))}\n                <SeeAllTextLink href={indexUrl}>{translated.seeAll}</SeeAllTextLink>\n              </div>\n            )}\n          </div>\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  )\n}\n\nconst ReleaseNoteDropdownTrigger = memo<PropsWithChildren>(({ children }) => (\n  <DropdownTrigger>\n    <Button\n      suffix={<FaCaretDownIcon />}\n      className=\"shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\"\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst StyledLoader = memo(() => (\n  <Center className=\"shr-py-3\">\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo<PropsWithChildren>(({ children }) => (\n  <div className=\"shr-whitespace-pre-wrap shr-p-0.75\">\n    <Text>\n      <Translate>{children}</Translate>\n    </Text>\n  </div>\n))\n\nconst ArticleLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-border-b-shorthand shr-border-dashed shr-p-0.75\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      {children}\n    </TextLink>\n  </div>\n))\n\nconst SeeAllTextLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-p-0.75 shr-text-right\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      <Translate>{children}</Translate>\n    </TextLink>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACE;AACA;AACE;AACE;AACD;AACF;AACF;AAED;AAEO;AACL;AAEA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AA6BL;AAEA;AAWA;AAMA;AAQA;AAcA;;"}
+{"version":3,"file":"ReleaseNotesDropdown.js","sources":["../../../../../src/components/AppHeader/components/desktop/ReleaseNotesDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { TextLink } from '../../../TextLink'\nimport { Translate } from '../common/Translate'\n\nimport type { ReleaseNoteProps } from '../../types'\n\nconst wrapperClassNameGenerator = tv({\n  base: 'shr-w-[400px]',\n  variants: {\n    type: {\n      content: '',\n    },\n  },\n})\n\nconst BOX_SHADOW_STYLE = { boxShadow: 'none' }\n\nexport const ReleaseNotesDropdown: FC<ReleaseNoteProps> = ({ indexUrl, links, loading, error }) => {\n  const wrapperClassName = useMemo(() => wrapperClassNameGenerator(), [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      releaseNote: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotes',\n        defaultText: 'リリースノート',\n      }),\n      loadError: localize({\n        id: 'smarthr-ui/AppHeader/releaseNotesLoadError',\n        defaultText: 'リリースノートの読み込みに失敗しました。\\n時間をおいて、やり直してください。',\n      }),\n      seeAll: localize({\n        id: 'smarthr-ui/AppHeader/seeAllReleaseNotes',\n        defaultText: 'すべてのリリースノートを見る',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className=\"shr-border-l-shorthand shr-ms-0.5\">\n      <Dropdown>\n        <ReleaseNoteDropdownTrigger>{translated.releaseNote}</ReleaseNoteDropdownTrigger>\n        <DropdownContent className=\"shr-mr-1.25\" controllable>\n          <div className=\"shr-w-[400px]\">\n            {loading ? (\n              <StyledLoader />\n            ) : error || !links ? (\n              <LoadErrorText>{translated.loadError}</LoadErrorText>\n            ) : (\n              <div className={wrapperClassName}>\n                {links.slice(0, 5).map(({ title, url }, index) => (\n                  <ArticleLink key={index} href={url}>\n                    {title}\n                  </ArticleLink>\n                ))}\n                <SeeAllTextLink href={indexUrl}>{translated.seeAll}</SeeAllTextLink>\n              </div>\n            )}\n          </div>\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  )\n}\n\nconst ReleaseNoteDropdownTrigger = memo<PropsWithChildren>(({ children }) => (\n  <DropdownTrigger>\n    <Button\n      suffix={<FaCaretDownIcon />}\n      className=\"shr-rounded-none shr-border-none shr-font-normal [&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\"\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst StyledLoader = memo(() => (\n  <Center className=\"shr-py-3\">\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo<PropsWithChildren>(({ children }) => (\n  <div className=\"shr-whitespace-pre-wrap shr-p-0.75\">\n    <Text>\n      <Translate>{children}</Translate>\n    </Text>\n  </div>\n))\n\nconst ArticleLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-border-b-shorthand shr-border-dashed shr-p-0.75\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      {children}\n    </TextLink>\n  </div>\n))\n\nconst SeeAllTextLink = memo<PropsWithChildren<{ href: string }>>(({ href, children }) => (\n  <div className=\"shr-p-0.75 shr-text-right\">\n    <TextLink\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"shr-leading-normal [&&]:shr-underline\"\n      style={BOX_SHADOW_STYLE}\n    >\n      <Translate>{children}</Translate>\n    </TextLink>\n  </div>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACE;AACA;AACE;AACE;AACD;AACF;AACF;AAED;AAEO;AACL;AAEA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AA6BL;AAEA;AAWA;AAMA;AAQA;AAcA;;"}

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

@@ -15,8 +15,9 @@ import '../../../Dropdown/FilterDropdown/FilterDropdown.js';
 import { DropdownMenuButton } from '../../../Dropdown/DropdownMenuButton/DropdownMenuButton.js';
 import '../../../Dropdown/DropdownMenuButton/DropdownMenuGroup.js';
 import '../../../Dropdown/SortDropdown/SortDropdown.js';
-import { FaUserIcon, FaGearIcon, FaCaretDownIcon } from '../../../Icon/Icon.js';
+import { FaUserIcon, FaGearIcon, FaCaretDownIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
+import '../../../Icon/OpenInNewTabIcon.js';
 import { Stack } from '../../../Layout/Stack/Stack.js';
 import { Cluster } from '../../../Layout/Cluster/Cluster.js';
 import '../../../Layout/Reel/Reel.js';