feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-button/lib/Button.js

@@ -0,0 +1 @@
+export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from './components/Button/index';

node_modules/@fluentui/react-button/lib/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type {\n  ButtonBaseProps,\n  ButtonProps,\n  ButtonSlots,\n  ButtonBaseState,\n  ButtonState,\n} from './components/Button/index';\nexport {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable"],"mappings":"AAOA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}

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

@@ -0,0 +1 @@
+export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './components/CompoundButton/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}

node_modules/@fluentui/react-button/lib/MenuButton.js

@@ -0,0 +1 @@
+export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './components/MenuButton/index';

node_modules/@fluentui/react-button/lib/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}

node_modules/@fluentui/react-button/lib/SplitButton.js

@@ -0,0 +1 @@
+export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './components/SplitButton/index';

node_modules/@fluentui/react-button/lib/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

node_modules/@fluentui/react-button/lib/ToggleButton.js

@@ -0,0 +1 @@
+export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from './components/ToggleButton/index';

node_modules/@fluentui/react-button/lib/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './components/ToggleButton/index';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable"],"mappings":"AAMA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { renderButton_unstable } from './renderButton';
+import { useButton_unstable } from './useButton';
+import { useButtonStyles_unstable } from './useButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Buttons give people a way to trigger an action.
+ */ export const Button = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useButton_unstable(props, ref);
+    useButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useButtonStyles_unstable')(state);
+    return renderButton_unstable(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+Button.displayName = 'Button';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useButtonStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOR,sBAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n  /**\n   * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n   */\n  icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n  /**\n   * A button can have its content and borders styled for greater emphasis or to be subtle.\n   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n   * - 'primary': Emphasizes the button as a primary action.\n   * - 'outline': Removes background styling.\n   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   * - 'transparent': Removes background and border styling.\n   *\n   * @default 'secondary'\n   */\n  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n  /**\n   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * A button can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A button can format its icon to appear before or after its content.\n   *\n   * @default 'before'\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A button can be rounded, circular, or square.\n   *\n   * @default 'rounded'\n   */\n  shape?: 'rounded' | 'circular' | 'square';\n\n  /**\n   * A button supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: ButtonSize;\n};\n\nexport type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n  Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n    /**\n     * A button can contain only an icon.\n     *\n     * @default false\n     */\n    iconOnly: boolean;\n  };\n\nexport type ButtonBaseState = DistributiveOmit<ButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":"AAmFA,WAA6F"}

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

@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export { renderButton_unstable } from './renderButton';
+export { useButton_unstable, useButtonBase_unstable } from './useButton';
+export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonBaseProps, ButtonProps, ButtonSlots, ButtonBaseState, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable, useButtonBase_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","useButtonBase_unstable","buttonClassNames","useButtonStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAGlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

node_modules/@fluentui/react-button/lib/components/Button/renderButton.js

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

node_modules/@fluentui/react-button/lib/components/Button/renderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/renderButton.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 { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState): JSXElement => {\n  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,qBACE,MAACA,MAAMG,IAAI;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAG5D,EAAE"}

node_modules/@fluentui/react-button/lib/components/Button/useButton.js

@@ -0,0 +1,50 @@
+'use client';
+import * as React from 'react';
+import { useButtonContext } from '../../contexts/ButtonContext';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { slot } from '@fluentui/react-utilities';
+/**
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */ export const useButton_unstable = (props, ref)=>{
+    const { size: contextSize } = useButtonContext();
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...buttonProps } = props;
+    const state = useButtonBase_unstable(buttonProps, ref);
+    return {
+        appearance,
+        shape,
+        size,
+        ...state
+    };
+};
+/**
+ * Base hook for Button component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */ export const useButtonBase_unstable = (props, ref)=>{
+    const { icon, iconPosition = 'before', ...buttonProps } = props;
+    const iconShorthand = slot.optional(icon, {
+        elementType: 'span'
+    });
+    var _props_disabled, _props_disabledFocusable;
+    return {
+        disabled: (_props_disabled = props.disabled) !== null && _props_disabled !== void 0 ? _props_disabled : false,
+        disabledFocusable: (_props_disabledFocusable = props.disabledFocusable) !== null && _props_disabledFocusable !== void 0 ? _props_disabledFocusable : false,
+        iconPosition,
+        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+        components: {
+            root: 'button',
+            icon: 'span'
+        },
+        root: slot.always(useARIAButtonProps(buttonProps.as, buttonProps), {
+            elementType: 'button',
+            defaultProps: {
+                ref: ref,
+                type: props.as !== 'a' ? 'button' : undefined
+            }
+        }),
+        icon: iconShorthand
+    };
+};

node_modules/@fluentui/react-button/lib/components/Button/useButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n  const state = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Button component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButtonBase_unstable = (\n  props: ButtonBaseProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n  const { icon, iconPosition = 'before', ...buttonProps } = props;\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n\n  return {\n    disabled: props.disabled ?? false,\n    disabledFocusable: props.disabledFocusable ?? false,\n    iconPosition,\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n    components: { root: 'button', icon: 'span' },\n    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: props.as !== 'a' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["React","useButtonContext","useARIAButtonProps","slot","useButton_unstable","props","ref","size","contextSize","appearance","shape","buttonProps","state","useButtonBase_unstable","icon","iconPosition","iconShorthand","optional","elementType","disabled","disabledFocusable","iconOnly","Boolean","children","components","root","always","as","defaultProps","type","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,IAAI,QAAQ,4BAA4B;AAGjD;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGP;IAC9B,MAAM,EAAEQ,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,aAAa,GAAGN;IACxG,MAAMO,QAAQC,uBAAuBF,aAAaL;IAElD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGK,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,yBAAyB,CACpCR,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGJ,aAAa,GAAGN;IAC1D,MAAMW,gBAAgBb,KAAKc,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;QAGpDb,iBACSA;IAFrB,OAAO;QACLc,UAAUd,CAAAA,kBAAAA,MAAMc,QAAQ,cAAdd,6BAAAA,kBAAkB;QAC5Be,mBAAmBf,CAAAA,2BAAAA,MAAMe,iBAAiB,cAAvBf,sCAAAA,2BAA2B;QAC9CU;QACAM,UAAUC,QAAQN,CAAAA,0BAAAA,oCAAAA,cAAeO,QAAQ,KAAI,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMtB,KAAKuB,MAAM,CAA2BxB,mBAAmBS,YAAYgB,EAAE,EAAEhB,cAAc;YAC3FO,aAAa;YACbU,cAAc;gBACZtB,KAAKA;gBACLuB,MAAMxB,MAAMsB,EAAE,KAAK,MAAM,WAAWG;YACtC;QACF;QACAhB,MAAME;IACR;AACF,EAAE"}

node_modules/@fluentui/react-button/lib/components/Button/useButtonStyles.styles.js

@@ -0,0 +1,553 @@
+'use client';
+
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { shorthands, __styles, __resetStyles, mergeClasses } from '@griffel/react';
+export const buttonClassNames = {
+  root: 'fui-Button',
+  icon: 'fui-Button__icon'
+};
+const iconSpacingVar = '--fui-Button__icon--spacing';
+const buttonSpacingSmall = '3px';
+const buttonSpacingSmallWithIcon = '1px';
+const buttonSpacingMedium = '5px';
+const buttonSpacingLarge = '8px';
+const buttonSpacingLargeWithIcon = '7px';
+/* Firefox has box shadow sizing issue at some zoom levels
+ * this will ensure the inset boxShadow is always uniform
+ * without affecting other browser platforms
+ */
+const boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1f29ykk", null, {
+  r: [".r1f29ykk{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}", ".r1f29ykk:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}", ".r1f29ykk:hover:active,.r1f29ykk:active:focus-visible{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}", ".r1f29ykk[data-fui-focus-visible]{border-color:var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);border-width:1px;outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;z-index:1;}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.r1f29ykk{transition-duration:0.01ms;}}", "@media (forced-colors: active){.r1f29ykk:focus{border-color:ButtonText;}.r1f29ykk:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.r1f29ykk:hover:active,.r1f29ykk:active:focus-visible{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}", "@supports (-moz-appearance:button){.r1f29ykk[data-fui-focus-visible]{box-shadow:0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset;}}"]
+});
+const useIconBaseClassName = /*#__PURE__*/__resetStyles("rywnvv2", null, [".rywnvv2{align-items:center;display:inline-flex;justify-content:center;font-size:20px;height:20px;width:20px;--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}"]);
+const useRootStyles = /*#__PURE__*/__styles({
+  outline: {
+    De3pzq: "f1c21dwh",
+    Jwef8y: "fjxutwb",
+    Bpjbzib: "fkoldzo"
+  },
+  primary: {
+    De3pzq: "ffp7eso",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1phragk",
+    Jwef8y: "f15wkkf3",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f1rq72xc",
+    Bpjbzib: "f1ksv2xa",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "f1d6mv4x",
+    By8wz76: "f1nz3ub2",
+    Bcq6wej: "fag2qd2",
+    Jcjdmf: ["fmvhcg7", "f14bpyus"],
+    sc4o1m: "f1o3dhpw",
+    Bosien3: ["f14bpyus", "fmvhcg7"],
+    B7iucu3: "fqc85l4",
+    B8gzw0y: "f1h3a8gf",
+    Bbkh6qg: "fkiggi6",
+    F230oe: "f8gmj8i",
+    Bdw8ktp: ["f1ap8nzx", "fjag8bx"],
+    Bj1xduy: "f1igan7k",
+    Bhh2cfd: ["fjag8bx", "f1ap8nzx"],
+    Bahaeuw: "f1v3eptx",
+    Bv2bamp: "f1ysmecq",
+    vxuvv6: "faulsx",
+    Bli9q98: ["f79t15f", "f8qmx7k"],
+    Bx2tt8t: "fbtzoaq",
+    yad0b3: ["f8qmx7k", "f79t15f"],
+    j2fop7: "fd4bjan"
+  },
+  secondary: {},
+  subtle: {
+    De3pzq: "fhovq9v",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "fkfq4zb",
+    Jwef8y: "f1t94bn6",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "fnwyq0v",
+    Bk3fhr4: "ft1hn21",
+    Bmfj8id: "fuxngvv",
+    Bbdnnc7: "fy5bs14",
+    Bpjbzib: "f1q1yqic",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "fwga7ee",
+    Bqou3pl: "f1nhwcv0",
+    Bsnehw8: "f1gm6xmp",
+    wsxvnf: "f1xxsver",
+    Bahaeuw: "f1v3eptx",
+    Buhizc3: "fivsta0",
+    j2fop7: "fd4bjan",
+    Bqabnb4: "f3m6zum"
+  },
+  transparent: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "fkfq4zb",
+    Jwef8y: "fjxutwb",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f139oj5f",
+    Bk3fhr4: "ft1hn21",
+    Bmfj8id: "fuxngvv",
+    Bpjbzib: "fkoldzo",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "f1l983o9",
+    Bqou3pl: "f1nhwcv0",
+    Bsnehw8: "f1gm6xmp",
+    Bbkh6qg: "fxoo9op",
+    Bahaeuw: "f1v3eptx",
+    Bv2bamp: "f1i0gk12",
+    j2fop7: "fd4bjan"
+  },
+  circular: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9"
+  },
+  rounded: {},
+  square: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1fabniw"
+  },
+  small: {
+    Bf4jedk: "fh7ncta",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fneth5b",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  smallWithIcon: {
+    Byoj8tv: "f1brlhvm",
+    z8tnut: "f1sl3k7w"
+  },
+  medium: {},
+  large: {
+    Bf4jedk: "f14es27b",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f4db1ww",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
+  },
+  largeWithIcon: {
+    Byoj8tv: "fy7v416",
+    z8tnut: "f1a1bwwz"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
+    p: -1
+  }], ".fh7ncta{min-width:64px;}", [".fneth5b{padding:3px var(--spacingHorizontalS);}", {
+    p: -1
+  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1brlhvm{padding-bottom:1px;}", ".f1sl3k7w{padding-top:1px;}", ".f14es27b{min-width:96px;}", [".f4db1ww{padding:8px var(--spacingHorizontalL);}", {
+    p: -1
+  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fy7v416{padding-bottom:7px;}", ".f1a1bwwz{padding-top:7px;}"],
+  h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fkoldzo:hover:active,.fkoldzo:active:focus-visible{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1ksv2xa:hover:active,.f1ksv2xa:active:focus-visible{background-color:var(--colorBrandBackgroundPressed);}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}", ".f1d6mv4x:hover:active,.f1d6mv4x:active:focus-visible{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".f1q1yqic:hover:active,.f1q1yqic:active:focus-visible{background-color:var(--colorSubtleBackgroundPressed);}", ".fwga7ee:hover:active,.fwga7ee:active:focus-visible{color:var(--colorNeutralForeground2Pressed);}", ".f1nhwcv0:hover:active .fui-Icon-filled,.f1nhwcv0:active:focus-visible .fui-Icon-filled{display:inline;}", ".f1gm6xmp:hover:active .fui-Icon-regular,.f1gm6xmp:active:focus-visible .fui-Icon-regular{display:none;}", ".f1xxsver:hover:active .fui-Button__icon,.f1xxsver:active:focus-visible .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1l983o9:hover:active,.f1l983o9:active:focus-visible{color:var(--colorNeutralForeground2BrandPressed);}"],
+  m: [["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fag2qd2{border-top-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14bpyus{border-left-color:HighlightText;}.fmvhcg7{border-right-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1o3dhpw{border-bottom-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1h3a8gf{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f8gmj8i:hover{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ap8nzx:hover{border-right-color:Highlight;}.fjag8bx:hover{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1igan7k:hover{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ysmecq:hover:active,.f1ysmecq:active:focus-visible{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.faulsx:hover:active,.faulsx:active:focus-visible{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f79t15f:hover:active,.f79t15f:active:focus-visible{border-right-color:Highlight;}.f8qmx7k:hover:active,.f8qmx7k:active:focus-visible{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fbtzoaq:hover:active,.fbtzoaq:active:focus-visible{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd4bjan:hover:active,.fd4bjan:active:focus-visible{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fivsta0:hover .fui-Button__icon{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3m6zum:hover:active .fui-Button__icon,.f3m6zum:active:focus-visible .fui-Button__icon{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fxoo9op:hover{background-color:var(--colorTransparentBackground);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1i0gk12:hover:active,.f1i0gk12:active:focus-visible{background-color:var(--colorTransparentBackground);}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useRootDisabledStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1bg9a2p",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"],
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr",
+    Bfinmwp: "f15x8b5r",
+    Jwef8y: "f1falr9n",
+    Bgoe8wy: "f12mpcsy",
+    Bwzppfd: ["f1gwvigk", "f18rmfxp"],
+    oetu4i: "f1jnshp0",
+    gg5e9n: ["f18rmfxp", "f1gwvigk"],
+    Bi91k9c: "fvgxktp",
+    eoavqd: "fphbwmw",
+    Bk3fhr4: "f19vpps7",
+    Bmfj8id: "fv5swzo",
+    Bbdnnc7: "f1al02dq",
+    Bpjbzib: "f1jct5ie",
+    im15vp: "f13txml0",
+    Hjvxdg: ["f1ncddno", "f1axfvow"],
+    Gpfmf1: "f1z04ada",
+    ustxxc: ["f1axfvow", "f1ncddno"],
+    Brsut9c: "f1uhomfy",
+    Bses4qk: "fy9mucy",
+    Bqou3pl: "f1g9va8i",
+    Bsnehw8: "fwgvudy",
+    wsxvnf: "fom6jww"
+  },
+  highContrast: {
+    By8wz76: "f14ptb23",
+    Bcq6wej: "f9dbb4x",
+    Jcjdmf: ["f3qs60o", "f5u9ap2"],
+    sc4o1m: "fwd1oij",
+    Bosien3: ["f5u9ap2", "f3qs60o"],
+    B7iucu3: "f1cyfu5x",
+    Grqk0h: "f127ot8j",
+    h3ptyc: "f19etb0b",
+    Buw724y: ["f4f984j", "fw441p0"],
+    Buk7464: "f3d22hf",
+    Hwei09: ["fw441p0", "f4f984j"],
+    Bbkh6qg: "fj8k9ua",
+    F230oe: "fifrq0d",
+    Bdw8ktp: ["f196mwp7", "fnekfq"],
+    Bj1xduy: "f1l6uprw",
+    Bhh2cfd: ["fnekfq", "f196mwp7"],
+    Bahaeuw: "fa9u7a5",
+    Buhizc3: "f1m71e0y",
+    Bv2bamp: "fw24f3",
+    vxuvv6: "f1nznrny",
+    Bli9q98: ["fq8nxuu", "f1ao3jkc"],
+    Bx2tt8t: "ftoixeo",
+    yad0b3: ["f1ao3jkc", "fq8nxuu"],
+    j2fop7: "fpmuzpx",
+    Bqabnb4: "f168odog"
+  },
+  outline: {
+    De3pzq: "f1c21dwh",
+    Jwef8y: "f9ql6rf",
+    Bpjbzib: "f9r0db0"
+  },
+  primary: {
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"]
+  },
+  secondary: {},
+  subtle: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Jwef8y: "f9ql6rf",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bpjbzib: "f9r0db0",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"]
+  },
+  transparent: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Jwef8y: "f9ql6rf",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bpjbzib: "f9r0db0",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"]
+  }
+}, {
+  d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f15x8b5r .fui-Button__icon{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}"],
+  h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1al02dq:hover .fui-Button__icon{color:var(--colorNeutralForegroundDisabled);}", ".f1jct5ie:hover:active,.f1jct5ie:active:focus-visible{background-color:var(--colorNeutralBackgroundDisabled);}", ".f13txml0:hover:active,.f13txml0:active:focus-visible{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ncddno:hover:active,.f1ncddno:active:focus-visible{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1axfvow:hover:active,.f1axfvow:active:focus-visible{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1z04ada:hover:active,.f1z04ada:active:focus-visible{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1uhomfy:hover:active,.f1uhomfy:active:focus-visible{color:var(--colorNeutralForegroundDisabled);}", ".fy9mucy:hover:active,.fy9mucy:active:focus-visible{cursor:not-allowed;}", ".f1g9va8i:hover:active .fui-Icon-filled,.f1g9va8i:active:focus-visible .fui-Icon-filled{display:none;}", ".fwgvudy:hover:active .fui-Icon-regular,.fwgvudy:active:focus-visible .fui-Icon-regular{display:inline;}", ".fom6jww:hover:active .fui-Button__icon,.fom6jww:active:focus-visible .fui-Button__icon{color:var(--colorNeutralForegroundDisabled);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f9r0db0:hover:active,.f9r0db0:active:focus-visible{background-color:var(--colorTransparentBackground);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}"],
+  m: [["@media (forced-colors: active){.f14ptb23{background-color:ButtonFace;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f127ot8j .fui-Button__icon{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f19etb0b:focus{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f4f984j:focus{border-right-color:GrayText;}.fw441p0:focus{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3d22hf:focus{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fj8k9ua:hover{background-color:ButtonFace;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fifrq0d:hover{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f196mwp7:hover{border-right-color:GrayText;}.fnekfq:hover{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1l6uprw:hover{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fa9u7a5:hover{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1m71e0y:hover .fui-Button__icon{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fw24f3:hover:active,.fw24f3:active:focus-visible{background-color:ButtonFace;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1nznrny:hover:active,.f1nznrny:active:focus-visible{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ao3jkc:hover:active,.f1ao3jkc:active:focus-visible{border-left-color:GrayText;}.fq8nxuu:hover:active,.fq8nxuu:active:focus-visible{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.ftoixeo:hover:active,.ftoixeo:active:focus-visible{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fpmuzpx:hover:active,.fpmuzpx:active:focus-visible{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f168odog:hover:active .fui-Button__icon,.f168odog:active:focus-visible .fui-Button__icon{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useRootFocusStyles = /*#__PURE__*/__styles({
+  circular: {
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f1062rbf"
+  },
+  rounded: {},
+  square: {
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "fj0ryk1"
+  },
+  primary: {
+    B8q5s1w: "f17t0x8g",
+    Bci5o5g: ["f194v5ow", "fk7jm04"],
+    n8qw10: "f1qgg65p",
+    Bdrgwmp: ["fk7jm04", "f194v5ow"],
+    j6ew2k: ["fhgccpy", "fjo7pq6"],
+    he4mth: "f32wu9k",
+    Byr4aka: "fu5nqqq",
+    lks7q5: ["f13prjl2", "f1nl83rv"],
+    Bnan3qt: "f1czftr5",
+    k1dn9: ["f1nl83rv", "f13prjl2"],
+    Bqsb82s: ["fixhny3", "f18mfu3r"],
+    jg1oma: "feygou5"
+  },
+  small: {
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "fazmxh"
+  },
+  medium: {},
+  large: {
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f1b6alqh"
+  }
+}, {
+  d: [[".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
+    p: -1
+  }], ".f17t0x8g[data-fui-focus-visible]{border-top-color:var(--colorStrokeFocus2);}", ".f194v5ow[data-fui-focus-visible]{border-right-color:var(--colorStrokeFocus2);}", ".fk7jm04[data-fui-focus-visible]{border-left-color:var(--colorStrokeFocus2);}", ".f1qgg65p[data-fui-focus-visible]{border-bottom-color:var(--colorStrokeFocus2);}", ".fhgccpy[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}", ".fjo7pq6[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}", ".f32wu9k[data-fui-focus-visible]:hover{box-shadow:var(--shadow2),0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;}", ".fu5nqqq[data-fui-focus-visible]:hover{border-top-color:var(--colorStrokeFocus2);}", ".f13prjl2[data-fui-focus-visible]:hover{border-right-color:var(--colorStrokeFocus2);}", ".f1nl83rv[data-fui-focus-visible]:hover{border-left-color:var(--colorStrokeFocus2);}", ".f1czftr5[data-fui-focus-visible]:hover{border-bottom-color:var(--colorStrokeFocus2);}", [".fazmxh[data-fui-focus-visible]{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], [".f1b6alqh[data-fui-focus-visible]{border-radius:var(--borderRadiusLarge);}", {
+    p: -1
+  }]],
+  t: ["@supports (-moz-appearance:button){.f18mfu3r[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}.fixhny3[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset,0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;}}", "@supports (-moz-appearance:button){.feygou5[data-fui-focus-visible]:hover{box-shadow:var(--shadow2),0 0 0 calc(var(--strokeWidthThin) + 0.25px) var(--colorStrokeFocus2) inset;}}"]
+});
+const useRootIconOnlyStyles = /*#__PURE__*/__styles({
+  small: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fu97m5z",
+    Bf4jedk: "f17fgpbq",
+    B2u0y6b: "f1jt17bm"
+  },
+  medium: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f18ktai2",
+    Bf4jedk: "fwbmr0d",
+    B2u0y6b: "f44c6la"
+  },
+  large: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1hbd1aw",
+    Bf4jedk: "f12clzc2",
+    B2u0y6b: "fjy1crr"
+  }
+}, {
+  d: [[".fu97m5z{padding:1px;}", {
+    p: -1
+  }], ".f17fgpbq{min-width:24px;}", ".f1jt17bm{max-width:24px;}", [".f18ktai2{padding:5px;}", {
+    p: -1
+  }], ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", [".f1hbd1aw{padding:7px;}", {
+    p: -1
+  }], ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
+});
+const useIconStyles = /*#__PURE__*/__styles({
+  small: {
+    Be2twd7: "fe5j1ua",
+    Bqenvij: "fjamq6b",
+    a9b677: "f64fuq3",
+    Bqrlyyl: "fbaiahx"
+  },
+  medium: {},
+  large: {
+    Be2twd7: "f1rt2boy",
+    Bqenvij: "frvgh55",
+    a9b677: "fq4mcun",
+    Bqrlyyl: "f1exjqw5"
+  },
+  before: {
+    t21cq0: ["f1nizpg2", "f1a695kz"]
+  },
+  after: {
+    Frg6f3: ["f1a695kz", "f1nizpg2"]
+  }
+}, {
+  d: [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"]
+});
+export const useButtonStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  const iconBaseClassName = useIconBaseClassName();
+  const rootStyles = useRootStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const rootFocusStyles = useRootFocusStyles();
+  const rootIconOnlyStyles = useRootIconOnlyStyles();
+  const iconStyles = useIconStyles();
+  const {
+    appearance,
+    disabled,
+    disabledFocusable,
+    icon,
+    iconOnly,
+    iconPosition,
+    shape,
+    size
+  } = state;
+  state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape],
+  // Disabled styles
+  (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
+  // Focus styles
+  appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape],
+  // Icon-only styles
+  iconOnly && rootIconOnlyStyles[size],
+  // User provided class name
+  state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-button/lib/components/Button/useButtonStyles.styles.raw.js

@@ -0,0 +1,489 @@
+'use client';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+export const buttonClassNames = {
+    root: 'fui-Button',
+    icon: 'fui-Button__icon'
+};
+const iconSpacingVar = '--fui-Button__icon--spacing';
+const buttonSpacingSmall = '3px';
+const buttonSpacingSmallWithIcon = '1px';
+const buttonSpacingMedium = '5px';
+const buttonSpacingLarge = '8px';
+const buttonSpacingLargeWithIcon = '7px';
+/* Firefox has box shadow sizing issue at some zoom levels
+ * this will ensure the inset boxShadow is always uniform
+ * without affecting other browser platforms
+ */ const boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;
+const useRootBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    textDecorationLine: 'none',
+    verticalAlign: 'middle',
+    margin: 0,
+    overflow: 'hidden',
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    fontFamily: tokens.fontFamilyBase,
+    outlineStyle: 'none',
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        borderColor: tokens.colorNeutralStroke1Hover,
+        color: tokens.colorNeutralForeground1Hover,
+        cursor: 'pointer'
+    },
+    ':hover:active,:active:focus-visible': {
+        backgroundColor: tokens.colorNeutralBackground1Pressed,
+        borderColor: tokens.colorNeutralStroke1Pressed,
+        color: tokens.colorNeutralForeground1Pressed,
+        outlineStyle: 'none'
+    },
+    padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,
+    minWidth: '96px',
+    borderRadius: tokens.borderRadiusMedium,
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    lineHeight: tokens.lineHeightBase300,
+    // Transition styles
+    transitionDuration: tokens.durationFaster,
+    transitionProperty: 'background, border, color',
+    transitionTimingFunction: tokens.curveEasyEase,
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms'
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':focus': {
+            borderColor: 'ButtonText'
+        },
+        ':hover': {
+            backgroundColor: 'HighlightText',
+            borderColor: 'Highlight',
+            color: 'Highlight',
+            forcedColorAdjust: 'none'
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: 'HighlightText',
+            borderColor: 'Highlight',
+            color: 'Highlight',
+            forcedColorAdjust: 'none'
+        }
+    },
+    // Focus styles
+    ...createCustomFocusIndicatorStyle({
+        borderColor: tokens.colorStrokeFocus2,
+        borderRadius: tokens.borderRadiusMedium,
+        borderWidth: '1px',
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
+        boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}
+      inset
+    `,
+        zIndex: 1
+    }),
+    // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
+    '@supports (-moz-appearance:button)': {
+        ...createCustomFocusIndicatorStyle({
+            boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}
+      inset
+    `
+        })
+    }
+});
+const useIconBaseClassName = makeResetStyles({
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    fontSize: '20px',
+    height: '20px',
+    width: '20px',
+    [iconSpacingVar]: tokens.spacingHorizontalSNudge
+});
+const useRootStyles = makeStyles({
+    // Appearance variations
+    outline: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed
+        }
+    },
+    primary: {
+        backgroundColor: tokens.colorBrandBackground,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        },
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            ...shorthands.borderColor('HighlightText'),
+            color: 'HighlightText',
+            forcedColorAdjust: 'none',
+            ':hover': {
+                backgroundColor: 'HighlightText',
+                ...shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            },
+            ':hover:active,:active:focus-visible': {
+                backgroundColor: 'HighlightText',
+                ...shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            }
+        }
+    },
+    secondary: {
+    },
+    subtle: {
+        backgroundColor: tokens.colorSubtleBackground,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2,
+        ':hover': {
+            backgroundColor: tokens.colorSubtleBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2Hover,
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: tokens.colorNeutralForeground2BrandHover
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorSubtleBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2Pressed,
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: tokens.colorNeutralForeground2BrandPressed
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'Highlight'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                color: 'Highlight',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'Highlight'
+                }
+            }
+        }
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandHover,
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandPressed,
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: tokens.colorTransparentBackground,
+                color: 'Highlight'
+            },
+            ':hover:active,:active:focus-visible': {
+                backgroundColor: tokens.colorTransparentBackground,
+                color: 'Highlight'
+            }
+        }
+    },
+    // Shape variations
+    circular: {
+        borderRadius: tokens.borderRadiusCircular
+    },
+    rounded: {
+    },
+    square: {
+        borderRadius: tokens.borderRadiusNone
+    },
+    // Size variations
+    small: {
+        minWidth: '64px',
+        padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,
+        borderRadius: tokens.borderRadiusMedium,
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        lineHeight: tokens.lineHeightBase200
+    },
+    smallWithIcon: {
+        paddingBottom: buttonSpacingSmallWithIcon,
+        paddingTop: buttonSpacingSmallWithIcon
+    },
+    medium: {
+    },
+    large: {
+        minWidth: '96px',
+        padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,
+        borderRadius: tokens.borderRadiusMedium,
+        fontSize: tokens.fontSizeBase400,
+        fontWeight: tokens.fontWeightSemibold,
+        lineHeight: tokens.lineHeightBase400
+    },
+    largeWithIcon: {
+        paddingBottom: buttonSpacingLargeWithIcon,
+        paddingTop: buttonSpacingLargeWithIcon
+    }
+});
+const useRootDisabledStyles = makeStyles({
+    // Base styles
+    base: {
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        color: tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        [`& .${buttonClassNames.icon}`]: {
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+            color: tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+            [`& .${iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+            color: tokens.colorNeutralForegroundDisabled,
+            cursor: 'not-allowed',
+            [`& .${iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${buttonClassNames.icon}`]: {
+                color: tokens.colorNeutralForegroundDisabled
+            }
+        }
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            backgroundColor: 'ButtonFace',
+            ...shorthands.borderColor('GrayText'),
+            color: 'GrayText',
+            [`& .${buttonClassNames.icon}`]: {
+                color: 'GrayText'
+            },
+            ':focus': {
+                ...shorthands.borderColor('GrayText')
+            },
+            ':hover': {
+                backgroundColor: 'ButtonFace',
+                ...shorthands.borderColor('GrayText'),
+                color: 'GrayText',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                backgroundColor: 'ButtonFace',
+                ...shorthands.borderColor('GrayText'),
+                color: 'GrayText',
+                [`& .${buttonClassNames.icon}`]: {
+                    color: 'GrayText'
+                }
+            }
+        }
+    },
+    // Appearance variations
+    outline: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackground
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackground
+        }
+    },
+    primary: {
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            ...shorthands.borderColor('transparent')
+        }
+    },
+    secondary: {
+    },
+    subtle: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackground,
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackground,
+            ...shorthands.borderColor('transparent')
+        }
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackground,
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackground,
+            ...shorthands.borderColor('transparent')
+        }
+    }
+});
+const useRootFocusStyles = makeStyles({
+    // Shape variations
+    circular: createCustomFocusIndicatorStyle({
+        borderRadius: tokens.borderRadiusCircular
+    }),
+    rounded: {
+    },
+    square: createCustomFocusIndicatorStyle({
+        borderRadius: tokens.borderRadiusNone
+    }),
+    // Primary styles
+    primary: {
+        ...createCustomFocusIndicatorStyle({
+            ...shorthands.borderColor(tokens.colorStrokeFocus2),
+            boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,
+            ':hover': {
+                boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,
+                ...shorthands.borderColor(tokens.colorStrokeFocus2)
+            }
+        }),
+        // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
+        '@supports (-moz-appearance:button)': {
+            ...createCustomFocusIndicatorStyle({
+                boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,
+                ':hover': {
+                    boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`
+                }
+            })
+        }
+    },
+    // Size variations
+    small: createCustomFocusIndicatorStyle({
+        borderRadius: tokens.borderRadiusSmall
+    }),
+    medium: {
+    },
+    large: createCustomFocusIndicatorStyle({
+        borderRadius: tokens.borderRadiusLarge
+    })
+});
+const useRootIconOnlyStyles = makeStyles({
+    // Size variations
+    small: {
+        padding: buttonSpacingSmallWithIcon,
+        minWidth: '24px',
+        maxWidth: '24px'
+    },
+    medium: {
+        padding: buttonSpacingMedium,
+        minWidth: '32px',
+        maxWidth: '32px'
+    },
+    large: {
+        padding: buttonSpacingLargeWithIcon,
+        minWidth: '40px',
+        maxWidth: '40px'
+    }
+});
+const useIconStyles = makeStyles({
+    // Size variations
+    small: {
+        fontSize: '20px',
+        height: '20px',
+        width: '20px',
+        [iconSpacingVar]: tokens.spacingHorizontalXS
+    },
+    medium: {
+    },
+    large: {
+        fontSize: '24px',
+        height: '24px',
+        width: '24px',
+        [iconSpacingVar]: tokens.spacingHorizontalSNudge
+    },
+    // Icon position variations
+    before: {
+        marginRight: `var(${iconSpacingVar})`
+    },
+    after: {
+        marginLeft: `var(${iconSpacingVar})`
+    }
+});
+export const useButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const iconBaseClassName = useIconBaseClassName();
+    const rootStyles = useRootStyles();
+    const rootDisabledStyles = useRootDisabledStyles();
+    const rootFocusStyles = useRootFocusStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles
+    (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
+    appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
+    iconOnly && rootIconOnlyStyles[size], // User provided class name
+    state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+    }
+    return state;
+};

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;
+};

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

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { renderMenuButton_unstable } from './renderMenuButton';
+import { useMenuButton_unstable } from './useMenuButton';
+import { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
+ * menus.
+ */ export const MenuButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMenuButton_unstable(props, ref);
+    useMenuButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);
+    return renderMenuButton_unstable(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+MenuButton.displayName = 'MenuButton';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n  const state = useMenuButton_unstable(props, ref);\n\n  useMenuButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);\n\n  return renderMenuButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOR,0BAA0BQ;AACjC,0FAA0F;AAC5F,GAA2C;AAE3CJ,WAAWK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n  Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"mappings":"AAaA,WACuE"}

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

@@ -0,0 +1,4 @@
+export { MenuButton } from './MenuButton';
+export { renderMenuButton_unstable } from './renderMenuButton';
+export { useMenuButton_unstable } from './useMenuButton';
+export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AACA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

node_modules/@fluentui/react-button/lib/components/MenuButton/renderMenuButton.js

@@ -0,0 +1,15 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Renders a MenuButton component by passing the state defined props to the appropriate slots.
+ */ export const renderMenuButton_unstable = (state)=>{
+    assertSlots(state);
+    const { icon, iconOnly } = state;
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            !iconOnly && state.root.children,
+            (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && state.menuIcon && /*#__PURE__*/ _jsx(state.menuIcon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-button/lib/components/MenuButton/renderMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/renderMenuButton.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 { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState): JSXElement => {\n  assertSlots<MenuButtonSlots>(state);\n  const { icon, iconOnly } = state;\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuButton_unstable","state","icon","iconOnly","root","children","menuIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAC7B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAE3B,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMC,IAAI,kBAAI,KAACD,MAAMC,IAAI;YACzB,CAACC,YAAYF,MAAMG,IAAI,CAACC,QAAQ;YAC/B,CAAA,CAACF,YAAY,EAACD,iBAAAA,2BAAAA,KAAMG,QAAQ,CAAD,KAAMJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;;;AAG1E,EAAE"}

node_modules/@fluentui/react-button/lib/components/MenuButton/useMenuButton.js

@@ -0,0 +1,33 @@
+'use client';
+import * as React from 'react';
+import { ChevronDownRegular } from '@fluentui/react-icons';
+import { slot } from '@fluentui/react-utilities';
+import { useButton_unstable } from '../Button/index';
+/**
+ * Given user props, returns the final state for a MenuButton.
+ */ export const useMenuButton_unstable = (props, ref)=>{
+    const { menuIcon, ...buttonProps } = props;
+    const buttonState = useButton_unstable(buttonProps, ref);
+    return {
+        ...buttonState,
+        iconOnly: Boolean(!props.children),
+        // Slots definition
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...buttonState.components,
+            menuIcon: 'span'
+        },
+        root: {
+            ...buttonState.root,
+            // force aria-expanded to be a boolean, not a string
+            'aria-expanded': props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false
+        },
+        menuIcon: slot.optional(menuIcon, {
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        })
+    };
+};

node_modules/@fluentui/react-button/lib/components/MenuButton/useMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n  props: MenuButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n  const { menuIcon, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return {\n    ...buttonState,\n    iconOnly: Boolean(!props.children),\n\n    // Slots definition\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...buttonState.components,\n      menuIcon: 'span',\n    },\n\n    root: {\n      ...buttonState.root,\n      // force aria-expanded to be a boolean, not a string\n      'aria-expanded': props['aria-expanded']\n        ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n        : false,\n    },\n\n    menuIcon: slot.optional(menuIcon, {\n      defaultProps: {\n        children: <ChevronDownRegular />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","ChevronDownRegular","slot","useButton_unstable","useMenuButton_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","defaultProps","renderByDefault","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,cAAcN,mBAAmBK,aAAaF;IAEpD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUL,KAAKa,QAAQ,CAACR,UAAU;YAChCS,cAAc;gBACZJ,wBAAU,oBAACX;YACb;YACAgB,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF,EAAE"}

node_modules/@fluentui/react-button/lib/components/MenuButton/useMenuButtonStyles.styles.js

@@ -0,0 +1,119 @@
+'use client';
+
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const menuButtonClassNames = {
+  root: 'fui-MenuButton',
+  icon: 'fui-MenuButton__icon',
+  menuIcon: 'fui-MenuButton__menuIcon'
+};
+const useRootExpandedStyles = /*#__PURE__*/__styles({
+  base: {
+    D0sxk3: "fxoiby5",
+    t6yez3: "f15q0o9g"
+  },
+  outline: {
+    g2u3we: "f1ly1fcm",
+    h3c5rm: ["fi8bssc", "fj6btzu"],
+    B9xav0g: "f1s9tnsa",
+    zhjwy3: ["fj6btzu", "fi8bssc"],
+    B4j52fo: "fgx37oo",
+    Bekrc4i: ["f130t4y6", "f1efpmoh"],
+    Bn0qgzm: "fv51ejd",
+    ibv6hh: ["f1efpmoh", "f130t4y6"],
+    sj55zd: "f14nttnl"
+  },
+  primary: {
+    De3pzq: "f8w4g0q"
+  },
+  secondary: {
+    De3pzq: "f1nfm20t",
+    g2u3we: "f1ly1fcm",
+    h3c5rm: ["fi8bssc", "fj6btzu"],
+    B9xav0g: "f1s9tnsa",
+    zhjwy3: ["fj6btzu", "fi8bssc"],
+    sj55zd: "f14nttnl"
+  },
+  subtle: {
+    De3pzq: "fq5gl1p",
+    sj55zd: "f1eryozh"
+  },
+  transparent: {
+    De3pzq: "f1q9pm1r",
+    sj55zd: "f1qj7y59"
+  }
+}, {
+  d: [".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
+});
+const useIconExpandedStyles = /*#__PURE__*/__styles({
+  outline: {
+    sj55zd: "f14nttnl"
+  },
+  primary: {},
+  secondary: {
+    sj55zd: "f14nttnl"
+  },
+  subtle: {
+    sj55zd: "f1qj7y59"
+  },
+  transparent: {
+    sj55zd: "f1qj7y59"
+  },
+  highContrast: {
+    Bahaeuw: "f1v3eptx"
+  }
+}, {
+  d: [".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
+  m: [["@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useMenuIconStyles = /*#__PURE__*/__styles({
+  base: {
+    Bg96gwp: "fez10in"
+  },
+  small: {
+    Be2twd7: "f1ugzwwg",
+    Bqenvij: "fvblgha",
+    Bg96gwp: "fwrc4pm",
+    a9b677: "frx94fk"
+  },
+  medium: {
+    Be2twd7: "f1ugzwwg",
+    Bqenvij: "fvblgha",
+    Bg96gwp: "fwrc4pm",
+    a9b677: "frx94fk"
+  },
+  large: {
+    Be2twd7: "f4ybsrx",
+    Bqenvij: "fd461yt",
+    Bg96gwp: "faaz57k",
+    a9b677: "fjw5fx7"
+  },
+  notIconOnly: {
+    Frg6f3: ["fbyavb5", "fm0x6gh"]
+  }
+}, {
+  d: [".fez10in{line-height:0;}", ".f1ugzwwg{font-size:12px;}", ".fvblgha{height:12px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".frx94fk{width:12px;}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fjw5fx7{width:16px;}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"]
+});
+export const useMenuButtonStyles_unstable = state => {
+  'use no memo';
+
+  const rootExpandedStyles = useRootExpandedStyles();
+  const iconExpandedStyles = useIconExpandedStyles();
+  const menuIconStyles = useMenuIconStyles();
+  state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
+  }
+  if (state.menuIcon) {
+    state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
+  }
+  useButtonStyles_unstable({
+    ...state,
+    iconPosition: 'before'
+  });
+  return state;
+};

node_modules/@fluentui/react-button/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js

@@ -0,0 +1,113 @@
+'use client';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const menuButtonClassNames = {
+    root: 'fui-MenuButton',
+    icon: 'fui-MenuButton__icon',
+    menuIcon: 'fui-MenuButton__menuIcon'
+};
+const useRootExpandedStyles = makeStyles({
+    base: {
+        [`& .${iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'none'
+        }
+    },
+    // Appearance variations
+    outline: {
+        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),
+        ...shorthands.borderWidth(tokens.strokeWidthThicker),
+        color: tokens.colorNeutralForeground1Selected
+    },
+    primary: {
+        backgroundColor: tokens.colorBrandBackgroundSelected
+    },
+    secondary: {
+        backgroundColor: tokens.colorNeutralBackground1Selected,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),
+        color: tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        backgroundColor: tokens.colorSubtleBackgroundSelected,
+        color: tokens.colorNeutralForeground2Selected
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackgroundSelected,
+        color: tokens.colorNeutralForeground2BrandSelected
+    }
+});
+const useIconExpandedStyles = makeStyles({
+    // Appearance variations
+    outline: {
+        color: tokens.colorNeutralForeground1Selected
+    },
+    primary: {
+    },
+    secondary: {
+        color: tokens.colorNeutralForeground1Selected
+    },
+    subtle: {
+        color: tokens.colorNeutralForeground2BrandSelected
+    },
+    transparent: {
+        color: tokens.colorNeutralForeground2BrandSelected
+    },
+    highContrast: {
+        // High contrast styles
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight'
+            }
+        }
+    }
+});
+const useMenuIconStyles = makeStyles({
+    base: {
+        lineHeight: 0
+    },
+    // Size appearance
+    small: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: tokens.lineHeightBase200,
+        width: '12px'
+    },
+    medium: {
+        fontSize: '12px',
+        height: '12px',
+        lineHeight: tokens.lineHeightBase200,
+        width: '12px'
+    },
+    large: {
+        fontSize: '16px',
+        height: '16px',
+        lineHeight: tokens.lineHeightBase400,
+        width: '16px'
+    },
+    // Not-icon only
+    notIconOnly: {
+        marginLeft: tokens.spacingHorizontalXS
+    }
+});
+export const useMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootExpandedStyles = useRootExpandedStyles();
+    const iconExpandedStyles = useIconExpandedStyles();
+    const menuIconStyles = useMenuIconStyles();
+    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
+    }
+    if (state.menuIcon) {
+        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
+    }
+    useButtonStyles_unstable({
+        ...state,
+        iconPosition: 'before'
+    });
+    return state;
+};

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

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { renderSplitButton_unstable } from './renderSplitButton';
+import { useSplitButton_unstable } from './useSplitButton';
+import { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
+ * action, while interacting with the second one opens a menu with secondary actions.
+ */ export const SplitButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSplitButton_unstable(props, ref);
+    useSplitButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);
+    return renderSplitButton_unstable(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+SplitButton.displayName = 'SplitButton';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["React","renderSplitButton_unstable","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","SplitButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOR,2BAA2BQ;AAClC,0FAA0F;AAC5F,GAA4C;AAE5CJ,YAAYK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root' | 'as'> &\n  Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"mappings":"AA0BA,WAE4D"}

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

@@ -0,0 +1,4 @@
+export { SplitButton } from './SplitButton';
+export { renderSplitButton_unstable } from './renderSplitButton';
+export { useSplitButton_unstable } from './useSplitButton';
+export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","useSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

node_modules/@fluentui/react-button/lib/components/SplitButton/renderSplitButton.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+ */ export const renderSplitButton_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.primaryActionButton && /*#__PURE__*/ _jsx(state.primaryActionButton, {}),
+            state.menuButton && /*#__PURE__*/ _jsx(state.menuButton, {})
+        ]
+    });
+};

node_modules/@fluentui/react-button/lib/components/SplitButton/renderSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/renderSplitButton.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 { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState): JSXElement => {\n  assertSlots<SplitButtonSlots>(state);\n\n  return (\n    <state.root>\n      {state.primaryActionButton && <state.primaryActionButton />}\n      {state.menuButton && <state.menuButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSplitButton_unstable","state","root","primaryActionButton","menuButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,mBAAmB,kBAAI,KAACF,MAAME,mBAAmB;YACvDF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}

node_modules/@fluentui/react-button/lib/components/SplitButton/useSplitButton.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { useId, slot } from '@fluentui/react-utilities';
+import { Button } from '../Button/Button';
+import { MenuButton } from '../MenuButton/MenuButton';
+/**
+ * Given user props, defines default props for the SplitButton and returns processed state.
+ * @param props - User provided props to the SplitButton component.
+ * @param ref - User provided ref to be passed to the SplitButton component.
+ */ export const useSplitButton_unstable = (props, ref)=>{
+    const { appearance = 'secondary', children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, shape = 'rounded', size = 'medium', ...rest } = props;
+    const baseId = useId('splitButton-');
+    const menuButtonShorthand = slot.optional(menuButton, {
+        defaultProps: {
+            appearance,
+            disabled,
+            disabledFocusable,
+            menuIcon,
+            shape,
+            size
+        },
+        renderByDefault: true,
+        elementType: MenuButton
+    });
+    const primaryActionButtonShorthand = slot.optional(primaryActionButton, {
+        defaultProps: {
+            appearance,
+            children,
+            disabled,
+            disabledFocusable,
+            icon,
+            iconPosition,
+            id: baseId + '__primaryActionButton',
+            shape,
+            size
+        },
+        renderByDefault: true,
+        elementType: Button
+    });
+    // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
+    // user.
+    if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
+        menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
+    }
+    return {
+        // Props passed at the top-level
+        appearance,
+        disabled,
+        disabledFocusable,
+        iconPosition,
+        shape,
+        size,
+        components: {
+            root: 'div',
+            menuButton: MenuButton,
+            primaryActionButton: Button
+        },
+        root: slot.always({
+            ref: ref,
+            ...rest
+        }, {
+            elementType: 'div'
+        }),
+        menuButton: menuButtonShorthand,
+        primaryActionButton: primaryActionButtonShorthand
+    };
+};

node_modules/@fluentui/react-button/lib/components/SplitButton/useSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n    ...rest\n  } = props;\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = slot.optional(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: MenuButton,\n  });\n  const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    renderByDefault: true,\n    elementType: Button,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n  // user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size, // Slots definition\n    components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n    root: slot.always({ ref: ref as React.Ref<HTMLDivElement>, ...rest }, { elementType: 'div' }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"names":["React","useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","rest","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACf,GAAGC,MACJ,GAAGb;IACJ,MAAMc,SAASnB,MAAM;IAErB,MAAMoB,sBAAsBnB,KAAKoB,QAAQ,CAACR,YAAY;QACpDS,cAAc;YACZf;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAarB;IACf;IACA,MAAMsB,+BAA+BxB,KAAKoB,QAAQ,CAACN,qBAAqB;QACtEO,cAAc;YACZf;YACAC;YACAC;YACAC;YACAC;YACAC;YACAc,IAAIP,SAAS;YACbH;YACAC;QACF;QACAM,iBAAiB;QACjBC,aAAatB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEkB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCnB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAU,YAAY;YAAEC,MAAM;YAAOf,YAAYV;YAAYY,qBAAqBb;QAAO;QAC/E0B,MAAM3B,KAAK4B,MAAM,CAAC;YAAEvB,KAAKA;YAAkC,GAAGY,IAAI;QAAC,GAAG;YAAEM,aAAa;QAAM;QAC3FX,YAAYO;QACZL,qBAAqBU;IACvB;AACF,EAAE"}

node_modules/@fluentui/react-button/lib/components/SplitButton/useSplitButtonStyles.styles.js

@@ -0,0 +1,108 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const splitButtonClassNames = {
+  root: 'fui-SplitButton',
+  menuButton: 'fui-SplitButton__menuButton',
+  primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
+// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
+const MIN_TARGET_SIZE = '24px';
+const useFocusStyles = /*#__PURE__*/__styles({
+  primaryActionButton: {
+    B6xbmo0: ["f1x37qnr", "f1um7c6d"],
+    kdpuga: ["fn4c73s", "f6pwzcr"]
+  },
+  menuButton: {
+    lbo84a: ["frrbwxo", "f1rgcpbv"],
+    dm238s: ["f1um7c6d", "f1x37qnr"],
+    Bw81rd7: ["f6pwzcr", "fn4c73s"]
+  }
+}, {
+  d: [".f1x37qnr[data-fui-focus-visible]{border-top-right-radius:0;}", ".f1um7c6d[data-fui-focus-visible]{border-top-left-radius:0;}", ".fn4c73s[data-fui-focus-visible]{border-bottom-right-radius:0;}", ".f6pwzcr[data-fui-focus-visible]{border-bottom-left-radius:0;}", ".frrbwxo[data-fui-focus-visible]{border-left-width:0;}", ".f1rgcpbv[data-fui-focus-visible]{border-right-width:0;}"]
+});
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "ftuwxu6",
+    Brf1p80: "fsxf2b5",
+    qhf8xq: "f10pi13n",
+    ha4doy: "fmrv4ls",
+    kn2xc0: ["f14uur2j", "fc1btbj"],
+    Bs76p8a: ["fye5tvs", "fc597qq"],
+    cuxpm9: ["f1e8brtx", "fr36rk3"],
+    Biffepf: ["fxp12j1", "f1m6nt2y"],
+    Defnvf: ["fr7y8no", "f1dn0c6m"],
+    z0pv9t: "f1b65x5h"
+  },
+  outline: {},
+  primary: {
+    B1l9wao: ["f4rm5b0", "f1tuwo13"],
+    lcnrd8: ["fdwdeeo", "f1ezdslh"],
+    vlshuh: ["f1ju2vgk", "f1r6p88l"],
+    B3s9tpx: ["f2z0mmn", "f12iqdwp"],
+    rfylfo: ["f1btorfl", "fxofj4p"],
+    k5lds2: ["f161sdhp", "f10m3pjc"]
+  },
+  secondary: {},
+  subtle: {
+    B1l9wao: ["f16kf41h", "fxiafvi"],
+    lcnrd8: ["ffl6mx9", "f1t5sw6t"],
+    vlshuh: ["f1mww3cx", "f1wtv0vd"]
+  },
+  transparent: {
+    B1l9wao: ["f16kf41h", "fxiafvi"],
+    lcnrd8: ["ffl6mx9", "f1t5sw6t"],
+    vlshuh: ["f1mww3cx", "f1wtv0vd"]
+  },
+  circular: {},
+  rounded: {},
+  square: {},
+  disabled: {
+    B1l9wao: ["f10xrnr8", "f15nylwb"],
+    lcnrd8: ["f11fwhjz", "f18vtcsx"],
+    vlshuh: ["f12kx9re", "f1hyxdqk"]
+  },
+  disabledHighContrast: {
+    B3s9tpx: ["fslo9ob", "ftovg2z"],
+    rfylfo: ["f1fuq5cn", "f168zpha"],
+    k5lds2: ["f1t6bo0o", "f1dnwhli"]
+  }
+}, {
+  d: [".ftuwxu6{display:inline-flex;}", ".fsxf2b5{justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1b65x5h .fui-SplitButton__menuButton{min-width:24px;}", ".f4rm5b0 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f1tuwo13 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".f16kf41h .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackground);}", ".fxiafvi .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackground);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  h: [".fdwdeeo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f1ezdslh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".f1ju2vgk:hover:active .fui-SplitButton__primaryActionButton,.f1ju2vgk:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f1r6p88l:hover:active .fui-SplitButton__primaryActionButton,.f1r6p88l:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".ffl6mx9:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundHover);}", ".f1t5sw6t:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundHover);}", ".f1mww3cx:hover:active .fui-SplitButton__primaryActionButton,.f1mww3cx:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundPressed);}", ".f1wtv0vd:hover:active .fui-SplitButton__primaryActionButton,.f1wtv0vd:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundPressed);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12kx9re:hover:active .fui-SplitButton__primaryActionButton,.f12kx9re:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1hyxdqk:hover:active .fui-SplitButton__primaryActionButton,.f1hyxdqk:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  m: [["@media (forced-colors: active){.f12iqdwp .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}.f2z0mmn .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1btorfl:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.fxofj4p:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f10m3pjc:hover:active .fui-SplitButton__primaryActionButton,.f10m3pjc:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}.f161sdhp:hover:active .fui-SplitButton__primaryActionButton,.f161sdhp:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fslo9ob .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.ftovg2z .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f168zpha:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.f1fuq5cn:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1dnwhli:hover:active .fui-SplitButton__primaryActionButton,.f1dnwhli:active:focus-visible .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.f1t6bo0o:hover:active .fui-SplitButton__primaryActionButton,.f1t6bo0o:active:focus-visible .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+export const useSplitButtonStyles_unstable = state => {
+  'use no memo';
+
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const {
+    appearance,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
+  if (state.menuButton) {
+    state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+  }
+  if (state.primaryActionButton) {
+    state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-button/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js

@@ -0,0 +1,159 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const splitButtonClassNames = {
+    root: 'fui-SplitButton',
+    menuButton: 'fui-SplitButton__menuButton',
+    primaryActionButton: 'fui-SplitButton__primaryActionButton'
+};
+// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
+// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
+const MIN_TARGET_SIZE = '24px';
+const useFocusStyles = makeStyles({
+    primaryActionButton: createCustomFocusIndicatorStyle({
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+    }),
+    menuButton: createCustomFocusIndicatorStyle({
+        borderLeftWidth: 0,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+    })
+});
+const useRootStyles = makeStyles({
+    // Base styles
+    base: {
+        display: 'inline-flex',
+        justifyContent: 'stretch',
+        position: 'relative',
+        verticalAlign: 'middle',
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0
+        },
+        [`& .${splitButtonClassNames.menuButton}`]: {
+            borderLeftWidth: 0,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            minWidth: MIN_TARGET_SIZE
+        }
+    },
+    // Appearance variations
+    outline: {
+    },
+    primary: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorNeutralStrokeOnBrand
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeOnBrand
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeOnBrand
+            }
+        },
+        '@media (forced-colors: active)': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: 'HighlightText'
+            },
+            ':hover': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'Highlight'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'Highlight'
+                }
+            }
+        }
+    },
+    secondary: {
+    },
+    subtle: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorTransparentBackground
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundHover
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundPressed
+            }
+        }
+    },
+    transparent: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorTransparentBackground
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundHover
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorTransparentBackgroundPressed
+            }
+        }
+    },
+    // Shape variations
+    circular: {},
+    rounded: {},
+    square: {},
+    // Disabled styles
+    disabled: {
+        [`& .${splitButtonClassNames.primaryActionButton}`]: {
+            borderRightColor: tokens.colorNeutralStrokeDisabled
+        },
+        ':hover': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeDisabled
+            }
+        },
+        ':hover:active,:active:focus-visible': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: tokens.colorNeutralStrokeDisabled
+            }
+        }
+    },
+    // Disabled high contrast styles
+    disabledHighContrast: {
+        '@media (forced-colors: active)': {
+            [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                borderRightColor: 'GrayText'
+            },
+            ':hover': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'GrayText'
+                }
+            },
+            ':hover:active,:active:focus-visible': {
+                [`& .${splitButtonClassNames.primaryActionButton}`]: {
+                    borderRightColor: 'GrayText'
+                }
+            }
+        }
+    }
+});
+export const useSplitButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const focusStyles = useFocusStyles();
+    const { appearance, disabled, disabledFocusable } = state;
+    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
+    if (state.menuButton) {
+        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+    }
+    if (state.primaryActionButton) {
+        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+    }
+    return state;
+};

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { renderToggleButton_unstable } from './renderToggleButton';
+import { useToggleButton_unstable } from './useToggleButton';
+import { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * ToggleButtons are buttons that toggle between two defined states when triggered.
+ */ export const ToggleButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToggleButton_unstable(props, ref);
+    useToggleButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);
+    return renderToggleButton_unstable(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+ToggleButton.displayName = 'ToggleButton';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * If passed, `ToggleButton` ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style\n   *\n   * @default false\n   */\n  isAccessible?: boolean;\n};\n\nexport type ToggleButtonBaseProps = ButtonBaseProps &\n  Pick<ToggleButtonProps, 'defaultChecked' | 'checked' | 'isAccessible'>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n\nexport type ToggleButtonBaseState = ButtonBaseState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n"],"names":[],"mappings":"AAiCA,WAAoH"}

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

@@ -0,0 +1,4 @@
+export { ToggleButton } from './ToggleButton';
+export { renderToggleButton_unstable } from './renderToggleButton';
+export { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';
+export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

node_modules/@fluentui/react-button/lib/components/ToggleButton/renderToggleButton.js

@@ -0,0 +1 @@
+export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';

node_modules/@fluentui/react-button/lib/components/ToggleButton/renderToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,yBAAyB"}

node_modules/@fluentui/react-button/lib/components/ToggleButton/useToggleButton.js

@@ -0,0 +1,24 @@
+'use client';
+import * as React from 'react';
+import { useToggleState } from '../../utils/useToggleState';
+import { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */ export const useToggleButton_unstable = (props, ref)=>{
+    const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
+    const buttonState = useButton_unstable(buttonProps, ref);
+    return useToggleState(props, buttonState);
+};
+/**
+ * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */ export const useToggleButtonBase_unstable = (props, ref)=>{
+    const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
+    const buttonState = useButtonBase_unstable(buttonProps, ref);
+    return useToggleState(props, buttonState);
+};

node_modules/@fluentui/react-button/lib/components/ToggleButton/useToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButton_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n  props: ToggleButtonProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n  const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n  const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"names":["React","useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,sBAAsB;AAGjF;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcT,mBAAmBQ,aAAaJ;IAEpD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CP,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,cAAcR,uBAAuBO,aAAaJ;IAExD,OAAOL,eAAeI,OAAOM;AAC/B,EAAE"}

node_modules/@fluentui/react-button/lib/components/ToggleButton/useToggleButtonStyles.styles.js

@@ -0,0 +1,419 @@
+'use client';
+
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const toggleButtonClassNames = {
+  root: 'fui-ToggleButton',
+  icon: 'fui-ToggleButton__icon'
+};
+const useRootCheckedStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1nfm20t",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    sj55zd: "f14nttnl",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    D0sxk3: "fxoiby5",
+    t6yez3: "f15q0o9g",
+    Jwef8y: "f1knas48",
+    Bgoe8wy: "fvcxoqz",
+    Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
+    oetu4i: "f1xlaoq0",
+    gg5e9n: ["f1m52nbi", "f1ub3y4t"],
+    Bi91k9c: "feu1g3u",
+    Bpjbzib: "f128kf1x",
+    im15vp: "f1a38rnh",
+    Hjvxdg: ["f1wvuwkr", "fbu0tau"],
+    Gpfmf1: "f132k7zb",
+    ustxxc: ["fbu0tau", "f1wvuwkr"],
+    Brsut9c: "fggfoek"
+  },
+  highContrast: {
+    By8wz76: "f1nz3ub2",
+    Bcq6wej: "fjq791v",
+    Jcjdmf: ["fkq2p2y", "f1sehlss"],
+    sc4o1m: "f11odvng",
+    Bosien3: ["f1sehlss", "fkq2p2y"],
+    B7iucu3: "fqc85l4",
+    B8gzw0y: "f1h3a8gf",
+    Bbkh6qg: "fkiggi6",
+    F230oe: "f8gmj8i",
+    Bdw8ktp: ["f1ap8nzx", "fjag8bx"],
+    Bj1xduy: "f1igan7k",
+    Bhh2cfd: ["fjag8bx", "f1ap8nzx"],
+    Bahaeuw: "f1v3eptx",
+    Bv2bamp: "f1ysmecq",
+    vxuvv6: "faulsx",
+    Bli9q98: ["f79t15f", "f8qmx7k"],
+    Bx2tt8t: "fbtzoaq",
+    yad0b3: ["f8qmx7k", "f79t15f"],
+    j2fop7: "fd4bjan",
+    B6rz4yo: 0,
+    Buk7464: 0,
+    Bqg8rp8: 0,
+    pjr8j7: 0,
+    Bgs2klq: 0,
+    Hwei09: 0,
+    Bi9aqk7: 0,
+    Fihjvf: 0,
+    nhyz0p: 0,
+    Buw724y: 0,
+    Bn7qjfh: 0,
+    B0u7xl9: 0,
+    md97jv: 0,
+    h3ptyc: 0,
+    s1kvfj: 0,
+    kogrdj: 0,
+    dqx2i2: "fdmpsdn",
+    o0nolc: "fgjsukj"
+  },
+  outline: {
+    De3pzq: "f1q9pm1r",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    B4j52fo: "fgx37oo",
+    Bekrc4i: ["f130t4y6", "f1efpmoh"],
+    Bn0qgzm: "fv51ejd",
+    ibv6hh: ["f1efpmoh", "f130t4y6"],
+    Jwef8y: "fjxutwb",
+    Bpjbzib: "fkoldzo",
+    B8q5s1w: "fcaw57c",
+    Bci5o5g: ["fpwd27e", "f1999bjr"],
+    n8qw10: "f1hi52o4",
+    Bdrgwmp: ["f1999bjr", "fpwd27e"]
+  },
+  primary: {
+    De3pzq: "f8w4g0q",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1phragk",
+    Jwef8y: "f15wkkf3",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f1rq72xc",
+    Bpjbzib: "f1ksv2xa",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "f1d6mv4x"
+  },
+  secondary: {},
+  subtle: {
+    De3pzq: "fq5gl1p",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1eryozh",
+    Jwef8y: "f1t94bn6",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "fnwyq0v",
+    Bpjbzib: "f1q1yqic",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "fwga7ee"
+  },
+  transparent: {
+    De3pzq: "f1q9pm1r",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1qj7y59",
+    Jwef8y: "fjxutwb",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f139oj5f",
+    Bpjbzib: "fkoldzo",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "f1l983o9"
+  }
+}, {
+  d: [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fcaw57c[data-fui-focus-visible]{border-top-color:var(--colorNeutralStroke1);}", ".fpwd27e[data-fui-focus-visible]{border-right-color:var(--colorNeutralStroke1);}", ".f1999bjr[data-fui-focus-visible]{border-left-color:var(--colorNeutralStroke1);}", ".f1hi52o4[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralStroke1);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f128kf1x:hover:active,.f128kf1x:active:focus-visible{background-color:var(--colorNeutralBackground1Pressed);}", ".f1a38rnh:hover:active,.f1a38rnh:active:focus-visible{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1wvuwkr:hover:active,.f1wvuwkr:active:focus-visible{border-right-color:var(--colorNeutralStroke1Pressed);}", ".fbu0tau:hover:active,.fbu0tau:active:focus-visible{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f132k7zb:hover:active,.f132k7zb:active:focus-visible{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".fggfoek:hover:active,.fggfoek:active:focus-visible{color:var(--colorNeutralForeground1Pressed);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fkoldzo:hover:active,.fkoldzo:active:focus-visible{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1ksv2xa:hover:active,.f1ksv2xa:active:focus-visible{background-color:var(--colorBrandBackgroundPressed);}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}", ".f1d6mv4x:hover:active,.f1d6mv4x:active:focus-visible{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1q1yqic:hover:active,.f1q1yqic:active:focus-visible{background-color:var(--colorSubtleBackgroundPressed);}", ".fwga7ee:hover:active,.fwga7ee:active:focus-visible{color:var(--colorNeutralForeground2Pressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1l983o9:hover:active,.f1l983o9:active:focus-visible{color:var(--colorNeutralForeground2BrandPressed);}"],
+  m: [["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1h3a8gf{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f8gmj8i:hover{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ap8nzx:hover{border-right-color:Highlight;}.fjag8bx:hover{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1igan7k:hover{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ysmecq:hover:active,.f1ysmecq:active:focus-visible{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.faulsx:hover:active,.faulsx:active:focus-visible{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f79t15f:hover:active,.f79t15f:active:focus-visible{border-right-color:Highlight;}.f8qmx7k:hover:active,.f8qmx7k:active:focus-visible{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fbtzoaq:hover:active,.fbtzoaq:active:focus-visible{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd4bjan:hover:active,.fd4bjan:active:focus-visible{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fdmpsdn:focus{border:1px solid HighlightText;}}", {
+    p: -2,
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fgjsukj:focus{outline-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useCheckedAccessibleStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "ffp7eso",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1phragk",
+    Jwef8y: "f15wkkf3",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f1rq72xc",
+    Bpjbzib: "f1ksv2xa",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"],
+    Brsut9c: "f1d6mv4x"
+  },
+  outline: {
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"]
+  },
+  primary: {
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f12rpxh0",
+    Dhobit: "f10okvgz",
+    Bfpq7zp: 0,
+    g9k6zt: 0,
+    Bn4voq9: 0,
+    giviqs: "f40way",
+    Bpkdmpa: "ftbw7yw"
+  },
+  subtle: {
+    ysa4qo: "f17xzaca"
+  },
+  transparent: {},
+  secondary: {}
+}, {
+  d: [".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", [".f12rpxh0{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}", {
+    p: -1
+  }], ".f10okvgz{outline-offset:calc(var(--strokeWidthThicker) * -1);}", [".f40way[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}", {
+    p: -1
+  }], ".ftbw7yw[data-fui-focus-visible]{outline-offset:calc(var(--strokeWidthThickest) * -1);}"],
+  h: [".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1ksv2xa:hover:active,.f1ksv2xa:active:focus-visible{background-color:var(--colorBrandBackgroundPressed);}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}", ".f1d6mv4x:hover:active,.f1d6mv4x:active:focus-visible{color:var(--colorNeutralForegroundOnBrand);}", ".f17xzaca:hover .fui-ToggleButton__icon{color:var(--colorNeutralForegroundOnBrand);}"]
+});
+const useRootDisabledStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1bg9a2p",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"],
+    sj55zd: "f1s2aq7o",
+    Jwef8y: "f1falr9n",
+    Bgoe8wy: "f12mpcsy",
+    Bwzppfd: ["f1gwvigk", "f18rmfxp"],
+    oetu4i: "f1jnshp0",
+    gg5e9n: ["f18rmfxp", "f1gwvigk"],
+    Bi91k9c: "fvgxktp",
+    Bpjbzib: "f1jct5ie",
+    im15vp: "f13txml0",
+    Hjvxdg: ["f1ncddno", "f1axfvow"],
+    Gpfmf1: "f1z04ada",
+    ustxxc: ["f1axfvow", "f1ncddno"],
+    Brsut9c: "f1uhomfy"
+  },
+  outline: {},
+  primary: {
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"]
+  },
+  secondary: {},
+  subtle: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Jwef8y: "fjxutwb",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bpjbzib: "fkoldzo",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"]
+  },
+  transparent: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Jwef8y: "fjxutwb",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bpjbzib: "fkoldzo",
+    im15vp: "fhvnf4x",
+    Hjvxdg: ["fb6swo4", "f232fm2"],
+    Gpfmf1: "f1klyf7k",
+    ustxxc: ["f232fm2", "fb6swo4"]
+  }
+}, {
+  d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
+  h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1jct5ie:hover:active,.f1jct5ie:active:focus-visible{background-color:var(--colorNeutralBackgroundDisabled);}", ".f13txml0:hover:active,.f13txml0:active:focus-visible{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ncddno:hover:active,.f1ncddno:active:focus-visible{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1axfvow:hover:active,.f1axfvow:active:focus-visible{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1z04ada:hover:active,.f1z04ada:active:focus-visible{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1uhomfy:hover:active,.f1uhomfy:active:focus-visible{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fkoldzo:hover:active,.fkoldzo:active:focus-visible{background-color:var(--colorTransparentBackgroundPressed);}"]
+});
+const useIconCheckedStyles = /*#__PURE__*/__styles({
+  subtleOrTransparent: {
+    sj55zd: "f1qj7y59"
+  },
+  highContrast: {
+    B8gzw0y: "f1dd5bof"
+  }
+}, {
+  d: [".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
+  m: [["@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
+  base: {
+    By8wz76: "f14ptb23",
+    Bcq6wej: "fd7znuh",
+    Jcjdmf: ["f1wh4a04", "f15h7fac"],
+    sc4o1m: "f1f064oi",
+    Bosien3: ["f15h7fac", "f1wh4a04"],
+    B7iucu3: "f3ggph1",
+    B8gzw0y: "f1dd5bof"
+  },
+  disabled: {
+    Bcq6wej: "f9dbb4x",
+    Jcjdmf: ["f3qs60o", "f5u9ap2"],
+    sc4o1m: "fwd1oij",
+    Bosien3: ["f5u9ap2", "f3qs60o"],
+    B7iucu3: "f1cyfu5x",
+    h3ptyc: "f19etb0b",
+    Buw724y: ["f4f984j", "fw441p0"],
+    Buk7464: "f3d22hf",
+    Hwei09: ["fw441p0", "f4f984j"]
+  }
+}, {
+  m: [["@media (forced-colors: active){.f14ptb23{background-color:ButtonFace;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd7znuh{border-top-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f15h7fac{border-left-color:ButtonBorder;}.f1wh4a04{border-right-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1f064oi{border-bottom-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3ggph1{color:ButtonText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f19etb0b:focus{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f4f984j:focus{border-right-color:GrayText;}.fw441p0:focus{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3d22hf:focus{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+export const useToggleButtonStyles_unstable = state => {
+  'use no memo';
+
+  const rootCheckedStyles = useRootCheckedStyles();
+  const accessibleCheckedStyles = useCheckedAccessibleStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const iconCheckedStyles = useIconCheckedStyles();
+  const primaryHighContrastStyles = usePrimaryHighContrastStyles();
+  const {
+    appearance,
+    checked,
+    disabled,
+    disabledFocusable,
+    isAccessible
+  } = state;
+  state.root.className = mergeClasses(toggleButtonClassNames.root,
+  // Primary high contrast styles
+  appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
+  // Checked styles
+  checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
+  // Opt-in accessible checked styles
+  isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance],
+  // Disabled styles
+  (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
+  // User provided class name
+  state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
+  }
+  useButtonStyles_unstable(state);
+  return state;
+};

node_modules/@fluentui/react-button/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js

@@ -0,0 +1,274 @@
+'use client';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const toggleButtonClassNames = {
+    root: 'fui-ToggleButton',
+    icon: 'fui-ToggleButton__icon'
+};
+const useRootCheckedStyles = makeStyles({
+    // Base styles
+    base: {
+        backgroundColor: tokens.colorNeutralBackground1Selected,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1),
+        color: tokens.colorNeutralForeground1Selected,
+        ...shorthands.borderWidth(tokens.strokeWidthThin),
+        [`& .${iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'none'
+        },
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+            color: tokens.colorNeutralForeground1Hover
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorNeutralBackground1Pressed,
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            color: tokens.colorNeutralForeground1Pressed
+        }
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            ...shorthands.borderColor('Highlight'),
+            color: 'HighlightText',
+            forcedColorAdjust: 'none',
+            ':hover': {
+                backgroundColor: 'HighlightText',
+                ...shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            },
+            ':hover:active,:active:focus-visible': {
+                backgroundColor: 'HighlightText',
+                ...shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            },
+            ':focus': {
+                border: '1px solid HighlightText',
+                outlineColor: 'Highlight'
+            }
+        }
+    },
+    // Appearance variations
+    outline: {
+        backgroundColor: tokens.colorTransparentBackgroundSelected,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1),
+        ...shorthands.borderWidth(tokens.strokeWidthThicker),
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed
+        },
+        ...createCustomFocusIndicatorStyle({
+            ...shorthands.borderColor(tokens.colorNeutralStroke1)
+        })
+    },
+    primary: {
+        backgroundColor: tokens.colorBrandBackgroundSelected,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        }
+    },
+    secondary: {
+    },
+    subtle: {
+        backgroundColor: tokens.colorSubtleBackgroundSelected,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2Selected,
+        ':hover': {
+            backgroundColor: tokens.colorSubtleBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2Hover
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorSubtleBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2Pressed
+        }
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackgroundSelected,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForeground2BrandSelected,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandHover
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForeground2BrandPressed
+        }
+    }
+});
+const useCheckedAccessibleStyles = makeStyles({
+    // Base styles
+    base: {
+        backgroundColor: tokens.colorBrandBackground,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        }
+    },
+    // Appearance variations
+    outline: {
+        // There's no longer a reason to thicken the outline variant's border
+        ...shorthands.borderWidth(tokens.strokeWidthThin)
+    },
+    primary: {
+        // primary has an inner stroke for the checked style
+        outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,
+        outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,
+        // need to not have the default focus style that removes the outline
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,
+            outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`
+        })
+    },
+    subtle: {
+        // override subtle-appearance-specific icon color on hover
+        ':hover': {
+            [`& .${toggleButtonClassNames.icon}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            }
+        }
+    },
+    transparent: {
+    },
+    secondary: {
+    }
+});
+const useRootDisabledStyles = makeStyles({
+    // Base styles
+    base: {
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        color: tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorNeutralBackgroundDisabled,
+            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+            color: tokens.colorNeutralForegroundDisabled
+        }
+    },
+    // Appearance variations
+    outline: {
+    },
+    primary: {
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            ...shorthands.borderColor('transparent')
+        }
+    },
+    secondary: {
+    },
+    subtle: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover,
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed,
+            ...shorthands.borderColor('transparent')
+        }
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor('transparent'),
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover,
+            ...shorthands.borderColor('transparent')
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed,
+            ...shorthands.borderColor('transparent')
+        }
+    }
+});
+const useIconCheckedStyles = makeStyles({
+    // Appearance variations with isAccessible=false
+    subtleOrTransparent: {
+        color: tokens.colorNeutralForeground2BrandSelected
+    },
+    // High contrast styles
+    highContrast: {
+        '@media (forced-colors: active)': {
+            forcedColorAdjust: 'auto'
+        }
+    }
+});
+const usePrimaryHighContrastStyles = makeStyles({
+    // Do not use primary variant high contrast styles for toggle buttons
+    // otherwise there isn't enough difference between on/off states
+    base: {
+        '@media (forced-colors: active)': {
+            backgroundColor: 'ButtonFace',
+            ...shorthands.borderColor('ButtonBorder'),
+            color: 'ButtonText',
+            forcedColorAdjust: 'auto'
+        }
+    },
+    disabled: {
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('GrayText'),
+            color: 'GrayText',
+            ':focus': {
+                ...shorthands.borderColor('GrayText')
+            }
+        }
+    }
+});
+export const useToggleButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const rootCheckedStyles = useRootCheckedStyles();
+    const accessibleCheckedStyles = useCheckedAccessibleStyles();
+    const rootDisabledStyles = useRootDisabledStyles();
+    const iconCheckedStyles = useIconCheckedStyles();
+    const primaryHighContrastStyles = usePrimaryHighContrastStyles();
+    const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
+    state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles
+    appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles
+    checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles
+    isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles
+    (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
+    state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
+    }
+    useButtonStyles_unstable(state);
+    return state;
+};

node_modules/@fluentui/react-button/lib/contexts/ButtonContext.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+const buttonContext = React.createContext(undefined);
+const buttonContextDefaultValue = {};
+/**
+ * Internal context provider used to update default values between internal components
+ *
+ * @internal
+ */ export const ButtonContextProvider = buttonContext.Provider;
+/**
+ * Internal context hook used to update default values between internal components
+ *
+ * @internal
+ */ export const useButtonContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
+};

node_modules/@fluentui/react-button/lib/contexts/ButtonContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * Internal context value used to update default values between internal components\n *\n * @internal\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * Internal context provider used to update default values between internal components\n *\n * @internal\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * Internal context hook used to update default values between internal components\n *\n * @internal\n */\nexport const useButtonContext = (): ButtonContextValue => {\n  return React.useContext(buttonContext) ?? buttonContextDefaultValue;\n};\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAW1E,MAAMC,4BAAgD,CAAC;AAEvD;;;;CAIC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB;QACvBP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;AAC5C,EAAE"}

node_modules/@fluentui/react-button/lib/contexts/index.js

@@ -0,0 +1 @@
+export { ButtonContextProvider, useButtonContext } from './ButtonContext';

node_modules/@fluentui/react-button/lib/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { ButtonContextValue } from './ButtonContext';\nexport { ButtonContextProvider, useButtonContext } from './ButtonContext';\n"],"names":["ButtonContextProvider","useButtonContext"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB"}

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

@@ -0,0 +1,7 @@
+export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from './Button';
+export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
+export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
+export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
+export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from './ToggleButton';
+export { useToggleState } from './utils/index';
+export { ButtonContextProvider, useButtonContext } from './contexts/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseProps,\n  ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB;AAQxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}

node_modules/@fluentui/react-button/lib/utils/index.js

@@ -0,0 +1 @@
+export { useToggleState } from './useToggleState';

node_modules/@fluentui/react-button/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useToggleState } from './useToggleState';\n"],"names":["useToggleState"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB"}

node_modules/@fluentui/react-button/lib/utils/useToggleState.js

@@ -0,0 +1,36 @@
+'use client';
+import * as React from 'react';
+import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+export function useToggleState(props, state) {
+    const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;
+    const { onClick, role } = state.root;
+    const [checkedValue, setCheckedValue] = useControllableState({
+        state: checked,
+        defaultState: defaultChecked,
+        initialState: false
+    });
+    const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
+    const onToggleClick = React.useCallback((ev)=>{
+        if (!disabled && !disabledFocusable) {
+            if (ev.defaultPrevented) {
+                return;
+            }
+            setCheckedValue(!checkedValue);
+        }
+    }, [
+        checkedValue,
+        disabled,
+        disabledFocusable,
+        setCheckedValue
+    ]);
+    return {
+        ...state,
+        checked: checkedValue,
+        isAccessible,
+        root: {
+            ...state.root,
+            [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
+            onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
+        }
+    };
+}

node_modules/@fluentui/react-button/lib/utils/useToggleState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<\n    ToggleButtonProps,\n    'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable' | 'isAccessible'\n  >,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root' | 'isAccessible'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    isAccessible,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useEventCallback(\n        mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","isAccessible","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAInG,OAAO,SAASC,eAOdC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,eAAe,KAAK,EAAE,GAAGN;IACvF,MAAM,EAAEO,OAAO,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGd,qBAAqB;QAC3DI,OAAOC;QACPU,cAAcT;QACdU,cAAc;IAChB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBpB,MAAMqB,WAAW,CACrC,CAACC;QACC,IAAI,CAACb,YAAY,CAACC,mBAAmB;YACnC,IAAIY,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAP,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcN;QAAUC;QAAmBM;KAAgB;IAG9D,OAAO;QACL,GAAGV,KAAK;QAERC,SAASQ;QAETJ;QAEAG,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,CAACK,qBAAqB,iBAAiB,eAAe,EAAEJ;YACxDH,SAAST,iBACPF,eAAeW,SAA2EQ;QAE9F;IACF;AACF"}