@fluentui/react-tabs 9.4.21 → 9.4.22

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Mon, 20 May 2024 12:36:41 GMT and should not be manually modified.
+This log was last generated on Thu, 23 May 2024 07:58:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.22)
+
+Thu, 23 May 2024 07:58:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.21..@fluentui/react-tabs_v9.4.22)
+
+### Patches
+
+- chore: replace usage of .shorthands() in styles ([PR #31449](https://github.com/microsoft/fluentui/pull/31449) by olfedias@microsoft.com)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+
 ## [9.4.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.21)
 
-Mon, 20 May 2024 12:36:41 GMT 
+Mon, 20 May 2024 12:45:05 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.20..@fluentui/react-tabs_v9.4.21)
 
 ### Patches

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 import { useTabListContext_unstable } from '../TabList/TabListContext';
 import { tokens } from '@fluentui/react-theme';
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -9,8 +9,9 @@ const tabIndicatorCssVars_unstable = {
 };
 const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   base: {
-    B68tc82: "f1mtd64y",
-    Bmxbyg5: "f1y7q3j9"
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1gl81tg"
   },
   animated: {
     Ba2ppi3: "fhwpy7i",
@@ -28,7 +29,9 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
     b1kco5: "f1dxupa6"
   }
 }, {
-  d: [".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
+  d: [[".f1gl81tg{overflow:visible;}", {
+    p: -1
+  }], ".fhwpy7i::after{transition-property:transform;}", ".f6zz20j::after{transition-duration:var(--durationSlow);}", ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}", ".fug4aj8::after{transform-origin:left;}", ".f1i5xzg7::after{transform-origin:right;}", ".f1q7ujh::after{transform:translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale));}", ".f1hqboyk::after{transform-origin:top;}", ".f1dxupa6::after{transform:translateY(var(--fui-Tab__indicator--offset)) scaleY(var(--fui-Tab__indicator--scale));}"],
   m: [["@media (prefers-reduced-motion: reduce){.f9qxlq5::after{transition-property:none;}}", {
     m: "(prefers-reduced-motion: reduce)"
   }], ["@media (prefers-reduced-motion: reduce){.f1aql376::after{transition-duration:0.01ms;}}", {

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

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","shorthands","useTabListContext_unstable","tokens","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","base","B68tc82","Bmxbyg5","animated","Ba2ppi3","F2fol1","B1dyfl9","B0vmy72","u9bimw","horizontal","sjv3b2","b1kco5","vertical","d","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, shorthands } 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        ...shorthands.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":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,0BAA0B,QAAQ,2BAA2B;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA,MAAMC,4BAA4B,GAAG;EACjCC,SAAS,EAAE,8BAA8B;EACzCC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,wBAAwB,gBAAGR,QAAA;EAAAS,IAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgChC,CAAC;AACF,MAAMC,gBAAgB,GAAIC,OAAO,IAAG;EAChC,IAAIA,OAAO,EAAE;IACT,IAAIC,sBAAsB;IAC1B,MAAMC,UAAU,GAAG,CAAC,CAACD,sBAAsB,GAAGD,OAAO,CAACG,aAAa,MAAM,IAAI,IAAIF,sBAAsB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,sBAAsB,CAACG,qBAAqB,CAAC,CAAC,KAAK;MAC7KC,CAAC,EAAE,CAAC;MACJC,CAAC,EAAE,CAAC;MACJC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE;IACZ,CAAC;IACD,MAAMC,OAAO,GAAGT,OAAO,CAACI,qBAAqB,CAAC,CAAC;IAC/C,OAAO;MACHC,CAAC,EAAEI,OAAO,CAACJ,CAAC,GAAGH,UAAU,CAACG,CAAC;MAC3BC,CAAC,EAAEG,OAAO,CAACH,CAAC,GAAGJ,UAAU,CAACI,CAAC;MAC3BC,KAAK,EAAEE,OAAO,CAACF,KAAK;MACpBC,MAAM,EAAEC,OAAO,CAACD;IACpB,CAAC;EACL;EACA,OAAOE,SAAS;AACpB,CAAC;AACD,MAAMC,oBAAoB,GAAGA,CAACC,cAAc,EAAEC,KAAK,KAAG;EAClD,IAAIC,8BAA8B;EAClC,MAAMd,OAAO,GAAGa,KAAK,KAAKH,SAAS,IAAIG,KAAK,KAAK,IAAI,GAAG,CAACC,8BAA8B,GAAGF,cAAc,CAACG,IAAI,CAACC,SAAS,CAACH,KAAK,CAAC,CAAC,MAAM,IAAI,IAAIC,8BAA8B,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,8BAA8B,CAACG,GAAG,CAACC,OAAO,GAAGR,SAAS;EACxP,OAAOV,OAAO,GAAGD,gBAAgB,CAACC,OAAO,CAAC,GAAGU,SAAS;AAC1D,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMS,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAE1B;EAAS,CAAC,GAAGwB,KAAK;EAC9C,MAAMG,qBAAqB,GAAGxC,wBAAwB,CAAC,CAAC;EACxD,MAAM,CAACyC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGnD,KAAK,CAACoD,QAAQ,CAAC,CAAC;EAChE,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGtD,KAAK,CAACoD,QAAQ,CAAC;IACzDG,MAAM,EAAE,CAAC;IACTC,KAAK,EAAE;EACX,CAAC,CAAC;EACF,MAAMC,iBAAiB,GAAGrD,0BAA0B,CAAEsD,GAAG,IAAGA,GAAG,CAACD,iBAAiB,CAAC;EAClFzD,KAAK,CAAC2D,SAAS,CAAC,MAAI;IAChB,IAAIT,gBAAgB,EAAE;MAClBI,kBAAkB,CAAC;QACfC,MAAM,EAAE,CAAC;QACTC,KAAK,EAAE;MACX,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CACCN,gBAAgB,CACnB,CAAC;EACF,IAAIF,QAAQ,EAAE;IACV,MAAM;MAAEY,qBAAqB;MAAEC,aAAa;MAAEvB;IAAe,CAAC,GAAGmB,iBAAiB,CAAC,CAAC;IACpF,IAAIG,qBAAqB,IAAIV,gBAAgB,KAAKU,qBAAqB,EAAE;MACrE,MAAME,uBAAuB,GAAGzB,oBAAoB,CAACC,cAAc,EAAEsB,qBAAqB,CAAC;MAC3F,MAAMG,eAAe,GAAG1B,oBAAoB,CAACC,cAAc,EAAEuB,aAAa,CAAC;MAC3E,IAAIE,eAAe,IAAID,uBAAuB,EAAE;QAC5C,MAAMP,MAAM,GAAGjC,QAAQ,GAAGwC,uBAAuB,CAAC9B,CAAC,GAAG+B,eAAe,CAAC/B,CAAC,GAAG8B,uBAAuB,CAAC/B,CAAC,GAAGgC,eAAe,CAAChC,CAAC;QACvH,MAAMyB,KAAK,GAAGlC,QAAQ,GAAGwC,uBAAuB,CAAC5B,MAAM,GAAG6B,eAAe,CAAC7B,MAAM,GAAG4B,uBAAuB,CAAC7B,KAAK,GAAG8B,eAAe,CAAC9B,KAAK;QACxIqB,kBAAkB,CAAC;UACfC,MAAM;UACNC;QACJ,CAAC,CAAC;QACFL,mBAAmB,CAACS,qBAAqB,CAAC;MAC9C;IACJ;EACJ,CAAC,MAAM,IAAIV,gBAAgB,EAAE;IACzB;IACA;IACAC,mBAAmB,CAACf,SAAS,CAAC;EAClC;EACA;EACA,IAAIW,QAAQ,EAAE;IACV,OAAOD,KAAK;EAChB;EACA;EACA;EACA,MAAMkB,SAAS,GAAGX,eAAe,CAACE,MAAM,KAAK,CAAC,IAAIF,eAAe,CAACG,KAAK,KAAK,CAAC;EAC7EV,KAAK,CAACmB,IAAI,CAACC,SAAS,GAAGhE,YAAY,CAAC4C,KAAK,CAACmB,IAAI,CAACC,SAAS,EAAElB,QAAQ,IAAIC,qBAAqB,CAACvC,IAAI,EAAEsC,QAAQ,IAAIgB,SAAS,IAAIf,qBAAqB,CAACpC,QAAQ,EAAEmC,QAAQ,KAAK1B,QAAQ,GAAG2B,qBAAqB,CAAC3B,QAAQ,GAAG2B,qBAAqB,CAAC9B,UAAU,CAAC,CAAC;EACtP,MAAMgD,WAAW,GAAG;IAChB,CAAC7D,4BAA4B,CAACC,SAAS,GAAI,GAAE8C,eAAe,CAACE,MAAO,IAAG;IACvE,CAACjD,4BAA4B,CAACE,QAAQ,GAAI,GAAE6C,eAAe,CAACG,KAAM;EACtE,CAAC;EACDV,KAAK,CAACmB,IAAI,CAACG,KAAK,GAAG;IACf,GAAGD,WAAW;IACd,GAAGrB,KAAK,CAACmB,IAAI,CAACG;EAClB,CAAC;EACD,OAAOtB,KAAK;AAChB,CAAC","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","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":[]}

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

@@ -22,18 +22,28 @@ const iconClassNames = {
 const useRootStyles = /*#__PURE__*/__styles({
   base: {
     Bt984gj: "f122n59",
-    g2u3we: "fwhevhj",
-    h3c5rm: ["f61n433", "f1q8l70w"],
-    B9xav0g: "fv1dfc8",
-    zhjwy3: ["f1q8l70w", "f61n433"],
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
-    B4j52fo: "fre7gi1",
-    Bekrc4i: ["f1358rze", "f1rvrf73"],
-    Bn0qgzm: "fqdk4by",
-    ibv6hh: ["f1rvrf73", "f1358rze"],
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
     Bceei9c: "f1k6fduh",
     mc9l5x: "f13qh94s",
     Bnnss6s: "fi64zpg",
@@ -44,8 +54,9 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bg96gwp: "f1i3iumi",
     oeaueh: "f1s6fcnf",
     qhf8xq: "f10pi13n",
-    B68tc82: "f1p9o1ba",
-    Bmxbyg5: "f1sil6mw",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
     B9bfxx9: "f1cxpek8"
   },
   horizontal: {
@@ -56,45 +67,51 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   smallHorizontal: {
     i8kkvl: "f14mj54c",
-    z8tnut: "fp2oml8",
-    z189sj: ["fdw0yi8", "fk8j09s"],
-    Byoj8tv: "f1tdddsa",
-    uwmqm3: ["fk8j09s", "fdw0yi8"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1wmopi4"
   },
   smallVertical: {
     i8kkvl: "f14mj54c",
-    z8tnut: "fclwglc",
-    z189sj: ["fdw0yi8", "fk8j09s"],
-    Byoj8tv: "fywfov9",
-    uwmqm3: ["fk8j09s", "fdw0yi8"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f12or63q"
   },
   mediumHorizontal: {
     i8kkvl: "f1rjii52",
-    z8tnut: "f5yzyt",
-    z189sj: ["f11gcy0p", "f1ng84yb"],
-    Byoj8tv: "fx3omr",
-    uwmqm3: ["f1ng84yb", "f11gcy0p"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1w08f2p"
   },
   mediumVertical: {
     i8kkvl: "f1rjii52",
-    z8tnut: "fp2oml8",
-    z189sj: ["f11gcy0p", "f1ng84yb"],
-    Byoj8tv: "f1tdddsa",
-    uwmqm3: ["f1ng84yb", "f11gcy0p"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fymxs25"
   },
   largeHorizontal: {
     i8kkvl: "f1rjii52",
-    z8tnut: "fikn0iw",
-    z189sj: ["f11gcy0p", "f1ng84yb"],
-    Byoj8tv: "fdxej3c",
-    uwmqm3: ["f1ng84yb", "f11gcy0p"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1ssfvub"
   },
   largeVertical: {
     i8kkvl: "f1rjii52",
-    z8tnut: "f1kwiid1",
-    z189sj: ["f11gcy0p", "f1ng84yb"],
-    Byoj8tv: "f5b47ha",
-    uwmqm3: ["f1ng84yb", "f11gcy0p"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fwkd1rq"
   },
   transparent: {
     De3pzq: "f1c21dwh",
@@ -133,7 +150,25 @@ const useRootStyles = /*#__PURE__*/__styles({
     a4hkcw: "fhklyu5"
   }
 }, {
-  d: [".f122n59{align-items:center;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".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;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cxpek8{text-transform:none;}", ".f4d9j23{justify-content:center;}", ".f1s9ku6b{justify-content:start;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".f5yzyt{padding-top:var(--spacingVerticalM);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fx3omr{padding-bottom:var(--spacingVerticalM);}", ".fikn0iw{padding-top:var(--spacingVerticalL);}", ".fdxej3c{padding-bottom:var(--spacingVerticalL);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}"],
+  d: [".f122n59{align-items:center;}", [".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;}", {
+    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
+  }], [".f12or63q{padding:var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);}", {
+    p: -1
+  }], ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", [".f1w08f2p{padding:var(--spacingVerticalM) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], [".fymxs25{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], [".f1ssfvub{padding:var(--spacingVerticalL) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], [".fwkd1rq{padding:var(--spacingVerticalS) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}", ".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}", ".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}", ".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}"],
   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);}"]
 });
@@ -159,17 +194,19 @@ const useFocusStyles = /*#__PURE__*/__styles({
 const usePendingIndicatorStyles = /*#__PURE__*/__styles({
   base: {
     az7l2e: "fhw179n",
-    Bv4n3vi: ["f10y1uxy", "f6aiuy0"],
-    vqofr: ["f6aiuy0", "f10y1uxy"],
-    B0uxbk8: ["f1kfpfnu", "f1dx5wco"],
-    Bgqb9hq: ["f1dx5wco", "f1kfpfnu"],
+    vqofr: 0,
+    Bv4n3vi: 0,
+    Bgqb9hq: 0,
+    B0uxbk8: 0,
+    Bf3jju6: "fg9j5n4",
     amg5m6: "f1kmhr4c",
     zkfqfm: "fl1ydde",
     Bkydozb: "f1y7maxz",
-    vzq8l0: ["f105swax", "fscdmel"],
-    Bka2azo: ["fscdmel", "f105swax"],
-    Br4ovkg: ["f1tkcw1w", "f1u11x8o"],
-    csmgbd: ["f1u11x8o", "f1tkcw1w"],
+    Bka2azo: 0,
+    vzq8l0: 0,
+    csmgbd: 0,
+    Br4ovkg: 0,
+    aelrif: "fceyvr4",
     y36c18: "f16cxu0",
     B1ctymy: "f1nwgacf",
     Bgvrrv0: "f15ovonk",
@@ -216,8 +253,12 @@ const usePendingIndicatorStyles = /*#__PURE__*/__styles({
     Ccq8qp: "f1aij3q"
   }
 }, {
-  h: [".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}", ".f10y1uxy:hover::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f6aiuy0:hover::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1kfpfnu:hover::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1dx5wco:hover::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f1kmhr4c:hover::before{content:\"\";}", ".fl1ydde:hover::before{position:absolute;}", ".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}"],
-  a: [".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}", ".f105swax:active::before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".fscdmel:active::before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1tkcw1w:active::before{border-top-right-radius:var(--borderRadiusCircular);}", ".f1u11x8o:active::before{border-top-left-radius:var(--borderRadiusCircular);}", ".f16cxu0:active::before{content:\"\";}", ".f1nwgacf:active::before{position:absolute;}", ".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}"],
+  h: [".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}", [".fg9j5n4:hover::before{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".f1kmhr4c:hover::before{content:\"\";}", ".fl1ydde:hover::before{position:absolute;}", ".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}"],
+  a: [".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}", [".fceyvr4:active::before{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".f16cxu0:active::before{content:\"\";}", ".f1nwgacf:active::before{position:absolute;}", ".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}"],
   m: [["@media (forced-colors: active){.f15ovonk:hover::before{background-color:Highlight;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fvje46l:active::before{background-color:Highlight;}}", {
@@ -228,10 +269,11 @@ const usePendingIndicatorStyles = /*#__PURE__*/__styles({
 const useActiveIndicatorStyles = /*#__PURE__*/__styles({
   base: {
     Bjyk6c5: "f1rp0jgh",
-    B3778ie: ["fprarqb", "f14vs0nd"],
-    d9w3h3: ["f14vs0nd", "fprarqb"],
-    Bl18szs: ["f1gtfqs9", "f18zvfd9"],
-    B4j8arr: ["f18zvfd9", "f1gtfqs9"],
+    d9w3h3: 0,
+    B3778ie: 0,
+    B4j8arr: 0,
+    Bl18szs: 0,
+    Blrzh8d: "f3b9emi",
     Bsft5z2: "f13zj6fq",
     E3zdtr: "f1mdlcz9"
   },
@@ -283,7 +325,9 @@ const useActiveIndicatorStyles = /*#__PURE__*/__styles({
     a2br6o: "f1o25lip"
   }
 }, {
-  d: [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", ".fprarqb::after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f14vs0nd::after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1gtfqs9::after{border-top-right-radius:var(--borderRadiusCircular);}", ".f18zvfd9::after{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fk1klkt::after{top:var(--spacingVerticalXS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}", ".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"],
+  d: [".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}", [".f3b9emi::after{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}", ".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}", ".fo72kxq::after{bottom:0;}", ".f9bb2ob::after{height:var(--strokeWidthThick);}", ".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}", ".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}", ".fqbue9b::after{bottom:var(--spacingVerticalXS);}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fk1klkt::after{top:var(--spacingVerticalXS);}", ".f1o25lip::after{width:var(--strokeWidthThicker);}", ".f1vx7lu8::after{height:var(--strokeWidthThicker);}", ".fna7m5n::after{left:var(--spacingHorizontalM);}", ".f1oxpfwv::after{right:var(--spacingHorizontalM);}", ".fipylg0::after{bottom:var(--spacingVerticalS);}", ".fqchiol::after{top:var(--spacingVerticalS);}", ".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}", ".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"],
   h: [".f1eytvvh:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}"],
   a: [".fuaa9s:active::after{background-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media (forced-colors: active){.fy7ktjt::after{background-color:ButtonText;}}", {
@@ -304,8 +348,9 @@ const useIconStyles = /*#__PURE__*/__styles({
     Bt984gj: "f122n59",
     mc9l5x: "ftuwxu6",
     Brf1p80: "f4d9j23",
-    B68tc82: "f1p9o1ba",
-    Bmxbyg5: "f1sil6mw",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
     D0sxk3: "f16u1re",
     t6yez3: "f8bsbmo"
   },
@@ -329,7 +374,9 @@ const useIconStyles = /*#__PURE__*/__styles({
     t6yez3: "f15q0o9g"
   }
 }, {
-  d: [".fwpfdsa{grid-column-start:1;}", ".f16hsg94{grid-row-start:1;}", ".f122n59{align-items:center;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f16u1re .fui-Icon-filled{display:none;}", ".f8bsbmo .fui-Icon-regular{display:inline;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}"]
+  d: [".fwpfdsa{grid-column-start:1;}", ".f16hsg94{grid-row-start:1;}", ".f122n59{align-items:center;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".f16u1re .fui-Icon-filled{display:none;}", ".f8bsbmo .fui-Icon-regular{display:inline;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}"]
 });
 /**
  * Styles for the content slot (children)
@@ -340,12 +387,14 @@ const useContentStyles = /*#__PURE__*/__styles({
     Be2twd7: "fkhj508",
     Bhrd7zp: "figsok6",
     Bg96gwp: "f1i3iumi",
-    B68tc82: "f1p9o1ba",
-    Bmxbyg5: "f1sil6mw",
-    z8tnut: "fztplxc",
-    z189sj: ["ffczdla", "fgiv446"],
-    Byoj8tv: "f9g1xly",
-    uwmqm3: ["fgiv446", "ffczdla"]
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1bwptpd"
   },
   selected: {
     Bahqtrf: "fk6fouc",
@@ -377,7 +426,11 @@ const useContentStyles = /*#__PURE__*/__styles({
     Bcdw1i0: "fd7fpy0"
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".fztplxc{padding-top:var(--spacingVerticalNone);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f9g1xly{padding-bottom:var(--spacingVerticalNone);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fwpfdsa{grid-column-start:1;}", ".f16hsg94{grid-row-start:1;}", ".fd46tj4{grid-column-start:2;}", ".fd7fpy0{visibility:hidden;}"]
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".f1bwptpd{padding:var(--spacingVerticalNone) var(--spacingHorizontalXXS);}", {
+    p: -1
+  }], ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fwpfdsa{grid-column-start:1;}", ".f16hsg94{grid-row-start:1;}", ".fd46tj4{grid-column-start:2;}", ".fd7fpy0{visibility:hidden;}"]
 });
 /**
  * Apply styling to the Tab slots based on the state

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","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bceei9c","mc9l5x","Bnnss6s","Bxotwcr","Budl1dq","wkccdc","Bahqtrf","Bg96gwp","oeaueh","qhf8xq","B68tc82","Bmxbyg5","B9bfxx9","horizontal","Brf1p80","vertical","smallHorizontal","i8kkvl","z8tnut","z189sj","Byoj8tv","uwmqm3","smallVertical","mediumHorizontal","mediumVertical","largeHorizontal","largeVertical","transparent","De3pzq","Jwef8y","ecr2s2","Bptxc3x","B076xvk","q9r9w5","cl4aha","Bk452zc","a4hkcw","subtle","disabled","selected","d","h","a","useFocusStyles","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bn4voq9","Bfpq7zp","g9k6zt","j6ew2k","Bhxq17a","usePendingIndicatorStyles","az7l2e","Bv4n3vi","vqofr","B0uxbk8","Bgqb9hq","amg5m6","zkfqfm","Bkydozb","vzq8l0","Bka2azo","Br4ovkg","csmgbd","y36c18","B1ctymy","Bgvrrv0","ddr6p5","lawp4y","Baz25je","Fbdkly","mdwyqc","Bciustq","Ccq8qp","m","useActiveIndicatorStyles","Bjyk6c5","B3778ie","d9w3h3","Bl18szs","B4j8arr","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        ...shorthands.borderColor('none'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.borderWidth(0),\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        ...shorthands.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        ...shorthands.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        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge)\n    },\n    mediumHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.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        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge)\n    },\n    largeHorizontal: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...shorthands.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        ...shorthands.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            ...shorthands.borderRadius(tokens.borderRadiusCircular),\n            content: '\"\"',\n            position: 'absolute'\n        },\n        ':active::before': {\n            backgroundColor: tokens.colorNeutralStroke1Pressed,\n            ...shorthands.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            ...shorthands.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        ...shorthands.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        ...shorthands.overflow('hidden'),\n        // content padding is the same for medium & small, horiztonal & vertical\n        ...shorthands.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    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,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;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;EAAA;EAAAC,UAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;EAAAE,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAL,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,gBAAA;IAAAN,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAG,cAAA;IAAAP,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAI,eAAA;IAAAR,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAK,aAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;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;IAAAlC,OAAA;EAAA;EAAAuC,QAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAwInF,CAAC;AACF,yDAAyD;AACzD;AACA;AAAI,MAAMC,cAAc,gBAAGzE,QAAA;EAAAgB,IAAA;IAAA0D,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAiB1B,CAAC;AACF;AAAmD,MAAMa,yBAAyB,gBAAGnF,QAAA;EAAAgB,IAAA;IAAAoE,MAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA/B,QAAA;IAAAgB,MAAA;IAAAO,OAAA;EAAA;EAAA7C,eAAA;IAAAsD,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAnD,aAAA;IAAAgD,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAApD,gBAAA;IAAA+C,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAjD,cAAA;IAAA8C,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAlD,eAAA;IAAA6C,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA/C,aAAA;IAAA4C,MAAA;IAAAE,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAlC,CAAA;EAAAC,CAAA;EAAAkC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAApC,CAAA;AAAA,CA+EpF,CAAC;AACF,MAAMqC,wBAAwB,gBAAG3G,QAAA;EAAAgB,IAAA;IAAA4F,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7C,QAAA;IAAAuC,OAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAnD,QAAA;IAAAwC,OAAA;EAAA;EAAA9D,eAAA;IAAA0E,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAvE,aAAA;IAAAoE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAxE,gBAAA;IAAAmE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAArE,cAAA;IAAAkE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAtE,eAAA;IAAAiE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAnE,aAAA;IAAAgE,OAAA;IAAAE,MAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAvD,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAkC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAoFhC,CAAC;AACF;AACA;AACA;AAAI,MAAMoB,aAAa,gBAAG9H,QAAA;EAAAgB,IAAA;IAAA+G,OAAA;IAAAC,MAAA;IAAA/G,OAAA;IAAAc,MAAA;IAAAa,OAAA;IAAAJ,OAAA;IAAAC,OAAA;IAAAwF,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;EAAAjE,QAAA;IAAA4D,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA5D,CAAA;AAAA,CAwCzB,CAAC;AACF;AACA;AACA;AAAI,MAAMmE,gBAAgB,gBAAGzI,QAAA;EAAAgB,IAAA;IAAAoB,OAAA;IAAAgG,OAAA;IAAAM,OAAA;IAAArG,OAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAO,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAkB,QAAA;IAAAjC,OAAA;IAAAgG,OAAA;IAAAM,OAAA;IAAArG,OAAA;EAAA;EAAAmG,KAAA;IAAApG,OAAA;IAAAgG,OAAA;IAAAM,OAAA;IAAArG,OAAA;EAAA;EAAAsG,aAAA;IAAAvG,OAAA;IAAAgG,OAAA;IAAAM,OAAA;IAAArG,OAAA;EAAA;EAAAuG,YAAA;IAAAb,OAAA;IAAAC,MAAA;EAAA;EAAAa,UAAA;IAAAd,OAAA;IAAAC,MAAA;EAAA;EAAAc,WAAA;IAAAC,OAAA;EAAA;AAAA;EAAAzE,CAAA;AAAA,CA2B5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM0E,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,MAAMC,UAAU,GAAGnI,aAAa,CAAC,CAAC;EAClC,MAAMoI,WAAW,GAAG1E,cAAc,CAAC,CAAC;EACpC,MAAM2E,sBAAsB,GAAGjE,yBAAyB,CAAC,CAAC;EAC1D,MAAMkE,qBAAqB,GAAG1C,wBAAwB,CAAC,CAAC;EACxD,MAAM2C,UAAU,GAAGxB,aAAa,CAAC,CAAC;EAClC,MAAMyB,aAAa,GAAGd,gBAAgB,CAAC,CAAC;EACxC,MAAM;IAAEe,UAAU;IAAEpF,QAAQ;IAAEC,QAAQ;IAAEoF,IAAI;IAAE5G;EAAS,CAAC,GAAGoG,KAAK;EAChEA,KAAK,CAACzI,IAAI,CAACkJ,SAAS,GAAGzJ,YAAY,CAACM,aAAa,CAACC,IAAI,EAAE0I,UAAU,CAAClI,IAAI,EAAE6B,QAAQ,GAAGqG,UAAU,CAACrG,QAAQ,GAAGqG,UAAU,CAACvG,UAAU,EAAE8G,IAAI,KAAK,OAAO,KAAK5G,QAAQ,GAAGqG,UAAU,CAAC9F,aAAa,GAAG8F,UAAU,CAACpG,eAAe,CAAC,EAAE2G,IAAI,KAAK,QAAQ,KAAK5G,QAAQ,GAAGqG,UAAU,CAAC5F,cAAc,GAAG4F,UAAU,CAAC7F,gBAAgB,CAAC,EAAEoG,IAAI,KAAK,OAAO,KAAK5G,QAAQ,GAAGqG,UAAU,CAAC1F,aAAa,GAAG0F,UAAU,CAAC3F,eAAe,CAAC,EAAE4F,WAAW,CAACnI,IAAI,EAAE,CAACoD,QAAQ,IAAIoF,UAAU,KAAK,QAAQ,IAAIN,UAAU,CAAC/E,MAAM,EAAE,CAACC,QAAQ,IAAIoF,UAAU,KAAK,aAAa,IAAIN,UAAU,CAACzF,WAAW,EAAE,CAACW,QAAQ,IAAIC,QAAQ,IAAI6E,UAAU,CAAC7E,QAAQ,EAAED,QAAQ,IAAI8E,UAAU,CAAC9E,QAAQ;EAAE;EAC7mBgF,sBAAsB,CAACpI,IAAI,EAAEyI,IAAI,KAAK,OAAO,KAAK5G,QAAQ,GAAGuG,sBAAsB,CAAChG,aAAa,GAAGgG,sBAAsB,CAACtG,eAAe,CAAC,EAAE2G,IAAI,KAAK,QAAQ,KAAK5G,QAAQ,GAAGuG,sBAAsB,CAAC9F,cAAc,GAAG8F,sBAAsB,CAAC/F,gBAAgB,CAAC,EAAEoG,IAAI,KAAK,OAAO,KAAK5G,QAAQ,GAAGuG,sBAAsB,CAAC5F,aAAa,GAAG4F,sBAAsB,CAAC7F,eAAe,CAAC,EAAEa,QAAQ,IAAIgF,sBAAsB,CAAChF,QAAQ;EAAE;EAC7ZC,QAAQ,IAAIgF,qBAAqB,CAACrI,IAAI,EAAEqD,QAAQ,IAAI,CAACD,QAAQ,IAAIiF,qBAAqB,CAAChF,QAAQ,EAAEA,QAAQ,IAAIoF,IAAI,KAAK,OAAO,KAAK5G,QAAQ,GAAGwG,qBAAqB,CAACjG,aAAa,GAAGiG,qBAAqB,CAACvG,eAAe,CAAC,EAAEuB,QAAQ,IAAIoF,IAAI,KAAK,QAAQ,KAAK5G,QAAQ,GAAGwG,qBAAqB,CAAC/F,cAAc,GAAG+F,qBAAqB,CAAChG,gBAAgB,CAAC,EAAEgB,QAAQ,IAAIoF,IAAI,KAAK,OAAO,KAAK5G,QAAQ,GAAGwG,qBAAqB,CAAC7F,aAAa,GAAG6F,qBAAqB,CAAC9F,eAAe,CAAC,EAAEc,QAAQ,IAAID,QAAQ,IAAIiF,qBAAqB,CAACjF,QAAQ,EAAE6E,KAAK,CAACzI,IAAI,CAACkJ,SAAS,CAAC;EAC/hB,IAAIT,KAAK,CAACxI,IAAI,EAAE;IACZwI,KAAK,CAACxI,IAAI,CAACiJ,SAAS,GAAGzJ,YAAY,CAACM,aAAa,CAACE,IAAI,EAAE6I,UAAU,CAACtI,IAAI,EAAEsI,UAAU,CAACG,IAAI,CAAC,EAAEpF,QAAQ,IAAIiF,UAAU,CAACjF,QAAQ,EAAE4E,KAAK,CAACxI,IAAI,CAACiJ,SAAS,CAAC;EACrJ;EACA;EACA,IAAIT,KAAK,CAACU,oBAAoB,EAAE;IAC5BV,KAAK,CAACU,oBAAoB,CAACD,SAAS,GAAGzJ,YAAY,CAACU,uBAAuB,CAACD,OAAO,EAAE6I,aAAa,CAACvI,IAAI,EAAEyI,IAAI,KAAK,OAAO,GAAGF,aAAa,CAACZ,aAAa,GAAGY,aAAa,CAAClF,QAAQ,EAAE4E,KAAK,CAACxI,IAAI,GAAG8I,aAAa,CAACV,UAAU,GAAGU,aAAa,CAACX,YAAY,EAAEW,aAAa,CAACT,WAAW,EAAEG,KAAK,CAACvI,OAAO,CAACgJ,SAAS,CAAC;IACzS;IACA;IACA;IACAT,KAAK,CAACW,6BAA6B,GAAGX,KAAK,CAACU,oBAAoB,CAACD,SAAS;EAC9E;EACAT,KAAK,CAACvI,OAAO,CAACgJ,SAAS,GAAGzJ,YAAY,CAACM,aAAa,CAACG,OAAO,EAAE6I,aAAa,CAACvI,IAAI,EAAEyI,IAAI,KAAK,OAAO,IAAIF,aAAa,CAACf,KAAK,EAAEnE,QAAQ,KAAKoF,IAAI,KAAK,OAAO,GAAGF,aAAa,CAACZ,aAAa,GAAGY,aAAa,CAAClF,QAAQ,CAAC,EAAE4E,KAAK,CAACxI,IAAI,GAAG8I,aAAa,CAACV,UAAU,GAAGU,aAAa,CAACX,YAAY,EAAEK,KAAK,CAACvI,OAAO,CAACgJ,SAAS,CAAC;EAC9SpJ,sCAAsC,CAAC2I,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","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    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":"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","ignoreList":[]}

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

@@ -19,8 +19,9 @@ const tabIndicatorCssVars_unstable = {
 };
 const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react1.__styles)({
     base: {
-        B68tc82: "f1mtd64y",
-        Bmxbyg5: "f1y7q3j9"
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1gl81tg"
     },
     animated: {
         Ba2ppi3: "fhwpy7i",
@@ -42,8 +43,12 @@ const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react1.__styles)({
     }
 }, {
     d: [
-        ".f1mtd64y{overflow-x:visible;}",
-        ".f1y7q3j9{overflow-y:visible;}",
+        [
+            ".f1gl81tg{overflow:visible;}",
+            {
+                p: -1
+            }
+        ],
         ".fhwpy7i::after{transition-property:transform;}",
         ".f6zz20j::after{transition-duration:var(--durationSlow);}",
         ".f1ai4sc1::after{transition-timing-function:var(--curveDecelerateMax);}",