feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { renderCompoundButton_unstable } from './renderCompoundButton';
+import { useCompoundButton_unstable } from './useCompoundButton';
+import { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
+ */ export const CompoundButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCompoundButton_unstable(props, ref);
+    useCompoundButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);
+    return 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/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ;AACrC,0FAA0F;AAC5F,GAA+C;AAE/CJ,eAAeK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-button/lib/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":"AAkBA,WACsD"}

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

@@ -0,0 +1,4 @@
+export { CompoundButton } from './CompoundButton';
+export { renderCompoundButton_unstable } from './renderCompoundButton';
+export { useCompoundButton_unstable } from './useCompoundButton';
+export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';

node_modules/@fluentui/react-button/lib/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":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

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

@@ -0,0 +1,20 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
+ */ export const renderCompoundButton_unstable = (state)=>{
+    assertSlots(state);
+    const { iconOnly, iconPosition } = state;
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            iconPosition !== 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            !iconOnly && /*#__PURE__*/ _jsxs(state.contentContainer, {
+                children: [
+                    state.root.children,
+                    state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {})
+                ]
+            }),
+            iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-button/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,0BACA,MAACD,MAAMK,gBAAgB;;oBACpBL,MAAMG,IAAI,CAACG,QAAQ;oBACnBN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;;;YAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}

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

@@ -0,0 +1,32 @@
+'use client';
+import * as React from 'react';
+import { slot } from '@fluentui/react-utilities';
+import { useButton_unstable } from '../Button/index';
+/**
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the CompoundButton component.
+ * @param ref - User provided ref to be passed to the CompoundButton component.
+ */ export const useCompoundButton_unstable = (props, ref)=>{
+    var _state_icon, _state_secondaryContent;
+    const { contentContainer, secondaryContent, ...buttonProps } = props;
+    const state = {
+        // Button state
+        ...useButton_unstable(buttonProps, ref),
+        // Slots definition
+        components: {
+            root: 'button',
+            icon: 'span',
+            contentContainer: 'span',
+            secondaryContent: 'span'
+        },
+        contentContainer: slot.always(contentContainer, {
+            elementType: 'span'
+        }),
+        secondaryContent: 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/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;QAoByBC,aAA4CA;IAlBrE,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,aAAa,GAAGL;IAE/D,MAAME,QAA6B;QACjC,eAAe;QACf,GAAGJ,mBAAmBO,aAAaJ,IAAI;QAEvC,mBAAmB;QACnBK,YAAY;YACVC,MAAM;YACNC,MAAM;YACNL,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBN,KAAKY,MAAM,CAACN,kBAAkB;YAAEO,aAAa;QAAO;QACtEN,kBAAkBP,KAAKc,QAAQ,CAACP,kBAAkB;YAAEM,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DR,MAAMU,QAAQ,GAAGC,QAAQX,EAAAA,cAAAA,MAAMM,IAAI,cAAVN,kCAAAA,YAAYY,QAAQ,KAAI,CAACd,MAAMc,QAAQ,IAAI,GAACZ,0BAAAA,MAAME,gBAAgB,cAAtBF,8CAAAA,wBAAwBY,QAAQ;IAErG,OAAOZ;AACT,EAAE"}

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

@@ -0,0 +1,219 @@
+'use client';
+
+import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, __styles } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const compoundButtonClassNames = {
+  root: 'fui-CompoundButton',
+  icon: 'fui-CompoundButton__icon',
+  contentContainer: 'fui-CompoundButton__contentContainer',
+  secondaryContent: 'fui-CompoundButton__secondaryContent'
+};
+const useRootStyles = /*#__PURE__*/__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__*/__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__*/__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__*/__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__*/__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);}"]
+});
+export 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 = 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 = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
+  }
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+  }
+  useButtonStyles_unstable(state);
+  return state;
+};

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

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