feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/Toolbar.js

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Toolbar", {
+    enumerable: true,
+    get: function() {
+        return Toolbar;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useToolbar = require("./useToolbar");
+const _renderToolbar = require("./renderToolbar");
+const _useToolbarStylesstyles = require("./useToolbarStyles.styles");
+const _useToolbarContextValues = require("./useToolbarContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Toolbar = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useToolbar.useToolbar_unstable)(props, ref);
+    const contextValues = (0, _useToolbarContextValues.useToolbarContextValues_unstable)(state);
+    (0, _useToolbarStylesstyles.useToolbarStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarStyles_unstable')(state);
+    return (0, _renderToolbar.renderToolbar_unstable)(state, contextValues);
+});
+Toolbar.displayName = 'Toolbar';

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles.styles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n\n  useToolbarStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);\n\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","useCustomStyleHook_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;yCAGrB,4BAA4B;qCACjC,kCAAkC;AAKvE,MAAMM,UAAAA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,yDAAAA,EAAiCM;QAEvDP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/Toolbar.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/Toolbar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/Toolbar.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n  /** The items for this value that are checked */\n  checkedItems: string[];\n  /** The name of the value */\n  name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n  /**\n   * Toolbar can have small or medium size\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Toolbar can be vertical styled\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * Map of all checked values\n   */\n  checkedValues?: Record<string, string[]>;\n\n  /**\n   * Default values to be checked on mount\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n\n  /**\n   * Callback when checked items change for value with a name\n   *\n   * @param event - React's original SyntheticEvent\n   * @param data - A data object with relevant information\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\nexport type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n  Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n  Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleToggleButton: ToggableHandler;\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleRadio: ToggableHandler;\n  };\n\nexport type ToolbarBaseState = Omit<ToolbarState, 'size'>;\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n  handleToggleButton?: ToggableHandler;\n  handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n  toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarBaseState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &\n  Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked?: boolean,\n) => void;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/ToolbarContext.js

@@ -0,0 +1,29 @@
+'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, {
+    ToolbarContext: function() {
+        return ToolbarContext;
+    },
+    useToolbarContext_unstable: function() {
+        return useToolbarContext_unstable;
+    }
+});
+const _reactcontextselector = require("@fluentui/react-context-selector");
+const ToolbarContext = (0, _reactcontextselector.createContext)(undefined);
+const toolbarContextDefaultValue = {
+    size: 'medium',
+    handleToggleButton: ()=>null,
+    handleRadio: ()=>null,
+    vertical: false,
+    checkedValues: {}
+};
+const useToolbarContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(ToolbarContext, (ctx = toolbarContextDefaultValue)=>selector(ctx));

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/ToolbarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["'use client';\n\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;kBAMaE;;;8BAUAQ;;;;sCAdsD,mCAAmC;AAI/F,MAAMR,qBAAiBF,mCAAAA,EAA+CG,WAA2C;AAExH,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,oBAAoB,IAAM;IAC1BC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe,CAAC;AAClB;AAEO,MAAMC,6BAA6B,CAAIC,eAC5CV,wCAAAA,EAAmBC,gBAAgB,CAACU,MAAMR,0BAA0B,GAAKO,SAASC,MAAM"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/index.js

@@ -0,0 +1,42 @@
+"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, {
+    Toolbar: function() {
+        return _Toolbar.Toolbar;
+    },
+    renderToolbar_unstable: function() {
+        return _renderToolbar.renderToolbar_unstable;
+    },
+    toolbarClassNames: function() {
+        return _useToolbarStylesstyles.toolbarClassNames;
+    },
+    useToolbarBase_unstable: function() {
+        return _useToolbar.useToolbarBase_unstable;
+    },
+    useToolbarContextValues_unstable: function() {
+        return _useToolbarContextValues.useToolbarContextValues_unstable;
+    },
+    useToolbarContext_unstable: function() {
+        return _ToolbarContext.useToolbarContext_unstable;
+    },
+    useToolbarStyles_unstable: function() {
+        return _useToolbarStylesstyles.useToolbarStyles_unstable;
+    },
+    useToolbar_unstable: function() {
+        return _useToolbar.useToolbar_unstable;
+    }
+});
+const _ToolbarContext = require("./ToolbarContext");
+const _Toolbar = require("./Toolbar");
+const _renderToolbar = require("./renderToolbar");
+const _useToolbar = require("./useToolbar");
+const _useToolbarContextValues = require("./useToolbarContextValues");
+const _useToolbarStylesstyles = require("./useToolbarStyles.styles");

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/index.ts"],"sourcesContent":["export { useToolbarContext_unstable } from './ToolbarContext';\nexport { Toolbar } from './Toolbar';\nexport type {\n  ToggableHandler,\n  ToolbarCheckedValueChangeData,\n  ToolbarCheckedValueChangeEvent,\n  ToolbarContextValue,\n  ToolbarContextValues,\n  ToolbarBaseProps,\n  ToolbarProps,\n  ToolbarSlots,\n  ToolbarBaseState,\n  ToolbarState,\n  UninitializedToolbarState,\n} from './Toolbar.types';\nexport { renderToolbar_unstable } from './renderToolbar';\nexport { useToolbar_unstable, useToolbarBase_unstable } from './useToolbar';\nexport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nexport { toolbarClassNames, useToolbarStyles_unstable } from './useToolbarStyles.styles';\n"],"names":["useToolbarContext_unstable","Toolbar","renderToolbar_unstable","useToolbar_unstable","useToolbarBase_unstable","useToolbarContextValues_unstable","toolbarClassNames","useToolbarStyles_unstable"],"mappings":";;;;;;;;;;;IACSC;+BAAO;;;eAcPC,qCAAsB;;;eAGtBI,yCAAiB;;;eAFIF,mCAAuB;;;eAC5CC,yDAAgC;;;eAjBhCL,0CAA0B;;;eAkBPO,iDAAyB;;;eAF5CJ,+BAAmB;;;gCAhBe,mBAAmB;yBACtC,YAAY;+BAcG,kBAAkB;4BACI,eAAe;yCAC3B,4BAA4B;wCAChB,4BAA4B"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/renderToolbar.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderToolbar_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderToolbar_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _ToolbarContext = require("./ToolbarContext");
+const renderToolbar_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {
+        value: contextValues.toolbar,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+            children: state.root.children
+        })
+    });
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/renderToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/renderToolbar.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 { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues): JSXElement => {\n  assertSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <state.root>{state.root.children}</state.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGzB,mBAAmB;AAK3C,+BAA+B,CAACC,OAAqBC;QAC1DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACF,8BAAAA,CAAeI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,OAAO;kBACnD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/useToolbar.js

@@ -0,0 +1,137 @@
+'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, {
+    useToolbarArrowNavigationProps_unstable: function() {
+        return useToolbarArrowNavigationProps_unstable;
+    },
+    useToolbarBase_unstable: function() {
+        return useToolbarBase_unstable;
+    },
+    useToolbar_unstable: function() {
+        return useToolbar_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttabster = require("@fluentui/react-tabster");
+const useToolbar_unstable = (props, ref)=>{
+    const { size = 'medium' } = props;
+    const state = useToolbarBase_unstable(props, ref);
+    const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();
+    return {
+        size,
+        ...state,
+        root: {
+            ...state.root,
+            ...arrowNavigationProps
+        }
+    };
+};
+const useToolbarBase_unstable = (props, ref)=>{
+    const { vertical = false } = props;
+    const initialState = {
+        vertical,
+        // TODO add appropriate props/defaults
+        components: {
+            // TODO add each slot's element type or component
+            root: 'div'
+        },
+        // TODO add appropriate slots, for example:
+        // mySlot: resolveShorthand(props.mySlot),
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            role: 'toolbar',
+            ref: ref,
+            ...vertical && {
+                'aria-orientation': 'vertical'
+            },
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+    const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
+        checkedValues: props.checkedValues,
+        defaultCheckedValues: props.defaultCheckedValues,
+        onCheckedValueChange: props.onCheckedValueChange
+    });
+    const handleToggleButton = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
+        if (name && value) {
+            const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
+            const newCheckedItems = [
+                ...checkedItems
+            ];
+            if (checked) {
+                newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
+            } else {
+                newCheckedItems.push(value);
+            }
+            onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+                name,
+                checkedItems: newCheckedItems
+            });
+        }
+    });
+    const handleRadio = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
+        if (name && value) {
+            onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+                name,
+                checkedItems: [
+                    value
+                ]
+            });
+        }
+    });
+    return {
+        ...initialState,
+        handleToggleButton,
+        handleRadio,
+        checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
+    };
+};
+/**
+ * Adds appropriate state values and handlers for selectable items
+ * i.e checkboxes and radios
+ */ const useToolbarSelectableState = (state)=>{
+    const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
+        state: state.checkedValues,
+        defaultState: state.defaultCheckedValues,
+        initialState: {}
+    });
+    const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
+    const onCheckedValueChange = (0, _reactutilities.useEventCallback)((e, { name, checkedItems })=>{
+        if (onCheckedValueChangeOriginal) {
+            onCheckedValueChangeOriginal(e, {
+                name,
+                checkedItems
+            });
+        }
+        setCheckedValues((s)=>{
+            return s ? {
+                ...s,
+                [name]: checkedItems
+            } : {
+                [name]: checkedItems
+            };
+        });
+    });
+    return [
+        checkedValues,
+        onCheckedValueChange
+    ];
+};
+const useToolbarArrowNavigationProps_unstable = ()=>{
+    return (0, _reacttabster.useArrowNavigationGroup)({
+        circular: true,
+        axis: 'both'
+    });
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/useToolbarContextValues.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToolbarContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToolbarContextValues_unstable;
+    }
+});
+function useToolbarContextValues_unstable(state) {
+    const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;
+    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
+    const toolbar = {
+        size,
+        vertical,
+        handleToggleButton,
+        handleRadio,
+        checkedValues
+    };
+    return {
+        toolbar
+    };
+}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/useToolbarContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"mappings":";;;;+BAEgBA;;;;;;AAAT,0CAA0CC,KAAmB;IAClE,MAAM,EAAEC,IAAI,EAAEC,kBAAkB,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGL;IAC3E,mGAAmG;IACnG,MAAMM,UAA+B;QACnCL;QACAE;QACAD;QACAG;QACAD;IACF;IAEA,OAAO;QAAEE;IAAQ;AACnB"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js

@@ -0,0 +1,99 @@
+'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, {
+    toolbarClassNames: function() {
+        return toolbarClassNames;
+    },
+    useToolbarStyles_unstable: function() {
+        return useToolbarStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toolbarClassNames = {
+    root: 'fui-Toolbar'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1yqiaad"
+    },
+    vertical: {
+        Beiy3e4: "f1vx9l62",
+        a9b677: "f1acs6jw"
+    },
+    small: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fvz760z"
+    },
+    medium: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1yqiaad"
+    },
+    large: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1ms6bdn"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        [
+            ".f1yqiaad{padding:4px 8px;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1vx9l62{flex-direction:column;}",
+        ".f1acs6jw{width:fit-content;}",
+        [
+            ".fvz760z{padding:0px 4px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1yqiaad{padding:4px 8px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1ms6bdn{padding:4px 20px;}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useToolbarStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { vertical, size } = state;
+    state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n    root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '4px 8px'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    },\n    small: {\n        padding: '0px 4px'\n    },\n    medium: {\n        padding: '4px 8px'\n    },\n    large: {\n        padding: '4px 20px'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { vertical, size } = state;\n    state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,iBAAiB;;;IA2BbkB,yBAAyB;;;;uBA5BD,gBAAgB;AAClD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,kCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEQ,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;IAChCA,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGvB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IAC1Q,OAAOH,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/useToolbarStyles.styles.raw.js

@@ -0,0 +1,52 @@
+'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, {
+    toolbarClassNames: function() {
+        return toolbarClassNames;
+    },
+    useToolbarStyles_unstable: function() {
+        return useToolbarStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toolbarClassNames = {
+    root: 'fui-Toolbar'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '4px 8px'
+    },
+    vertical: {
+        flexDirection: 'column',
+        width: 'fit-content'
+    },
+    small: {
+        padding: '0px 4px'
+    },
+    medium: {
+        padding: '4px 8px'
+    },
+    large: {
+        padding: '4px 20px'
+    }
+});
+const useToolbarStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { vertical, size } = state;
+    state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toolbar/lib-commonjs/components/Toolbar/useToolbarStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '4px 8px',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: { padding: '0px 4px' },\n  medium: { padding: '4px 8px' },\n  large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,iBAAAA;;;6BAyBAY;eAAAA;;;uBA5B4B,iBAAiB;AAGnD,0BAAwD;IAC7DX,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,kCAAkC,CAACQ;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3BA,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}