smarthr-ui 44.0.0 → 45.0.1

package/esm/components/AccordionPanel/AccordionPanelTrigger.js

@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useMemo, } from 'react';
 import { tv } from 'tailwind-variants';
 import { getIsInclude, mapToKeyArray } from '../../libs/map';
 import { Heading } from '../Heading';
-import { FaCaretRightIcon, FaCaretUpIcon } from '../Icon';
+import { FaCaretDownIcon, FaCaretRightIcon } from '../Icon';
 import { Cluster } from '../Layout';
 import { AccordionPanelContext } from './AccordionPanel';
 import { AccordionPanelItemContext } from './AccordionPanelItem';
@@ -24,15 +24,15 @@ const accordionPanelTrigger = tv({
             'shr-text-left',
             'hover:shr-bg-white-darken',
             'hover:shr-shadow-none',
-            'focus-visible:shr-focusIndicator',
+            'focus-visible:shr-focus-indicator',
         ],
-        leftIcon: 'group-aria-expanded:shrink-0 group-aria-expanded:shr-rotate-90',
-        rightIcon: 'group-aria-expanded:shrink-0 group-aria-expanded:-shr-rotate-180',
+        leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',
+        rightIcon: 'group-aria-expanded:-shr-rotate-180',
     },
     compoundSlots: [
         {
             slots: ['leftIcon', 'rightIcon'],
-            className: ['shr-transition-transform', 'shr-duration-150'],
+            className: 'group-aria-expanded:shrink-0',
         },
     ],
 });
@@ -64,6 +64,6 @@ export const AccordionPanelTrigger = ({ children, className, headingType = 'bloc
             React.createElement(Cluster, { className: "shr-flex-nowrap", align: "center", as: "span" },
                 displayIcon && iconPosition === 'left' && React.createElement(FaCaretRightIcon, { className: leftIconStyle }),
                 React.createElement("span", { className: titleStyle }, children),
-                displayIcon && iconPosition === 'right' && React.createElement(FaCaretUpIcon, { className: rightIconStyle })))));
+                displayIcon && iconPosition === 'right' && (React.createElement(FaCaretDownIcon, { className: rightIconStyle }))))));
 };
 //# sourceMappingURL=AccordionPanelTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelTrigger.js","sourceRoot":"","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccordionPanelTrigger.js","sourceRoot":"","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,WAAW,EACX,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAiC,MAAM,YAAY,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAY5D,MAAM,qBAAqB,GAAG,EAAE,CAAC;IAC/B,KAAK,EAAE;QACL,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE;YACN,mCAAmC;YACnC,WAAW;YACX,oBAAoB;YACpB,iBAAiB;YACjB,qBAAqB;YACrB,YAAY;YACZ,UAAU;YACV,aAAa;YACb,oBAAoB;YACpB,kBAAkB;YAClB,eAAe;YACf,2BAA2B;YAC3B,uBAAuB;YACvB,mCAAmC;SACpC;QACD,QAAQ,EAAE,6EAA6E;QACvF,SAAS,EAAE,qCAAqC;KACjD;IACD,aAAa,EAAE;QACb;YACE,KAAK,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC;YAChC,SAAS,EAAE,8BAA8B;SAC1C;KACF;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAA6B,CAAC,EAC9D,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,UAAU,EACV,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9E,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,qBAAqB,EAAE,CAAA;QACtE,OAAO;YACL,UAAU,EAAE,KAAK,EAAE;YACnB,WAAW,EAAE,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;YAClC,aAAa,EAAE,QAAQ,EAAE;YACzB,cAAc,EAAE,SAAS,EAAE;SAC5B,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IACf,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACtD,MAAM,EACJ,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAA;IAErC,MAAM,UAAU,GAAG,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA;IAEpD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,cAAc;YAAE,cAAc,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,CAAA;QAErD,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,gBAAgB,GAAG,mBAAmB,CAC1C,aAAa,EACb,IAAI,EACJ,CAAC,UAAU,EACX,kBAAkB,CACnB,CAAA;YACD,YAAY,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAEvF,OAAO;IACL,sEAAsE;IACtE,oBAAC,OAAO,IAAC,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW;QACzC,mCACM,KAAK,EACT,EAAE,EAAE,GAAG,IAAI,UAAU,mBACN,UAAU,mBACV,GAAG,IAAI,UAAU,EAChC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,oBACP,uBAAuB;YAEtC,oBAAC,OAAO,IAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,MAAM;gBAC1D,WAAW,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,gBAAgB,IAAC,SAAS,EAAE,aAAa,GAAI;gBACzF,8BAAM,SAAS,EAAE,UAAU,IAAG,QAAQ,CAAQ;gBAC7C,WAAW,IAAI,YAAY,KAAK,OAAO,IAAI,CAC1C,oBAAC,eAAe,IAAC,SAAS,EAAE,cAAc,GAAI,CAC/C,CACO,CACH,CACD,CACX,CAAA;AACH,CAAC,CAAA"}

package/esm/components/AppNavi/AppNavi.d.ts

@@ -1,22 +1,16 @@
-import { HTMLAttributes, ReactNode, VFC } from 'react';
+import { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactNode } from 'react';
 import { AppNaviAnchorProps } from './AppNaviAnchor';
 import { AppNaviButtonProps } from './AppNaviButton';
 import { AppNaviCustomTagProps } from './AppNaviCustomTag';
 import { AppNaviDropdownProps } from './AppNaviDropdown';
-type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>;
-type Props = {
+type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>;
+type Props = PropsWithChildren<{
     /** ラベルのテキスト */
     label?: ReactNode;
     /** 表示するボタンの Props の配列 */
     buttons?: Array<AppNaviButtonProps | AppNaviAnchorProps | AppNaviDropdownProps | AppNaviCustomTagProps>;
-    /** アクティブ状態のボタンがクリック可能かどうか */
-    isCurrentUnclickable?: boolean;
-    /** 追加で表示する内容 */
-    children?: ReactNode;
-    /** コンポーネントに適用するクラス名 */
-    className?: string;
     /** ドロップダウンにキャレットを表示するかどうか */
     displayDropdownCaret?: boolean;
-};
-export declare const AppNavi: VFC<Props & ElementProps>;
+}>;
+export declare const AppNavi: FC<Props & ElementProps>;
 export {};

package/esm/components/AppNavi/AppNavi.js

@@ -1,66 +1,53 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { useTheme } from '../../hooks/useTheme';
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
 import { Nav } from '../SectioningContent';
 import { StatusLabel } from '../StatusLabel';
 import { AppNaviAnchor } from './AppNaviAnchor';
 import { AppNaviButton } from './AppNaviButton';
 import { AppNaviCustomTag } from './AppNaviCustomTag';
 import { AppNaviDropdown } from './AppNaviDropdown';
-import { useClassNames } from './useClassNames';
-export const AppNavi = ({ label, buttons, isCurrentUnclickable, className = '', children = null, displayDropdownCaret = false, ...props }) => {
-    const theme = useTheme();
-    const classNames = useClassNames();
-    return (React.createElement(WrapperNav, { ...props, themes: theme, className: `${className} ${classNames.wrapper}` },
-        label && (React.createElement(StyledStatusLabel, { "$themes": theme, className: classNames.label }, label)),
-        buttons && (React.createElement(Buttons, { themes: theme, className: classNames.buttons }, buttons.map((button, i) => {
-            const isUnclickable = button.current && isCurrentUnclickable;
+const appNavi = tv({
+    slots: {
+        wrapper: [
+            'smarthr-ui-AppNavi',
+            'shr-flex shr-min-w-max shr-items-center shr-bg-white shr-px-1.5 shr-shadow-layer-1',
+        ],
+        statusLabel: ['smarthr-ui-AppNavi-label', 'shr-me-1'],
+        buttonsEl: [
+            'smarthr-ui-AppNavi-buttons',
+            'shr-flex shr-items-stretch shr-gap-1 shr-self-stretch',
+        ],
+        listItem: ['smarthr-ui-AppNavi-listItem', 'shr-list-none'],
+    },
+});
+export const AppNavi = ({ label, buttons, className, children, displayDropdownCaret = false, ...props }) => {
+    const { wrapperStyle, statusLabelStyle, buttonsStyle, listItemStyle } = useMemo(() => {
+        const { wrapper, statusLabel, buttonsEl, listItem } = appNavi();
+        return {
+            wrapperStyle: wrapper({ className }),
+            statusLabelStyle: statusLabel(),
+            buttonsStyle: buttonsEl(),
+            listItemStyle: listItem(),
+        };
+    }, [className]);
+    return (React.createElement(Nav, { ...props, className: wrapperStyle },
+        label && React.createElement(StatusLabel, { className: statusLabelStyle }, label),
+        buttons && (React.createElement("ul", { className: buttonsStyle }, buttons.map((button, i) => {
             if ('tag' in button) {
-                const { tag, icon, current, children: buttonChildren, ...buttonProps } = button;
-                return (React.createElement("li", { key: i, className: classNames.listItem },
-                    React.createElement(AppNaviCustomTag, { ...buttonProps, tag: tag, icon: icon, current: current, isUnclickable: isUnclickable }, buttonChildren)));
+                return (React.createElement("li", { key: i, className: listItemStyle },
+                    React.createElement(AppNaviCustomTag, { ...button })));
             }
             if ('href' in button) {
-                return (React.createElement("li", { key: i, className: classNames.listItem },
-                    React.createElement(AppNaviAnchor, { href: button.href, icon: button.icon, current: button.current, isUnclickable: isUnclickable }, button.children)));
+                return (React.createElement("li", { key: i, className: listItemStyle },
+                    React.createElement(AppNaviAnchor, { ...button })));
             }
             if ('dropdownContent' in button) {
-                return (React.createElement("li", { key: i, className: classNames.listItem },
-                    React.createElement(AppNaviDropdown, { dropdownContent: button.dropdownContent, icon: button.icon, current: button.current, isUnclickable: isUnclickable, displayCaret: displayDropdownCaret }, button.children)));
+                return (React.createElement("li", { key: i, className: listItemStyle },
+                    React.createElement(AppNaviDropdown, { ...button, displayCaret: displayDropdownCaret })));
             }
-            return (React.createElement("li", { key: i, className: classNames.listItem },
-                React.createElement(AppNaviButton, { icon: button.icon, current: button.current, onClick: button.onClick, isUnclickable: isUnclickable }, button.children)));
+            return (React.createElement("li", { key: i, className: listItemStyle },
+                React.createElement(AppNaviButton, { ...button })));
         }))),
         children));
 };
-const WrapperNav = styled(Nav) `
-  ${({ themes: { color, shadow, spacingByChar } }) => css `
-    display: flex;
-    align-items: center;
-    min-width: max-content;
-    box-shadow: ${shadow.LAYER1};
-    background-color: ${color.WHITE};
-    padding-right: ${spacingByChar(1.5)};
-    padding-left: ${spacingByChar(1.5)};
-  `}
-`;
-const StyledStatusLabel = styled(StatusLabel) `
-  ${({ $themes: { spacingByChar } }) => css `
-    margin-right: ${spacingByChar(1)};
-  `}
-`;
-const Buttons = styled.ul `
-  ${({ themes: { spacingByChar } }) => css `
-    align-self: stretch;
-    display: flex;
-    align-items: stretch;
-    gap: ${spacingByChar(1)};
-    margin: 0;
-    padding: 0;
-
-    > li {
-      list-style: none;
-    }
-  `}
-`;
 //# sourceMappingURL=AppNavi.js.map

package/esm/components/AppNavi/AppNavi.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavi.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNavi.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppNavi.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNavi.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8D,OAAO,EAAE,MAAM,OAAO,CAAA;AAClG,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAA;AAC5E,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAA;AAezE,MAAM,OAAO,GAAG,EAAE,CAAC;IACjB,KAAK,EAAE;QACL,OAAO,EAAE;YACP,oBAAoB;YACpB,oFAAoF;SACrF;QACD,WAAW,EAAE,CAAC,0BAA0B,EAAE,UAAU,CAAC;QACrD,SAAS,EAAE;YACT,4BAA4B;YAC5B,uDAAuD;SACxD;QACD,QAAQ,EAAE,CAAC,6BAA6B,EAAE,eAAe,CAAC;KAC3D;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,OAAO,GAA6B,CAAC,EAChD,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,oBAAoB,GAAG,KAAK,EAC5B,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACnF,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAA;QAC/D,OAAO;YACL,YAAY,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;YACpC,gBAAgB,EAAE,WAAW,EAAE;YAC/B,YAAY,EAAE,SAAS,EAAE;YACzB,aAAa,EAAE,QAAQ,EAAE;SAC1B,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,oBAAC,GAAG,OAAK,KAAK,EAAE,SAAS,EAAE,YAAY;QACpC,KAAK,IAAI,oBAAC,WAAW,IAAC,SAAS,EAAE,gBAAgB,IAAG,KAAK,CAAe;QAExE,OAAO,IAAI,CACV,4BAAI,SAAS,EAAE,YAAY,IACxB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACzB,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;gBACpB,OAAO,CACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa;oBAClC,oBAAC,gBAAgB,OAAK,MAAM,GAAI,CAC7B,CACN,CAAA;YACH,CAAC;YAED,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;gBACrB,OAAO,CACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa;oBAElC,oBAAC,aAAa,OAAK,MAAM,GAAI,CAC1B,CACN,CAAA;YACH,CAAC;YAED,IAAI,iBAAiB,IAAI,MAAM,EAAE,CAAC;gBAChC,OAAO,CACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa;oBAClC,oBAAC,eAAe,OAAK,MAAM,EAAE,YAAY,EAAE,oBAAoB,GAAI,CAChE,CACN,CAAA;YACH,CAAC;YAED,OAAO,CACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa;gBAClC,oBAAC,aAAa,OAAK,MAAM,GAAI,CAC1B,CACN,CAAA;QACH,CAAC,CAAC,CACC,CACN;QAEA,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA"}

package/esm/components/AppNavi/AppNaviAnchor.d.ts

@@ -1,17 +1,11 @@
-import React, { ReactNode, VFC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { ComponentProps as IconProps } from '../Icon';
-export type AppNaviAnchorProps = {
-    /** アンカーのテキスト */
-    children: ReactNode;
+export type AppNaviAnchorProps = PropsWithChildren<{
     /** アンカーの href */
     href: string;
     /** 表示するアイコンタイプ */
     icon?: React.ComponentType<IconProps>;
     /** アクティブ状態であるかどうか */
     current?: boolean;
-};
-type InnerProps = AppNaviAnchorProps & {
-    isUnclickable?: boolean;
-};
-export declare const AppNaviAnchor: VFC<InnerProps>;
-export {};
+}>;
+export declare const AppNaviAnchor: FC<AppNaviAnchorProps>;

package/esm/components/AppNavi/AppNaviAnchor.js

@@ -1,21 +1,23 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { useTheme } from '../../hooks/useTheme';
-import { getIconComponent, getItemStyle } from './appNaviHelper';
-import { useClassNames } from './useClassNames';
-export const AppNaviAnchor = ({ children, href, icon, current = false, isUnclickable = false, }) => {
-    const theme = useTheme();
-    const classNames = useClassNames();
-    const iconComponent = getIconComponent(theme, { icon, current });
-    return (React.createElement(Anchor, { "$themes": theme, "aria-current": current ? 'page' : undefined, href: isUnclickable ? undefined : href, className: classNames.anchor, "$isActive": current, "$isUnclickable": isUnclickable },
-        iconComponent,
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
+import { appNaviItemStyle } from './style';
+const appNaviAnchor = tv({
+    extend: appNaviItemStyle,
+    slots: {
+        wrapper: ['smarthr-ui-AppNavi-anchor', 'forced-colors:shr-underline'],
+    },
+});
+export const AppNaviAnchor = ({ children, href, icon: Icon, current = false, }) => {
+    const clickable = !current;
+    const { wrapperStyle, iconStyle } = useMemo(() => {
+        const { wrapper, icon } = appNaviAnchor({ active: current });
+        return {
+            wrapperStyle: wrapper(),
+            iconStyle: icon(),
+        };
+    }, [current]);
+    return (React.createElement("a", { "aria-current": current ? 'page' : undefined, href: clickable ? href : undefined, className: wrapperStyle },
+        Icon && React.createElement(Icon, { className: iconStyle }),
         children));
 };
-const Anchor = styled.a((props) => css `
-    ${getItemStyle(props)}
-
-    @media (forced-colors: active) {
-      text-decoration: underline;
-    }
-  `);
 //# sourceMappingURL=AppNaviAnchor.js.map

package/esm/components/AppNavi/AppNaviAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNaviAnchor.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAG/C,OAAO,EAAkB,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAgB/C,MAAM,CAAC,MAAM,aAAa,GAAoB,CAAC,EAC7C,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,GACtB,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IAEhE,OAAO,CACL,oBAAC,MAAM,eACI,KAAK,kBACA,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACtC,SAAS,EAAE,UAAU,CAAC,MAAM,eACjB,OAAO,oBACF,aAAa;QAE5B,aAAa;QACb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CACrB,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,CAAA;MACV,YAAY,CAAC,KAAK,CAAC;;;;;GAKtB,CACF,CAAA"}
+{"version":3,"file":"AppNaviAnchor.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAW1C,MAAM,aAAa,GAAG,EAAE,CAAC;IACvB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,2BAA2B,EAAE,6BAA6B,CAAC;KACtE;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,QAAQ,EACR,IAAI,EACJ,IAAI,EAAE,IAAI,EACV,OAAO,GAAG,KAAK,GAChB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,CAAC,OAAO,CAAA;IAC1B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAA;QAC5D,OAAO;YACL,YAAY,EAAE,OAAO,EAAE;YACvB,SAAS,EAAE,IAAI,EAAE;SAClB,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,2CACgB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAClC,SAAS,EAAE,YAAY;QAEtB,IAAI,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,SAAS,GAAI;QACtC,QAAQ,CACP,CACL,CAAA;AACH,CAAC,CAAA"}

package/esm/components/AppNavi/AppNaviButton.d.ts

@@ -1,17 +1,11 @@
-import React, { ReactNode, VFC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { ComponentProps as IconProps } from '../Icon';
-export type AppNaviButtonProps = {
-    /** ボタンのテキスト */
-    children: ReactNode;
+export type AppNaviButtonProps = PropsWithChildren<{
     /** 表示するアイコンタイプ */
     icon?: React.ComponentType<IconProps>;
     /** アクティブ状態であるかどうか */
     current?: boolean;
     /** クリックイベントのハンドラ */
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
-type InnerProps = AppNaviButtonProps & {
-    isUnclickable?: boolean;
-};
-export declare const AppNaviButton: VFC<InnerProps>;
-export {};
+}>;
+export declare const AppNaviButton: FC<AppNaviButtonProps>;

package/esm/components/AppNavi/AppNaviButton.js

@@ -1,16 +1,23 @@
-import React from 'react';
-import styled from 'styled-components';
-import { useTheme } from '../../hooks/useTheme';
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
 import { UnstyledButton } from '../Button';
-import { getIconComponent, getItemStyle } from './appNaviHelper';
-import { useClassNames } from './useClassNames';
-export const AppNaviButton = ({ children, icon, current = false, isUnclickable = false, onClick, }) => {
-    const theme = useTheme();
-    const classNames = useClassNames();
-    const iconComponent = getIconComponent(theme, { icon, current });
-    return (React.createElement(Button, { "$themes": theme, "aria-current": current ? 'page' : undefined, onClick: onClick, disabled: isUnclickable, type: "button", className: classNames.button, "$isActive": current, "$isUnclickable": isUnclickable },
-        iconComponent,
+import { appNaviItemStyle } from './style';
+const appNaviButton = tv({
+    extend: appNaviItemStyle,
+    slots: {
+        wrapper: 'smarthr-ui-AppNavi-button',
+    },
+});
+export const AppNaviButton = ({ children, icon: Icon, current = false, onClick, }) => {
+    const { wrapperStyle, iconStyle } = useMemo(() => {
+        const { wrapper, icon } = appNaviButton({ active: current });
+        return {
+            wrapperStyle: wrapper(),
+            iconStyle: icon(),
+        };
+    }, [current]);
+    return (React.createElement(UnstyledButton, { "aria-current": current ? 'page' : undefined, onClick: onClick, disabled: current, className: wrapperStyle },
+        Icon && React.createElement(Icon, { className: iconStyle }),
         children));
 };
-const Button = styled(UnstyledButton)((props) => getItemStyle(props));
 //# sourceMappingURL=AppNaviButton.js.map

package/esm/components/AppNavi/AppNaviButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNaviButton.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAG1C,OAAO,EAAkB,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAiB/C,MAAM,CAAC,MAAM,aAAa,GAAoB,CAAC,EAC7C,QAAQ,EACR,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,OAAO,GACR,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IAEhE,OAAO,CACL,oBAAC,MAAM,eACI,KAAK,kBACA,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,MAAM,eACjB,OAAO,oBACF,aAAa;QAE5B,aAAa;QACb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAiB,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA"}
+{"version":3,"file":"AppNaviButton.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAW1C,MAAM,aAAa,GAAG,EAAE,CAAC;IACvB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE;QACL,OAAO,EAAE,2BAA2B;KACrC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,OAAO,GAAG,KAAK,EACf,OAAO,GACR,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAA;QAC5D,OAAO;YACL,YAAY,EAAE,OAAO,EAAE;YACvB,SAAS,EAAE,IAAI,EAAE;SAClB,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,oBAAC,cAAc,oBACC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,YAAY;QAEtB,IAAI,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,SAAS,GAAI;QACtC,QAAQ,CACM,CAClB,CAAA;AACH,CAAC,CAAA"}

package/esm/components/AppNavi/AppNaviCustomTag.d.ts

@@ -1,19 +1,13 @@
-import React, { ComponentType, ReactNode, VFC } from 'react';
+import React, { ComponentType, FC, PropsWithChildren } from 'react';
 import { ComponentProps as IconProps } from '../Icon';
-export type AppNaviCustomTagProps = {
-    /** ボタンのテキスト */
-    children: ReactNode;
+export type AppNaviCustomTagProps = PropsWithChildren<{
     /** このボタンのカスタムタグ */
     tag: ComponentType<any>;
     /** 表示するアイコンタイプ */
     icon?: React.ComponentType<IconProps>;
     /** アクティブ状態であるかどうか */
     current?: boolean;
-} & {
+}> & {
     [key: string]: any;
 };
-type InnerProps = AppNaviCustomTagProps & {
-    isUnclickable?: boolean;
-};
-export declare const AppNaviCustomTag: VFC<InnerProps>;
-export {};
+export declare const AppNaviCustomTag: FC<AppNaviCustomTagProps>;

package/esm/components/AppNavi/AppNaviCustomTag.js

@@ -1,28 +1,22 @@
-import React from 'react';
-import styled from 'styled-components';
-import { useTheme } from '../../hooks/useTheme';
-import { getIconComponent, getItemStyle } from './appNaviHelper';
-import { useClassNames } from './useClassNames';
-export const AppNaviCustomTag = ({ children, tag, icon, current = false, isUnclickable = false, ...props }) => {
-    const theme = useTheme();
-    const classNames = useClassNames();
-    const iconComponent = getIconComponent(theme, { icon, current });
-    if (current) {
-        if (isUnclickable) {
-            const unclickableProps = { href: undefined, disabled: true };
-            return (React.createElement(UnclickableActive, { ...props, ...unclickableProps, as: tag, "$themes": theme, "aria-current": "page", className: classNames.customTag },
-                iconComponent,
-                children));
-        }
-        return (React.createElement(Active, { ...props, as: tag, "$themes": theme, "aria-current": "page", className: classNames.customTag },
-            iconComponent,
-            children));
-    }
-    return (React.createElement(InActive, { ...props, as: tag, "$themes": theme, className: classNames.customTag },
-        iconComponent,
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
+import { appNaviItemStyle } from './style';
+const appNaviCustomTag = tv({
+    extend: appNaviItemStyle,
+    slots: {
+        wrapper: 'smarthr-ui-AppNavi-customTag',
+    },
+});
+export const AppNaviCustomTag = ({ children, tag: Tag, icon: Icon, current = false, ...props }) => {
+    const { wrapperStyle, iconStyle } = useMemo(() => {
+        const { wrapper, icon } = appNaviCustomTag({ active: current });
+        return {
+            wrapperStyle: wrapper(),
+            iconStyle: icon(),
+        };
+    }, [current]);
+    return (React.createElement(Tag, { ...props, "aria-current": current ? 'page' : undefined, className: wrapperStyle },
+        Icon && React.createElement(Icon, { className: iconStyle }),
         children));
 };
-const Active = styled.div(({ $themes }) => getItemStyle({ $themes, $isActive: true }));
-const InActive = styled.div(({ $themes }) => getItemStyle({ $themes }));
-const UnclickableActive = styled.div(({ $themes }) => getItemStyle({ $themes, $isActive: true, $isUnclickable: true }));
 //# sourceMappingURL=AppNaviCustomTag.js.map

package/esm/components/AppNavi/AppNaviCustomTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNaviCustomTag.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviCustomTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAC5D,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAS,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAGtD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAgB/C,MAAM,CAAC,MAAM,gBAAgB,GAAoB,CAAC,EAChD,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IAEhE,IAAI,OAAO,EAAE,CAAC;QACZ,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,gBAAgB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;YAC5D,OAAO,CACL,oBAAC,iBAAiB,OACZ,KAAK,KACL,gBAAgB,EACpB,EAAE,EAAE,GAAG,aACE,KAAK,kBACD,MAAM,EACnB,SAAS,EAAE,UAAU,CAAC,SAAS;gBAE9B,aAAa;gBACb,QAAQ,CACS,CACrB,CAAA;QACH,CAAC;QACD,OAAO,CACL,oBAAC,MAAM,OACD,KAAK,EACT,EAAE,EAAE,GAAG,aACE,KAAK,kBACD,MAAM,EACnB,SAAS,EAAE,UAAU,CAAC,SAAS;YAE9B,aAAa;YACb,QAAQ,CACF,CACV,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,QAAQ,OAAK,KAAK,EAAE,EAAE,EAAE,GAAG,aAAW,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS;QAC1E,aAAa;QACb,QAAQ,CACA,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAC5D,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAC3C,CAAA;AACD,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;AAC3F,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CACvE,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CACjE,CAAA"}
+{"version":3,"file":"AppNaviCustomTag.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviCustomTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,OAAO,EAAE,MAAM,OAAO,CAAA;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAW1C,MAAM,gBAAgB,GAAG,EAAE,CAAC;IAC1B,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE;QACL,OAAO,EAAE,8BAA8B;KACxC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAC1D,QAAQ,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,gBAAgB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAA;QAC/D,OAAO;YACL,YAAY,EAAE,OAAO,EAAE;YACvB,SAAS,EAAE,IAAI,EAAE;SAClB,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,oBAAC,GAAG,OAAK,KAAK,kBAAgB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,YAAY;QAChF,IAAI,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,SAAS,GAAI;QACtC,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA"}

package/esm/components/AppNavi/AppNaviDropdown.d.ts

@@ -1,18 +1,12 @@
-import React, { ReactNode, VFC } from 'react';
+import React, { FC, PropsWithChildren, ReactNode } from 'react';
 import { ComponentProps as IconProps } from '../Icon';
-export type AppNaviDropdownProps = {
-    /** ボタンのテキスト */
-    children: ReactNode;
+export type AppNaviDropdownProps = PropsWithChildren<{
     /** ドロップダウンのコンテンツ */
     dropdownContent: ReactNode;
     /** 表示するアイコンタイプ */
     icon?: React.ComponentType<IconProps>;
     /** アクティブ状態であるかどうか */
     current?: boolean;
-};
-type InnerProps = AppNaviDropdownProps & {
-    isUnclickable?: boolean;
     displayCaret?: boolean;
-};
-export declare const AppNaviDropdown: VFC<InnerProps>;
-export {};
+}>;
+export declare const AppNaviDropdown: FC<AppNaviDropdownProps>;

package/esm/components/AppNavi/AppNaviDropdown.js

@@ -1,31 +1,36 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { useTheme } from '../../hooks/useTheme';
+import React, { useMemo } from 'react';
+import { tv } from 'tailwind-variants';
 import { UnstyledButton } from '../Button';
 import { Dropdown, DropdownContent, DropdownTrigger } from '../Dropdown';
 import { FaCaretDownIcon } from '../Icon';
-import { getIconComponent, getItemStyle } from './appNaviHelper';
-export const AppNaviDropdown = ({ children, dropdownContent, icon, current = false, isUnclickable = false, displayCaret, }) => {
-    const theme = useTheme();
-    const iconComponent = getIconComponent(theme, { icon, current });
+import { appNaviItemStyle } from './style';
+const appNaviDropdown = tv({
+    extend: appNaviItemStyle,
+    variants: {
+        displayCaret: {
+            true: {
+                wrapper: [
+                    'smarthr-ui-AppNavi-dropdown',
+                    '[&[aria-expanded="true"]_.smarthr-ui-Icon:last-child]:shr-rotate-180',
+                ],
+            },
+        },
+    },
+});
+export const AppNaviDropdown = ({ children, dropdownContent, icon: Icon, current = false, displayCaret, }) => {
+    const { wrapperStyle, iconStyle } = useMemo(() => {
+        const { wrapper, icon } = appNaviDropdown({ active: current, displayCaret });
+        return {
+            wrapperStyle: wrapper(),
+            iconStyle: icon(),
+        };
+    }, [current, displayCaret]);
     return (React.createElement(Dropdown, null,
         React.createElement(DropdownTrigger, null,
-            React.createElement(TriggerButton, { "$themes": theme, "aria-current": current ? 'page' : undefined, disabled: isUnclickable, "$displayCaret": displayCaret, "$isActive": current, "$isUnclickable": isUnclickable },
-                iconComponent,
+            React.createElement(UnstyledButton, { "aria-current": current ? 'page' : undefined, disabled: current, className: wrapperStyle },
+                Icon && React.createElement(Icon, { className: iconStyle }),
                 children,
                 displayCaret && React.createElement(FaCaretDownIcon, null))),
         React.createElement(DropdownContent, null, dropdownContent)));
 };
-const TriggerButton = styled(UnstyledButton)(({ $displayCaret, ...props }) => css `
-    ${getItemStyle(props)}
-
-    ${$displayCaret &&
-    css `
-      &[aria-expanded='true'] {
-        .smarthr-ui-Icon:last-child {
-          transform: rotate(0.5turn);
-        }
-      }
-    `}
-  `);
 //# sourceMappingURL=AppNaviDropdown.js.map

package/esm/components/AppNavi/AppNaviDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNaviDropdown.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AACxE,OAAO,EAAE,eAAe,EAA+B,MAAM,SAAS,CAAA;AAEtE,OAAO,EAAkB,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAkBhF,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,EAC/C,QAAQ,EACR,eAAe,EACf,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,YAAY,GACb,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IAEhE,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,eAAe;YACd,oBAAC,aAAa,eACH,KAAK,kBACA,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,aAAa,mBACR,YAAY,eAChB,OAAO,oBACF,aAAa;gBAE5B,aAAa;gBACb,QAAQ;gBACR,YAAY,IAAI,oBAAC,eAAe,OAAG,CACtB,CACA;QAElB,oBAAC,eAAe,QAAE,eAAe,CAAmB,CAC3C,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,CAK1C,CAAC,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAChC,YAAY,CAAC,KAAK,CAAC;;MAEnB,aAAa;IACf,GAAG,CAAA;;;;;;KAMF;GACF,CACF,CAAA"}
+{"version":3,"file":"AppNaviDropdown.js","sourceRoot":"","sources":["../../../src/components/AppNavi/AppNaviDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoC,OAAO,EAAE,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AACxE,OAAO,EAAE,eAAe,EAA+B,MAAM,SAAS,CAAA;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAY1C,MAAM,eAAe,GAAG,EAAE,CAAC;IACzB,MAAM,EAAE,gBAAgB;IACxB,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,IAAI,EAAE;gBACJ,OAAO,EAAE;oBACP,6BAA6B;oBAC7B,sEAAsE;iBACvE;aACF;SACF;KACF;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACxD,QAAQ,EACR,eAAe,EACf,IAAI,EAAE,IAAI,EACV,OAAO,GAAG,KAAK,EACf,YAAY,GACb,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAA;QAC5E,OAAO;YACL,YAAY,EAAE,OAAO,EAAE;YACvB,SAAS,EAAE,IAAI,EAAE;SAClB,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAA;IAE3B,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,eAAe;YACd,oBAAC,cAAc,oBACC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,YAAY;gBAEtB,IAAI,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,SAAS,GAAI;gBACtC,QAAQ;gBACR,YAAY,IAAI,oBAAC,eAAe,OAAG,CACrB,CACD;QAElB,oBAAC,eAAe,QAAE,eAAe,CAAmB,CAC3C,CACZ,CAAA;AACH,CAAC,CAAA"}

package/esm/components/AppNavi/style.d.ts

@@ -0,0 +1,87 @@
+export declare const appNaviItemStyle: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            wrapper: string[];
+            icon: string;
+        };
+        false: {
+            wrapper: string[];
+            icon: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    active: {
+        true: {
+            wrapper: string[];
+            icon: string;
+        };
+        false: {
+            wrapper: string[];
+            icon: string;
+        };
+    };
+}, {
+    active: {
+        true: {
+            wrapper: string[];
+            icon: string;
+        };
+        false: {
+            wrapper: string[];
+            icon: string;
+        };
+    };
+}>, {
+    active: {
+        true: {
+            wrapper: string[];
+            icon: string;
+        };
+        false: {
+            wrapper: string[];
+            icon: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            wrapper: string[];
+            icon: string;
+        };
+        false: {
+            wrapper: string[];
+            icon: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    active: {
+        true: {
+            wrapper: string[];
+            icon: string;
+        };
+        false: {
+            wrapper: string[];
+            icon: string;
+        };
+    };
+}, {
+    active: {
+        true: {
+            wrapper: string[];
+            icon: string;
+        };
+        false: {
+            wrapper: string[];
+            icon: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;