@fluentui/react-tabs 9.4.29 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Thu, 15 Aug 2024 08:18:59 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:15:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.5.0)
+
+Tue, 10 Sep 2024 10:15:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.30..@fluentui/react-tabs_v9.5.0)
+
+### Minor changes
+
+- export Tab component style hooks ([PR #32125](https://github.com/microsoft/fluentui/pull/32125) by kirpadv@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.66 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
+### Patches
+
+- fix: Improve animation for active tab indicator on tabs with falsy values ([PR #32374](https://github.com/microsoft/fluentui/pull/32374) by kirpadv@gmail.com)
+
+## [9.4.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.30)
+
+Thu, 15 Aug 2024 13:49:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.29..@fluentui/react-tabs_v9.4.30)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
+
 ## [9.4.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.29)
 
-Thu, 15 Aug 2024 08:18:59 GMT 
+Thu, 15 Aug 2024 08:22:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.28..@fluentui/react-tabs_v9.4.29)
 
 ### Patches

package/dist/index.d.ts

@@ -240,6 +240,40 @@ export declare type TabValue = unknown;
  */
 export declare const useTab_unstable: (props: TabProps, ref: React_2.Ref<HTMLElement>) => TabState;
 
+/**
+ * Applies styles to the Tab button slot based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The Tab component's current state
+ * @param slot - The button slot of the Tab component
+ * @returns The state object with updated button styles
+ */
+export declare const useTabButtonStyles_unstable: (state: TabState, slot: TabState['root']) => TabState;
+
+/**
+ * Applies styles to the Tab content slot based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The Tab component's current state
+ * @returns The state object with updated content styles
+ */
+export declare const useTabContentStyles_unstable: (state: TabState) => TabState;
+
+/**
+ * Applies styles for the Tab indicator based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The `Tab` component's current state
+ * @returns The state object with updated button styles
+ */
+export declare const useTabIndicatorStyles_unstable: (state: TabState) => TabState;
+
 /**
  * Create the state required to render TabList.
  *

package/lib/components/Tab/useTabAnimatedIndicator.styles.js

@@ -59,9 +59,11 @@ const calculateTabRect = element => {
 };
 const getRegisteredTabRect = (registeredTabs, value) => {
   var _registeredTabs_JSON_stringify;
-  const element = value !== undefined && value !== null ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;
+  const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;
   return element ? calculateTabRect(element) : undefined;
 };
+// eslint-disable-next-line eqeqeq
+const isValueDefined = value => value != null;
 /**
  * Adds additional styling to the active tab selection indicator to create a sliding animation.
  */
@@ -79,7 +81,7 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
   });
   const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);
   React.useEffect(() => {
-    if (lastAnimatedFrom) {
+    if (isValueDefined(lastAnimatedFrom)) {
       setAnimationValues({
         offset: 0,
         scale: 1
@@ -92,7 +94,7 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
       selectedValue,
       registeredTabs
     } = getRegisteredTabs();
-    if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
+    if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
       const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
       const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
       if (selectedTabRect && previousSelectedTabRect) {
@@ -105,7 +107,7 @@ export const useTabAnimatedIndicatorStyles_unstable = state => {
         setLastAnimatedFrom(previousSelectedValue);
       }
     }
-  } else if (lastAnimatedFrom) {
+  } else if (isValueDefined(lastAnimatedFrom)) {
     // need to clear the last animated from so that if this tab is selected again
     // from the same previous tab as last time, that animation still happens.
     setLastAnimatedFrom(undefined);

package/lib/components/Tab/useTabAnimatedIndicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n    offsetVar: '--fui-Tab__indicator--offset',\n    scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        // overflow is required to allow the selection indicator to animate outside the tab area.\n        overflow: 'visible'\n    },\n    animated: {\n        '::after': {\n            transitionProperty: 'transform',\n            transitionDuration: `${tokens.durationSlow}`,\n            transitionTimingFunction: `${tokens.curveDecelerateMax}`\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n            '::after': {\n                transitionProperty: 'none',\n                transitionDuration: '0.01ms'\n            }\n        }\n    },\n    horizontal: {\n        '::after': {\n            transformOrigin: 'left',\n            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    },\n    vertical: {\n        '::after': {\n            transformOrigin: 'top',\n            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    }\n});\nconst calculateTabRect = (element)=>{\n    if (element) {\n        var _element_parentElement;\n        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 0\n        };\n        const tabRect = element.getBoundingClientRect();\n        return {\n            x: tabRect.x - parentRect.x,\n            y: tabRect.y - parentRect.y,\n            width: tabRect.width,\n            height: tabRect.height\n        };\n    }\n    return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n    var _registeredTabs_JSON_stringify;\n    const element = value !== undefined && value !== null ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n    return element ? calculateTabRect(element) : undefined;\n};\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n    const { disabled, selected, vertical } = state;\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n    const [animationValues, setAnimationValues] = React.useState({\n        offset: 0,\n        scale: 1\n    });\n    const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n    React.useEffect(()=>{\n        if (lastAnimatedFrom) {\n            setAnimationValues({\n                offset: 0,\n                scale: 1\n            });\n        }\n    }, [\n        lastAnimatedFrom\n    ]);\n    if (selected) {\n        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n        if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\n            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n            if (selectedTabRect && previousSelectedTabRect) {\n                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n                setAnimationValues({\n                    offset,\n                    scale\n                });\n                setLastAnimatedFrom(previousSelectedValue);\n            }\n        }\n    } else if (lastAnimatedFrom) {\n        // need to clear the last animated from so that if this tab is selected again\n        // from the same previous tab as last time, that animation still happens.\n        setLastAnimatedFrom(undefined);\n    }\n    // do not apply any animation if the tab is disabled\n    if (disabled) {\n        return state;\n    }\n    // the animation should only happen as the selection indicator returns to its\n    // original position and not when set at the previous tabs position.\n    const animating = animationValues.offset === 0 && animationValues.scale === 1;\n    state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n    const rootCssVars = {\n        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n    };\n    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","__styles","mergeClasses","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","useTabAnimatedIndicatorStyles_unstable","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","rootCssVars","style"],"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n    offsetVar: '--fui-Tab__indicator--offset',\n    scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        // overflow is required to allow the selection indicator to animate outside the tab area.\n        overflow: 'visible'\n    },\n    animated: {\n        '::after': {\n            transitionProperty: 'transform',\n            transitionDuration: `${tokens.durationSlow}`,\n            transitionTimingFunction: `${tokens.curveDecelerateMax}`\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n            '::after': {\n                transitionProperty: 'none',\n                transitionDuration: '0.01ms'\n            }\n        }\n    },\n    horizontal: {\n        '::after': {\n            transformOrigin: 'left',\n            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    },\n    vertical: {\n        '::after': {\n            transformOrigin: 'top',\n            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    }\n});\nconst calculateTabRect = (element)=>{\n    if (element) {\n        var _element_parentElement;\n        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 0\n        };\n        const tabRect = element.getBoundingClientRect();\n        return {\n            x: tabRect.x - parentRect.x,\n            y: tabRect.y - parentRect.y,\n            width: tabRect.width,\n            height: tabRect.height\n        };\n    }\n    return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n    var _registeredTabs_JSON_stringify;\n    const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n    return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n    const { disabled, selected, vertical } = state;\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n    const [animationValues, setAnimationValues] = React.useState({\n        offset: 0,\n        scale: 1\n    });\n    const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n    React.useEffect(()=>{\n        if (isValueDefined(lastAnimatedFrom)) {\n            setAnimationValues({\n                offset: 0,\n                scale: 1\n            });\n        }\n    }, [\n        lastAnimatedFrom\n    ]);\n    if (selected) {\n        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n            if (selectedTabRect && previousSelectedTabRect) {\n                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n                setAnimationValues({\n                    offset,\n                    scale\n                });\n                setLastAnimatedFrom(previousSelectedValue);\n            }\n        }\n    } else if (isValueDefined(lastAnimatedFrom)) {\n        // need to clear the last animated from so that if this tab is selected again\n        // from the same previous tab as last time, that animation still happens.\n        setLastAnimatedFrom(undefined);\n    }\n    // do not apply any animation if the tab is disabled\n    if (disabled) {\n        return state;\n    }\n    // the animation should only happen as the selection indicator returns to its\n    // original position and not when set at the previous tabs position.\n    const animating = animationValues.offset === 0 && animationValues.scale === 1;\n    state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n    const rootCssVars = {\n        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n    };\n    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Tab/useTabStyles.styles.js

@@ -18,9 +18,19 @@ const iconClassNames = {
 };
 /**
  * Styles for the root slot
- */ /* eslint-disable @typescript-eslint/naming-convention */
+ */
 const useRootStyles = /*#__PURE__*/__styles({
-  base: {
+  root: {
+    Bt984gj: "f122n59",
+    mc9l5x: "f13qh94s",
+    Bnnss6s: "fi64zpg",
+    Bxotwcr: "f1u07yai",
+    Budl1dq: "frn2hmy",
+    wkccdc: "f1olsevy",
+    oeaueh: "f1s6fcnf",
+    qhf8xq: "f10pi13n"
+  },
+  button: {
     Bt984gj: "f122n59",
     Bgfg5da: 0,
     B9xav0g: 0,
@@ -150,11 +160,11 @@ const useRootStyles = /*#__PURE__*/__styles({
     a4hkcw: "fhklyu5"
   }
 }, {
-  d: [".f122n59{align-items:center;}", [".f3bhgqh{border:none;}", {
+  d: [".f122n59{align-items:center;}", ".f13qh94s{display:grid;}", ".fi64zpg{flex-shrink:0;}", ".f1u07yai{grid-auto-flow:column;}", ".frn2hmy{grid-template-columns:auto;}", ".f1olsevy{grid-template-rows:auto;}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", [".f3bhgqh{border:none;}", {
     p: -2
   }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
     p: -1
-  }], ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fi64zpg{flex-shrink:0;}", ".f1u07yai{grid-auto-flow:column;}", ".frn2hmy{grid-template-columns:auto;}", ".f1olsevy{grid-template-rows:auto;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1s6fcnf{outline-style:none;}", ".f10pi13n{position:relative;}", [".f1a3p1vp{overflow:hidden;}", {
+  }], ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
   }], ".f1cxpek8{text-transform:none;}", ".f4d9j23{justify-content:center;}", ".f1s9ku6b{justify-content:start;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", [".f1wmopi4{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalSNudge);}", {
     p: -1
@@ -172,9 +182,9 @@ const useRootStyles = /*#__PURE__*/__styles({
   h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1mfqf41:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}", ".f149wc3x:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1ck17l:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}", ".ffth601:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}"],
   a: [".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f10aiid4:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}", ".fjioou7:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f42ak0g:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}", ".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}"]
 });
-/* eslint-enable @typescript-eslint/naming-convention */ /**
-                                                         * Focus styles for the root slot
-                                                         */
+/**
+ * Focus styles for the root slot
+ */
 const useFocusStyles = /*#__PURE__*/__styles({
   base: {
     B8q5s1w: "f8hki3x",
@@ -438,24 +448,83 @@ const useContentStyles = /*#__PURE__*/__styles({
 export const useTabStyles_unstable = state => {
   'use no memo';
 
+  useTabIndicatorStyles_unstable(state);
+  useTabButtonStyles_unstable(state, state.root);
+  useTabContentStyles_unstable(state);
+  return state;
+};
+/**
+ * Applies styles for the Tab indicator based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The `Tab` component's current state
+ * @returns The state object with updated button styles
+ */
+export const useTabIndicatorStyles_unstable = state => {
+  'use no memo';
+
   const rootStyles = useRootStyles();
-  const focusStyles = useFocusStyles();
   const pendingIndicatorStyles = usePendingIndicatorStyles();
   const activeIndicatorStyles = useActiveIndicatorStyles();
-  const iconStyles = useIconStyles();
-  const contentStyles = useContentStyles();
   const {
-    appearance,
     disabled,
     selected,
     size,
     vertical
   } = state;
-  state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled,
+  state.root.className = mergeClasses(tabClassNames.root, rootStyles.root,
   // pending indicator (before pseudo element)
   pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled,
   // active indicator (after pseudo element)
   selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
+  useTabAnimatedIndicatorStyles_unstable(state);
+  return state;
+};
+/**
+ * Applies styles to the Tab button slot based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The Tab component's current state
+ * @param slot - The button slot of the Tab component
+ * @returns The state object with updated button styles
+ */
+export const useTabButtonStyles_unstable = (state, slot) => {
+  'use no memo';
+
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const {
+    appearance,
+    disabled,
+    selected,
+    size,
+    vertical
+  } = state;
+  slot.className = mergeClasses(rootStyles.button, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, slot.className);
+  return state;
+};
+/**
+ * Applies styles to the Tab content slot based on its current state.
+ *
+ * This hook is typically used internally by `useTabStyles_unstable`. You should
+ * only use it directly if you're creating a custom `Tab` component.
+ *
+ * @param state - The Tab component's current state
+ * @returns The state object with updated content styles
+ */
+export const useTabContentStyles_unstable = state => {
+  'use no memo';
+
+  const iconStyles = useIconStyles();
+  const contentStyles = useContentStyles();
+  const {
+    selected,
+    size
+  } = state;
   if (state.icon) {
     state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
   }
@@ -468,7 +537,6 @@ export const useTabStyles_unstable = state => {
     state.contentReservedSpaceClassName = state.contentReservedSpace.className;
   }
   state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
-  useTabAnimatedIndicatorStyles_unstable(state);
   return state;
 };
 //# sourceMappingURL=useTabStyles.styles.js.map

package/lib/components/Tab/useTabStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","base","Bt984gj","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","p","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","vqofr","Bv4n3vi","Bgqb9hq","B0uxbk8","Bf3jju6","amg5m6","zkfqfm","Bkydozb","Bka2azo","vzq8l0","csmgbd","Br4ovkg","aelrif","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","E3zdtr","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","contentReservedSpace","contentReservedSpaceClassName"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ /* eslint-disable @typescript-eslint/naming-convention */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        border: 'none',\n        borderRadius: tokens.borderRadiusMedium,\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        overflow: 'hidden',\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        cursor: 'not-allowed'\n    },\n    selected: {\n        '& .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\n/* eslint-enable @typescript-eslint/naming-convention */ /**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        overflow: 'hidden',\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        overflow: 'hidden',\n        // content padding is the same for medium & small, horiztonal & vertical\n        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpace) {\n        state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n        // FIXME: this is a deprecated API\n        // should be removed in the next major version\n        // eslint-disable-next-line deprecation/deprecation\n        state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,OAAO,MAAMC,aAAa,GAAG;EACzBC,IAAI,EAAE,SAAS;EACfC,IAAI,EAAE,eAAe;EACrBC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,uBAAuB,GAAG;EAC5BD,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA,MAAME,cAAc,GAAG;EACnBC,MAAM,EAAE,iBAAiB;EACzBC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA,GAFA,CAEI;AAA0D,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;EAAAE,eAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAN,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,gBAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAG,cAAA;IAAAR,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAI,eAAA;IAAAT,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAK,aAAA;IAAAV,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,QAAA;IAAAV,MAAA;IAAAG,OAAA;IAAAG,MAAA;IAAApC,OAAA;EAAA;EAAAyC,QAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAI,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAuInF,CAAC;AACF,yDAAyD;AACzD;AACA;AAAI,MAAMC,cAAc,gBAAGtF,QAAA;EAAAgB,IAAA;IAAAuE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAb,CAAA;AAAA,CAiB1B,CAAC;AACF;AAAmD,MAAMc,yBAAyB,gBAAGhG,QAAA;EAAAgB,IAAA;IAAAiF,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAlC,QAAA;IAAAiB,MAAA;IAAAQ,OAAA;EAAA;EAAAhD,eAAA;IAAA0D,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAtD,aAAA;IAAAmD,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAvD,gBAAA;IAAAkD,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAApD,cAAA;IAAAiD,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAArD,eAAA;IAAAgD,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAlD,aAAA;IAAA+C,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAApC,CAAA;IAAAD,CAAA;EAAA;EAAAE,CAAA;IAAAF,CAAA;EAAA;EAAAsC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAvC,CAAA;AAAA,CA+EpF,CAAC;AACF,MAAMwC,wBAAwB,gBAAG1H,QAAA;EAAAgB,IAAA;IAAA2G,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAjD,QAAA;IAAA0C,OAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAvD,QAAA;IAAA2C,OAAA;EAAA;EAAAlE,eAAA;IAAA+E,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA3E,aAAA;IAAAwE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAA5E,gBAAA;IAAAuE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAzE,cAAA;IAAAsE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAA1E,eAAA;IAAAqE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAvE,aAAA;IAAAoE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA3D,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAoC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAoFhC,CAAC;AACF;AACA;AACA;AAAI,MAAMqB,aAAa,gBAAG9I,QAAA;EAAAgB,IAAA;IAAA+H,OAAA;IAAAC,MAAA;IAAA/H,OAAA;IAAAwB,MAAA;IAAAc,OAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA6F,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,KAAA;IAAAJ,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAArE,QAAA;IAAAgE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAhE,CAAA;IAAAC,CAAA;EAAA;AAAA,CAwCzB,CAAC;AACF;AACA;AACA;AAAI,MAAMsE,gBAAgB,gBAAGzJ,QAAA;EAAAgB,IAAA;IAAA8B,OAAA;IAAAsG,OAAA;IAAAM,OAAA;IAAA3G,OAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAO,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAkB,QAAA;IAAAnC,OAAA;IAAAsG,OAAA;IAAAM,OAAA;IAAA3G,OAAA;EAAA;EAAAyG,KAAA;IAAA1G,OAAA;IAAAsG,OAAA;IAAAM,OAAA;IAAA3G,OAAA;EAAA;EAAA4G,aAAA;IAAA7G,OAAA;IAAAsG,OAAA;IAAAM,OAAA;IAAA3G,OAAA;EAAA;EAAA6G,YAAA;IAAAb,OAAA;IAAAC,MAAA;EAAA;EAAAa,UAAA;IAAAd,OAAA;IAAAC,MAAA;EAAA;EAAAc,WAAA;IAAAC,OAAA;EAAA;AAAA;EAAA7E,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2B5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM6E,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,aAAa;;EACb,MAAMC,UAAU,GAAGnJ,aAAa,CAAC,CAAC;EAClC,MAAMoJ,WAAW,GAAG7E,cAAc,CAAC,CAAC;EACpC,MAAM8E,sBAAsB,GAAGpE,yBAAyB,CAAC,CAAC;EAC1D,MAAMqE,qBAAqB,GAAG3C,wBAAwB,CAAC,CAAC;EACxD,MAAM4C,UAAU,GAAGxB,aAAa,CAAC,CAAC;EAClC,MAAMyB,aAAa,GAAGd,gBAAgB,CAAC,CAAC;EACxC,MAAM;IAAEe,UAAU;IAAExF,QAAQ;IAAEC,QAAQ;IAAEwF,IAAI;IAAEjH;EAAS,CAAC,GAAGyG,KAAK;EAChEA,KAAK,CAACzJ,IAAI,CAACkK,SAAS,GAAGzK,YAAY,CAACM,aAAa,CAACC,IAAI,EAAE0J,UAAU,CAAClJ,IAAI,EAAEwC,QAAQ,GAAG0G,UAAU,CAAC1G,QAAQ,GAAG0G,UAAU,CAAC5G,UAAU,EAAEmH,IAAI,KAAK,OAAO,KAAKjH,QAAQ,GAAG0G,UAAU,CAAClG,aAAa,GAAGkG,UAAU,CAACzG,eAAe,CAAC,EAAEgH,IAAI,KAAK,QAAQ,KAAKjH,QAAQ,GAAG0G,UAAU,CAAChG,cAAc,GAAGgG,UAAU,CAACjG,gBAAgB,CAAC,EAAEwG,IAAI,KAAK,OAAO,KAAKjH,QAAQ,GAAG0G,UAAU,CAAC9F,aAAa,GAAG8F,UAAU,CAAC/F,eAAe,CAAC,EAAEgG,WAAW,CAACnJ,IAAI,EAAE,CAACgE,QAAQ,IAAIwF,UAAU,KAAK,QAAQ,IAAIN,UAAU,CAACnF,MAAM,EAAE,CAACC,QAAQ,IAAIwF,UAAU,KAAK,aAAa,IAAIN,UAAU,CAAC7F,WAAW,EAAE,CAACW,QAAQ,IAAIC,QAAQ,IAAIiF,UAAU,CAACjF,QAAQ,EAAED,QAAQ,IAAIkF,UAAU,CAAClF,QAAQ;EAAE;EAC7mBoF,sBAAsB,CAACpJ,IAAI,EAAEyJ,IAAI,KAAK,OAAO,KAAKjH,QAAQ,GAAG4G,sBAAsB,CAACpG,aAAa,GAAGoG,sBAAsB,CAAC3G,eAAe,CAAC,EAAEgH,IAAI,KAAK,QAAQ,KAAKjH,QAAQ,GAAG4G,sBAAsB,CAAClG,cAAc,GAAGkG,sBAAsB,CAACnG,gBAAgB,CAAC,EAAEwG,IAAI,KAAK,OAAO,KAAKjH,QAAQ,GAAG4G,sBAAsB,CAAChG,aAAa,GAAGgG,sBAAsB,CAACjG,eAAe,CAAC,EAAEa,QAAQ,IAAIoF,sBAAsB,CAACpF,QAAQ;EAAE;EAC7ZC,QAAQ,IAAIoF,qBAAqB,CAACrJ,IAAI,EAAEiE,QAAQ,IAAI,CAACD,QAAQ,IAAIqF,qBAAqB,CAACpF,QAAQ,EAAEA,QAAQ,IAAIwF,IAAI,KAAK,OAAO,KAAKjH,QAAQ,GAAG6G,qBAAqB,CAACrG,aAAa,GAAGqG,qBAAqB,CAAC5G,eAAe,CAAC,EAAEwB,QAAQ,IAAIwF,IAAI,KAAK,QAAQ,KAAKjH,QAAQ,GAAG6G,qBAAqB,CAACnG,cAAc,GAAGmG,qBAAqB,CAACpG,gBAAgB,CAAC,EAAEgB,QAAQ,IAAIwF,IAAI,KAAK,OAAO,KAAKjH,QAAQ,GAAG6G,qBAAqB,CAACjG,aAAa,GAAGiG,qBAAqB,CAAClG,eAAe,CAAC,EAAEc,QAAQ,IAAID,QAAQ,IAAIqF,qBAAqB,CAACrF,QAAQ,EAAEiF,KAAK,CAACzJ,IAAI,CAACkK,SAAS,CAAC;EAC/hB,IAAIT,KAAK,CAACxJ,IAAI,EAAE;IACZwJ,KAAK,CAACxJ,IAAI,CAACiK,SAAS,GAAGzK,YAAY,CAACM,aAAa,CAACE,IAAI,EAAE6J,UAAU,CAACtJ,IAAI,EAAEsJ,UAAU,CAACG,IAAI,CAAC,EAAExF,QAAQ,IAAIqF,UAAU,CAACrF,QAAQ,EAAEgF,KAAK,CAACxJ,IAAI,CAACiK,SAAS,CAAC;EACrJ;EACA;EACA,IAAIT,KAAK,CAACU,oBAAoB,EAAE;IAC5BV,KAAK,CAACU,oBAAoB,CAACD,SAAS,GAAGzK,YAAY,CAACU,uBAAuB,CAACD,OAAO,EAAE6J,aAAa,CAACvJ,IAAI,EAAEyJ,IAAI,KAAK,OAAO,GAAGF,aAAa,CAACZ,aAAa,GAAGY,aAAa,CAACtF,QAAQ,EAAEgF,KAAK,CAACxJ,IAAI,GAAG8J,aAAa,CAACV,UAAU,GAAGU,aAAa,CAACX,YAAY,EAAEW,aAAa,CAACT,WAAW,EAAEG,KAAK,CAACvJ,OAAO,CAACgK,SAAS,CAAC;IACzS;IACA;IACA;IACAT,KAAK,CAACW,6BAA6B,GAAGX,KAAK,CAACU,oBAAoB,CAACD,SAAS;EAC9E;EACAT,KAAK,CAACvJ,OAAO,CAACgK,SAAS,GAAGzK,YAAY,CAACM,aAAa,CAACG,OAAO,EAAE6J,aAAa,CAACvJ,IAAI,EAAEyJ,IAAI,KAAK,OAAO,IAAIF,aAAa,CAACf,KAAK,EAAEvE,QAAQ,KAAKwF,IAAI,KAAK,OAAO,GAAGF,aAAa,CAACZ,aAAa,GAAGY,aAAa,CAACtF,QAAQ,CAAC,EAAEgF,KAAK,CAACxJ,IAAI,GAAG8J,aAAa,CAACV,UAAU,GAAGU,aAAa,CAACX,YAAY,EAAEK,KAAK,CAACvJ,OAAO,CAACgK,SAAS,CAAC;EAC9SpK,sCAAsC,CAAC2J,KAAK,CAAC;EAC7C,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","Bt984gj","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","oeaueh","qhf8xq","button","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bceei9c","Bahqtrf","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","p","h","a","useFocusStyles","base","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","vqofr","Bv4n3vi","Bgqb9hq","B0uxbk8","Bf3jju6","amg5m6","zkfqfm","Bkydozb","Bka2azo","vzq8l0","csmgbd","Br4ovkg","aelrif","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","E3zdtr","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","useTabStyles_unstable","state","useTabIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","rootStyles","pendingIndicatorStyles","activeIndicatorStyles","size","className","slot","focusStyles","appearance","iconStyles","contentStyles","contentReservedSpace","contentReservedSpaceClassName"],"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        outlineStyle: 'none',\n        position: 'relative'\n    },\n    button: {\n        alignItems: 'center',\n        border: 'none',\n        borderRadius: tokens.borderRadiusMedium,\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        overflow: 'hidden',\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        cursor: 'not-allowed'\n    },\n    selected: {\n        '& .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\n/**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        overflow: 'hidden',\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        overflow: 'hidden',\n        // content padding is the same for medium & small, horizontal & vertical\n        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    'use no memo';\n    useTabIndicatorStyles_unstable(state);\n    useTabButtonStyles_unstable(state, state.root);\n    useTabContentStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles for the Tab indicator based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The `Tab` component's current state\n * @returns The state object with updated button styles\n */ export const useTabIndicatorStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const { disabled, selected, size, vertical } = state;\n    state.root.className = mergeClasses(tabClassNames.root, rootStyles.root, // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles to the Tab button slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @param slot - The button slot of the Tab component\n * @returns The state object with updated button styles\n */ export const useTabButtonStyles_unstable = (state, slot)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    slot.className = mergeClasses(rootStyles.button, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, slot.className);\n    return state;\n};\n/**\n * Applies styles to the Tab content slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @returns The state object with updated content styles\n */ export const useTabContentStyles_unstable = (state)=>{\n    'use no memo';\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { selected, size } = state;\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpace) {\n        state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n        // FIXME: this is a deprecated API\n        // should be removed in the next major version\n        // eslint-disable-next-line deprecation/deprecation\n        state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -1,2 +1,2 @@
-export { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';
+export { renderTab_unstable, Tab, tabClassNames, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, useTabStyles_unstable, useTab_unstable } from './Tab';
 export { renderTabList_unstable, TabList, TabListProvider, tabListClassNames, useTabListContext_unstable, useTabListContextValues_unstable, useTabListStyles_unstable, useTabList_unstable } from './TabList';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable"],"rangeMappings":";","mappings":"AACA,SAASA,kBAAkB,EAAEC,GAAG,EAAEC,aAAa,EAAEC,qBAAqB,EAAEC,eAAe,QAAQ,QAAQ;AAavG,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport {\n  renderTab_unstable,\n  Tab,\n  tabClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n} from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"],"names":["renderTab_unstable","Tab","tabClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTab_unstable","renderTabList_unstable","TabList","TabListProvider","tabListClassNames","useTabListContext_unstable","useTabListContextValues_unstable","useTabListStyles_unstable","useTabList_unstable"],"rangeMappings":";","mappings":"AACA,SACEA,kBAAkB,EAClBC,GAAG,EACHC,aAAa,EACbC,2BAA2B,EAC3BC,4BAA4B,EAC5BC,8BAA8B,EAC9BC,qBAAqB,EACrBC,eAAe,QACV,QAAQ;AAaf,SACEC,sBAAsB,EACtBC,OAAO,EACPC,eAAe,EACfC,iBAAiB,EACjBC,0BAA0B,EAC1BC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js

@@ -94,9 +94,11 @@ const calculateTabRect = (element)=>{
 };
 const getRegisteredTabRect = (registeredTabs, value)=>{
     var _registeredTabs_JSON_stringify;
-    const element = value !== undefined && value !== null ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;
+    const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;
     return element ? calculateTabRect(element) : undefined;
 };
+// eslint-disable-next-line eqeqeq
+const isValueDefined = (value)=>value != null;
 const useTabAnimatedIndicatorStyles_unstable = (state)=>{
     const { disabled, selected, vertical } = state;
     const activeIndicatorStyles = useActiveIndicatorStyles();
@@ -107,7 +109,7 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
     });
     const getRegisteredTabs = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.getRegisteredTabs);
     _react.useEffect(()=>{
-        if (lastAnimatedFrom) {
+        if (isValueDefined(lastAnimatedFrom)) {
             setAnimationValues({
                 offset: 0,
                 scale: 1
@@ -118,7 +120,7 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
     ]);
     if (selected) {
         const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
-        if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {
+        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
             const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
             const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
             if (selectedTabRect && previousSelectedTabRect) {
@@ -131,7 +133,7 @@ const useTabAnimatedIndicatorStyles_unstable = (state)=>{
                 setLastAnimatedFrom(previousSelectedValue);
             }
         }
-    } else if (lastAnimatedFrom) {
+    } else if (isValueDefined(lastAnimatedFrom)) {
         // need to clear the last animated from so that if this tab is selected again
         // from the same previous tab as last time, that animation still happens.
         setLastAnimatedFrom(undefined);

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n    offsetVar: '--fui-Tab__indicator--offset',\n    scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        // overflow is required to allow the selection indicator to animate outside the tab area.\n        overflow: 'visible'\n    },\n    animated: {\n        '::after': {\n            transitionProperty: 'transform',\n            transitionDuration: `${tokens.durationSlow}`,\n            transitionTimingFunction: `${tokens.curveDecelerateMax}`\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n            '::after': {\n                transitionProperty: 'none',\n                transitionDuration: '0.01ms'\n            }\n        }\n    },\n    horizontal: {\n        '::after': {\n            transformOrigin: 'left',\n            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    },\n    vertical: {\n        '::after': {\n            transformOrigin: 'top',\n            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    }\n});\nconst calculateTabRect = (element)=>{\n    if (element) {\n        var _element_parentElement;\n        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 0\n        };\n        const tabRect = element.getBoundingClientRect();\n        return {\n            x: tabRect.x - parentRect.x,\n            y: tabRect.y - parentRect.y,\n            width: tabRect.width,\n            height: tabRect.height\n        };\n    }\n    return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n    var _registeredTabs_JSON_stringify;\n    const element = value !== undefined && value !== null ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n    return element ? calculateTabRect(element) : undefined;\n};\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n    const { disabled, selected, vertical } = state;\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n    const [animationValues, setAnimationValues] = React.useState({\n        offset: 0,\n        scale: 1\n    });\n    const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n    React.useEffect(()=>{\n        if (lastAnimatedFrom) {\n            setAnimationValues({\n                offset: 0,\n                scale: 1\n            });\n        }\n    }, [\n        lastAnimatedFrom\n    ]);\n    if (selected) {\n        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n        if (previousSelectedValue && lastAnimatedFrom !== previousSelectedValue) {\n            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n            if (selectedTabRect && previousSelectedTabRect) {\n                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n                setAnimationValues({\n                    offset,\n                    scale\n                });\n                setLastAnimatedFrom(previousSelectedValue);\n            }\n        }\n    } else if (lastAnimatedFrom) {\n        // need to clear the last animated from so that if this tab is selected again\n        // from the same previous tab as last time, that animation still happens.\n        setLastAnimatedFrom(undefined);\n    }\n    // do not apply any animation if the tab is disabled\n    if (disabled) {\n        return state;\n    }\n    // the animation should only happen as the selection indicator returns to its\n    // original position and not when set at the previous tabs position.\n    const animating = animationValues.offset === 0 && animationValues.scale === 1;\n    state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n    const rootCssVars = {\n        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n    };\n    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","JSON","stringify","ref","current","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useTabAnimatedIndicator.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { tokens } from '@fluentui/react-theme';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n    offsetVar: '--fui-Tab__indicator--offset',\n    scaleVar: '--fui-Tab__indicator--scale'\n};\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        // overflow is required to allow the selection indicator to animate outside the tab area.\n        overflow: 'visible'\n    },\n    animated: {\n        '::after': {\n            transitionProperty: 'transform',\n            transitionDuration: `${tokens.durationSlow}`,\n            transitionTimingFunction: `${tokens.curveDecelerateMax}`\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n            '::after': {\n                transitionProperty: 'none',\n                transitionDuration: '0.01ms'\n            }\n        }\n    },\n    horizontal: {\n        '::after': {\n            transformOrigin: 'left',\n            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    },\n    vertical: {\n        '::after': {\n            transformOrigin: 'top',\n            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`\n        }\n    }\n});\nconst calculateTabRect = (element)=>{\n    if (element) {\n        var _element_parentElement;\n        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 0\n        };\n        const tabRect = element.getBoundingClientRect();\n        return {\n            x: tabRect.x - parentRect.x,\n            y: tabRect.y - parentRect.y,\n            width: tabRect.width,\n            height: tabRect.height\n        };\n    }\n    return undefined;\n};\nconst getRegisteredTabRect = (registeredTabs, value)=>{\n    var _registeredTabs_JSON_stringify;\n    const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;\n    return element ? calculateTabRect(element) : undefined;\n};\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value)=>value != null;\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */ export const useTabAnimatedIndicatorStyles_unstable = (state)=>{\n    const { disabled, selected, vertical } = state;\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState();\n    const [animationValues, setAnimationValues] = React.useState({\n        offset: 0,\n        scale: 1\n    });\n    const getRegisteredTabs = useTabListContext_unstable((ctx)=>ctx.getRegisteredTabs);\n    React.useEffect(()=>{\n        if (isValueDefined(lastAnimatedFrom)) {\n            setAnimationValues({\n                offset: 0,\n                scale: 1\n            });\n        }\n    }, [\n        lastAnimatedFrom\n    ]);\n    if (selected) {\n        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n            if (selectedTabRect && previousSelectedTabRect) {\n                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;\n                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;\n                setAnimationValues({\n                    offset,\n                    scale\n                });\n                setLastAnimatedFrom(previousSelectedValue);\n            }\n        }\n    } else if (isValueDefined(lastAnimatedFrom)) {\n        // need to clear the last animated from so that if this tab is selected again\n        // from the same previous tab as last time, that animation still happens.\n        setLastAnimatedFrom(undefined);\n    }\n    // do not apply any animation if the tab is disabled\n    if (disabled) {\n        return state;\n    }\n    // the animation should only happen as the selection indicator returns to its\n    // original position and not when set at the previous tabs position.\n    const animating = animationValues.offset === 0 && animationValues.scale === 1;\n    state.root.className = mergeClasses(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));\n    const rootCssVars = {\n        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`\n    };\n    state.root.style = {\n        ...rootCssVars,\n        ...state.root.style\n    };\n    return state;\n};\n"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","__styles","base","B68tc82","Bmxbyg5","Bpg54ce","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","p","m","calculateTabRect","element","_element_parentElement","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","_registeredTabs_JSON_stringify","isValueDefined","JSON","stringify","ref","current","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","useEffect","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Tab/useTabStyles.styles.js

@@ -12,6 +12,15 @@ _export(exports, {
     tabClassNames: function() {
         return tabClassNames;
     },
+    useTabButtonStyles_unstable: function() {
+        return useTabButtonStyles_unstable;
+    },
+    useTabContentStyles_unstable: function() {
+        return useTabContentStyles_unstable;
+    },
+    useTabIndicatorStyles_unstable: function() {
+        return useTabIndicatorStyles_unstable;
+    },
     useTabStyles_unstable: function() {
         return useTabStyles_unstable;
     }
@@ -34,8 +43,18 @@ const iconClassNames = {
 };
 /**
  * Styles for the root slot
- */ /* eslint-disable @typescript-eslint/naming-convention */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
-    base: {
+ */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bt984gj: "f122n59",
+        mc9l5x: "f13qh94s",
+        Bnnss6s: "fi64zpg",
+        Bxotwcr: "f1u07yai",
+        Budl1dq: "frn2hmy",
+        wkccdc: "f1olsevy",
+        oeaueh: "f1s6fcnf",
+        qhf8xq: "f10pi13n"
+    },
+    button: {
         Bt984gj: "f122n59",
         Bgfg5da: 0,
         B9xav0g: 0,
@@ -167,6 +186,13 @@ const iconClassNames = {
 }, {
     d: [
         ".f122n59{align-items:center;}",
+        ".f13qh94s{display:grid;}",
+        ".fi64zpg{flex-shrink:0;}",
+        ".f1u07yai{grid-auto-flow:column;}",
+        ".frn2hmy{grid-template-columns:auto;}",
+        ".f1olsevy{grid-template-rows:auto;}",
+        ".f1s6fcnf{outline-style:none;}",
+        ".f10pi13n{position:relative;}",
         [
             ".f3bhgqh{border:none;}",
             {
@@ -180,15 +206,8 @@ const iconClassNames = {
             }
         ],
         ".f1k6fduh{cursor:pointer;}",
-        ".f13qh94s{display:grid;}",
-        ".fi64zpg{flex-shrink:0;}",
-        ".f1u07yai{grid-auto-flow:column;}",
-        ".frn2hmy{grid-template-columns:auto;}",
-        ".f1olsevy{grid-template-rows:auto;}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".f1i3iumi{line-height:var(--lineHeightBase300);}",
-        ".f1s6fcnf{outline-style:none;}",
-        ".f10pi13n{position:relative;}",
         [
             ".f1a3p1vp{overflow:hidden;}",
             {
@@ -263,9 +282,9 @@ const iconClassNames = {
         ".fhklyu5:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}"
     ]
 });
-/* eslint-enable @typescript-eslint/naming-convention */ /**
-                                                         * Focus styles for the root slot
-                                                         */ const useFocusStyles = /*#__PURE__*/ (0, _react.__styles)({
+/**
+ * Focus styles for the root slot
+ */ const useFocusStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         B8q5s1w: "f8hki3x",
         Bci5o5g: [
@@ -720,17 +739,37 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTabStyles_unstable = (state)=>{
+    'use no memo';
+    useTabIndicatorStyles_unstable(state);
+    useTabButtonStyles_unstable(state, state.root);
+    useTabContentStyles_unstable(state);
+    return state;
+};
+const useTabIndicatorStyles_unstable = (state)=>{
     'use no memo';
     const rootStyles = useRootStyles();
-    const focusStyles = useFocusStyles();
     const pendingIndicatorStyles = usePendingIndicatorStyles();
     const activeIndicatorStyles = useActiveIndicatorStyles();
-    const iconStyles = useIconStyles();
-    const contentStyles = useContentStyles();
-    const { appearance, disabled, selected, size, vertical } = state;
-    state.root.className = (0, _react.mergeClasses)(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)
+    const { disabled, selected, size, vertical } = state;
+    state.root.className = (0, _react.mergeClasses)(tabClassNames.root, rootStyles.root, // pending indicator (before pseudo element)
     pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)
     selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);
+    (0, _useTabAnimatedIndicatorstyles.useTabAnimatedIndicatorStyles_unstable)(state);
+    return state;
+};
+const useTabButtonStyles_unstable = (state, slot)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const focusStyles = useFocusStyles();
+    const { appearance, disabled, selected, size, vertical } = state;
+    slot.className = (0, _react.mergeClasses)(rootStyles.button, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, slot.className);
+    return state;
+};
+const useTabContentStyles_unstable = (state)=>{
+    'use no memo';
+    const iconStyles = useIconStyles();
+    const contentStyles = useContentStyles();
+    const { selected, size } = state;
     if (state.icon) {
         state.icon.className = (0, _react.mergeClasses)(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
     }
@@ -743,6 +782,5 @@ const useTabStyles_unstable = (state)=>{
         state.contentReservedSpaceClassName = state.contentReservedSpace.className;
     }
     state.content.className = (0, _react.mergeClasses)(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
-    (0, _useTabAnimatedIndicatorstyles.useTabAnimatedIndicatorStyles_unstable)(state);
     return state;
 }; //# sourceMappingURL=useTabStyles.styles.js.map

package/lib-commonjs/components/Tab/useTabStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ /* eslint-disable @typescript-eslint/naming-convention */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        border: 'none',\n        borderRadius: tokens.borderRadiusMedium,\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        overflow: 'hidden',\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        cursor: 'not-allowed'\n    },\n    selected: {\n        '& .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\n/* eslint-enable @typescript-eslint/naming-convention */ /**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        overflow: 'hidden',\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        overflow: 'hidden',\n        // content padding is the same for medium & small, horiztonal & vertical\n        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    state.root.className = mergeClasses(tabClassNames.root, rootStyles.base, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpace) {\n        state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n        // FIXME: this is a deprecated API\n        // should be removed in the next major version\n        // eslint-disable-next-line deprecation/deprecation\n        state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n"],"names":["tabClassNames","useTabStyles_unstable","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","__styles","base","Bt984gj","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","p","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","vqofr","Bv4n3vi","Bgqb9hq","B0uxbk8","Bf3jju6","amg5m6","zkfqfm","Bkydozb","Bka2azo","vzq8l0","csmgbd","Br4ovkg","aelrif","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","E3zdtr","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","state","rootStyles","focusStyles","pendingIndicatorStyles","activeIndicatorStyles","iconStyles","contentStyles","appearance","size","className","mergeClasses","contentReservedSpace","contentReservedSpaceClassName","useTabAnimatedIndicatorStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,aAAa;eAAbA;;IA4ZIC,qBAAqB;eAArBA;;;uBAhaoC;+CAGE;AAChD,MAAMD,gBAAgB;IACzBE,MAAM;IACNC,MAAM;IACNC,SAAS;AACb;AACA,MAAMC,0BAA0B;IAC5BD,SAAS;AACb;AACA,oEAAA;AACA,uFAAA;AACA,MAAME,iBAAiB;IACnBC,QAAQ;IACRC,SAAS;AACb;AACA;;CAEA,GAAI,uDAAA,GAA0D,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,YAAA;QAAAC,SAAA;IAAA;IAAAC,UAAA;QAAAD,SAAA;IAAA;IAAAE,iBAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,eAAA;QAAAN,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAE,kBAAA;QAAAP,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAG,gBAAA;QAAAR,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAI,iBAAA;QAAAT,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAK,eAAA;QAAAV,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAM,aAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,QAAA;QAAAT,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAE,UAAA;QAAAV,QAAA;QAAAG,SAAA;QAAAG,QAAA;QAAApC,SAAA;IAAA;IAAAyC,UAAA;QAAAR,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAwIpF,sDAAA,GAAyD;;yDAEzD,GAAI,MAAMC,iBAAc,WAAA,GAAGvE,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAuE,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAb,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkB3B,gDAAA,GAAmD,MAAMc,4BAAyB,WAAA,GAAGjF,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAiF,QAAA;QAAAC,OAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAlC,UAAA;QAAAiB,QAAA;QAAAQ,SAAA;IAAA;IAAAhD,iBAAA;QAAA0D,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAtD,eAAA;QAAAmD,QAAA;QAAAE,QAAA;YAAA;YAAA;SAAA;QAAAE,SAAA;QAAAC,QAAA;IAAA;IAAAvD,kBAAA;QAAAkD,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAApD,gBAAA;QAAAiD,QAAA;QAAAE,QAAA;YAAA;YAAA;SAAA;QAAAE,SAAA;QAAAC,QAAA;IAAA;IAAArD,iBAAA;QAAAgD,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAlD,eAAA;QAAA+C,QAAA;QAAAE,QAAA;YAAA;YAAA;SAAA;QAAAE,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAApC,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAD,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;IAAAE,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAF,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;IAAAsC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;IAAAvC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAgFrF,MAAMwC,2BAAwB,WAAA,GAAG3G,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAA2G,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAjD,UAAA;QAAA0C,SAAA;QAAAQ,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAvD,UAAA;QAAA2C,SAAA;IAAA;IAAAlE,iBAAA;QAAA+E,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAA3E,eAAA;QAAAwE,SAAA;QAAAE,QAAA;YAAA;YAAA;SAAA;QAAAE,QAAA;QAAAC,QAAA;IAAA;IAAA5E,kBAAA;QAAAuE,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAzE,gBAAA;QAAAsE,SAAA;QAAAE,QAAA;YAAA;YAAA;SAAA;QAAAE,QAAA;QAAAC,QAAA;IAAA;IAAA1E,iBAAA;QAAAqE,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAvE,eAAA;QAAAoE,SAAA;QAAAE,QAAA;YAAA;YAAA;SAAA;QAAAE,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAA3D,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;KAAA;IAAAoC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAqFjC;;CAEA,GAAI,MAAMqB,gBAAa,WAAA,GAAG/H,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAA+H,SAAA;QAAAC,QAAA;QAAA/H,SAAA;QAAAwB,QAAA;QAAAc,SAAA;QAAAL,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAA6F,QAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,QAAA;QAAAH,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAE,OAAA;QAAAJ,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAArE,UAAA;QAAAgE,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAhE,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAyC1B;;CAEA,GAAI,MAAMsE,mBAAgB,WAAA,GAAG1I,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAA8B,SAAA;QAAAsG,SAAA;QAAAM,SAAA;QAAA3G,SAAA;QAAAG,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAO,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAkB,UAAA;QAAAnC,SAAA;QAAAsG,SAAA;QAAAM,SAAA;QAAA3G,SAAA;IAAA;IAAAyG,OAAA;QAAA1G,SAAA;QAAAsG,SAAA;QAAAM,SAAA;QAAA3G,SAAA;IAAA;IAAA4G,eAAA;QAAA7G,SAAA;QAAAsG,SAAA;QAAAM,SAAA;QAAA3G,SAAA;IAAA;IAAA6G,cAAA;QAAAb,SAAA;QAAAC,QAAA;IAAA;IAAAa,YAAA;QAAAd,SAAA;QAAAC,QAAA;IAAA;IAAAc,aAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAA7E,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA8BlB,MAAM7E,wBAAyB0J,CAAAA;IACtC;IACA,MAAMC,aAAanJ;IACnB,MAAMoJ,cAAc5E;IACpB,MAAM6E,yBAAyBnE;IAC/B,MAAMoE,wBAAwB1C;IAC9B,MAAM2C,aAAavB;IACnB,MAAMwB,gBAAgBb;IACtB,MAAM,EAAEc,UAAU,EAAEvF,QAAQ,EAAEC,QAAQ,EAAEuF,IAAI,EAAEhH,QAAAA,EAAU,GAAGwG;IAC3DA,MAAMzJ,IAAI,CAACkK,SAAS,GAAGC,IAAAA,mBAAY,EAACrK,cAAcE,IAAI,EAAE0J,WAAWjJ,IAAI,EAAEwC,WAAWyG,WAAWzG,QAAQ,GAAGyG,WAAW3G,UAAU,EAAEkH,SAAS,WAAYhH,CAAAA,WAAWyG,WAAWjG,aAAa,GAAGiG,WAAWxG,eAAe,AAAfA,GAAkB+G,SAAS,YAAahH,CAAAA,WAAWyG,WAAW/F,cAAc,GAAG+F,WAAWhG,gBAAgB,AAAhBA,GAAmBuG,SAAS,WAAYhH,CAAAA,WAAWyG,WAAW7F,aAAa,GAAG6F,WAAW9F,eAAe,AAAfA,GAAkB+F,YAAYlJ,IAAI,EAAE,CAACgE,YAAYuF,eAAe,YAAYN,WAAWlF,MAAM,EAAE,CAACC,YAAYuF,eAAe,iBAAiBN,WAAW5F,WAAW,EAAE,CAACW,YAAYC,YAAYgF,WAAWhF,QAAQ,EAAED,YAAYiF,WAAWjF,QAAQ,EAAE,4CAAA;IAC7mBmF,uBAAuBnJ,IAAI,EAAEwJ,SAAS,WAAYhH,CAAAA,WAAW2G,uBAAuBnG,aAAa,GAAGmG,uBAAuB1G,eAAe,AAAfA,GAAkB+G,SAAS,YAAahH,CAAAA,WAAW2G,uBAAuBjG,cAAc,GAAGiG,uBAAuBlG,gBAAgB,AAAhBA,GAAmBuG,SAAS,WAAYhH,CAAAA,WAAW2G,uBAAuB/F,aAAa,GAAG+F,uBAAuBhG,eAAe,AAAfA,GAAkBa,YAAYmF,uBAAuBnF,QAAQ,EAAE,0CAAA;IAC7ZC,YAAYmF,sBAAsBpJ,IAAI,EAAEiE,YAAY,CAACD,YAAYoF,sBAAsBnF,QAAQ,EAAEA,YAAYuF,SAAS,WAAYhH,CAAAA,WAAW4G,sBAAsBpG,aAAa,GAAGoG,sBAAsB3G,eAAe,AAAfA,GAAkBwB,YAAYuF,SAAS,YAAahH,CAAAA,WAAW4G,sBAAsBlG,cAAc,GAAGkG,sBAAsBnG,gBAAgB,AAAhBA,GAAmBgB,YAAYuF,SAAS,WAAYhH,CAAAA,WAAW4G,sBAAsBhG,aAAa,GAAGgG,sBAAsBjG,eAAe,AAAfA,GAAkBc,YAAYD,YAAYoF,sBAAsBpF,QAAQ,EAAEgF,MAAMzJ,IAAI,CAACkK,SAAS;IAC9hB,IAAIT,MAAMxJ,IAAI,EAAE;QACZwJ,MAAMxJ,IAAI,CAACiK,SAAS,GAAGC,IAAAA,mBAAY,EAACrK,cAAcG,IAAI,EAAE6J,WAAWrJ,IAAI,EAAEqJ,UAAU,CAACG,KAAK,EAAEvF,YAAYoF,WAAWpF,QAAQ,EAAE+E,MAAMxJ,IAAI,CAACiK,SAAS;IACpJ;IACA,6DAAA;IACA,IAAIT,MAAMW,oBAAoB,EAAE;QAC5BX,MAAMW,oBAAoB,CAACF,SAAS,GAAGC,IAAAA,mBAAY,EAAChK,wBAAwBD,OAAO,EAAE6J,cAActJ,IAAI,EAAEwJ,SAAS,UAAUF,cAAcX,aAAa,GAAGW,cAAcrF,QAAQ,EAAE+E,MAAMxJ,IAAI,GAAG8J,cAAcT,UAAU,GAAGS,cAAcV,YAAY,EAAEU,cAAcR,WAAW,EAAEE,MAAMvJ,OAAO,CAACgK,SAAS;QACxS,kCAAA;QACA,8CAAA;QACA,mDAAA;QACAT,MAAMY,6BAA6B,GAAGZ,MAAMW,oBAAoB,CAACF,SAAS;IAC9E;IACAT,MAAMvJ,OAAO,CAACgK,SAAS,GAAGC,IAAAA,mBAAY,EAACrK,cAAcI,OAAO,EAAE6J,cAActJ,IAAI,EAAEwJ,SAAS,WAAWF,cAAcd,KAAK,EAAEvE,YAAauF,CAAAA,SAAS,UAAUF,cAAcX,aAAa,GAAGW,cAAcrF,QAAQ,AAARA,GAAW+E,MAAMxJ,IAAI,GAAG8J,cAAcT,UAAU,GAAGS,cAAcV,YAAY,EAAEI,MAAMvJ,OAAO,CAACgK,SAAS;IAC7SI,IAAAA,qEAAsC,EAACb;IACvC,OAAOA;AACX"}
+{"version":3,"sources":["useTabStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\nexport const tabClassNames = {\n    root: 'fui-Tab',\n    icon: 'fui-Tab__icon',\n    content: 'fui-Tab__content'\n};\nconst reservedSpaceClassNames = {\n    content: 'fui-Tab__content--reserved-space'\n};\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n    filled: 'fui-Icon-filled',\n    regular: 'fui-Icon-regular'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        outlineStyle: 'none',\n        position: 'relative'\n    },\n    button: {\n        alignItems: 'center',\n        border: 'none',\n        borderRadius: tokens.borderRadiusMedium,\n        cursor: 'pointer',\n        display: 'grid',\n        flexShrink: 0,\n        gridAutoFlow: 'column',\n        gridTemplateColumns: 'auto',\n        gridTemplateRows: 'auto',\n        fontFamily: tokens.fontFamilyBase,\n        lineHeight: tokens.lineHeightBase300,\n        outlineStyle: 'none',\n        position: 'relative',\n        overflow: 'hidden',\n        textTransform: 'none'\n    },\n    horizontal: {\n        justifyContent: 'center'\n    },\n    vertical: {\n        justifyContent: 'start'\n    },\n    smallHorizontal: {\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`\n    },\n    smallVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalXXS,\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`\n    },\n    mediumVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`\n    },\n    largeVertical: {\n        // horizontal spacing is deliberate. This is the gap between icon and content.\n        columnGap: tokens.spacingHorizontalSNudge,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground2Pressed\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        '& .fui-Tab__icon': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        cursor: 'not-allowed'\n    },\n    selected: {\n        '& .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1\n        },\n        ':hover .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active .fui-Tab__icon': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '& .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Hover\n        },\n        ':active .fui-Tab__content': {\n            color: tokens.colorNeutralForeground1Pressed\n        }\n    }\n});\n/**\n * Focus styles for the root slot\n */ const useFocusStyles = makeStyles({\n    // Tab creates a custom focus indicator because the default focus indicator\n    // is applied using an ::after pseudo-element on the root. Since the selection\n    // indicator uses an ::after pseudo-element on the root, there is a conflict.\n    base: createCustomFocusIndicatorStyle({\n        ...shorthands.borderColor('transparent'),\n        outlineWidth: tokens.strokeWidthThick,\n        outlineColor: 'transparent',\n        outlineStyle: 'solid',\n        boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n        zIndex: 1\n    }, {\n        enableOutline: true\n    })\n});\n/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = makeStyles({\n    base: {\n        ':hover::before': {\n            backgroundColor: tokens.colorNeutralStroke1Hover,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        },\n        '@media (forced-colors: active)': {\n            ':hover::before': {\n                backgroundColor: 'Highlight'\n            },\n            ':active::before': {\n                backgroundColor: 'Highlight'\n            }\n        }\n    },\n    disabled: {\n        ':hover::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorTransparentStroke\n        }\n    },\n    smallHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalXS,\n            left: 0,\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::before': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::before': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\nconst useActiveIndicatorStyles = makeStyles({\n    base: {\n        '::after': {\n            backgroundColor: tokens.colorTransparentStroke,\n            borderRadius: tokens.borderRadiusCircular,\n            content: '\"\"',\n            position: 'absolute'\n        }\n    },\n    selected: {\n        '::after': {\n            backgroundColor: tokens.colorCompoundBrandStroke\n        },\n        ':hover::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokeHover\n        },\n        ':active::after': {\n            backgroundColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@media (forced-colors: active)': {\n            '::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':hover::after': {\n                backgroundColor: 'ButtonText'\n            },\n            ':active::after': {\n                backgroundColor: 'ButtonText'\n            }\n        }\n    },\n    disabled: {\n        '::after': {\n            backgroundColor: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    smallHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThick,\n            left: tokens.spacingHorizontalSNudge,\n            right: tokens.spacingHorizontalSNudge\n        }\n    },\n    smallVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalXS,\n            left: '0',\n            top: tokens.spacingVerticalXS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    mediumHorizontal: {\n        '::after': {\n            bottom: '0',\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    mediumVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalS,\n            left: 0,\n            top: tokens.spacingVerticalS,\n            width: tokens.strokeWidthThicker\n        }\n    },\n    largeHorizontal: {\n        '::after': {\n            bottom: 0,\n            height: tokens.strokeWidthThicker,\n            left: tokens.spacingHorizontalM,\n            right: tokens.spacingHorizontalM\n        }\n    },\n    largeVertical: {\n        '::after': {\n            bottom: tokens.spacingVerticalMNudge,\n            left: 0,\n            top: tokens.spacingVerticalMNudge,\n            width: tokens.strokeWidthThicker\n        }\n    }\n});\n/**\n * Styles for the icon slot.\n */ const useIconStyles = makeStyles({\n    base: {\n        gridColumnStart: 1,\n        gridRowStart: 1,\n        alignItems: 'center',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        overflow: 'hidden',\n        [`& .${iconClassNames.filled}`]: {\n            display: 'none'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'inline'\n        }\n    },\n    // per design, the small and medium font sizes are the same.\n    // the size prop only affects spacing.\n    small: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    medium: {\n        fontSize: '20px',\n        height: '20px',\n        width: '20px'\n    },\n    large: {\n        fontSize: '24px',\n        height: '24px',\n        width: '24px'\n    },\n    selected: {\n        [`& .${iconClassNames.filled}`]: {\n            display: 'inline'\n        },\n        [`& .${iconClassNames.regular}`]: {\n            display: 'none'\n        }\n    }\n});\n/**\n * Styles for the content slot (children)\n */ const useContentStyles = makeStyles({\n    base: {\n        ...typographyStyles.body1,\n        overflow: 'hidden',\n        // content padding is the same for medium & small, horizontal & vertical\n        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`\n    },\n    selected: {\n        ...typographyStyles.body1Strong\n    },\n    large: {\n        ...typographyStyles.body2\n    },\n    largeSelected: {\n        ...typographyStyles.subtitle2\n    },\n    noIconBefore: {\n        gridColumnStart: 1,\n        gridRowStart: 1\n    },\n    iconBefore: {\n        gridColumnStart: 2,\n        gridRowStart: 1\n    },\n    placeholder: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the Tab slots based on the state\n */ export const useTabStyles_unstable = (state)=>{\n    'use no memo';\n    useTabIndicatorStyles_unstable(state);\n    useTabButtonStyles_unstable(state, state.root);\n    useTabContentStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles for the Tab indicator based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The `Tab` component's current state\n * @returns The state object with updated button styles\n */ export const useTabIndicatorStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const pendingIndicatorStyles = usePendingIndicatorStyles();\n    const activeIndicatorStyles = useActiveIndicatorStyles();\n    const { disabled, selected, size, vertical } = state;\n    state.root.className = mergeClasses(tabClassNames.root, rootStyles.root, // pending indicator (before pseudo element)\n    pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)\n    selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled, state.root.className);\n    useTabAnimatedIndicatorStyles_unstable(state);\n    return state;\n};\n/**\n * Applies styles to the Tab button slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @param slot - The button slot of the Tab component\n * @returns The state object with updated button styles\n */ export const useTabButtonStyles_unstable = (state, slot)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, selected, size, vertical } = state;\n    slot.className = mergeClasses(rootStyles.button, vertical ? rootStyles.vertical : rootStyles.horizontal, size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), focusStyles.base, !disabled && appearance === 'subtle' && rootStyles.subtle, !disabled && appearance === 'transparent' && rootStyles.transparent, !disabled && selected && rootStyles.selected, disabled && rootStyles.disabled, slot.className);\n    return state;\n};\n/**\n * Applies styles to the Tab content slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @returns The state object with updated content styles\n */ export const useTabContentStyles_unstable = (state)=>{\n    'use no memo';\n    const iconStyles = useIconStyles();\n    const contentStyles = useContentStyles();\n    const { selected, size } = state;\n    if (state.icon) {\n        state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);\n    }\n    // This needs to be before state.content.className is updated\n    if (state.contentReservedSpace) {\n        state.contentReservedSpace.className = mergeClasses(reservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);\n        // FIXME: this is a deprecated API\n        // should be removed in the next major version\n        // eslint-disable-next-line deprecation/deprecation\n        state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n    }\n    state.content.className = mergeClasses(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);\n    return state;\n};\n"],"names":["tabClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","__styles","Bt984gj","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","oeaueh","qhf8xq","button","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bceei9c","Bahqtrf","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","p","h","a","useFocusStyles","base","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","vqofr","Bv4n3vi","Bgqb9hq","B0uxbk8","Bf3jju6","amg5m6","zkfqfm","Bkydozb","Bka2azo","vzq8l0","csmgbd","Br4ovkg","aelrif","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","E3zdtr","Glksuk","Blzl0y7","f7digc","Biqphg1","Bntoloa","By385i5","Dlnsje","Eqx8gd","B1piin3","bn5sak","a2br6o","useIconStyles","Br312pm","Ijaq50","D0sxk3","t6yez3","small","Be2twd7","Bqenvij","a9b677","medium","large","useContentStyles","Bhrd7zp","largeSelected","noIconBefore","iconBefore","placeholder","Bcdw1i0","state","rootStyles","pendingIndicatorStyles","activeIndicatorStyles","size","className","mergeClasses","useTabAnimatedIndicatorStyles_unstable","slot","focusStyles","appearance","iconStyles","contentStyles","contentReservedSpace","contentReservedSpaceClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/index.js

@@ -30,6 +30,15 @@ _export(exports, {
     tabListClassNames: function() {
         return _TabList.tabListClassNames;
     },
+    useTabButtonStyles_unstable: function() {
+        return _Tab.useTabButtonStyles_unstable;
+    },
+    useTabContentStyles_unstable: function() {
+        return _Tab.useTabContentStyles_unstable;
+    },
+    useTabIndicatorStyles_unstable: function() {
+        return _Tab.useTabIndicatorStyles_unstable;
+    },
     useTabListContextValues_unstable: function() {
         return _TabList.useTabListContextValues_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"],"names":["Tab","TabList","TabListProvider","renderTabList_unstable","renderTab_unstable","tabClassNames","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabStyles_unstable","useTab_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAC6BA,GAAG;eAAHA,QAAG;;IAe9BC,OAAO;eAAPA,gBAAO;;IACPC,eAAe;eAAfA,wBAAe;;IAFfC,sBAAsB;eAAtBA,+BAAsB;;IAdfC,kBAAkB;eAAlBA,uBAAkB;;IAAOC,aAAa;eAAbA,kBAAa;;IAiB7CC,iBAAiB;eAAjBA,0BAAiB;;IAEjBC,gCAAgC;eAAhCA,yCAAgC;;IADhCC,0BAA0B;eAA1BA,mCAA0B;;IAE1BC,yBAAyB;eAAzBA,kCAAyB;;IACzBC,mBAAmB;eAAnBA,4BAAmB;;IArB4BC,qBAAqB;eAArBA,0BAAqB;;IAAEC,eAAe;eAAfA,oBAAe;;;qBAAQ;yBAsBxF"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport {\n  renderTab_unstable,\n  Tab,\n  tabClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n  useTab_unstable,\n} from './Tab';\nexport type {\n  TabRegisterData,\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListProps,\n  TabListSlots,\n  TabListState,\n} from './TabList';\nexport {\n  renderTabList_unstable,\n  TabList,\n  TabListProvider,\n  tabListClassNames,\n  useTabListContext_unstable,\n  useTabListContextValues_unstable,\n  useTabListStyles_unstable,\n  useTabList_unstable,\n} from './TabList';\n"],"names":["Tab","TabList","TabListProvider","renderTabList_unstable","renderTab_unstable","tabClassNames","tabListClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable","useTabStyles_unstable","useTab_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGEA,GAAG;eAAHA,QAAG;;IAsBHC,OAAO;eAAPA,gBAAO;;IACPC,eAAe;eAAfA,wBAAe;;IAFfC,sBAAsB;eAAtBA,+BAAsB;;IAtBtBC,kBAAkB;eAAlBA,uBAAkB;;IAElBC,aAAa;eAAbA,kBAAa;;IAuBbC,iBAAiB;eAAjBA,0BAAiB;;IAtBjBC,2BAA2B;eAA3BA,gCAA2B;;IAC3BC,4BAA4B;eAA5BA,iCAA4B;;IAC5BC,8BAA8B;eAA9BA,mCAA8B;;IAsB9BC,gCAAgC;eAAhCA,yCAAgC;;IADhCC,0BAA0B;eAA1BA,mCAA0B;;IAE1BC,yBAAyB;eAAzBA,kCAAyB;;IACzBC,mBAAmB;eAAnBA,4BAAmB;;IAvBnBC,qBAAqB;eAArBA,0BAAqB;;IACrBC,eAAe;eAAfA,oBAAe;;;qBACV;yBAsBA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.4.29",
+  "version": "9.5.0",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,12 +31,12 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.65",
-    "@fluentui/react-jsx-runtime": "^9.0.42",
+    "@fluentui/react-context-selector": "^9.1.66",
+    "@fluentui/react-jsx-runtime": "^9.0.43",
     "@fluentui/react-shared-contexts": "^9.20.0",
-    "@fluentui/react-tabster": "^9.22.4",
+    "@fluentui/react-tabster": "^9.22.6",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.13",
+    "@fluentui/react-utilities": "^9.18.14",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },