feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/CompoundButton.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CompoundButton", {
+    enumerable: true,
+    get: function() {
+        return CompoundButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderCompoundButton = require("./renderCompoundButton");
+const _useCompoundButton = require("./useCompoundButton");
+const _useCompoundButtonStylesstyles = require("./useCompoundButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const CompoundButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCompoundButton.useCompoundButton_unstable)(props, ref);
+    (0, _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCompoundButtonStyles_unstable')(state);
+    return (0, _renderCompoundButton.renderCompoundButton_unstable)(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+CompoundButton.displayName = 'CompoundButton';

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/CompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);\n\n  return renderCompoundButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;sCACe,yBAAyB;mCAC5B,sBAAsB;+CAChB,mCAAmC;qCAGxC,kCAAkC;AAKvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQP,6CAAAA,EAA2BK,OAAOC;QAEhDL,+DAAAA,EAAiCM;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOR,mDAAAA,EAA8BQ;AACrC,0FAA0F;AAC5F,GAA+C;AAE/CJ,eAAeK,WAAW,GAAG"}

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/CompoundButton.types.js

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

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n  /**\n   * Second line of text that describes the action this button takes.\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Container that wraps the children and the secondaryContent slot.\n   */\n  contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components'>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/index.js

@@ -0,0 +1,31 @@
+"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, {
+    CompoundButton: function() {
+        return _CompoundButton.CompoundButton;
+    },
+    compoundButtonClassNames: function() {
+        return _useCompoundButtonStylesstyles.compoundButtonClassNames;
+    },
+    renderCompoundButton_unstable: function() {
+        return _renderCompoundButton.renderCompoundButton_unstable;
+    },
+    useCompoundButtonStyles_unstable: function() {
+        return _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable;
+    },
+    useCompoundButton_unstable: function() {
+        return _useCompoundButton.useCompoundButton_unstable;
+    }
+});
+const _CompoundButton = require("./CompoundButton");
+const _renderCompoundButton = require("./renderCompoundButton");
+const _useCompoundButton = require("./useCompoundButton");
+const _useCompoundButtonStylesstyles = require("./useCompoundButtonStyles.styles");

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButton_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAIdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,mBAAmB;sCAEJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/renderCompoundButton.js

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

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState): JSXElement => {\n  assertSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && (\n        <state.contentContainer>\n          {state.root.children}\n          {state.secondaryContent && <state.secondaryContent />}\n        </state.contentContainer>\n      )}\n\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCompoundButton_unstable","state","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;AAQjD,sCAAsC,CAACC;QAC5CF,2BAAAA,EAAiCE;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;YACrD,CAACH,YAAAA,WAAAA,GACA,oBAAA,EAACD,MAAMK,gBAAgB,EAAA;;oBACpBL,MAAMG,IAAI,CAACG,QAAQ;oBACnBN,MAAMO,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,gBAAgB,EAAA,CAAA;;;YAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAG5D,EAAE"}

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/useCompoundButton.js

@@ -0,0 +1,39 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCompoundButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCompoundButton_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 _index = require("../Button/index");
+const useCompoundButton_unstable = (props, ref)=>{
+    var _state_icon, _state_secondaryContent;
+    const { contentContainer, secondaryContent, ...buttonProps } = props;
+    const state = {
+        // Button state
+        ...(0, _index.useButton_unstable)(buttonProps, ref),
+        // Slots definition
+        components: {
+            root: 'button',
+            icon: 'span',
+            contentContainer: 'span',
+            secondaryContent: 'span'
+        },
+        contentContainer: _reactutilities.slot.always(contentContainer, {
+            elementType: 'span'
+        }),
+        secondaryContent: _reactutilities.slot.optional(secondaryContent, {
+            elementType: 'span'
+        })
+    };
+    // Recalculate iconOnly to take into account secondaryContent.
+    state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
+    return state;
+};

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/useCompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const { contentContainer, secondaryContent, ...buttonProps } = props;\n\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(buttonProps, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n    secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","props","ref","state","contentContainer","secondaryContent","buttonProps","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;;;;;+BAYaG;;;;;;;iEAVU,QAAQ;gCACV,4BAA4B;uBACd,kBAAkB;AAQ9C,mCAAmC,CACxCC,OACAC;QAoByBC,aAA4CA;IAlBrE,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,aAAa,GAAGL;IAE/D,MAAME,QAA6B;QACjC,eAAe;QACf,OAAGJ,yBAAAA,EAAmBO,aAAaJ,IAAI;QAEvC,mBAAmB;QACnBK,YAAY;YACVC,MAAM;YACNC,MAAM;YACNL,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBN,oBAAAA,CAAKY,MAAM,CAACN,kBAAkB;YAAEO,aAAa;QAAO;QACtEN,kBAAkBP,oBAAAA,CAAKc,QAAQ,CAACP,kBAAkB;YAAEM,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DR,MAAMU,QAAQ,GAAGC,QAAQX,CAAAA,CAAAA,cAAAA,MAAMM,IAAAA,AAAI,MAAA,QAAVN,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYY,QAAAA,AAAQ,KAAI,CAACd,MAAMc,QAAQ,IAAI,CAAA,CAAA,CAACZ,0BAAAA,MAAME,gBAAAA,AAAgB,MAAA,QAAtBF,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBY,QAAAA,AAAQ;IAErG,OAAOZ;AACT,EAAE"}

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js

@@ -0,0 +1,330 @@
+'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, {
+    compoundButtonClassNames: function() {
+        return compoundButtonClassNames;
+    },
+    useCompoundButtonStyles_unstable: function() {
+        return useCompoundButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
+const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bqenvij: "f11ysow2",
+        J657lq: "f1um431h",
+        Jlnjib: "fte7hqw",
+        Bo7webf: "frw79jk"
+    },
+    highContrast: {
+        m3fafd: "ffcivv0",
+        pus4l6: "f1wchxtt"
+    },
+    outline: {},
+    primary: {
+        J657lq: "foe7gw6",
+        Jlnjib: "fvxlz81",
+        Bo7webf: "f16twlsn",
+        D126e9: "fsglouz"
+    },
+    secondary: {},
+    subtle: {
+        J657lq: "f1um431h",
+        Jlnjib: "fte7hqw",
+        Bo7webf: "frw79jk",
+        m3fafd: "f13lnigs",
+        pus4l6: "f1ba77l5"
+    },
+    transparent: {
+        J657lq: "f1um431h",
+        Jlnjib: "f1wn9xqz",
+        Bo7webf: "f1juxwb4"
+    },
+    small: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1ge6w2w",
+        Be2twd7: "fkhj508",
+        Bg96gwp: "f1i3iumi"
+    },
+    medium: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fnnf4v2",
+        Be2twd7: "fkhj508",
+        Bg96gwp: "f1i3iumi"
+    },
+    large: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f14s4sho",
+        Be2twd7: "fod5ikn",
+        Bg96gwp: "faaz57k"
+    },
+    disabled: {
+        J657lq: "f1rlv8bf",
+        Jlnjib: "fd1dbtm",
+        Bo7webf: "f1x3eb98"
+    },
+    disabledHighContrast: {
+        D126e9: "fbqh1p7",
+        m3fafd: "fu2tbix",
+        pus4l6: "f1g2tosm"
+    }
+}, {
+    d: [
+        ".f11ysow2{height:auto;}",
+        ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}",
+        ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
+        [
+            ".f1ge6w2w{padding:var(--spacingHorizontalS) var(--spacingHorizontalS) var(--spacingHorizontalMNudge) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        [
+            ".fnnf4v2{padding:14px var(--spacingHorizontalM) var(--spacingHorizontalL) var(--spacingHorizontalM);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f14s4sho{padding:18px var(--spacingHorizontalL) var(--spacingHorizontalXL) var(--spacingHorizontalL);}",
+            {
+                p: -1
+            }
+        ],
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    h: [
+        ".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}",
+        ".frw79jk:hover:active .fui-CompoundButton__secondaryContent,.frw79jk:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}",
+        ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f16twlsn:hover:active .fui-CompoundButton__secondaryContent,.f16twlsn:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}",
+        ".f1juxwb4:hover:active .fui-CompoundButton__secondaryContent,.f1juxwb4:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}",
+        ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1x3eb98:hover:active .fui-CompoundButton__secondaryContent,.f1x3eb98:active:focus-visible .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.ffcivv0:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1wchxtt:hover:active .fui-CompoundButton__secondaryContent,.f1wchxtt:active:focus-visible .fui-CompoundButton__secondaryContent{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fsglouz .fui-CompoundButton__secondaryContent{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f13lnigs:hover .fui-CompoundButton__secondaryContent{color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1ba77l5:hover:active .fui-CompoundButton__secondaryContent,.f1ba77l5:active:focus-visible .fui-CompoundButton__secondaryContent{color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fbqh1p7 .fui-CompoundButton__secondaryContent{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fu2tbix:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1g2tosm:hover:active .fui-CompoundButton__secondaryContent,.f1g2tosm:active:focus-visible .fui-CompoundButton__secondaryContent{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useRootIconOnlyStyles = /*#__PURE__*/ (0, _react.__styles)({
+    small: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1t35pdg",
+        B2u0y6b: "ft5vyj6",
+        Bf4jedk: "f17suaiq"
+    },
+    medium: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1r1wyb6",
+        B2u0y6b: "fdczgix",
+        Bf4jedk: "fjdcg9m"
+    },
+    large: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1bnz8pu",
+        B2u0y6b: "fww51uw",
+        Bf4jedk: "f1qhsl2h"
+    }
+}, {
+    d: [
+        [
+            ".f1t35pdg{padding:var(--spacingHorizontalXS);}",
+            {
+                p: -1
+            }
+        ],
+        ".ft5vyj6{max-width:48px;}",
+        ".f17suaiq{min-width:48px;}",
+        [
+            ".f1r1wyb6{padding:var(--spacingHorizontalSNudge);}",
+            {
+                p: -1
+            }
+        ],
+        ".fdczgix{max-width:52px;}",
+        ".fjdcg9m{min-width:52px;}",
+        [
+            ".f1bnz8pu{padding:var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".fww51uw{max-width:56px;}",
+        ".f1qhsl2h{min-width:56px;}"
+    ]
+});
+const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Be2twd7: "fndrnj9",
+        Bqenvij: "fbhnoac",
+        a9b677: "feqmc2u"
+    },
+    before: {
+        t21cq0: [
+            "fkujibs",
+            "f199hnxi"
+        ]
+    },
+    after: {
+        Frg6f3: [
+            "f199hnxi",
+            "fkujibs"
+        ]
+    }
+}, {
+    d: [
+        ".fndrnj9{font-size:40px;}",
+        ".fbhnoac{height:40px;}",
+        ".feqmc2u{width:40px;}",
+        ".fkujibs{margin-right:var(--spacingHorizontalM);}",
+        ".f199hnxi{margin-left:var(--spacingHorizontalM);}"
+    ]
+});
+const useContentContainerStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ]
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}"
+    ]
+});
+const useSecondaryContentStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bg96gwp: "flkuc6h",
+        Bhrd7zp: "figsok6"
+    },
+    small: {
+        Be2twd7: "fy9rknc"
+    },
+    medium: {
+        Be2twd7: "fy9rknc"
+    },
+    large: {
+        Be2twd7: "fkhj508"
+    }
+}, {
+    d: [
+        ".flkuc6h{line-height:100%;}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}"
+    ]
+});
+const useCompoundButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const contentContainerStyles = useContentContainerStyles();
+    const secondaryContentStyles = useSecondaryContentStyles();
+    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
+    state.root.className = (0, _react.mergeClasses)(compoundButtonClassNames.root, // Root styles
+    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
+    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
+    iconOnly && rootIconOnlyStyles[size], // User provided class name
+    state.root.className);
+    state.contentContainer.className = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    }
+    (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
+    return state;
+};

node_modules/@fluentui/react-button/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js

@@ -0,0 +1,254 @@
+'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, {
+    compoundButtonClassNames: function() {
+        return compoundButtonClassNames;
+    },
+    useCompoundButtonStyles_unstable: function() {
+        return useCompoundButtonStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
+const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+const useRootStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        height: 'auto',
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Hover
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Pressed
+            }
+        }
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Highlight'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Highlight'
+                }
+            }
+        }
+    },
+    // Appearance variations
+    outline: {},
+    primary: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+            }
+        },
+        '@media (forced-colors: active)': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: 'HighlightText'
+            }
+        }
+    },
+    secondary: {},
+    subtle: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Hover
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2Pressed
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Canvas'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'Canvas'
+                }
+            }
+        }
+    },
+    transparent: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground2
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandHover
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
+            }
+        }
+    },
+    // Size variations
+    small: {
+        padding: `${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingHorizontalMNudge} ${_reacttheme.tokens.spacingHorizontalS}`,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        lineHeight: _reacttheme.tokens.lineHeightBase300
+    },
+    medium: {
+        padding: `14px ${_reacttheme.tokens.spacingHorizontalM} ${_reacttheme.tokens.spacingHorizontalL} ${_reacttheme.tokens.spacingHorizontalM}`,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        lineHeight: _reacttheme.tokens.lineHeightBase300
+    },
+    large: {
+        padding: `18px ${_reacttheme.tokens.spacingHorizontalL} ${_reacttheme.tokens.spacingHorizontalXL} ${_reacttheme.tokens.spacingHorizontalL}`,
+        fontSize: _reacttheme.tokens.fontSizeBase400,
+        lineHeight: _reacttheme.tokens.lineHeightBase400
+    },
+    // Disabled styles
+    disabled: {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        },
+        ':hover': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: _reacttheme.tokens.colorNeutralForegroundDisabled
+            }
+        }
+    },
+    // Disabled high contrast styles
+    disabledHighContrast: {
+        '@media (forced-colors: active)': {
+            [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                color: 'GrayText'
+            },
+            ':hover': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                [`& .${compoundButtonClassNames.secondaryContent}`]: {
+                    color: 'GrayText'
+                }
+            }
+        }
+    }
+});
+const useRootIconOnlyStyles = (0, _react.makeStyles)({
+    // Size variations
+    small: {
+        padding: _reacttheme.tokens.spacingHorizontalXS,
+        maxWidth: '48px',
+        minWidth: '48px'
+    },
+    medium: {
+        padding: _reacttheme.tokens.spacingHorizontalSNudge,
+        maxWidth: '52px',
+        minWidth: '52px'
+    },
+    large: {
+        padding: _reacttheme.tokens.spacingHorizontalS,
+        maxWidth: '56px',
+        minWidth: '56px'
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        fontSize: '40px',
+        height: '40px',
+        width: '40px'
+    },
+    // Icon position variations
+    before: {
+        marginRight: _reacttheme.tokens.spacingHorizontalM
+    },
+    after: {
+        marginLeft: _reacttheme.tokens.spacingHorizontalM
+    }
+});
+const useContentContainerStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        display: 'flex',
+        flexDirection: 'column',
+        textAlign: 'left'
+    }
+});
+const useSecondaryContentStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        lineHeight: '100%',
+        fontWeight: _reacttheme.tokens.fontWeightRegular
+    },
+    // Size variations
+    small: {
+        fontSize: _reacttheme.tokens.fontSizeBase200
+    },
+    medium: {
+        fontSize: _reacttheme.tokens.fontSizeBase200
+    },
+    large: {
+        fontSize: _reacttheme.tokens.fontSizeBase300
+    }
+});
+const useCompoundButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const contentContainerStyles = useContentContainerStyles();
+    const secondaryContentStyles = useSecondaryContentStyles();
+    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
+    state.root.className = (0, _react.mergeClasses)(compoundButtonClassNames.root, rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, iconOnly && rootIconOnlyStyles[size], state.root.className);
+    state.contentContainer.className = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    }
+    (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
+    return state;
+};