feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/Tab.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tab", {
+    enumerable: true,
+    get: function() {
+        return Tab;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTab = require("./useTab");
+const _renderTab = require("./renderTab");
+const _useTabStylesstyles = require("./useTabStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Tab = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTab.useTab_unstable)(props, ref);
+    (0, _useTabStylesstyles.useTabStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTabStyles_unstable')(state);
+    return (0, _renderTab.renderTab_unstable)(state);
+});
+Tab.displayName = 'Tab';

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTab_unstable } from './useTab';\nimport { renderTab_unstable } from './renderTab';\nimport { useTabStyles_unstable } from './useTabStyles.styles';\nimport type { TabProps } from './Tab.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab provides a selectable item in a tab list.\n */\nexport const Tab: ForwardRefComponent<TabProps> = React.forwardRef((props, ref) => {\n  const state = useTab_unstable(props, ref);\n\n  useTabStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabStyles_unstable')(state);\n\n  return renderTab_unstable(state);\n});\n\nTab.displayName = 'Tab';\n"],"names":["React","useTab_unstable","renderTab_unstable","useTabStyles_unstable","useCustomStyleHook_unstable","Tab","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wBACC,WAAW;2BACR,cAAc;oCACX,wBAAwB;qCAGlB,kCAAkC;AAKvE,MAAMK,MAAAA,WAAAA,GAAqCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,YAAQR,uBAAAA,EAAgBM,OAAOC;QAErCL,yCAAAA,EAAsBM;QAEtBL,gDAAAA,EAA4B,yBAAyBK;IAErD,WAAOP,6BAAAA,EAAmBO;AAC5B,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/Tab.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/Tab.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab/Tab.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Any value that identifies a specific tab.\n */\nexport type TabValue = unknown;\n\nexport type TabSlots = {\n  /**\n   * Root of the component.\n   */\n  root: Slot<'button'>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible.\n   */\n  content: NonNullable<Slot<'span'>>;\n};\n\nexport type TabInternalSlots = TabSlots & {\n  contentReservedSpace?: Slot<'span'>;\n};\n\n/**\n * Tab Props\n */\nexport type TabProps = Omit<ComponentProps<Partial<TabSlots>>, 'content' | 'value'> &\n  Pick<Partial<TabSlots>, 'content'> & {\n    /**\n     * A tab can be set to disable interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The value that identifies this tab when selected.\n     */\n    value: TabValue;\n  };\n\nexport type TabBaseProps = Omit<TabProps, 'contentReservedSpace'>;\n\n/**\n * State used in rendering Tab\n */\nexport type TabState = ComponentState<TabInternalSlots> &\n  Pick<TabProps, 'value'> &\n  Required<Pick<TabProps, 'disabled'>> & {\n    /**\n     * A tab supports 'transparent', 'subtle', `subtle-circular` and `filled-circular` appearance.\n     */\n    appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n    /**\n     * A tab can have only an icon slot filled and no content.\n     */\n    iconOnly: boolean;\n    /**\n     * If this tab is selected\n     */\n    selected: boolean;\n    /**\n     * When defined, tab content with selected style is rendered hidden to reserve space.\n     * This keeps consistent content size between unselected and selected states.\n     *\n     * @deprecated - use `contentReservedSpace` internal slot instead.\n     */\n    contentReservedSpaceClassName?: string;\n    /**\n     * A tab can be either 'small', 'medium', or 'large' size.\n     */\n    size: 'small' | 'medium' | 'large';\n    /**\n     * A tab can arrange its content based on if the tabs in the list are arranged vertically.\n     */\n    vertical: boolean;\n  };\n\nexport type TabBaseState = Omit<TabState, 'appearance' | 'size' | 'contentReservedSpace'>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Tab: function() {
+        return _Tab.Tab;
+    },
+    renderTab_unstable: function() {
+        return _renderTab.renderTab_unstable;
+    },
+    tabClassNames: function() {
+        return _useTabStylesstyles.tabClassNames;
+    },
+    tabReservedSpaceClassNames: function() {
+        return _useTabStylesstyles.tabReservedSpaceClassNames;
+    },
+    useTabA11yBehavior_unstable: function() {
+        return _useTab.useTabA11yBehavior_unstable;
+    },
+    useTabAnimatedIndicatorStyles_unstable: function() {
+        return _useTabAnimatedIndicatorstyles.useTabAnimatedIndicatorStyles_unstable;
+    },
+    useTabBase_unstable: function() {
+        return _useTab.useTabBase_unstable;
+    },
+    useTabButtonStyles_unstable: function() {
+        return _useTabStylesstyles.useTabButtonStyles_unstable;
+    },
+    useTabContentStyles_unstable: function() {
+        return _useTabStylesstyles.useTabContentStyles_unstable;
+    },
+    useTabIndicatorStyles_unstable: function() {
+        return _useTabStylesstyles.useTabIndicatorStyles_unstable;
+    },
+    useTabStyles_unstable: function() {
+        return _useTabStylesstyles.useTabStyles_unstable;
+    },
+    useTab_unstable: function() {
+        return _useTab.useTab_unstable;
+    }
+});
+const _Tab = require("./Tab");
+const _renderTab = require("./renderTab");
+const _useTab = require("./useTab");
+const _useTabStylesstyles = require("./useTabStyles.styles");
+const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles");

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab/index.ts"],"sourcesContent":["export { Tab } from './Tab';\nexport type { TabInternalSlots, TabBaseProps, TabProps, TabSlots, TabBaseState, TabState, TabValue } from './Tab.types';\nexport { renderTab_unstable } from './renderTab';\nexport { useTab_unstable, useTabBase_unstable, useTabA11yBehavior_unstable } from './useTab';\nexport {\n  tabClassNames,\n  tabReservedSpaceClassNames,\n  useTabButtonStyles_unstable,\n  useTabContentStyles_unstable,\n  useTabIndicatorStyles_unstable,\n  useTabStyles_unstable,\n} from './useTabStyles.styles';\nexport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n"],"names":["Tab","renderTab_unstable","useTab_unstable","useTabBase_unstable","useTabA11yBehavior_unstable","tabClassNames","tabReservedSpaceClassNames","useTabButtonStyles_unstable","useTabContentStyles_unstable","useTabIndicatorStyles_unstable","useTabStyles_unstable","useTabAnimatedIndicatorStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;uBAAG;;;eAEHC,6BAAkB;;;eAGzBI,iCAAa;;8BACa;eAA1BC;;;eAH6CF,mCAA2B;;0CAS3B;eAAtCO;;;eATiBR,2BAAmB;;+BAIhB;eAA3BI;;IACAC,4BAA4B;;;;eAC5BC,kDAA8B;;;eAC9BC,yCAAqB;;;eAPdR,uBAAe;;;qBAHJ,QAAQ;2BAEO,cAAc;wBACiC,WAAW;oCAQtF,wBAAwB;+CACwB,mCAAmC"}

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/renderTab.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTab_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderTab_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderTab_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+            !state.iconOnly && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {}),
+            state.contentReservedSpace && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.contentReservedSpace, {})
+        ]
+    });
+};

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/renderTab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab/renderTab.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TabBaseState, TabInternalSlots } from './Tab.types';\n\n/**\n * Render the final JSX of Tab\n */\nexport const renderTab_unstable = (state: TabBaseState): JSXElement => {\n  assertSlots<TabInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!state.iconOnly && <state.content />}\n      {state.contentReservedSpace && <state.contentReservedSpace />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTab_unstable","state","root","icon","iconOnly","content","contentReservedSpace"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,2BAA2B,CAACC;QACjCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzB,CAACF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMI,OAAO,EAAA,CAAA;YACjCJ,MAAMK,oBAAoB,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,oBAAoB,EAAA,CAAA;;;AAGhE,EAAE"}

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/useTab.js

@@ -0,0 +1,143 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTabA11yBehavior_unstable: function() {
+        return useTabA11yBehavior_unstable;
+    },
+    useTabBase_unstable: function() {
+        return useTabBase_unstable;
+    },
+    useTab_unstable: function() {
+        return useTab_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactutilities = require("@fluentui/react-utilities");
+const _TabList = require("../TabList");
+const useTab_unstable = (props, ref)=>{
+    const { content } = props;
+    const state = useTabBase_unstable(props, ref);
+    const focusAttributes = useTabA11yBehavior_unstable(state);
+    const appearance = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.appearance);
+    const reserveSelectedTabSpace = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
+    const size = (0, _TabList.useTabListContext_unstable)((ctx)=>{
+        var _ctx_size;
+        return (_ctx_size = ctx.size) !== null && _ctx_size !== void 0 ? _ctx_size : 'medium';
+    });
+    const contentReservedSpace = content && typeof content === 'object' ? (0, _reactutilities.omit)(content, [
+        'ref'
+    ]) : content;
+    return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            contentReservedSpace: 'span'
+        },
+        root: {
+            ...focusAttributes,
+            ...state.root
+        },
+        contentReservedSpace: _reactutilities.slot.optional(contentReservedSpace, {
+            renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
+        }),
+        appearance,
+        size
+    };
+};
+const useTabBase_unstable = (props, ref)=>{
+    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;
+    const selectTabOnFocus = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.selectTabOnFocus);
+    const listDisabled = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.disabled);
+    const selected = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
+    const onRegister = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onRegister);
+    const onUnregister = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onUnregister);
+    const onSelect = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onSelect);
+    const vertical = (0, _TabList.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
+    const disabled = listDisabled || tabDisabled;
+    const innerRef = _react.useRef(null);
+    const onSelectCallback = (event)=>onSelect(event, {
+            value
+        });
+    const onTabClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, onSelectCallback));
+    const onTabFocus = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onFocus, onSelectCallback));
+    _react.useEffect(()=>{
+        onRegister({
+            value,
+            ref: innerRef
+        });
+        return ()=>{
+            onUnregister({
+                value,
+                ref: innerRef
+            });
+        };
+    }, [
+        onRegister,
+        onUnregister,
+        innerRef,
+        value
+    ]);
+    const iconSlot = _reactutilities.slot.optional(icon, {
+        elementType: 'span'
+    });
+    const contentSlot = _reactutilities.slot.always(content, {
+        defaultProps: {
+            children: props.children
+        },
+        elementType: 'span'
+    });
+    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
+    return {
+        components: {
+            root: 'button',
+            icon: 'span',
+            content: 'span',
+            contentReservedSpace: 'span'
+        },
+        root: _reactutilities.slot.always({
+            ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
+            role: 'tab',
+            type: 'button',
+            // aria-selected undefined indicates it is not selectable
+            // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
+            'aria-selected': disabled ? undefined : `${selected}`,
+            value,
+            ...rest,
+            disabled,
+            onClick: onTabClick,
+            onFocus: selectTabOnFocus ? onTabFocus : onFocus
+        }, {
+            elementType: 'button'
+        }),
+        icon: iconSlot,
+        iconOnly,
+        content: contentSlot,
+        disabled,
+        selected,
+        value,
+        vertical
+    };
+};
+const useTabA11yBehavior_unstable = ({ selected })=>{
+    return (0, _reacttabster.useTabsterAttributes)({
+        focusable: {
+            isDefault: selected
+        }
+    });
+};

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.js

@@ -0,0 +1,156 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTabAnimatedIndicatorStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTabAnimatedIndicatorStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _TabListContext = require("../TabList/TabListContext");
+const _reactutilities = require("@fluentui/react-utilities");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const tabIndicatorCssVars_unstable = {
+    offsetVar: '--fui-Tab__indicator--offset',
+    scaleVar: '--fui-Tab__indicator--scale'
+};
+const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    base: {
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1gl81tg"
+    },
+    animated: {
+        Ba2ppi3: "fhwpy7i",
+        F2fol1: "f6zz20j",
+        B1dyfl9: "f1ai4sc1",
+        Bu93a1u: "f1rnm8gg",
+        Bdasjez: "f1x3cmqg"
+    },
+    horizontal: {
+        sjv3b2: [
+            "fug4aj8",
+            "f1i5xzg7"
+        ],
+        b1kco5: "f1q7ujh"
+    },
+    vertical: {
+        sjv3b2: "f1hqboyk",
+        b1kco5: "f1dxupa6"
+    }
+}, {
+    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){.f1rnm8gg::after{transition-property:none;}}",
+            {
+                m: "(prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media (prefers-reduced-motion: reduce){.f1x3cmqg::after{transition-duration:0.01ms;}}",
+            {
+                m: "(prefers-reduced-motion: reduce)"
+            }
+        ]
+    ]
+});
+const calculateTabRect = (element)=>{
+    if (element) {
+        var _element_parentElement;
+        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+        const tabRect = element.getBoundingClientRect();
+        return {
+            x: tabRect.x - parentRect.x,
+            y: tabRect.y - parentRect.y,
+            width: tabRect.width,
+            height: tabRect.height
+        };
+    }
+    return undefined;
+};
+const getRegisteredTabRect = (registeredTabs, value)=>{
+    var _registeredTabs_JSON_stringify;
+    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();
+    const [lastAnimatedFrom, setLastAnimatedFrom] = _react.useState();
+    const [animationValues, setAnimationValues] = _react.useState({
+        offset: 0,
+        scale: 1
+    });
+    const getRegisteredTabs = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.getRegisteredTabs);
+    const [requestAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
+    if (selected) {
+        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
+        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
+            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+            if (selectedTabRect && previousSelectedTabRect) {
+                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
+                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
+                setAnimationValues({
+                    offset,
+                    scale
+                });
+                setLastAnimatedFrom(previousSelectedValue);
+                // Reset the animation values after the animation is complete
+                requestAnimationFrame(()=>setAnimationValues({
+                        offset: 0,
+                        scale: 1
+                    }));
+            }
+        }
+    } 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);
+    }
+    // do not apply any animation if the tab is disabled
+    if (disabled) {
+        return state;
+    }
+    // the animation should only happen as the selection indicator returns to its
+    // original position and not when set at the previous tabs position.
+    const animating = animationValues.offset === 0 && animationValues.scale === 1;
+    state.root.className = (0, _react1.mergeClasses)(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
+    const rootCssVars = {
+        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,
+        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`
+    };
+    state.root.style = {
+        ...rootCssVars,
+        ...state.root.style
+    };
+    return state;
+};

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.raw.js

@@ -0,0 +1,134 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTabAnimatedIndicatorStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTabAnimatedIndicatorStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _TabListContext = require("../TabList/TabListContext");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactutilities = require("@fluentui/react-utilities");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const tabIndicatorCssVars_unstable = {
+    offsetVar: '--fui-Tab__indicator--offset',
+    scaleVar: '--fui-Tab__indicator--scale'
+};
+const useActiveIndicatorStyles = (0, _react1.makeStyles)({
+    base: {
+        // overflow is required to allow the selection indicator to animate outside the tab area.
+        overflow: 'visible'
+    },
+    animated: {
+        '::after': {
+            transitionProperty: 'transform',
+            transitionDuration: `${_reacttheme.tokens.durationSlow}`,
+            transitionTimingFunction: `${_reacttheme.tokens.curveDecelerateMax}`
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+            '::after': {
+                transitionProperty: 'none',
+                transitionDuration: '0.01ms'
+            }
+        }
+    },
+    horizontal: {
+        '::after': {
+            transformOrigin: 'left',
+            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))
+    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`
+        }
+    },
+    vertical: {
+        '::after': {
+            transformOrigin: 'top',
+            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))
+        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`
+        }
+    }
+});
+const calculateTabRect = (element)=>{
+    if (element) {
+        var _element_parentElement;
+        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+        const tabRect = element.getBoundingClientRect();
+        return {
+            x: tabRect.x - parentRect.x,
+            y: tabRect.y - parentRect.y,
+            width: tabRect.width,
+            height: tabRect.height
+        };
+    }
+    return undefined;
+};
+const getRegisteredTabRect = (registeredTabs, value)=>{
+    var _registeredTabs_JSON_stringify;
+    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();
+    const [lastAnimatedFrom, setLastAnimatedFrom] = _react.useState();
+    const [animationValues, setAnimationValues] = _react.useState({
+        offset: 0,
+        scale: 1
+    });
+    const getRegisteredTabs = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.getRegisteredTabs);
+    const [requestAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
+    if (selected) {
+        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
+        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
+            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+            if (selectedTabRect && previousSelectedTabRect) {
+                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
+                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
+                setAnimationValues({
+                    offset,
+                    scale
+                });
+                setLastAnimatedFrom(previousSelectedValue);
+                // Reset the animation values after the animation is complete
+                requestAnimationFrame(()=>setAnimationValues({
+                        offset: 0,
+                        scale: 1
+                    }));
+            }
+        }
+    } 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);
+    }
+    // do not apply any animation if the tab is disabled
+    if (disabled) {
+        return state;
+    }
+    // the animation should only happen as the selection indicator returns to its
+    // original position and not when set at the previous tabs position.
+    const animating = animationValues.offset === 0 && animationValues.scale === 1;
+    state.root.className = (0, _react1.mergeClasses)(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
+    const rootCssVars = {
+        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,
+        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`
+    };
+    state.root.style = {
+        ...rootCssVars,
+        ...state.root.style
+    };
+    return state;
+};

node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/useTabStyles.styles.raw.js

@@ -0,0 +1,684 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tabClassNames: function() {
+        return tabClassNames;
+    },
+    tabReservedSpaceClassNames: function() {
+        return tabReservedSpaceClassNames;
+    },
+    useTabButtonStyles_unstable: function() {
+        return useTabButtonStyles_unstable;
+    },
+    useTabContentStyles_unstable: function() {
+        return useTabContentStyles_unstable;
+    },
+    useTabIndicatorStyles_unstable: function() {
+        return useTabIndicatorStyles_unstable;
+    },
+    useTabStyles_unstable: function() {
+        return useTabStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles");
+const tabClassNames = {
+    root: 'fui-Tab',
+    icon: 'fui-Tab__icon',
+    content: 'fui-Tab__content'
+};
+const tabReservedSpaceClassNames = {
+    content: 'fui-Tab__content--reserved-space'
+};
+// These should match the constants defined in @fluentui/react-icons
+// This package avoids taking a dependency on the icons package for only the constants.
+const iconClassNames = {
+    filled: 'fui-Icon-filled',
+    regular: 'fui-Icon-regular'
+};
+/**
+ * Styles for the root slot
+ */ const useRootStyles = (0, _react.makeStyles)({
+    root: {
+        alignItems: 'center',
+        display: 'grid',
+        flexShrink: 0,
+        gridAutoFlow: 'column',
+        gridTemplateColumns: 'auto',
+        gridTemplateRows: 'auto',
+        outlineStyle: 'none',
+        position: 'relative'
+    },
+    button: {
+        alignItems: 'center',
+        border: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        cursor: 'pointer',
+        display: 'grid',
+        flexShrink: 0,
+        gridAutoFlow: 'column',
+        gridTemplateColumns: 'auto',
+        gridTemplateRows: 'auto',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        lineHeight: _reacttheme.tokens.lineHeightBase300,
+        outlineStyle: 'none',
+        position: 'relative',
+        overflow: 'hidden',
+        textTransform: 'none'
+    },
+    horizontal: {
+        justifyContent: 'center'
+    },
+    vertical: {
+        justifyContent: 'start'
+    },
+    smallHorizontal: {
+        columnGap: _reacttheme.tokens.spacingHorizontalXXS,
+        padding: `${_reacttheme.tokens.spacingVerticalSNudge} ${_reacttheme.tokens.spacingHorizontalSNudge}`
+    },
+    smallVertical: {
+        // horizontal spacing is deliberate. This is the gap between icon and content.
+        columnGap: _reacttheme.tokens.spacingHorizontalXXS,
+        padding: `${_reacttheme.tokens.spacingVerticalXXS} ${_reacttheme.tokens.spacingHorizontalSNudge}`
+    },
+    mediumHorizontal: {
+        columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
+        padding: `${_reacttheme.tokens.spacingVerticalM} ${_reacttheme.tokens.spacingHorizontalMNudge}`
+    },
+    mediumVertical: {
+        // horizontal spacing is deliberate. This is the gap between icon and content.
+        columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
+        padding: `${_reacttheme.tokens.spacingVerticalSNudge} ${_reacttheme.tokens.spacingHorizontalMNudge}`
+    },
+    largeHorizontal: {
+        columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
+        padding: `${_reacttheme.tokens.spacingVerticalL} ${_reacttheme.tokens.spacingHorizontalMNudge}`
+    },
+    largeVertical: {
+        // horizontal spacing is deliberate. This is the gap between icon and content.
+        columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalMNudge}`
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ':enabled:hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
+        },
+        ':enabled:active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
+        },
+        [`& .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        [`:enabled:hover .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Hover
+        },
+        [`:enabled:active .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed
+        },
+        [`& .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        [`:enabled:hover .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Hover
+        },
+        [`:enabled:active .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed
+        }
+    },
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+        ':enabled:hover': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
+        },
+        ':enabled:active': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
+        },
+        [`& .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        [`:enabled:hover .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Hover
+        },
+        [`:enabled:active .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed
+        },
+        [`& .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        [`:enabled:hover .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Hover
+        },
+        [`:enabled:active .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed
+        }
+    },
+    disabledCursor: {
+        cursor: 'not-allowed'
+    },
+    disabled: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        [`& .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        [`& .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    },
+    selected: {
+        [`& .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorCompoundBrandForeground1
+        },
+        [`:enabled:hover .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorCompoundBrandForeground1Hover
+        },
+        [`:enabled:active .${tabClassNames.icon}`]: {
+            color: _reacttheme.tokens.colorCompoundBrandForeground1Pressed
+        },
+        [`& .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1
+        },
+        [`:enabled:hover .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1Hover
+        },
+        [`:enabled:active .${tabClassNames.content}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1Pressed
+        }
+    }
+});
+const useCircularAppearanceStyles = (0, _react.makeStyles)({
+    base: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorTransparentStroke}`,
+        [`& .${tabClassNames.icon}`]: {
+            color: 'inherit'
+        },
+        [`& .${tabClassNames.content}`]: {
+            color: 'inherit'
+        }
+    },
+    small: {
+        paddingBlock: `calc(${_reacttheme.tokens.spacingVerticalXXS} - ${_reacttheme.tokens.strokeWidthThin})`
+    },
+    medium: {
+        paddingBlock: `calc(${_reacttheme.tokens.spacingVerticalSNudge} - ${_reacttheme.tokens.strokeWidthThin})`
+    },
+    large: {
+        paddingBlock: `calc(${_reacttheme.tokens.spacingVerticalS} - ${_reacttheme.tokens.strokeWidthThin})`
+    },
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ':enabled:hover': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
+            border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorNeutralStroke1Hover}`,
+            color: _reacttheme.tokens.colorNeutralForeground2Hover
+        },
+        ':enabled:active': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
+            border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorNeutralStroke1Pressed}`,
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed
+        },
+        '@media (forced-colors: active)': {
+            border: `solid ${_reacttheme.tokens.strokeWidthThin} Canvas`
+        }
+    },
+    subtleSelected: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground2,
+        border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorCompoundBrandStroke}`,
+        color: _reacttheme.tokens.colorBrandForeground2,
+        ':enabled:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackground2Hover,
+            border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}`,
+            color: _reacttheme.tokens.colorBrandForeground2Hover
+        },
+        ':enabled:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackground2Pressed,
+            border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}`,
+            color: _reacttheme.tokens.colorBrandForeground2Pressed
+        },
+        '@media (forced-colors: active)': {
+            border: `solid ${_reacttheme.tokens.strokeWidthThin} Highlight`
+        }
+    },
+    subtleDisabled: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    },
+    subtleDisabledSelected: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+        border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorNeutralStrokeDisabled}`,
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    },
+    filled: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ':enabled:hover': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground3Hover,
+            color: _reacttheme.tokens.colorNeutralForeground2Hover
+        },
+        ':enabled:active': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground3Pressed,
+            color: _reacttheme.tokens.colorNeutralForeground2Pressed
+        },
+        '@media (forced-colors: active)': {
+            ':enabled:hover': {
+                backgroundColor: 'Highlight',
+                forcedColorAdjust: 'none',
+                [`& .${tabClassNames.content}`]: {
+                    color: 'HighlightText'
+                },
+                [`& .${iconClassNames.filled}`]: {
+                    color: 'HighlightText'
+                },
+                [`& .${iconClassNames.regular}`]: {
+                    color: 'HighlightText'
+                }
+            }
+        }
+    },
+    filledSelected: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        ':enabled:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        ':enabled:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        '@media (forced-colors: active)': {
+            ':enabled': {
+                backgroundColor: 'ButtonText',
+                [`& .${tabClassNames.content}`]: {
+                    color: 'ButtonFace',
+                    forcedColorAdjust: 'none'
+                }
+            },
+            [`:enabled .${tabClassNames.icon}`]: {
+                color: 'ButtonFace'
+            }
+        }
+    },
+    filledDisabled: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    },
+    filledDisabledSelected: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
+        border: `solid ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorNeutralStrokeDisabled}`,
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    }
+});
+/**
+ * Focus styles for the root slot
+ */ const useFocusStyles = (0, _react.makeStyles)({
+    // Tab creates a custom focus indicator because the default focus indicator
+    // is applied using an ::after pseudo-element on the root. Since the selection
+    // indicator uses an ::after pseudo-element on the root, there is a conflict.
+    base: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        ..._react.shorthands.borderColor('transparent'),
+        outlineWidth: _reacttheme.tokens.strokeWidthThick,
+        outlineColor: 'transparent',
+        outlineStyle: 'solid',
+        boxShadow: `
+      ${_reacttheme.tokens.shadow4},
+      0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}
+    `,
+        zIndex: 1
+    }, {
+        enableOutline: true
+    }),
+    circular: (0, _reacttabster.createCustomFocusIndicatorStyle)({
+        ..._react.shorthands.borderColor('transparent'),
+        outlineWidth: _reacttheme.tokens.strokeWidthThick,
+        outlineColor: 'transparent',
+        outlineStyle: 'solid',
+        boxShadow: `
+        ${_reacttheme.tokens.shadow4},
+        0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2},
+        0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorNeutralStrokeOnBrand} inset
+      `,
+        zIndex: 1
+    }, {
+        enableOutline: true
+    })
+});
+/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = (0, _react.makeStyles)({
+    base: {
+        ':hover::before': {
+            backgroundColor: _reacttheme.tokens.colorNeutralStroke1Hover,
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            content: '""',
+            position: 'absolute'
+        },
+        ':active::before': {
+            backgroundColor: _reacttheme.tokens.colorNeutralStroke1Pressed,
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            content: '""',
+            position: 'absolute'
+        },
+        '@media (forced-colors: active)': {
+            ':hover::before': {
+                backgroundColor: 'Highlight'
+            },
+            ':active::before': {
+                backgroundColor: 'Highlight'
+            }
+        }
+    },
+    disabled: {
+        ':hover::before': {
+            backgroundColor: _reacttheme.tokens.colorTransparentStroke
+        },
+        ':active::before': {
+            backgroundColor: _reacttheme.tokens.colorTransparentStroke
+        },
+        '@media (forced-colors: active)': {
+            ':hover::before': {
+                backgroundColor: 'transparent'
+            },
+            ':active::before': {
+                backgroundColor: 'transparent'
+            }
+        }
+    },
+    smallHorizontal: {
+        '::before': {
+            bottom: 0,
+            height: _reacttheme.tokens.strokeWidthThick,
+            left: _reacttheme.tokens.spacingHorizontalSNudge,
+            right: _reacttheme.tokens.spacingHorizontalSNudge
+        }
+    },
+    smallVertical: {
+        '::before': {
+            bottom: _reacttheme.tokens.spacingVerticalXS,
+            left: 0,
+            top: _reacttheme.tokens.spacingVerticalXS,
+            width: _reacttheme.tokens.strokeWidthThicker
+        }
+    },
+    mediumHorizontal: {
+        '::before': {
+            bottom: 0,
+            height: _reacttheme.tokens.strokeWidthThicker,
+            left: _reacttheme.tokens.spacingHorizontalM,
+            right: _reacttheme.tokens.spacingHorizontalM
+        }
+    },
+    mediumVertical: {
+        '::before': {
+            bottom: _reacttheme.tokens.spacingVerticalS,
+            left: 0,
+            top: _reacttheme.tokens.spacingVerticalS,
+            width: _reacttheme.tokens.strokeWidthThicker
+        }
+    },
+    largeHorizontal: {
+        '::before': {
+            bottom: 0,
+            height: _reacttheme.tokens.strokeWidthThicker,
+            left: _reacttheme.tokens.spacingHorizontalM,
+            right: _reacttheme.tokens.spacingHorizontalM
+        }
+    },
+    largeVertical: {
+        '::before': {
+            bottom: _reacttheme.tokens.spacingVerticalMNudge,
+            left: 0,
+            top: _reacttheme.tokens.spacingVerticalMNudge,
+            width: _reacttheme.tokens.strokeWidthThicker
+        }
+    }
+});
+const useActiveIndicatorStyles = (0, _react.makeStyles)({
+    base: {
+        '::after': {
+            backgroundColor: _reacttheme.tokens.colorTransparentStroke,
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            content: '""',
+            position: 'absolute'
+        }
+    },
+    selected: {
+        '::after': {
+            backgroundColor: _reacttheme.tokens.colorCompoundBrandStroke
+        },
+        ':enabled:hover::after': {
+            backgroundColor: _reacttheme.tokens.colorCompoundBrandStrokeHover
+        },
+        ':enabled:active::after': {
+            backgroundColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
+        },
+        '@media (forced-colors: active)': {
+            '::after': {
+                backgroundColor: 'ButtonText'
+            },
+            ':enabled:hover::after': {
+                backgroundColor: 'ButtonText'
+            },
+            ':enabled:active::after': {
+                backgroundColor: 'ButtonText'
+            }
+        }
+    },
+    disabled: {
+        '::after': {
+            backgroundColor: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    },
+    smallHorizontal: {
+        '::after': {
+            bottom: 0,
+            height: _reacttheme.tokens.strokeWidthThick,
+            left: _reacttheme.tokens.spacingHorizontalSNudge,
+            right: _reacttheme.tokens.spacingHorizontalSNudge
+        }
+    },
+    smallVertical: {
+        '::after': {
+            bottom: _reacttheme.tokens.spacingVerticalXS,
+            left: '0',
+            top: _reacttheme.tokens.spacingVerticalXS,
+            width: _reacttheme.tokens.strokeWidthThicker
+        }
+    },
+    mediumHorizontal: {
+        '::after': {
+            bottom: '0',
+            height: _reacttheme.tokens.strokeWidthThicker,
+            left: _reacttheme.tokens.spacingHorizontalM,
+            right: _reacttheme.tokens.spacingHorizontalM
+        }
+    },
+    mediumVertical: {
+        '::after': {
+            bottom: _reacttheme.tokens.spacingVerticalS,
+            left: 0,
+            top: _reacttheme.tokens.spacingVerticalS,
+            width: _reacttheme.tokens.strokeWidthThicker
+        }
+    },
+    largeHorizontal: {
+        '::after': {
+            bottom: 0,
+            height: _reacttheme.tokens.strokeWidthThicker,
+            left: _reacttheme.tokens.spacingHorizontalM,
+            right: _reacttheme.tokens.spacingHorizontalM
+        }
+    },
+    largeVertical: {
+        '::after': {
+            bottom: _reacttheme.tokens.spacingVerticalMNudge,
+            left: 0,
+            top: _reacttheme.tokens.spacingVerticalMNudge,
+            width: _reacttheme.tokens.strokeWidthThicker
+        }
+    }
+});
+/**
+ * Styles for the icon slot.
+ */ const useIconStyles = (0, _react.makeStyles)({
+    base: {
+        gridColumnStart: 1,
+        gridRowStart: 1,
+        alignItems: 'center',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        [`& .${iconClassNames.filled}`]: {
+            display: 'none'
+        },
+        [`& .${iconClassNames.regular}`]: {
+            display: 'inline'
+        }
+    },
+    // per design, the small and medium font sizes are the same.
+    // the size prop only affects spacing.
+    small: {
+        fontSize: '20px',
+        height: '20px',
+        width: '20px'
+    },
+    medium: {
+        fontSize: '20px',
+        height: '20px',
+        width: '20px'
+    },
+    large: {
+        fontSize: '24px',
+        height: '24px',
+        width: '24px'
+    },
+    selected: {
+        [`& .${iconClassNames.filled}`]: {
+            display: 'inline'
+        },
+        [`& .${iconClassNames.regular}`]: {
+            display: 'none'
+        }
+    }
+});
+/**
+ * Styles for the content slot (children)
+ */ const useContentStyles = (0, _react.makeStyles)({
+    base: {
+        ..._reacttheme.typographyStyles.body1,
+        overflow: 'hidden',
+        // content padding is the same for medium & small, horizontal & vertical
+        padding: `${_reacttheme.tokens.spacingVerticalNone} ${_reacttheme.tokens.spacingHorizontalXXS}`
+    },
+    selected: {
+        ..._reacttheme.typographyStyles.body1Strong
+    },
+    large: {
+        ..._reacttheme.typographyStyles.body2
+    },
+    largeSelected: {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    noIconBefore: {
+        gridColumnStart: 1,
+        gridRowStart: 1
+    },
+    iconBefore: {
+        gridColumnStart: 2,
+        gridRowStart: 1
+    },
+    placeholder: {
+        visibility: 'hidden'
+    }
+});
+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 pendingIndicatorStyles = usePendingIndicatorStyles();
+    const activeIndicatorStyles = useActiveIndicatorStyles();
+    const { appearance, disabled, selected, size, vertical } = state;
+    const classes = [
+        tabClassNames.root,
+        rootStyles.root
+    ];
+    if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {
+        classes.push(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, 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, _react.mergeClasses)(...classes, 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 circularStyles = useCircularAppearanceStyles();
+    const { appearance, disabled, selected, size, vertical } = state;
+    const isSubtleCircular = appearance === 'subtle-circular';
+    const isFilledCircular = appearance === 'filled-circular';
+    const isCircular = isSubtleCircular || isFilledCircular;
+    const circularAppearance = [
+        circularStyles.base,
+        focusStyles.circular,
+        // sizes
+        size === 'small' && circularStyles.small,
+        size === 'medium' && circularStyles.medium,
+        size === 'large' && circularStyles.large,
+        // subtle-circular appearance
+        isSubtleCircular && circularStyles.subtle,
+        selected && isSubtleCircular && circularStyles.subtleSelected,
+        disabled && isSubtleCircular && circularStyles.subtleDisabled,
+        selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,
+        // filled-circular appearance
+        isFilledCircular && circularStyles.filled,
+        selected && isFilledCircular && circularStyles.filledSelected,
+        disabled && isFilledCircular && circularStyles.filledDisabled,
+        selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected
+    ];
+    const regularAppearance = [
+        focusStyles.base,
+        !disabled && appearance === 'subtle' && rootStyles.subtle,
+        !disabled && appearance === 'transparent' && rootStyles.transparent,
+        !disabled && selected && rootStyles.selected,
+        disabled && rootStyles.disabled
+    ];
+    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), ...isCircular ? circularAppearance : regularAppearance, disabled && rootStyles.disabledCursor, 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);
+    }
+    // This needs to be before state.content.className is updated
+    if (state.contentReservedSpace) {
+        state.contentReservedSpace.className = (0, _react.mergeClasses)(tabReservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
+        // FIXME: this is a deprecated API
+        // should be removed in the next major version
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        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);
+    return state;
+};