feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tabs/lib/components/TabList/TabList.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useTabList_unstable } from './useTabList';
+import { renderTabList_unstable } from './renderTabList';
+import { useTabListStyles_unstable } from './useTabListStyles.styles';
+import { useTabListContextValues_unstable } from './useTabListContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A tab list provides single selection from a set of tabs.
+ */ export const TabList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTabList_unstable(props, ref);
+    const contextValues = useTabListContextValues_unstable(state);
+    useTabListStyles_unstable(state);
+    useCustomStyleHook_unstable('useTabListStyles_unstable')(state);
+    return renderTabList_unstable(state, contextValues);
+});
+TabList.displayName = 'TabList';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/TabList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues_unstable(state);\n\n  useTabListStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"names":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,iCAAiCM;IAEvDP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n  /**\n   * The value of the tab.\n   */\n  value: TabValue;\n\n  /**\n   * The reference to the tab HTML element.\n   */\n  ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E> | React.FocusEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   *- 'subtle-circular': Adds background and border styling\n   *- 'filled-circular': Adds background styling\n   *\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n  /**\n   * Tab size may change between unselected and selected states.\n   * The default scenario is a selected tab has bold text.\n   *\n   * When true, this property requests tabs be the same size whether unselected or selected.\n   * @default true\n   */\n  reserveSelectedTabSpace?: boolean;\n\n  /**\n   * The value of the tab to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   */\n  defaultSelectedValue?: TabValue;\n\n  /**\n   * A tab list can be set to disable interaction.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Raised when a tab is selected.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * When true, focusing a tab will select it.\n   * @default false\n   */\n  selectTabOnFocus?: boolean;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small', 'medium', or 'large' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type TabListBaseProps = Omit<TabListProps, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;\n\nexport type TabListContextValue = Pick<\n  TabListProps,\n  'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'\n> &\n  Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n    /**\n     * Gets the registered tab data along with current and previous selected values.\n     */\n    getRegisteredTabs: () => {\n      selectedValue?: TabValue;\n      previousSelectedValue?: TabValue;\n      registeredTabs: Record<string, TabRegisterData>;\n    };\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n\nexport type TabListBaseState = Omit<TabListState, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-tabs/lib/components/TabList/TabListContext.js

@@ -0,0 +1,25 @@
+'use client';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+const tabListContextDefaultValue = {
+    appearance: 'transparent',
+    reserveSelectedTabSpace: true,
+    selectTabOnFocus: false,
+    disabled: false,
+    selectedValue: undefined,
+    onRegister: ()=>{
+    /* noop */ },
+    onUnregister: ()=>{
+    /* noop */ },
+    onSelect: ()=>{
+    /* noop */ },
+    getRegisteredTabs: ()=>{
+        return {
+            registeredTabs: {}
+        };
+    },
+    size: 'medium',
+    vertical: false
+};
+export const TabListContext = createContext(undefined);
+export const TabListProvider = TabListContext.Provider;
+export const useTabListContext_unstable = (selector)=>useContextSelector(TabListContext, (ctx = tabListContextDefaultValue)=>selector(ctx));

node_modules/@fluentui/react-tabs/lib/components/TabList/TabListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/TabListContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n  appearance: 'transparent',\n  reserveSelectedTabSpace: true,\n  selectTabOnFocus: false,\n  disabled: false,\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  getRegisteredTabs: () => {\n    return {\n      registeredTabs: {},\n    };\n  },\n  size: 'medium',\n  vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n  undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n  useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","selectTabOnFocus","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,MAAMC,6BAAkD;IACtDC,YAAY;IACZC,yBAAyB;IACzBC,kBAAkB;IAClBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,mBAAmB;QACjB,OAAO;YACLC,gBAAgB,CAAC;QACnB;IACF;IACAC,MAAM;IACNC,UAAU;AACZ;AAEA,OAAO,MAAMC,iBAA+ChB,cAC1DQ,WACgC;AAElC,OAAO,MAAMS,kBAAkBD,eAAeE,QAAQ,CAAC;AACvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CnB,mBAAmBe,gBAAgB,CAACK,MAAMnB,0BAA0B,GAAKkB,SAASC,MAAM"}

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

@@ -0,0 +1,6 @@
+export { TabList } from './TabList';
+export { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';
+export { renderTabList_unstable } from './renderTabList';
+export { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';
+export { useTabListContextValues_unstable } from './useTabListContextValues';
+export { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n  RegisterTabEventHandler,\n  SelectTabData,\n  SelectTabEvent,\n  SelectTabEventHandler,\n  TabListContextValue,\n  TabListContextValues,\n  TabListBaseProps,\n  TabListProps,\n  TabListSlots,\n  TabListBaseState,\n  TabListState,\n  TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAepC,SAASC,cAAc,EAAEC,eAAe,EAAEC,0BAA0B,QAAQ,mBAAmB;AAC/F,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,EAAEC,+BAA+B,QAAQ,eAAe;AAC7G,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

node_modules/@fluentui/react-tabs/lib/components/TabList/renderTabList.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { TabListProvider } from './TabListContext';
+/**
+ * Render the final JSX of TabList
+ */ export const renderTabList_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(TabListProvider, {
+            value: contextValues.tabList,
+            children: state.root.children
+        })
+    });
+};

node_modules/@fluentui/react-tabs/lib/components/TabList/renderTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/renderTabList.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 { TabListBaseState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListBaseState, contextValues: TabListContextValues): JSXElement => {\n  assertSlots<TabListSlots>(state);\n\n  return (\n    <state.root>\n      <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAyBC;IAC9DJ,YAA0BG;IAE1B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAgBK,OAAOF,cAAcG,OAAO;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGzE,EAAE"}

node_modules/@fluentui/react-tabs/lib/components/TabList/useTabList.js

@@ -0,0 +1,122 @@
+'use client';
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useControllableState, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */ export const useTabList_unstable = (props, ref)=>{
+    const { appearance = 'transparent', reserveSelectedTabSpace = true, size = 'medium' } = props;
+    const state = useTabListBase_unstable(props, ref);
+    const focusAttributes = useTabListA11yBehavior_unstable({
+        vertical: state.vertical
+    });
+    return {
+        ...state,
+        root: {
+            ...focusAttributes,
+            ...state.root
+        },
+        appearance,
+        reserveSelectedTabSpace,
+        size
+    };
+};
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */ export const useTabListBase_unstable = (props, ref)=>{
+    const { disabled = false, onTabSelect, selectTabOnFocus = false, vertical = false, selectedValue: controlledSelectedValue, defaultSelectedValue, ...rest } = props;
+    const innerRef = React.useRef(null);
+    const [selectedValue, setSelectedValue] = useControllableState({
+        state: controlledSelectedValue,
+        defaultState: defaultSelectedValue,
+        initialState: undefined
+    });
+    // considered usePrevious, but it is sensitive to re-renders
+    // this could cause the previous to move to current in the case where the tab list re-renders.
+    // these refs avoid getRegisteredTabs changing when selectedValue changes and causing
+    // renders for tabs that have not changed.
+    const currentSelectedValue = React.useRef(undefined);
+    const previousSelectedValue = React.useRef(undefined);
+    React.useEffect(()=>{
+        previousSelectedValue.current = currentSelectedValue.current;
+        currentSelectedValue.current = selectedValue;
+    }, [
+        selectedValue
+    ]);
+    const onSelect = useEventCallback((event, data)=>{
+        setSelectedValue(data.value);
+        onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
+    });
+    const registeredTabs = React.useRef({});
+    const onRegister = useEventCallback((data)=>{
+        const key = JSON.stringify(data.value);
+        if (!key && process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error([
+                `[@fluentui/react-tabs] The value "${data.value}" cannot be serialized to JSON string.`,
+                'Tab component requires serializable values.',
+                'Please provide a primitive value (string, number, boolean),',
+                `or a plain object/array that doesn't contain functions, symbols, or circular references.`
+            ].join(' '));
+        }
+        registeredTabs.current[key] = data;
+    });
+    const onUnregister = useEventCallback((data)=>{
+        delete registeredTabs.current[JSON.stringify(data.value)];
+    });
+    const getRegisteredTabs = React.useCallback(()=>{
+        return {
+            selectedValue: currentSelectedValue.current,
+            previousSelectedValue: previousSelectedValue.current,
+            registeredTabs: registeredTabs.current
+        };
+    }, []);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always({
+            ref: useMergedRefs(ref, innerRef),
+            role: 'tablist',
+            'aria-orientation': vertical ? 'vertical' : 'horizontal',
+            ...rest
+        }, {
+            elementType: 'div'
+        }),
+        disabled,
+        selectTabOnFocus,
+        selectedValue,
+        onRegister,
+        onUnregister,
+        onSelect,
+        getRegisteredTabs,
+        vertical
+    };
+};
+/**
+ * Hook to get accessibility attributes for TabList component, such as roving tab index.
+ * Based on Tabster's useArrowNavigationGroup.
+ *
+ * @param vertical - whether the TabList is vertical
+ * @returns Tabster DOM attributes
+ */ export const useTabListA11yBehavior_unstable = ({ vertical })=>{
+    return useArrowNavigationGroup({
+        circular: true,
+        axis: vertical ? 'vertical' : 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+};

node_modules/@fluentui/react-tabs/lib/components/TabList/useTabListContextValues.js

@@ -0,0 +1,19 @@
+export function useTabListContextValues_unstable(state) {
+    const { appearance, reserveSelectedTabSpace, disabled, selectTabOnFocus, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;
+    const tabList = {
+        appearance,
+        reserveSelectedTabSpace,
+        disabled,
+        selectTabOnFocus,
+        selectedValue: selectedKey,
+        onSelect,
+        onRegister,
+        onUnregister,
+        getRegisteredTabs,
+        size,
+        vertical
+    };
+    return {
+        tabList
+    };
+}

node_modules/@fluentui/react-tabs/lib/components/TabList/useTabListContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n  const {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue: selectedKey,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n    size,\n    vertical,\n  } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    reserveSelectedTabSpace,\n    disabled,\n    selectTabOnFocus,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectTabOnFocus","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"mappings":"AAEA,OAAO,SAASA,iCAAiCC,KAAmB;IAClE,MAAM,EACJC,UAAU,EACVC,uBAAuB,EACvBC,QAAQ,EACRC,gBAAgB,EAChBC,eAAeC,WAAW,EAC1BC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,iBAAiB,EACjBC,IAAI,EACJC,QAAQ,EACT,GAAGZ;IAEJ,MAAMa,UAA+B;QACnCZ;QACAC;QACAC;QACAC;QACAC,eAAeC;QACfG;QACAF;QACAC;QACAE;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAQ;AACnB"}

node_modules/@fluentui/react-tabs/lib/components/TabList/useTabListStyles.styles.js

@@ -0,0 +1,59 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tabListClassNames = {
+  root: 'fui-TabList'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Bnnss6s: "fi64zpg",
+    Eh141a: "flvyvdh",
+    qhf8xq: "f10pi13n"
+  },
+  horizontal: {
+    Bt984gj: "f1q9h2pe",
+    Beiy3e4: "f1063pyq"
+  },
+  vertical: {
+    Bt984gj: "f1q9h2pe",
+    Beiy3e4: "f1vx9l62"
+  },
+  roundedSmall: {
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f1eyhf9v"
+  },
+  rounded: {
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "faqewft"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".fi64zpg{flex-shrink:0;}", ".flvyvdh{flex-wrap:nowrap;}", ".f10pi13n{position:relative;}", ".f1q9h2pe{align-items:stretch;}", ".f1vx9l62{flex-direction:column;}", [".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}", {
+    p: -1
+  }], [".faqewft{gap:var(--spacingHorizontalS);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the TabList slots based on the state
+ */
+export const useTabListStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    appearance,
+    vertical,
+    size
+  } = state;
+  const styles = useStyles();
+  const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';
+  state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);
+  return state;
+};

node_modules/@fluentui/react-tabs/lib/components/TabList/useTabListStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","roundedSmall","i8kkvl","Belr9w4","rmohyg","rounded","d","p","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"sources":["useTabListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tabListClassNames = {\n    root: 'fui-TabList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        flexShrink: 0,\n        flexWrap: 'nowrap',\n        position: 'relative'\n    },\n    horizontal: {\n        alignItems: 'stretch',\n        flexDirection: 'row'\n    },\n    vertical: {\n        alignItems: 'stretch',\n        flexDirection: 'column'\n    },\n    roundedSmall: {\n        gap: tokens.spacingHorizontalSNudge\n    },\n    rounded: {\n        gap: tokens.spacingHorizontalS\n    }\n});\n/**\n * Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n    'use no memo';\n    const { appearance, vertical, size } = state;\n    const styles = useStyles();\n    const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';\n    state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAL,OAAA;EAAA;EAAAM,QAAA;IAAAD,OAAA;IAAAL,OAAA;EAAA;EAAAO,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAM;IAAEC,UAAU;IAAEV,QAAQ;IAAEW;EAAK,CAAC,GAAGF,KAAK;EAC5C,MAAMG,MAAM,GAAGpB,SAAS,CAAC,CAAC;EAC1B,MAAMqB,SAAS,GAAGH,UAAU,KAAK,iBAAiB,IAAIA,UAAU,KAAK,iBAAiB;EACtFD,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG1B,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEqB,MAAM,CAACrB,IAAI,EAAES,QAAQ,GAAGY,MAAM,CAACZ,QAAQ,GAAGY,MAAM,CAACd,UAAU,EAAEe,SAAS,KAAKF,IAAI,KAAK,OAAO,GAAGC,MAAM,CAACX,YAAY,GAAGW,MAAM,CAACP,OAAO,CAAC,EAAEI,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EACtN,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-tabs/lib/components/TabList/useTabListStyles.styles.raw.js

@@ -0,0 +1,41 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tabListClassNames = {
+    root: 'fui-TabList'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexShrink: 0,
+        flexWrap: 'nowrap',
+        position: 'relative'
+    },
+    horizontal: {
+        alignItems: 'stretch',
+        flexDirection: 'row'
+    },
+    vertical: {
+        alignItems: 'stretch',
+        flexDirection: 'column'
+    },
+    roundedSmall: {
+        gap: tokens.spacingHorizontalSNudge
+    },
+    rounded: {
+        gap: tokens.spacingHorizontalS
+    }
+});
+/**
+ * Apply styling to the TabList slots based on the state
+ */ export const useTabListStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, vertical, size } = state;
+    const styles = useStyles();
+    const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';
+    state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);
+    return state;
+};

node_modules/@fluentui/react-tabs/lib/components/TabList/useTabListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n  root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexShrink: 0,\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  horizontal: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n  },\n  vertical: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n  roundedSmall: {\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  rounded: {\n    gap: tokens.spacingHorizontalS,\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  'use no memo';\n\n  const { appearance, vertical, size } = state;\n\n  const styles = useStyles();\n\n  const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded),\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tabListClassNames","root","useStyles","display","flexDirection","flexShrink","flexWrap","position","horizontal","alignItems","vertical","roundedSmall","gap","spacingHorizontalSNudge","rounded","spacingHorizontalS","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,UAAU;QACVC,UAAU;IACZ;IACAC,YAAY;QACVC,YAAY;QACZL,eAAe;IACjB;IACAM,UAAU;QACRD,YAAY;QACZL,eAAe;IACjB;IACAO,cAAc;QACZC,KAAKb,OAAOc,uBAAuB;IACrC;IACAC,SAAS;QACPF,KAAKb,OAAOgB,kBAAkB;IAChC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAM,EAAEC,UAAU,EAAER,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAEvC,MAAMG,SAASlB;IAEf,MAAMmB,YAAYH,eAAe,qBAAqBA,eAAe;IAErED,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,kBAAkBC,IAAI,EACtBmB,OAAOnB,IAAI,EACXS,WAAWU,OAAOV,QAAQ,GAAGU,OAAOZ,UAAU,EAC9Ca,aAAcF,CAAAA,SAAS,UAAUC,OAAOT,YAAY,GAAGS,OAAON,OAAO,AAAD,GACpEG,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}