@fluentui/react-nav 0.0.0-nightly-20250612-0406.1

package/lib/components/NavSubItemGroup/index.js

@@ -0,0 +1,4 @@
+export { NavSubItemGroup } from './NavSubItemGroup';
+export { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';
+export { useNavSubItemGroup_unstable } from './useNavSubItemGroup';
+export { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';

package/lib/components/NavSubItemGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/index.ts"],"sourcesContent":["export { NavSubItemGroup } from './NavSubItemGroup';\nexport type { NavSubItemGroupSlots, NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nexport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nexport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nexport { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';\n"],"names":["NavSubItemGroup","renderNavSubItemGroup_unstable","useNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","navSubItemGroupClassNames"],"rangeMappings":";;;","mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,EAAEC,yBAAyB,QAAQ,oCAAoC"}

package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js

@@ -0,0 +1,10 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of NavSubItemGroup
+ */ export const renderNavSubItemGroup_unstable = (state)=>{
+    assertSlots(state);
+    return state.open ? /*#__PURE__*/ _jsx(state.root, {
+        children: state.root.children
+    }) : null;
+};

package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {\n  assertSlots<NavSubItemGroupSlots>(state);\n\n  return state.open ? <state.root>{state.root.children}</state.root> : null;\n};\n"],"names":["assertSlots","renderNavSubItemGroup_unstable","state","open","root","children"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,OAAOA,MAAMC,IAAI,iBAAG,KAACD,MAAME,IAAI;kBAAEF,MAAME,IAAI,CAACC,QAAQ;SAAiB;AACvE,EAAE"}

package/lib/components/NavSubItemGroup/useNavSubItemGroup.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useNavCategoryContext_unstable } from '../NavCategoryContext';
+/**
+ * Create the state required to render NavSubItemGroup.
+ *
+ * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,
+ * before being passed to renderNavSubItemGroup_unstable.
+ *
+ * @param props - props from this instance of NavSubItemGroup
+ * @param ref - reference to root HTMLDivElement of NavSubItemGroup
+ */ export const useNavSubItemGroup_unstable = (props, ref)=>{
+    const { open } = useNavCategoryContext_unstable();
+    // copied over from accordion. todo - figure out how to handle.
+    // const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });
+    // const navigation = useAccordionContext_unstable(ctx => ctx.navigation);
+    return {
+        open,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ...props,
+            ref
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n  props: NavSubItemGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n  const { open } = useNavCategoryContext_unstable();\n\n  // copied over from accordion. todo - figure out how to handle.\n  // const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n  // const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,+DAA+D;IAC/D,0FAA0F;IAC1F,0EAA0E;IAE1E,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,GAAGI,KAAK;YACRC;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js

@@ -0,0 +1,22 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const navSubItemGroupClassNames = {
+  root: 'fui-NavSubItemGroup'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {}
+}, {});
+/**
+ * Apply styling to the NavSubItemGroup slots based on the state
+ */
+export const useNavSubItemGroupStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+  return state;
+};

package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n    root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n    }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n    // TODO Add class names to slots, for example:\n    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;AAAA,KAGrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAME,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACtG;EACA;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/SplitNavItem/SplitNavItem.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useSplitNavItem_unstable } from './useSplitNavItem';
+import { renderSplitNavItem_unstable } from './renderSplitNavItem';
+import { useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';
+/**
+ * SplitNavItem component - TODO: add more docs
+ */ export const SplitNavItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSplitNavItem_unstable(props, ref);
+    useSplitNavItemStyles_unstable(state);
+    /**
+   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
+   *
+   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
+   *      - uncomment this line
+   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
+   *      - verify that custom global style override works for your component
+   */ // useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);
+    return renderSplitNavItem_unstable(state);
+});
+SplitNavItem.displayName = 'SplitNavItem';

package/lib/components/SplitNavItem/SplitNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSplitNavItem_unstable } from './useSplitNavItem';\nimport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nimport { useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\nimport type { SplitNavItemProps } from './SplitNavItem.types';\n\n/**\n * SplitNavItem component - TODO: add more docs\n */\nexport const SplitNavItem: ForwardRefComponent<SplitNavItemProps> = React.forwardRef((props, ref) => {\n  const state = useSplitNavItem_unstable(props, ref);\n\n  useSplitNavItemStyles_unstable(state);\n\n  /**\n   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md\n   *\n   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),\n   *      - uncomment this line\n   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}\n   *      - verify that custom global style override works for your component\n   */\n  // useCustomStyleHook_unstable('useSplitNavItemStyles_unstable')(state);\n\n  return renderSplitNavItem_unstable(state);\n});\n\nSplitNavItem.displayName = 'SplitNavItem';\n"],"names":["React","useSplitNavItem_unstable","renderSplitNavItem_unstable","useSplitNavItemStyles_unstable","SplitNavItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAE/B;;;;;;;GAOC,GACD,wEAAwE;IAExE,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/SplitNavItem/SplitNavItem.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering SplitNavItem
+ */ export { };

package/lib/components/SplitNavItem/SplitNavItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/SplitNavItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavItemProps } from '../NavItem/NavItem.types';\nimport { ButtonProps, MenuButtonProps, ToggleButtonProps } from '@fluentui/react-button';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\nimport { NavDensity } from '../Nav/Nav.types';\nimport { NavSubItemProps } from '../NavSubItem/NavSubItem.types';\n\nexport type SplitNavItemSlots = {\n  /**\n   * Root of the component, wrapping the children.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * The NavItem Slot.\n   * Will behave as a SubNavItem if it's in an a SubGroup.\n   */\n  navItem?: NonNullable<Slot<NavItemProps & NavSubItemProps>>;\n\n  /**\n   * Basic button slot.\n   */\n  actionButton?: Slot<ButtonProps>;\n\n  /**\n   * Toggle button slot\n   */\n  toggleButton?: Slot<ToggleButtonProps>;\n\n  /**\n   * Menu button slot to stuff more things in when the other two aren't enough.\n   */\n  menuButton?: Slot<MenuButtonProps>;\n\n  /**\n   * Tooltip for the action button.\n   */\n  actionButtonTooltip?: Slot<TooltipProps>;\n\n  /**\n   * Tooltip for the toggle button.\n   */\n  toggleButtonTooltip?: Slot<TooltipProps>;\n\n  /**\n   * Tooltip for the menu button.\n   */\n  menuButtonTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * SplitNavItem Props\n */\nexport type SplitNavItemProps = ComponentProps<SplitNavItemSlots>;\n\n/**\n * State used in rendering SplitNavItem\n */\nexport type SplitNavItemState = ComponentState<SplitNavItemSlots> & {\n  /**\n   * The density of the NavItem\n   *\n   * @default 'medium'\n   */\n  density: NavDensity;\n\n  /**\n   * A boolean that represents if the main item in the SplitNavItem is a SubNav item.\n   * If false, it's a NavItem.\n   */\n  isSubNav: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAuDA;;CAEC,GACD,WAaE"}

package/lib/components/SplitNavItem/index.js

@@ -0,0 +1,4 @@
+export { SplitNavItem } from './SplitNavItem';
+export { renderSplitNavItem_unstable } from './renderSplitNavItem';
+export { useSplitNavItem_unstable } from './useSplitNavItem';
+export { splitNavItemClassNames, useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';

package/lib/components/SplitNavItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/index.ts"],"sourcesContent":["export { SplitNavItem } from './SplitNavItem';\nexport type { SplitNavItemProps, SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nexport { renderSplitNavItem_unstable } from './renderSplitNavItem';\nexport { useSplitNavItem_unstable } from './useSplitNavItem';\nexport { splitNavItemClassNames, useSplitNavItemStyles_unstable } from './useSplitNavItemStyles.styles';\n"],"names":["SplitNavItem","renderSplitNavItem_unstable","useSplitNavItem_unstable","splitNavItemClassNames","useSplitNavItemStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

package/lib/components/SplitNavItem/renderSplitNavItem.js

@@ -0,0 +1,24 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of SplitNavItem
+ */ export const renderSplitNavItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.navItem && /*#__PURE__*/ _jsx(state.navItem, {}),
+            state.actionButton && state.actionButtonTooltip && /*#__PURE__*/ _jsx(state.actionButtonTooltip, {
+                children: /*#__PURE__*/ _jsx(state.actionButton, {})
+            }),
+            state.actionButton && !state.actionButtonTooltip && /*#__PURE__*/ _jsx(state.actionButton, {}),
+            state.toggleButton && state.toggleButtonTooltip && /*#__PURE__*/ _jsx(state.toggleButtonTooltip, {
+                children: /*#__PURE__*/ _jsx(state.toggleButton, {})
+            }),
+            state.toggleButton && !state.toggleButtonTooltip && /*#__PURE__*/ _jsx(state.toggleButton, {}),
+            state.menuButton && state.menuButtonTooltip && /*#__PURE__*/ _jsx(state.menuButtonTooltip, {
+                children: /*#__PURE__*/ _jsx(state.menuButton, {})
+            }),
+            state.menuButton && !state.menuButtonTooltip && /*#__PURE__*/ _jsx(state.menuButton, {})
+        ]
+    });
+};

package/lib/components/SplitNavItem/renderSplitNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/renderSplitNavItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SplitNavItemState, SplitNavItemSlots } from './SplitNavItem.types';\n\n/**\n * Render the final JSX of SplitNavItem\n */\nexport const renderSplitNavItem_unstable = (state: SplitNavItemState) => {\n  assertSlots<SplitNavItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.navItem && <state.navItem />}\n      {state.actionButton && state.actionButtonTooltip && (\n        <state.actionButtonTooltip>\n          <state.actionButton />\n        </state.actionButtonTooltip>\n      )}\n      {state.actionButton && !state.actionButtonTooltip && <state.actionButton />}\n\n      {state.toggleButton && state.toggleButtonTooltip && (\n        <state.toggleButtonTooltip>\n          <state.toggleButton />\n        </state.toggleButtonTooltip>\n      )}\n      {state.toggleButton && !state.toggleButtonTooltip && <state.toggleButton />}\n\n      {state.menuButton && state.menuButtonTooltip && (\n        <state.menuButtonTooltip>\n          <state.menuButton />\n        </state.menuButtonTooltip>\n      )}\n      {state.menuButton && !state.menuButtonTooltip && <state.menuButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSplitNavItem_unstable","state","root","navItem","actionButton","actionButtonTooltip","toggleButton","toggleButtonTooltip","menuButton","menuButtonTooltip"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,OAAO,kBAAI,KAACF,MAAME,OAAO;YAC/BF,MAAMG,YAAY,IAAIH,MAAMI,mBAAmB,kBAC9C,KAACJ,MAAMI,mBAAmB;0BACxB,cAAA,KAACJ,MAAMG,YAAY;;YAGtBH,MAAMG,YAAY,IAAI,CAACH,MAAMI,mBAAmB,kBAAI,KAACJ,MAAMG,YAAY;YAEvEH,MAAMK,YAAY,IAAIL,MAAMM,mBAAmB,kBAC9C,KAACN,MAAMM,mBAAmB;0BACxB,cAAA,KAACN,MAAMK,YAAY;;YAGtBL,MAAMK,YAAY,IAAI,CAACL,MAAMM,mBAAmB,kBAAI,KAACN,MAAMK,YAAY;YAEvEL,MAAMO,UAAU,IAAIP,MAAMQ,iBAAiB,kBAC1C,KAACR,MAAMQ,iBAAiB;0BACtB,cAAA,KAACR,MAAMO,UAAU;;YAGpBP,MAAMO,UAAU,IAAI,CAACP,MAAMQ,iBAAiB,kBAAI,KAACR,MAAMO,UAAU;;;AAGxE,EAAE"}

package/lib/components/SplitNavItem/useSplitNavItem.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { Tooltip } from '@fluentui/react-tooltip';
+import { useNavContext_unstable } from '../NavContext';
+import { Button, MenuButton, ToggleButton } from '@fluentui/react-button';
+import { MoreHorizontalFilled, Pin20Regular } from '@fluentui/react-icons';
+import { NavItem } from '../NavItem/index';
+import { NavSubItem } from '../NavSubItem/NavSubItem';
+import { useNavCategoryContext_unstable } from '../NavCategoryContext';
+/**
+ * Create the state required to render SplitNavItem.
+ *
+ * The returned state can be modified with hooks such as useSplitNavItemStyles_unstable,
+ * before being passed to renderSplitNavItem_unstable.
+ *
+ * @param props - props from this instance of SplitNavItem
+ * @param ref - reference to root HTMLDivElement of SplitNavItem
+ */ export const useSplitNavItem_unstable = (props, ref)=>{
+    const { navItem, actionButton, toggleButton, menuButton, actionButtonTooltip, toggleButtonTooltip, menuButtonTooltip, children } = props;
+    const { density = 'medium' } = useNavContext_unstable();
+    const { value: potentialParenValue } = useNavCategoryContext_unstable();
+    const isSubNav = potentialParenValue.length > 0 ? true : false;
+    const navItemShorthand = slot.always(navItem, {
+        defaultProps: {
+            children
+        },
+        elementType: isSubNav ? NavSubItem : NavItem
+    });
+    const actionButtonShorthand = slot.optional(actionButton, {
+        defaultProps: {
+            icon: /*#__PURE__*/ React.createElement(Pin20Regular, null),
+            size: 'small',
+            appearance: 'transparent'
+        },
+        elementType: Button
+    });
+    const toggleButtonShorthand = slot.optional(toggleButton, {
+        defaultProps: {
+            icon: /*#__PURE__*/ React.createElement(Pin20Regular, null),
+            size: 'small',
+            appearance: 'transparent'
+        },
+        elementType: ToggleButton
+    });
+    const menuButtonShorthand = slot.optional(menuButton, {
+        defaultProps: {
+            icon: /*#__PURE__*/ React.createElement(MoreHorizontalFilled, null),
+            size: 'small',
+            appearance: 'transparent'
+        },
+        elementType: MenuButton
+    });
+    const actionButtonTooltipShorthand = slot.optional(actionButtonTooltip, {
+        defaultProps: {
+            relationship: 'label'
+        },
+        elementType: Tooltip
+    });
+    const toggleButtonTooltipShorthand = slot.optional(toggleButtonTooltip, {
+        defaultProps: {
+            relationship: 'label'
+        },
+        elementType: Tooltip
+    });
+    const menuButtonTooltipShorthand = slot.optional(menuButtonTooltip, {
+        defaultProps: {
+            relationship: 'label'
+        },
+        elementType: Tooltip
+    });
+    return {
+        components: {
+            root: 'div',
+            navItem: isSubNav ? NavSubItem : NavItem,
+            actionButton: Button,
+            toggleButton: ToggleButton,
+            menuButton: MenuButton,
+            actionButtonTooltip: Tooltip,
+            toggleButtonTooltip: Tooltip,
+            menuButtonTooltip: Tooltip
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props,
+            // because we're passing in children to the NavItem,
+            // We can be explicit about the children prop here
+            children: null
+        }), {
+            elementType: 'div'
+        }),
+        navItem: navItemShorthand,
+        actionButton: actionButtonShorthand,
+        toggleButton: toggleButtonShorthand,
+        menuButton: menuButtonShorthand,
+        actionButtonTooltip: actionButtonTooltipShorthand,
+        toggleButtonTooltip: toggleButtonTooltipShorthand,
+        menuButtonTooltip: menuButtonTooltipShorthand,
+        density,
+        isSubNav
+    };
+};

package/lib/components/SplitNavItem/useSplitNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport type { SplitNavItemProps, SplitNavItemState } from './SplitNavItem.types';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Button, MenuButton, ToggleButton } from '@fluentui/react-button';\nimport { MoreHorizontalFilled, Pin20Regular } from '@fluentui/react-icons';\nimport { NavItem } from '../NavItem/index';\nimport { NavSubItem } from '../NavSubItem/NavSubItem';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render SplitNavItem.\n *\n * The returned state can be modified with hooks such as useSplitNavItemStyles_unstable,\n * before being passed to renderSplitNavItem_unstable.\n *\n * @param props - props from this instance of SplitNavItem\n * @param ref - reference to root HTMLDivElement of SplitNavItem\n */\nexport const useSplitNavItem_unstable = (\n  props: SplitNavItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): SplitNavItemState => {\n  const {\n    navItem,\n    actionButton,\n    toggleButton,\n    menuButton,\n    actionButtonTooltip,\n    toggleButtonTooltip,\n    menuButtonTooltip,\n    children,\n  } = props;\n\n  const { density = 'medium' } = useNavContext_unstable();\n\n  const { value: potentialParenValue } = useNavCategoryContext_unstable();\n\n  const isSubNav = potentialParenValue.length > 0 ? true : false;\n\n  const navItemShorthand = slot.always(navItem, {\n    defaultProps: {\n      children,\n    },\n    elementType: isSubNav ? NavSubItem : NavItem,\n  });\n\n  const actionButtonShorthand = slot.optional(actionButton, {\n    defaultProps: {\n      icon: <Pin20Regular />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: Button,\n  });\n\n  const toggleButtonShorthand = slot.optional(toggleButton, {\n    defaultProps: {\n      icon: <Pin20Regular />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: ToggleButton,\n  });\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      icon: <MoreHorizontalFilled />,\n      size: 'small',\n      appearance: 'transparent',\n    },\n    elementType: MenuButton,\n  });\n\n  const actionButtonTooltipShorthand = slot.optional(actionButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  const toggleButtonTooltipShorthand = slot.optional(toggleButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  const menuButtonTooltipShorthand = slot.optional(menuButtonTooltip, {\n    defaultProps: { relationship: 'label' },\n    elementType: Tooltip,\n  });\n\n  return {\n    components: {\n      root: 'div',\n      navItem: isSubNav ? NavSubItem : NavItem,\n      actionButton: Button,\n      toggleButton: ToggleButton,\n      menuButton: MenuButton,\n      actionButtonTooltip: Tooltip,\n      toggleButtonTooltip: Tooltip,\n      menuButtonTooltip: Tooltip,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        // because we're passing in children to the NavItem,\n        // We can be explicit about the children prop here\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n    navItem: navItemShorthand,\n    actionButton: actionButtonShorthand,\n    toggleButton: toggleButtonShorthand,\n    menuButton: menuButtonShorthand,\n    actionButtonTooltip: actionButtonTooltipShorthand,\n    toggleButtonTooltip: toggleButtonTooltipShorthand,\n    menuButtonTooltip: menuButtonTooltipShorthand,\n    density,\n    isSubNav,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","Tooltip","useNavContext_unstable","Button","MenuButton","ToggleButton","MoreHorizontalFilled","Pin20Regular","NavItem","NavSubItem","useNavCategoryContext_unstable","useSplitNavItem_unstable","props","ref","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","children","density","value","potentialParenValue","isSubNav","length","navItemShorthand","always","defaultProps","elementType","actionButtonShorthand","optional","icon","size","appearance","toggleButtonShorthand","menuButtonShorthand","actionButtonTooltipShorthand","relationship","toggleButtonTooltipShorthand","menuButtonTooltipShorthand","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,OAAO,QAAQ,0BAA0B;AAElD,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,EAAEC,UAAU,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,wBAAwB;AAC3E,SAASC,OAAO,QAAQ,mBAAmB;AAC3C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,mBAAmB,EACnBC,mBAAmB,EACnBC,iBAAiB,EACjBC,QAAQ,EACT,GAAGT;IAEJ,MAAM,EAAEU,UAAU,QAAQ,EAAE,GAAGpB;IAE/B,MAAM,EAAEqB,OAAOC,mBAAmB,EAAE,GAAGd;IAEvC,MAAMe,WAAWD,oBAAoBE,MAAM,GAAG,IAAI,OAAO;IAEzD,MAAMC,mBAAmB3B,KAAK4B,MAAM,CAACd,SAAS;QAC5Ce,cAAc;YACZR;QACF;QACAS,aAAaL,WAAWhB,aAAaD;IACvC;IAEA,MAAMuB,wBAAwB/B,KAAKgC,QAAQ,CAACjB,cAAc;QACxDc,cAAc;YACZI,oBAAM,oBAAC1B;YACP2B,MAAM;YACNC,YAAY;QACd;QACAL,aAAa3B;IACf;IAEA,MAAMiC,wBAAwBpC,KAAKgC,QAAQ,CAAChB,cAAc;QACxDa,cAAc;YACZI,oBAAM,oBAAC1B;YACP2B,MAAM;YACNC,YAAY;QACd;QACAL,aAAazB;IACf;IAEA,MAAMgC,sBAAsBrC,KAAKgC,QAAQ,CAACf,YAAY;QACpDY,cAAc;YACZI,oBAAM,oBAAC3B;YACP4B,MAAM;YACNC,YAAY;QACd;QACAL,aAAa1B;IACf;IAEA,MAAMkC,+BAA+BtC,KAAKgC,QAAQ,CAACd,qBAAqB;QACtEW,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,MAAMuC,+BAA+BxC,KAAKgC,QAAQ,CAACb,qBAAqB;QACtEU,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,MAAMwC,6BAA6BzC,KAAKgC,QAAQ,CAACZ,mBAAmB;QAClES,cAAc;YAAEU,cAAc;QAAQ;QACtCT,aAAa7B;IACf;IAEA,OAAO;QACLyC,YAAY;YACVC,MAAM;YACN7B,SAASW,WAAWhB,aAAaD;YACjCO,cAAcZ;YACda,cAAcX;YACdY,YAAYb;YACZc,qBAAqBjB;YACrBkB,qBAAqBlB;YACrBmB,mBAAmBnB;QACrB;QACA0C,MAAM3C,KAAK4B,MAAM,CACf7B,yBAAyB,OAAO;YAC9Bc;YACA,GAAGD,KAAK;YACR,oDAAoD;YACpD,kDAAkD;YAClDS,UAAU;QACZ,IACA;YAAES,aAAa;QAAM;QAEvBhB,SAASa;QACTZ,cAAcgB;QACdf,cAAcoB;QACdnB,YAAYoB;QACZnB,qBAAqBoB;QACrBnB,qBAAqBqB;QACrBpB,mBAAmBqB;QACnBnB;QACAG;IACF;AACF,EAAE"}

package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js

@@ -0,0 +1,98 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
+import { tokens } from '@fluentui/react-theme';
+export const splitNavItemClassNames = {
+  root: 'fui-SplitNavItem',
+  navItem: 'fui-SplitNavItem__navItem',
+  actionButton: 'fui-SplitNavItem__actionButton',
+  toggleButton: 'fui-SplitNavItem__toggleButton',
+  menuButton: 'fui-SplitNavItem__menuButton',
+  /**
+  * Tooltips don't have a class name prop, so this is just to satisfy the linter.
+  */
+  actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',
+  toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',
+  menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'
+};
+// Don't use makeResetStyles here because the sub components call it once and
+// This links says that makeResetStyles should only be called once per element
+// https://griffel.js.org/react/api/make-reset-styles/#limitations
+/**
+ * Styles for the root slot
+ */
+const useSplitNaveItemStyles = /*#__PURE__*/__styles({
+  baseRoot: {
+    mc9l5x: "f22iagw",
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "fx80lhs",
+    Bt984gj: "f1q9h2pe",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f19jm9xf",
+    fsow6f: "fgusgyc",
+    De3pzq: "f1ctqxl6",
+    B3o57yi: "fnsygzv",
+    Bkqvd7p: "f1e9ux7i",
+    Bmy1vo4: "f1xfaukr",
+    Jwef8y: "f11oyicx",
+    ecr2s2: "f9fof1w"
+  },
+  baseNavItem: {
+    mc9l5x: "f22iagw",
+    B9bfxx9: "f1cxpek8",
+    qb2dma: "f1ub7u0d",
+    fsow6f: ["f1o700av", "fes3tcz"],
+    qhf8xq: "f10pi13n",
+    Brf1p80: "f1s9ku6b",
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f1u2hskj",
+    De3pzq: "f3rmtva"
+  },
+  baseSecondary: {
+    Bf4jedk: "f107v6xj",
+    Bnt446c: "f1y335lp",
+    B1hrpyx: "f12pses1",
+    rjzwhg: "fibmr9j",
+    Bt984gj: "f1s2louj"
+  },
+  baseMedium: {
+    rjzwhg: "fjtod8q"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", [".fx80lhs{gap:unset;}", {
+    p: -1
+  }], ".f1q9h2pe{align-items:stretch;}", [".f19jm9xf{padding:unset;}", {
+    p: -1
+  }], ".fgusgyc{text-align:unset;}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".fnsygzv{transition-duration:var(--durationFaster);}", ".f1e9ux7i{transition-timing-function:var(--curveLinear);}", ".f1xfaukr{transition-property:background;}", ".f1cxpek8{text-transform:none;}", ".f1ub7u0d{align-self:stretch;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f10pi13n{position:relative;}", ".f1s9ku6b{justify-content:start;}", [".f1u2hskj{gap:var(--spacingVerticalL);}", {
+    p: -1
+  }], ".f3rmtva{background-color:transparent;}", ".f107v6xj{min-width:28px;}", ".f1y335lp{-webkit-padding-end:12px;padding-inline-end:12px;}", ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}", ".fibmr9j{padding-block-start:5px;}", ".f1s2louj{align-items:start;}", ".fjtod8q{padding-block-start:9px;}"],
+  h: [".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"],
+  a: [".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"]
+});
+/**
+ * Apply styling to the SplitNavItem slots based on the state
+ */
+export const useSplitNavItemStyles_unstable = state => {
+  'use no memo';
+
+  const splitNavItemStyles = useSplitNaveItemStyles();
+  const sharedRootClassNames = useRootDefaultClassName();
+  state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
+  if (state.navItem) {
+    state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
+  }
+  if (state.actionButton) {
+    state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
+  }
+  if (state.toggleButton) {
+    state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
+  }
+  if (state.menuButton) {
+    state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
+  }
+  return state;
+};

package/lib/components/SplitNavItem/useSplitNavItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","navItemTokens","useRootDefaultClassName","tokens","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","useSplitNaveItemStyles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","d","p","h","a","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitNavItemClassNames = {\n    root: 'fui-SplitNavItem',\n    navItem: 'fui-SplitNavItem__navItem',\n    actionButton: 'fui-SplitNavItem__actionButton',\n    toggleButton: 'fui-SplitNavItem__toggleButton',\n    menuButton: 'fui-SplitNavItem__menuButton',\n    /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n    baseRoot: {\n        display: 'flex',\n        gap: 'unset',\n        alignItems: 'stretch',\n        padding: 'unset',\n        textAlign: 'unset',\n        backgroundColor: navItemTokens.backgroundColor,\n        ...navItemTokens.transitionTokens,\n        ':hover': {\n            backgroundColor: navItemTokens.backgroundColorHover\n        },\n        ':active': {\n            backgroundColor: navItemTokens.backgroundColorPressed\n        }\n    },\n    baseNavItem: {\n        // styles that we want to disagree with the default on\n        display: 'flex',\n        textTransform: 'none',\n        alignSelf: 'stretch',\n        textAlign: 'left',\n        position: 'relative',\n        justifyContent: 'start',\n        gap: tokens.spacingVerticalL,\n        backgroundColor: 'transparent'\n    },\n    baseSecondary: {\n        minWidth: '28px',\n        paddingInlineEnd: '12px',\n        paddingInlineStart: '5px',\n        paddingBlockStart: '5px',\n        alignItems: 'start'\n    },\n    baseMedium: {\n        paddingBlockStart: '9px'\n    }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const splitNavItemStyles = useSplitNaveItemStyles();\n    const sharedRootClassNames = useRootDefaultClassName();\n    state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n    if (state.navItem) {\n        state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n    }\n    if (state.actionButton) {\n        state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n    }\n    if (state.toggleButton) {\n        state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n    }\n    if (state.menuButton) {\n        state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,OAAO,EAAE,2BAA2B;EACpCC,YAAY,EAAE,gCAAgC;EAC9CC,YAAY,EAAE,gCAAgC;EAC9CC,UAAU,EAAE,8BAA8B;EAC1C;AACJ;AACA;EAAMC,mBAAmB,EAAE,uCAAuC;EAC9DC,mBAAmB,EAAE,uCAAuC;EAC5DC,iBAAiB,EAAE;AACvB,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGd,QAAA;EAAAe,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAAjB,MAAA;IAAAkB,OAAA;IAAAC,MAAA;IAAAT,MAAA;IAAAU,MAAA;IAAAC,OAAA;IAAApB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;EAAA;EAAAW,aAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAtB,OAAA;EAAA;EAAAuB,UAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAqClC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,kBAAkB,GAAGpC,sBAAsB,CAAC,CAAC;EACnD,MAAMqC,oBAAoB,GAAGhD,uBAAuB,CAAC,CAAC;EACtD8C,KAAK,CAAC3C,IAAI,CAAC8C,SAAS,GAAGnD,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAE6C,oBAAoB,EAAED,kBAAkB,CAACnC,QAAQ,EAAEkC,KAAK,CAAC3C,IAAI,CAAC8C,SAAS,CAAC;EACzI,IAAIH,KAAK,CAAC1C,OAAO,EAAE;IACf0C,KAAK,CAAC1C,OAAO,CAAC6C,SAAS,GAAGnD,YAAY,CAACI,sBAAsB,CAACE,OAAO,EAAE2C,kBAAkB,CAACjB,WAAW,EAAEgB,KAAK,CAAC1C,OAAO,CAAC6C,SAAS,CAAC;EACnI;EACA,IAAIH,KAAK,CAACzC,YAAY,EAAE;IACpByC,KAAK,CAACzC,YAAY,CAAC4C,SAAS,GAAGnD,YAAY,CAACI,sBAAsB,CAACG,YAAY,EAAE0C,kBAAkB,CAACZ,aAAa,EAAEW,KAAK,CAACI,OAAO,KAAK,QAAQ,IAAIH,kBAAkB,CAACP,UAAU,EAAEM,KAAK,CAACzC,YAAY,CAAC4C,SAAS,CAAC;EACjN;EACA,IAAIH,KAAK,CAACxC,YAAY,EAAE;IACpBwC,KAAK,CAACxC,YAAY,CAAC2C,SAAS,GAAGnD,YAAY,CAACI,sBAAsB,CAACI,YAAY,EAAEyC,kBAAkB,CAACZ,aAAa,EAAEW,KAAK,CAACI,OAAO,KAAK,QAAQ,IAAIH,kBAAkB,CAACP,UAAU,EAAEM,KAAK,CAACxC,YAAY,CAAC2C,SAAS,CAAC;EACjN;EACA,IAAIH,KAAK,CAACvC,UAAU,EAAE;IAClBuC,KAAK,CAACvC,UAAU,CAAC0C,SAAS,GAAGnD,YAAY,CAACI,sBAAsB,CAACK,UAAU,EAAEwC,kBAAkB,CAACZ,aAAa,EAAEW,KAAK,CAACI,OAAO,KAAK,QAAQ,IAAIH,kBAAkB,CAACP,UAAU,EAAEM,KAAK,CAACvC,UAAU,CAAC0C,SAAS,CAAC;EAC3M;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/sharedNavStyles.styles.js

@@ -0,0 +1,147 @@
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __resetStyles, __styles } from '@griffel/react';
+// Styles shared by several nav components.
+export const navItemTokens = {
+  defaultDrawerWidth: 260,
+  indicatorOffset: 16,
+  indicatorWidth: 4,
+  indicatorHeight: 20,
+  backgroundColor: tokens.colorNeutralBackground4,
+  backgroundColorHover: tokens.colorNeutralBackground4Hover,
+  backgroundColorPressed: tokens.colorNeutralBackground4Pressed,
+  animationTokens: {
+    animationDuration: tokens.durationFaster,
+    animationFillMode: 'both',
+    animationTimingFunction: tokens.curveLinear
+  },
+  transitionTokens: {
+    transitionDuration: tokens.durationFaster,
+    transitionTimingFunction: tokens.curveLinear,
+    transitionProperty: 'background'
+  }
+};
+/**
+ * Styles for the root slot
+ * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
+ */
+export const useRootDefaultClassName = /*#__PURE__*/__resetStyles("rdi7s9k", "r94071", [".rdi7s9k{display:flex;text-transform:none;position:relative;justify-content:start;align-items:flex-start;text-align:left;gap:var(--spacingVerticalL);padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge);background-color:var(--colorNeutralBackground4);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);text-decoration-line:none;border:none;box-sizing:border-box;cursor:pointer;transition-duration:var(--durationFaster);transition-timing-function:var(--curveLinear);transition-property:background;width:100%;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".rdi7s9k:hover{background-color:var(--colorNeutralBackground4Hover);}", ".rdi7s9k:focus-visible{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);}", ".r94071{display:flex;text-transform:none;position:relative;justify-content:start;align-items:flex-start;text-align:right;gap:var(--spacingVerticalL);padding:var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge) var(--spacingVerticalMNudge) var(--spacingHorizontalS);background-color:var(--colorNeutralBackground4);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);text-decoration-line:none;border:none;box-sizing:border-box;cursor:pointer;transition-duration:var(--durationFaster);transition-timing-function:var(--curveLinear);transition-property:background;width:100%;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".r94071:hover{background-color:var(--colorNeutralBackground4Hover);}", ".r94071:focus-visible{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);}"]);
+export const useSmallStyles = /*#__PURE__*/__styles({
+  root: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f1434i56", "f1jkyjtc"]
+  }
+}, {
+  d: [[".f1434i56{padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], [".f1jkyjtc{padding:var(--spacingVerticalXS) var(--spacingHorizontalMNudge) var(--spacingVerticalXS) var(--spacingHorizontalS);}", {
+    p: -1
+  }]]
+});
+/**
+ * Styles for the content slot (children)
+ * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
+ */
+export const useContentStyles = /*#__PURE__*/__styles({
+  selected: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+});
+/**
+ * French fry styles
+ * Shared across NavItem, NavCategoryItem, and NavSubItem
+ */
+export const useIndicatorStyles = /*#__PURE__*/__styles({
+  base: {
+    E3zdtr: "f1mdlcz9",
+    xr36ep: "fpil94b",
+    B67388b: "f90z1up",
+    Bitv4sc: "f2ic3ny",
+    Br128sd: "f1xz7mvd",
+    rjyhj6: "f3i5gj0",
+    Bjyk6c5: "fi4v1pz",
+    Dlnsje: "f1tvrmnx",
+    a2br6o: "f1p1ggug",
+    d9w3h3: 0,
+    B3778ie: 0,
+    B4j8arr: 0,
+    Bl18szs: 0,
+    Blrzh8d: "f3b9emi",
+    Bsft5z2: "f13zj6fq",
+    faxfa8: 0,
+    bj685l: 0,
+    Bovfycw: 0,
+    B8cfl5i: "fl9mdp8",
+    Bg7zzdw: "f6174p6"
+  }
+}, {
+  d: [".f1mdlcz9::after{position:absolute;}", ".fpil94b::after{animation-duration:var(--durationFaster);}", ".f90z1up::after{animation-fill-mode:both;}", ".f2ic3ny::after{animation-timing-function:var(--curveLinear);}", ".f1xz7mvd::after{animation-name:f1ayorr4;}", ".f3i5gj0::after{-webkit-margin-start:-16px;margin-inline-start:-16px;}", ".fi4v1pz::after{background-color:var(--colorCompoundBrandForeground1);}", ".f1tvrmnx::after{height:20px;}", ".f1p1ggug::after{width:4px;}", [".f3b9emi::after{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".f13zj6fq::after{content:\"\";}"],
+  k: ["@keyframes f1ayorr4{0%{background:transparent;}100%{background:var(--colorCompoundBrandForeground1);}}"],
+  m: [["@media (forced-colors: active){.fl9mdp8::after{outline:solid 2px var(--colorTransparentStroke);}}", {
+    p: -1,
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f6174p6::after{outline-offset:-2px;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+/**
+ * Styles for the icon slot
+ * Shared across NavItem, NavCategoryItem, and NavSubItem
+ * We use the grid trick to stack the filled and regular icons on top of each other
+ */
+export const useIconStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f13qh94s",
+    zoa1oz: "fngvled",
+    sshi5w: "f16gbxbe",
+    Bf4jedk: "f11u7vat",
+    Bt984gj: "f1w4ww9t",
+    Brf1p80: "f4d9j23",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    B9gejnh: 0,
+    yr4pdu: 0,
+    Bvkmzld: 0,
+    mqdk8l: 0,
+    Gbjhqp: "f1uiug86",
+    obb2bi: "fwrh02z",
+    D0sxk3: "f16u1re",
+    Esdz9e: 0,
+    Bqil8sh: 0,
+    Bbom3er: 0,
+    djjtid: 0,
+    mz70lj: "f1jsjwoh",
+    t6yez3: "f8bsbmo"
+  },
+  selected: {
+    C9vb3z: "f5rs5gh",
+    ux3ctl: "f1ioc1t6",
+    Ba906uv: "fey0lwf",
+    D0sxk3: "fxoiby5",
+    hndn0g: "fnh0dvc",
+    cw2nnk: "fp7jrvw",
+    Bkztwl0: "fdt4y6x",
+    H8nmoi: "fvl64og",
+    ipgedg: "ffh1t26"
+  }
+}, {
+  d: [".f13qh94s{display:grid;}", ".fngvled{grid-template-areas:overlay-area;}", ".f16gbxbe{min-height:20px;}", ".f11u7vat{min-width:20px;}", ".f1w4ww9t{align-items:top;}", ".f4d9j23{justify-content:center;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".f1uiug86 .fui-Icon-filled{grid-area:overlay-area;}", {
+    p: -1
+  }], ".fwrh02z .fui-Icon-filled{color:transparent;}", ".f16u1re .fui-Icon-filled{display:none;}", [".f1jsjwoh .fui-Icon-regular{grid-area:overlay-area;}", {
+    p: -1
+  }], ".f8bsbmo .fui-Icon-regular{display:inline;}", ".f5rs5gh .fui-Icon-filled{animation-duration:var(--durationFaster);}", ".f1ioc1t6 .fui-Icon-filled{animation-fill-mode:both;}", ".fey0lwf .fui-Icon-filled{animation-timing-function:var(--curveLinear);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".fnh0dvc .fui-Icon-filled{animation-name:f9t3kp0;}", ".fp7jrvw .fui-Icon-regular{animation-duration:var(--durationFaster);}", ".fdt4y6x .fui-Icon-regular{animation-fill-mode:both;}", ".fvl64og .fui-Icon-regular{animation-timing-function:var(--curveLinear);}", ".ffh1t26 .fui-Icon-regular{animation-name:fvunsy5;}"],
+  k: ["@keyframes f9t3kp0{0%{opacity:0;color:transparent;}100%{opacity:1;color:var(--colorNeutralForeground2BrandSelected);}}", "@keyframes fvunsy5{0%{opacity:1;color:var(--colorNeutralForeground2);}100%{opacity:0;color:transparent;}}"]
+});

package/lib/components/sharedNavStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","faxfa8","bj685l","Bovfycw","B8cfl5i","Bg7zzdw","k","m","useIconStyles","mc9l5x","zoa1oz","sshi5w","Bf4jedk","Bt984gj","Brf1p80","B68tc82","Bmxbyg5","Bpg54ce","B9gejnh","yr4pdu","Bvkmzld","mqdk8l","Gbjhqp","obb2bi","D0sxk3","Esdz9e","Bqil8sh","Bbom3er","djjtid","mz70lj","t6yez3","C9vb3z","ux3ctl","Ba906uv","hndn0g","cw2nnk","Bkztwl0","H8nmoi","ipgedg"],"sources":["sharedNavStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n    defaultDrawerWidth: 260,\n    indicatorOffset: 16,\n    indicatorWidth: 4,\n    indicatorHeight: 20,\n    backgroundColor: tokens.colorNeutralBackground4,\n    backgroundColorHover: tokens.colorNeutralBackground4Hover,\n    backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n    animationTokens: {\n        animationDuration: tokens.durationFaster,\n        animationFillMode: 'both',\n        animationTimingFunction: tokens.curveLinear\n    },\n    transitionTokens: {\n        transitionDuration: tokens.durationFaster,\n        transitionTimingFunction: tokens.curveLinear,\n        transitionProperty: 'background'\n    }\n};\n/**\n * Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useRootDefaultClassName = makeResetStyles({\n    display: 'flex',\n    textTransform: 'none',\n    position: 'relative',\n    justifyContent: 'start',\n    alignItems: 'flex-start',\n    textAlign: 'left',\n    gap: tokens.spacingVerticalL,\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n    backgroundColor: navItemTokens.backgroundColor,\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground2,\n    textDecorationLine: 'none',\n    border: 'none',\n    // this element can change between a button and an anchor\n    // so we need to reset box sizing to prevent horizontal overflow\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    transitionDuration: navItemTokens.animationTokens.animationDuration,\n    transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n    transitionProperty: 'background',\n    width: '100%',\n    ...typographyStyles.body1,\n    ':hover': {\n        backgroundColor: navItemTokens.backgroundColorHover\n    },\n    // Use custom insert focus indicator\n    '&:focus-visible': {\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`\n    }\n});\nexport const useSmallStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n    }\n});\n/**\n * Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */ export const useContentStyles = makeStyles({\n    selected: typographyStyles.body1Strong\n});\n/**\n * French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n */ export const useIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            position: 'absolute',\n            ...navItemTokens.animationTokens,\n            animationName: {\n                '0%': {\n                    background: 'transparent'\n                },\n                '100%': {\n                    background: tokens.colorCompoundBrandForeground1\n                }\n            },\n            marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n            backgroundColor: tokens.colorCompoundBrandForeground1,\n            height: `${navItemTokens.indicatorHeight}px`,\n            width: `${navItemTokens.indicatorWidth}px`,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"'\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                outline: `solid 2px ${tokens.colorTransparentStroke}`,\n                outlineOffset: '-2px'\n            }\n        }\n    }\n});\n/**\n * Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n    base: {\n        display: 'grid',\n        gridTemplateAreas: 'overlay-area',\n        minHeight: '20px',\n        minWidth: '20px',\n        alignItems: 'top',\n        justifyContent: 'center',\n        overflow: 'hidden',\n        [`& .${iconFilledClassName}`]: {\n            gridArea: 'overlay-area',\n            color: 'transparent',\n            display: 'none'\n        },\n        [`& .${iconRegularClassName}`]: {\n            gridArea: 'overlay-area',\n            display: 'inline'\n        }\n    },\n    selected: {\n        [`& .${iconFilledClassName}`]: {\n            ...navItemTokens.animationTokens,\n            display: 'inline',\n            animationName: {\n                '0%': {\n                    opacity: 0,\n                    color: 'transparent'\n                },\n                '100%': {\n                    opacity: 1,\n                    color: tokens.colorNeutralForeground2BrandSelected\n                }\n            }\n        },\n        [`& .${iconRegularClassName}`]: {\n            ...navItemTokens.animationTokens,\n            animationName: {\n                '0%': {\n                    opacity: 1,\n                    color: tokens.colorNeutralForeground2\n                },\n                '100%': {\n                    opacity: 0,\n                    color: 'transparent'\n                }\n            }\n        }\n    }\n});\n"],"mappings":"AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,QAA4C,gBAAgB;AAC5D;AACA,OAAO,MAAMC,aAAa,GAAG;EACzBC,kBAAkB,EAAE,GAAG;EACvBC,eAAe,EAAE,EAAE;EACnBC,cAAc,EAAE,CAAC;EACjBC,eAAe,EAAE,EAAE;EACnBC,eAAe,EAAET,MAAM,CAACU,uBAAuB;EAC/CC,oBAAoB,EAAEX,MAAM,CAACY,4BAA4B;EACzDC,sBAAsB,EAAEb,MAAM,CAACc,8BAA8B;EAC7DC,eAAe,EAAE;IACbC,iBAAiB,EAAEhB,MAAM,CAACiB,cAAc;IACxCC,iBAAiB,EAAE,MAAM;IACzBC,uBAAuB,EAAEnB,MAAM,CAACoB;EACpC,CAAC;EACDC,gBAAgB,EAAE;IACdC,kBAAkB,EAAEtB,MAAM,CAACiB,cAAc;IACzCM,wBAAwB,EAAEvB,MAAM,CAACoB,WAAW;IAC5CI,kBAAkB,EAAE;EACxB;AACJ,CAAC;AACD;AACA;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,gBAAGvB,aAAA,w5DA+B1C,CAAC;AACF,OAAO,MAAMwB,cAAc,gBAAGvB,QAAA;EAAAwB,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAI7B,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,gBAAGhC,QAAA;EAAAiC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAP,CAAA;AAAA,CAEnC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMQ,kBAAkB,gBAAGtC,QAAA;EAAAuC,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAA7B,CAAA;IAAAC,CAAA;EAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAA9B,CAAA;IAAA8B,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrC,CAAC;AACF;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAG9D,QAAA;EAAAuC,IAAA;IAAAwB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAnD,QAAA;IAAAoD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAT,MAAA;IAAAU,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA9D,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAA6B,CAAA;AAAA,CAgDhC,CAAC","ignoreList":[]}

package/lib/components/useNavCategoryContextValues_unstable.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export function useNavCategoryContextValues_unstable(state) {
+    const { open, value } = state;
+    const navCategory = React.useMemo(()=>({
+            open,
+            value
+        }), [
+        open,
+        value
+    ]);
+    return {
+        categoryValue: navCategory
+    };
+}

package/lib/components/useNavCategoryContextValues_unstable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/useNavCategoryContextValues_unstable.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavCategoryState } from '../NavCategory';\nimport { NavCategoryContextValue, NavCategoryContextValues } from './NavCategoryContext';\n\nexport function useNavCategoryContextValues_unstable(state: NavCategoryState): NavCategoryContextValues {\n  const { open, value } = state;\n  const navCategory = React.useMemo<NavCategoryContextValue>(() => ({ open, value }), [open, value]);\n\n  return { categoryValue: navCategory };\n}\n"],"names":["React","useNavCategoryContextValues_unstable","state","open","value","navCategory","useMemo","categoryValue"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAMG,cAAcL,MAAMM,OAAO,CAA0B,IAAO,CAAA;YAAEH;YAAMC;QAAM,CAAA,GAAI;QAACD;QAAMC;KAAM;IAEjG,OAAO;QAAEG,eAAeF;IAAY;AACtC"}

package/lib/components/useNavCategoryItemContextValues_unstable.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export function useNavCategoryItemContextValues_unstable(state) {
+    const { open, value } = state;
+    const navCategoryItem = React.useMemo(()=>({
+            open,
+            value
+        }), [
+        open,
+        value
+    ]);
+    return {
+        navCategoryItem
+    };
+}