@fluentui/react-button 9.0.0-alpha.85 → 9.0.0-alpha.89

package/lib/components/SplitButton/useSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA,OAAO,IAAM,yBAAyB,GAAsC,CAAC,QAAD,EAAW,YAAX,CAArE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAmB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAnB,CAAjC;AAEA;;;;AAIG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,KAD4B,EAE5B,GAF4B,EAG5B,YAH4B,EAGG;AAE/B,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,KAAD,EAAQ,yBAAR,CAApD;AACQ,MAAA,SAAS,GAAK,KAAK,CAAV,SAAT;;AAEN,MAAA,MAAM,GAaJ,sBAAsB,CAblB,MAAN;AAAA,MACA,SAAS,GAYP,sBAAsB,CAZf,SADT;AAAA,MAEA,QAAQ,GAWN,sBAAsB,CAXhB,QAFR;AAAA,MAGA,QAAQ,GAUN,sBAAsB,CAVhB,QAHR;AAAA,MAIA,iBAAiB,GASf,sBAAsB,CATP,iBAJjB;AAAA,MAKA,UAAU,GAQR,sBAAsB,CARd,UALV;AAAA,MAMA,aAAa,GAOX,sBAAsB,CAPX,aANb;AAAA,MAOA,OAAO,GAML,sBAAsB,CANjB,OAPP;AAAA,MAQA,OAAO,GAKL,sBAAsB,CALjB,OARP;AAAA,MASA,EAAA,GAIE,sBAAsB,CAJT,IATf;AAAA,MASA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EATf;AAAA,MAUA,MAAM,GAGJ,sBAAsB,CAHlB,MAVN;AAAA,MAWA,WAAW,GAET,sBAAsB,CAFb,WAXX;AAAA,MAYG,SAAS,GAAA,MAAA,CACV,sBADU,EAbR,CAAA,QAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,aAAA,CAaQ,CAZZ,CAL6B,CAoB/B;AACA;AACA;;;AAEA,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,qBAAiB,QADnB;AAEE,IAAA,EAAE,EAAE,KAFN;AAGE,IAAA,SAAS,EAAA,SAHX;AAIE,IAAA,GAAG,EAAA,GAJL;AAKE,IAAA,IAAI,EAAA,IALN;AAOE,IAAA,MAAM,EAAA,QAAA,CAAA,QAAA,CAAA;AACJ,MAAA,EAAE,EAAE,QADA;AAEJ;AACA;AACA,MAAA,QAAQ,EAAA,QAJJ;AAKJ,MAAA,QAAQ,EAAA,QALJ;AAMJ,MAAA,iBAAiB,EAAA,iBANb;AAOJ,MAAA,OAAO,EAAA,OAPH;AAQJ,MAAA,OAAO,EAAA,OARH;AASJ,MAAA,IAAI,EAAA,IATA;AAUJ,MAAA,MAAM,EAAA,MAVF;AAWJ,MAAA,WAAW,EAAA;AAXP,KAAA,EAYD,SAZC,CAAA,EAaD,MAbC,CAPR;AAuBE,IAAA,UAAU,EAAA,QAAA,CAAA;AACR,MAAA,EAAE,EAAE,QADI;AAER;AACA;AACA,MAAA,QAAQ,EAAA,QAJA;AAKR,MAAA,QAAQ,EAAA,QALA;AAMR,MAAA,iBAAiB,EAAA,iBANT;AAOR,MAAA,OAAO,EAAA,OAPC;AAQR,MAAA,OAAO,EAAA,OARC;AASR,MAAA,IAAI,EAAA,IATI;AAUR,MAAA,MAAM,EAAA,MAVE;AAWR,MAAA,WAAW,EAAA;AAXH,KAAA,EAYL,UAZK;AAvBZ,GADsB,EAuCtB;AACA;AACA,EAAA,YAzCsB,EA0CtB,sBA1CsB,CAAxB;AA6CA,SAAO,KAAP;AACD,CAzEM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport type { SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[] = ['button', 'menuButton'];\n\nconst mergeProps = makeMergeProps<SplitButtonState>({ deepMerge: splitButtonShorthandProps });\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 = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: SplitButtonProps,\n): SplitButtonState => {\n  const resolvedShorthandProps = resolveShorthandProps(props, splitButtonShorthandProps);\n  const { className } = props;\n  const {\n    button,\n    buttonRef,\n    circular,\n    disabled,\n    disabledFocusable,\n    menuButton,\n    menuButtonRef,\n    outline,\n    primary,\n    size = 'medium',\n    subtle,\n    transparent,\n    ...userProps\n  } = resolvedShorthandProps;\n\n  // TODO: To be resolved when moving to simplified prop merging\n  // const buttonInternalRef = React.useRef<HTMLElement | null>(null);\n  // const menuButtonInternalRef = React.useRef<HTMLElement | null>(null);\n\n  const state = mergeProps(\n    {\n      'aria-disabled': disabled,\n      as: 'div',\n      className,\n      ref,\n      size,\n\n      button: {\n        as: 'button',\n        // TODO: To be resolved when moving to simplified prop merging\n        // ref: useMergedRefs(buttonRef, buttonInternalRef),\n        circular,\n        disabled,\n        disabledFocusable,\n        outline,\n        primary,\n        size,\n        subtle,\n        transparent,\n        ...userProps,\n        ...button,\n      },\n\n      menuButton: {\n        as: 'button',\n        // TODO: To be resolved when moving to simplified prop merging\n        // ref: useMergedRefs(menuButtonRef, menuButtonInternalRef),\n        circular,\n        disabled,\n        disabledFocusable,\n        outline,\n        primary,\n        size,\n        subtle,\n        transparent,\n        ...menuButton,\n      },\n    },\n    // TODO: To be resolved when moving to simplified prop merging\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    defaultProps as any,\n    resolvedShorthandProps,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import type { SplitButtonState } from './SplitButton.types';
+export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;

package/lib/components/SplitButton/useSplitButtonStyles.js

@@ -0,0 +1,61 @@
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+var SplitButtonClassNames = {
+  button: 'SplitButton-button',
+  menuButton: 'SplitButton-menuButton'
+};
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "fsxf2b5",
+    "qhf8xq": "f10pi13n",
+    "x85veo": ["f1ne4dir", "f1ybi2by"],
+    "Btvcf1s": ["f1breevy", "f1tvski9"],
+    "bajz6s": ["fnux5s6", "f5nfhee"],
+    "Bzqncq": ["f19wc9x7", "f5bevrs"],
+    "Flt4rd": ["f1wefiyg", "f1leuqsa"]
+  },
+  "rootBlock": {
+    "a9b677": "fly5x3f"
+  },
+  "rootPrimary": {
+    "hr16oo": ["f1l8fiow", "f1lkg7w5"],
+    "B5d1tlv": ["f1pm7n2k", "f1xkm9yf"],
+    "Bqs20fh": ["f1lzlrrr", "fhewniv"]
+  },
+  "rootSubtle": {
+    "hr16oo": ["ffnz80u", "fubjfjv"],
+    "B5d1tlv": ["f1ev4hyt", "fgg37q7"],
+    "Bqs20fh": ["f12yns5v", "fo742o6"]
+  },
+  "rootTransparent": {
+    "hr16oo": ["ffnz80u", "fubjfjv"],
+    "B5d1tlv": ["f1ev4hyt", "fgg37q7"],
+    "Bqs20fh": ["f12yns5v", "fo742o6"]
+  },
+  "rootDisabled": {
+    "hr16oo": ["f11d5dl6", "fdl3b3o"],
+    "B5d1tlv": ["f2uuk1a", "f13ik0bv"],
+    "Bqs20fh": ["f47hzam", "f1ui3wts"]
+  }
+}, {
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".f1ne4dir .SplitButton-button{border-top-right-radius:0;}", ".f1ybi2by .SplitButton-button{border-top-left-radius:0;}", ".f1breevy .SplitButton-button{border-bottom-right-radius:0;}", ".f1tvski9 .SplitButton-button{border-bottom-left-radius:0;}", ".fnux5s6 .SplitButton-menuButton{border-left-width:0;}", ".f5nfhee .SplitButton-menuButton{border-right-width:0;}", ".f19wc9x7 .SplitButton-menuButton{border-top-left-radius:0;}", ".f5bevrs .SplitButton-menuButton{border-top-right-radius:0;}", ".f1wefiyg .SplitButton-menuButton{border-bottom-left-radius:0;}", ".f1leuqsa .SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f1l8fiow .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f1lkg7w5 .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".ffnz80u .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".fubjfjv .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".f11d5dl6 .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fdl3b3o .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}"],
+  "h": [".f1pm7n2k:hover .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f1xkm9yf:hover .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f1ev4hyt:hover .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".fgg37q7:hover .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".f2uuk1a:hover .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".f13ik0bv:hover .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}"],
+  "a": [".f1lzlrrr:active .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".fhewniv:active .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralForegroundInverted);}", ".f12yns5v:active .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".fo742o6:active .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStroke1Hover);}", ".f47hzam:active .SplitButton-button{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".f1ui3wts:active .SplitButton-button{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}"]
+});
+
+export var useSplitButtonStyles = function (state) {
+  var styles = useStyles();
+  state.className = mergeClasses(styles.root, state.block && styles.rootBlock, state.primary && styles.rootPrimary, state.subtle && styles.rootSubtle, state.transparent && styles.rootTransparent, state.disabled && styles.rootDisabled, state.className);
+
+  if (state.button) {
+    state.button.className = mergeClasses(SplitButtonClassNames.button, state.button.className);
+  }
+
+  if (state.menuButton) {
+    state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, state.menuButton.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useSplitButtonStyles.js.map

package/lib/components/SplitButton/useSplitButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA,IAAM,qBAAqB,GAAG;AAC5B,EAAA,MAAM,EAAE,oBADoB;AAE5B,EAAA,UAAU,EAAE;AAFgB,CAA9B;;AAKA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAgGA,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAFM,EAG5B,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAHI,EAI5B,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UAJK,EAK5B,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,eALA,EAM5B,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YANG,EAO5B,KAAK,CAAC,SAPsB,CAA9B;;AAUA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,qBAAqB,CAAC,MAAvB,EAA+B,KAAK,CAAC,MAAN,CAAa,SAA5C,CAArC;AACD;;AAED,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CAAC,qBAAqB,CAAC,UAAvB,EAAmC,KAAK,CAAC,UAAN,CAAiB,SAApD,CAAzC;AACD;;AAED,SAAO,KAAP;AACD,CAtBM","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport type { SplitButtonState } from './SplitButton.types';\n\nconst SplitButtonClassNames = {\n  button: 'SplitButton-button',\n  menuButton: 'SplitButton-menuButton',\n};\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n  }),\n  rootBlock: {\n    width: '100%',\n  },\n  rootPrimary: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralForegroundInverted,\n      },\n    },\n  }),\n  rootSubtle: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n  }),\n  rootTransparent: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStroke1Hover,\n      },\n    },\n  }),\n  rootDisabled: theme => ({\n    // Use classnames to increase specificy of styles and avoid collisions.\n    [`& .${SplitButtonClassNames.button}`]: {\n      borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.button}`]: {\n        borderRightColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      },\n    },\n  }),\n});\n\nexport const useSplitButtonStyles = (state: SplitButtonState): SplitButtonState => {\n  const styles = useStyles();\n\n  state.className = mergeClasses(\n    styles.root,\n    state.block && styles.rootBlock,\n    state.primary && styles.rootPrimary,\n    state.subtle && styles.rootSubtle,\n    state.transparent && styles.rootTransparent,\n    state.disabled && styles.rootDisabled,\n    state.className,\n  );\n\n  if (state.button) {\n    state.button.className = mergeClasses(SplitButtonClassNames.button, state.button.className);\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, state.menuButton.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/ToggleButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { ToggleButtonProps } from './ToggleButton.types';
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/lib/components/ToggleButton/ToggleButton.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentStateCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface ToggleButtonProps extends ButtonProps {
+export declare type ToggleButtonProps = ButtonProps & {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * Mutually exclusive to `defaultChecked`.
@@ -15,8 +15,7 @@ export interface ToggleButtonProps extends ButtonProps {
      * @default false
      */
     defaultChecked?: boolean;
-}
+};
 export declare type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;
 export declare type ToggleButtonDefaultedProps = ButtonDefaultedProps;
-export interface ToggleButtonState extends ButtonState, ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {
-}
+export declare type ToggleButtonState = ButtonState & ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;

package/lib/components/ToggleButton/ToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentStateCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport interface ToggleButtonProps extends ButtonProps {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * Mutually exclusive to `defaultChecked`.\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   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   * Mutually exclusive to `checked`.\n   * @default false\n   */\n  defaultChecked?: boolean;\n}\n\nexport type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;\n\nexport type ToggleButtonDefaultedProps = ButtonDefaultedProps;\n\nexport interface ToggleButtonState\n  extends ButtonState,\n    ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentStateCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * Mutually exclusive to `defaultChecked`.\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   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n   * Mutually exclusive to `checked`.\n   * @default false\n   */\n  defaultChecked?: boolean;\n};\n\nexport type ToggleButtonShorthandPropsCompat = ButtonShorthandPropsCompat;\n\nexport type ToggleButtonDefaultedProps = ButtonDefaultedProps;\n\nexport type ToggleButtonState = ButtonState &\n  ComponentStateCompat<ToggleButtonProps, ToggleButtonShorthandPropsCompat, ToggleButtonDefaultedProps>;\n"]}

package/lib/components/ToggleButton/useChecked.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-export interface CheckedState {
+export declare type CheckedState = {
     checked?: boolean;
     defaultChecked?: boolean;
     onClick?: React.DOMAttributes<HTMLElement>['onClick'];
     role?: string;
     'aria-checked'?: React.AriaAttributes['aria-pressed'];
     'aria-pressed'?: React.AriaAttributes['aria-pressed'];
-}
+};
 /**
  * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
  * @param state - state to read and augment.

package/lib/components/ToggleButton/useChecked.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,2BAArC;AAYA;;;AAGG;;AACH,OAAO,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,oBAAoB,CAAC,OAAD,EAAU,cAAV,CAAtD;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport interface CheckedState {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,2BAArC;AAYA;;;AAGG;;AACH,OAAO,IAAM,UAAU,GAAG,UAA8B,KAA9B,EAA2C;AAC3D,MAAA,OAAO,GAAoC,KAAK,CAAzC,OAAP;AAAA,MAAS,OAAO,GAA2B,KAAK,CAAhC,OAAhB;AAAA,MAAkB,cAAc,GAAW,KAAK,CAAhB,cAAhC;AAAA,MAAkC,IAAI,GAAK,KAAK,CAAV,IAAtC;;AACF,MAAA,EAAA,GAAkC,oBAAoB,CAAC,OAAD,EAAU,cAAV,CAAtD;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B,CAF6D,CAInE;;;AACA,EAAA,KAAK,CAAC,OAAN,GAAgB,YAAhB,CALmE,CAOnE;;AACA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,EAAA,KAAK,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,CAAL,GAA8D,CAAC,CAAC,YAAhE;AAEA,EAAA,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,WAAN,CACd,UAAC,EAAD,EAAoD;AAClD,QAAI,OAAJ,EAAa;AACX,MAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,IAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,GAXa,EAYd,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZc,CAAhB;AAcD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-utilities';\n\nexport type CheckedState = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n  role?: string;\n  'aria-checked'?: React.AriaAttributes['aria-pressed'];\n  'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n};\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param state - state to read and augment.\n */\nexport const useChecked = <TState extends CheckedState>(state: TState) => {\n  const { onClick, checked, defaultChecked, role } = state;\n  const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n  // Ensure the state is the correct controlled/uncontrolled value.\n  state.checked = checkedValue;\n\n  // Ensure the right aria value is set to represent the checked state.\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  state[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue;\n\n  state.onClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      if (onClick) {\n        onClick(ev);\n\n        if (ev.defaultPrevented) {\n          return;\n        }\n      }\n\n      setCheckedValue(!checkedValue);\n    },\n    [checkedValue, setCheckedValue, onClick],\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/useToggleButton.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';
 /**
- * Given user props, returns the final state for a ToggleButton.
+ * 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 declare const useToggleButton: (props: ToggleButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;

package/lib/components/ToggleButton/useToggleButton.js

@@ -1,7 +1,10 @@
 import { useButton } from '../Button/useButton';
 import { useChecked } from './useChecked';
 /**
- * Given user props, returns the final state for a ToggleButton.
+ * 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 var useToggleButton = function (props, ref, defaultProps) {

package/lib/components/ToggleButton/useToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,SAAT,QAA0B,qBAA1B;AACA,SAAS,UAAT,QAA2B,cAA3B;AAGA;;AAEG;;AACH,OAAO,IAAM,eAAe,GAAG,UAC7B,KAD6B,EAE7B,GAF6B,EAG7B,YAH6B,EAGG;AAEhC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,EAAa,YAAb,CAAvB;AAEA,EAAA,UAAU,CAAC,KAAD,CAAV;AAEA,SAAO,KAAP;AACD,CAVM","sourcesContent":["import * as React from 'react';\nimport { useButton } from '../Button/useButton';\nimport { useChecked } from './useChecked';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, returns the final state for a ToggleButton.\n */\nexport const useToggleButton = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: ToggleButtonProps,\n) => {\n  const state = useButton(props, ref, defaultProps);\n\n  useChecked(state as ToggleButtonProps);\n\n  return state as ToggleButtonState;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,SAAT,QAA0B,qBAA1B;AACA,SAAS,UAAT,QAA2B,cAA3B;AAGA;;;;;AAKG;;AACH,OAAO,IAAM,eAAe,GAAG,UAC7B,KAD6B,EAE7B,GAF6B,EAG7B,YAH6B,EAGG;AAEhC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,EAAa,YAAb,CAAvB;AAEA,EAAA,UAAU,CAAC,KAAD,CAAV;AAEA,SAAO,KAAP;AACD,CAVM","sourcesContent":["import * as React from 'react';\nimport { useButton } from '../Button/useButton';\nimport { useChecked } from './useChecked';\nimport type { 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 = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: ToggleButtonProps,\n) => {\n  const state = useButton(props, ref, defaultProps);\n\n  useChecked(state as ToggleButtonProps);\n\n  return state as ToggleButtonState;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/useToggleButtonStyles.js

@@ -1,4 +1,4 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
 import { useButtonStyles } from '../Button/useButtonStyles';
 
 var useRootStyles = /*#__PURE__*/__styles({

package/lib/components/ToggleButton/useToggleButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,eAAT,QAAgC,2BAAhC;;AAGA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA4IA,OAAO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,KAAK,CAAC,OAAN,IAAiB,UAAU,CAAC,OADA,EAE5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAFjB,EAG5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAHjB,EAI5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,MAAvB,IAAiC,UAAU,CAAC,aAJhB,EAK5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,WAAvB,IAAsC,UAAU,CAAC,kBALrB,EAM5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,UAAU,CAAC,QAN9B,EAO5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,OAArD,IAAgE,UAAU,CAAC,eAP/C,EAQ5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,MAArD,IAA+D,UAAU,CAAC,cAR9C,EAS5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,WAArD,IAAoE,UAAU,CAAC,mBATnD,EAU5B,KAAK,CAAC,SAVsB,CAA9B;AAaA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAnBM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nconst useRootStyles = makeStyles({\n  checked: theme => ({\n    background: theme.alias.color.neutral.neutralBackground1Selected,\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderWidth: theme.global.strokeWidth.thin,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n  }),\n  checkedOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  checkedPrimary: theme => ({\n    background: theme.alias.color.neutral.brandBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  checkedSubtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  checkedTransparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nexport const useToggleButtonStyles = (state: ToggleButtonState): ToggleButtonState => {\n  const rootStyles = useRootStyles();\n\n  state.className = mergeClasses(\n    state.checked && rootStyles.checked,\n    state.checked && state.outline && rootStyles.checkedOutline,\n    state.checked && state.primary && rootStyles.checkedPrimary,\n    state.checked && state.subtle && rootStyles.checkedSubtle,\n    state.checked && state.transparent && rootStyles.checkedTransparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,eAAT,QAAgC,2BAAhC;;AAGA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA4IA,OAAO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,KAAK,CAAC,OAAN,IAAiB,UAAU,CAAC,OADA,EAE5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAFjB,EAG5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAvB,IAAkC,UAAU,CAAC,cAHjB,EAI5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,MAAvB,IAAiC,UAAU,CAAC,aAJhB,EAK5B,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,WAAvB,IAAsC,UAAU,CAAC,kBALrB,EAM5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,UAAU,CAAC,QAN9B,EAO5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,OAArD,IAAgE,UAAU,CAAC,eAP/C,EAQ5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,MAArD,IAA+D,UAAU,CAAC,cAR9C,EAS5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,KAAK,CAAC,WAArD,IAAoE,UAAU,CAAC,mBATnD,EAU5B,KAAK,CAAC,SAVsB,CAA9B;AAaA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAnBM","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nconst useRootStyles = makeStyles({\n  checked: theme => ({\n    background: theme.alias.color.neutral.neutralBackground1Selected,\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderWidth: theme.global.strokeWidth.thin,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n    },\n  }),\n  checkedOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  checkedPrimary: theme => ({\n    background: theme.alias.color.neutral.brandBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  checkedSubtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  checkedTransparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackgroundSelected,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2BrandSelected,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nexport const useToggleButtonStyles = (state: ToggleButtonState): ToggleButtonState => {\n  const rootStyles = useRootStyles();\n\n  state.className = mergeClasses(\n    state.checked && rootStyles.checked,\n    state.checked && state.outline && rootStyles.checkedOutline,\n    state.checked && state.primary && rootStyles.checkedPrimary,\n    state.checked && state.subtle && rootStyles.checkedSubtle,\n    state.checked && state.transparent && rootStyles.checkedTransparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Button';
 export * from './CompoundButton';
 export * from './MenuButton';
+export * from './SplitButton';
 export * from './ToggleButton';

package/lib/index.js

@@ -1,5 +1,6 @@
 export * from './Button';
 export * from './CompoundButton';
 export * from './MenuButton';
+export * from './SplitButton';
 export * from './ToggleButton';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './ToggleButton';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './SplitButton';\nexport * from './ToggleButton';\n"]}

package/lib-amd/SplitButton.d.ts

@@ -0,0 +1 @@
+export * from './components/SplitButton/index';

package/lib-amd/SplitButton.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/SplitButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=SplitButton.js.map

package/lib-amd/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sourceRoot":"../src/","sources":["SplitButton.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/SplitButton/index';\n"]}

package/lib-amd/components/Button/Button.types.d.ts

@@ -67,7 +67,7 @@ export declare type ButtonProps = ComponentPropsCompat & React.ButtonHTMLAttribu
 };
 export declare type ButtonShorthandPropsCompat = 'icon';
 export declare type ButtonDefaultedProps = 'icon' | 'size';
-export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {
+export declare type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {
     /**
      * A button can contain only an icon.
      * @default false
@@ -77,4 +77,4 @@ export interface ButtonState extends ComponentStateCompat<ButtonProps, ButtonSho
      * Ref to the root element
      */
     ref: React.Ref<HTMLElement>;
-}
+};

package/lib-amd/components/Button/Button.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\n\nexport type ButtonProps = ComponentPropsCompat &\n  React.ButtonHTMLAttributes<HTMLElement> & {\n    /**\n     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the\n     * `iconPosition` prop.\n     */\n    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    // /**\n    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag\n    //  * is set to `true`.\n    //  */\n    // loader?: ShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n\n    /**\n     * A button can fill the width of its container.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * A button can have completely rounded corners.\n     * @default false\n     */\n    circular?: boolean;\n\n    /**\n     * A button can show that it cannot be interacted with.\n     * @default false\n     */\n    disabled?: boolean;\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     * @default false\n     */\n    disabledFocusable?: boolean;\n\n    /**\n     * A button can format its icon to appear before or after its content.\n     * @default 'before'\n     */\n    iconPosition?: 'before' | 'after';\n\n    // /**\n    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to\n    //  * be interacted with.\n    //  * @default false\n    //  */\n    // loading?: boolean;\n\n    /**\n     * A button can be styled such that it has no background styling and is just emphasized through the styling of\n     * its content and borders.\n     * Mutually exclusive with `primary`, `subtle` and `transparent`.\n     * @default false\n     */\n    outline?: boolean;\n\n    /**\n     * A button can be styled to emphasize that it represents the primary action.\n     * Mutually exclusive with `outline`, `subtle` and `transparent`.\n     * @default false\n     */\n    primary?: boolean;\n\n    /**\n     * A button supports different sizes.\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * A button can be styled to blend into its background and become less emphasized.\n     * @default false\n     * Mutually exclusive with `outline`, `primary` and `transparent`.\n     */\n    subtle?: boolean;\n\n    /**\n     * A button can be styled such that it has no background or border styling and is just emphasized through its\n     * content styling.\n     * Mutually exclusive with `outline`, `primary` and `subtle`.\n     * @default false\n     */\n    transparent?: boolean;\n  };\n\nexport type ButtonShorthandPropsCompat = 'icon';\n\nexport type ButtonDefaultedProps = 'icon' | 'size';\n\nexport interface ButtonState\n  extends ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> {\n  /**\n   * A button can contain only an icon.\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n}\n"]}
+{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\n\nexport type ButtonProps = ComponentPropsCompat &\n  React.ButtonHTMLAttributes<HTMLElement> & {\n    /**\n     * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the\n     * `iconPosition` prop.\n     */\n    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    // /**\n    //  * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag\n    //  * is set to `true`.\n    //  */\n    // loader?: ShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n\n    /**\n     * A button can fill the width of its container.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * A button can have completely rounded corners.\n     * @default false\n     */\n    circular?: boolean;\n\n    /**\n     * A button can show that it cannot be interacted with.\n     * @default false\n     */\n    disabled?: boolean;\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     * @default false\n     */\n    disabledFocusable?: boolean;\n\n    /**\n     * A button can format its icon to appear before or after its content.\n     * @default 'before'\n     */\n    iconPosition?: 'before' | 'after';\n\n    // /**\n    //  * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to\n    //  * be interacted with.\n    //  * @default false\n    //  */\n    // loading?: boolean;\n\n    /**\n     * A button can be styled such that it has no background styling and is just emphasized through the styling of\n     * its content and borders.\n     * Mutually exclusive with `primary`, `subtle` and `transparent`.\n     * @default false\n     */\n    outline?: boolean;\n\n    /**\n     * A button can be styled to emphasize that it represents the primary action.\n     * Mutually exclusive with `outline`, `subtle` and `transparent`.\n     * @default false\n     */\n    primary?: boolean;\n\n    /**\n     * A button supports different sizes.\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * A button can be styled to blend into its background and become less emphasized.\n     * @default false\n     * Mutually exclusive with `outline`, `primary` and `transparent`.\n     */\n    subtle?: boolean;\n\n    /**\n     * A button can be styled such that it has no background or border styling and is just emphasized through its\n     * content styling.\n     * Mutually exclusive with `outline`, `primary` and `subtle`.\n     * @default false\n     */\n    transparent?: boolean;\n  };\n\nexport type ButtonShorthandPropsCompat = 'icon';\n\nexport type ButtonDefaultedProps = 'icon' | 'size';\n\nexport type ButtonState = ComponentStateCompat<ButtonProps, ButtonShorthandPropsCompat, ButtonDefaultedProps> & {\n  /**\n   * A button can contain only an icon.\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n};\n"]}

package/lib-amd/components/Button/renderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderButton.js","sourceRoot":"../src/","sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,YAAY,GAAG,UAAC,KAAkB;QACvC,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,sCAA0B,CAAC,EAAtE,KAAK,WAAA,EAAE,SAAS,eAAsD,CAAC;QACvE,IAAA,QAAQ,GAA6B,KAAK,SAAlC,EAAE,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEnD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAE3B,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC9D,CAAC,QAAQ,IAAI,QAAQ;YACrB,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,YAAY,gBAYvB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { 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 = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*{loading && <slots.loader {...slotProps.loader} />}*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"file":"renderButton.js","sourceRoot":"../src/","sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,YAAY,GAAG,UAAC,KAAkB;QACvC,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,sCAA0B,CAAC,EAAtE,KAAK,WAAA,EAAE,SAAS,eAAsD,CAAC;QACvE,IAAA,QAAQ,GAA6B,KAAK,SAAlC,EAAE,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEnD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC9D,CAAC,QAAQ,IAAI,QAAQ;YACrB,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACpD,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,YAAY,gBAWvB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { 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 = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Button/useButton.d.ts

@@ -5,6 +5,8 @@ import type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './But
  */
 export declare const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a Button.
+ * 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 declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;

package/lib-amd/components/Button/useButton.js

@@ -8,7 +8,9 @@ define(["require", "exports", "@fluentui/react-utilities", "./useButtonState"],
     exports.buttonShorthandPropsCompat = ['icon'];
     var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.buttonShorthandPropsCompat });
     /**
-     * Given user props, returns the final state for a Button.
+     * 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.
      */
     var useButton = function (props, ref, defaultProps) {
         var state = mergeProps({

package/lib-amd/components/Button/useButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButton.js","sourceRoot":"../src/","sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;IAKA;;OAEG;IACU,QAAA,0BAA0B,GAAiC,CAAC,MAAM,CAAC,CAAC;IAEjF,IAAM,UAAU,GAAG,gCAAc,CAAc,EAAE,SAAS,EAAE,kCAA0B,EAAE,CAAC,CAAC;IAE1F;;OAEG;IACI,IAAM,SAAS,GAAG,UAAC,KAAkB,EAAE,GAA2B,EAAE,YAA0B;QACnG,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,QAAQ;YACZ,QAAQ;YACR,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACpB,iBAAiB;YACjB,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;SACf,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,kCAA0B,CAAC,EAC/E,uCAAqB,CAAC,KAAK,EAAE,kCAA0B,CAAC,CACzD,CAAC;QAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAlBW,QAAA,SAAS,aAkBpB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from './useButtonState';\nimport type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './Button.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[] = ['icon'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ deepMerge: buttonShorthandPropsCompat });\n\n/**\n * Given user props, returns the final state for a Button.\n */\nexport const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps): ButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots\n      icon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, buttonShorthandPropsCompat),\n    resolveShorthandProps(props, buttonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useButton.js","sourceRoot":"../src/","sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;IAKA;;OAEG;IACU,QAAA,0BAA0B,GAAiC,CAAC,MAAM,CAAC,CAAC;IAEjF,IAAM,UAAU,GAAG,gCAAc,CAAc,EAAE,SAAS,EAAE,kCAA0B,EAAE,CAAC,CAAC;IAE1F;;;;OAIG;IACI,IAAM,SAAS,GAAG,UAAC,KAAkB,EAAE,GAA2B,EAAE,YAA0B;QACnG,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,KAAA;YACH,EAAE,EAAE,QAAQ;YACZ,QAAQ;YACR,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;YACpB,iBAAiB;YACjB,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;SACf,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,kCAA0B,CAAC,EAC/E,uCAAqB,CAAC,KAAK,EAAE,kCAA0B,CAAC,CACzD,CAAC;QAEF,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAlBW,QAAA,SAAS,aAkBpB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from './useButtonState';\nimport type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './Button.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[] = ['icon'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ deepMerge: buttonShorthandPropsCompat });\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 = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps): ButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots\n      icon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, buttonShorthandPropsCompat),\n    resolveShorthandProps(props, buttonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"]}

package/lib-amd/components/Button/useButtonState.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonState } from './Button.types';
 /**
- * The useButton hook processes the Button draft state.
- * @param state - Button draft state to mutate.
+ * The useButton hook processes the Button state.
+ * @param state - Button state to mutate.
  */
 export declare const useButtonState: (state: ButtonState) => ButtonState;

package/lib-amd/components/Button/useButtonState.js

@@ -3,8 +3,8 @@ define(["require", "exports", "@fluentui/keyboard-keys"], function (require, exp
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useButtonState = void 0;
     /**
-     * The useButton hook processes the Button draft state.
-     * @param state - Button draft state to mutate.
+     * The useButton hook processes the Button state.
+     * @param state - Button state to mutate.
      */
     var useButtonState = function (state) {
         var as = state.as, children = state.children, disabled = state.disabled, disabledFocusable = state.disabledFocusable, icon = state.icon, onClick = state.onClick, onKeyDownCallback = state.onKeyDown;

package/lib-amd/components/Button/useButtonState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param state - Button draft state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"]}
+{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button state.\n * @param state - Button state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"]}

package/lib-amd/components/Button/useButtonStyles.js

@@ -202,6 +202,7 @@ define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-ta
         base: react_tabster_1.createFocusIndicatorStyleRule(function (theme) { return ({
             borderColor: 'transparent',
             boxShadow: "\n      " + theme.alias.shadow.shadow4 + ",\n      0 0 0 2px " + theme.alias.color.neutral.strokeFocus2 + "\n    ",
+            zIndex: 1,
         }); }),
         circular: react_tabster_1.createFocusIndicatorStyleRule(function (theme) { return ({
             borderRadius: theme.global.borderRadius.circular,

package/lib-amd/components/Button/useButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonStyles.js","sourceRoot":"../src/","sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":";;;;IAIA,6EAA6E;IAC7E,sEAAsE;IACzD,QAAA,aAAa,GAAG;QAC3B,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,IAAM,aAAa,GAAG,8BAAU,CAAC;QAC/B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACd,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,aAAa;YACtB,cAAc,EAAE,QAAQ;YACxB,aAAa,EAAE,QAAQ;YAEvB,MAAM,EAAE,CAAC;YAET,QAAQ,EAAE,OAAO;YAEjB,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,UAAU,EAAE,QAAQ;YAEpB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;YACxD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;YAEnD,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACrD,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI;YAE1C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI;YAE/C,OAAO,EAAE,MAAM;YAEf,QAAQ,EAAE;gBACR,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,uBAAuB;gBAC7D,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB;gBAC1D,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;gBAEnD,MAAM,EAAE,SAAS;aAClB;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;gBAC/D,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;gBAC5D,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;gBAEnD,OAAO,EAAE,MAAM;aAChB;SACF,CAAC,EAxCa,CAwCb;QACF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,gEAAgE;YAChE,GAAG,EAAE,qBAAa,CAAC,OAAO;YAC1B,OAAO,EAAE,OAAK,qBAAa,CAAC,MAAQ;YAEpC,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,MAAM;YAEhB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK;YAE7C,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAC/C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO;YACjD,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;SACpD,CAAC,EAbc,CAad;QACF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAChB,gEAAgE;YAChE,GAAG,EAAE,qBAAa,CAAC,KAAK;YACxB,OAAO,EAAE,OAAK,qBAAa,CAAC,KAAO;YAEnC,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,MAAM;YAEhB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM;YAE9C,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAC/C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;YAClD,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;SACpD,CAAC,EAbe,CAaf;QACF,KAAK,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACf,gEAAgE;YAChE,GAAG,EAAE,qBAAa,CAAC,KAAK;YACxB,OAAO,EAAE,OAAK,qBAAa,CAAC,MAAQ;YAEpC,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,MAAM;YAEhB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM;YAE9C,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAC/C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ;YAClD,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;SACpD,CAAC,EAbc,CAad;QACF,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM;SACd;QACD,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAClB,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ;SACjD,CAAC,EAFiB,CAEjB;QACF,OAAO,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACjB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;YAE3D,QAAQ,EAAE;gBACR,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,0BAA0B;aACjE;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B;aACnE;SACF,CAAC,EAVgB,CAUhB;QACF,OAAO,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACjB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;YACrD,WAAW,EAAE,aAAa;YAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,wBAAwB;YAEzD,QAAQ,EAAE;gBACR,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB;gBAC1D,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,wBAAwB;aAC1D;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,sBAAsB;gBAC5D,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,wBAAwB;aAC1D;SACF,CAAC,EAhBgB,CAgBhB;QACF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAChB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACtD,WAAW,EAAE,aAAa;YAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;YAEnD,QAAQ,EAAE;gBACR,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;gBAC3D,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B;aAC9D;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,uBAAuB;gBAC7D,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,8BAA8B;aAChE;SACF,CAAC,EAhBe,CAgBf;QACF,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACrB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;YAC3D,WAAW,EAAE,aAAa;YAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;YAEnD,QAAQ,EAAE;gBACR,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,0BAA0B;gBAChE,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B;aAC9D;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B;gBAClE,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,8BAA8B;aAChE;SACF,CAAC,EAhBoB,CAgBpB;QACF,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAClB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;YAC/D,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;YAC5D,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;YAE1D,MAAM,EAAE,aAAa;YAErB,QAAQ,EAAE;gBACR,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;gBAC/D,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;gBAC5D,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;gBAE1D,MAAM,EAAE,aAAa;aACtB;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;gBAC/D,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;gBAC5D,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,yBAAyB;gBAE1D,MAAM,EAAE,aAAa;aACtB;SACF,CAAC,EAtBiB,CAsBjB;QACF,eAAe,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACzB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB;YAE3D,QAAQ,EAAE;gBACR,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,0BAA0B;aACjE;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B;aACnE;SACF,CAAC,EAVwB,CAUxB;QACF,eAAe,EAAE;YACf,WAAW,EAAE,aAAa;YAE1B,QAAQ,EAAE;gBACR,WAAW,EAAE,aAAa;aAC3B;YAED,SAAS,EAAE;gBACT,WAAW,EAAE,aAAa;aAC3B;SACF;QACD,cAAc,EAAE;YACd,UAAU,EAAE,MAAM;YAClB,WAAW,EAAE,aAAa;YAE1B,QAAQ,EAAE;gBACR,UAAU,EAAE,MAAM;gBAClB,WAAW,EAAE,aAAa;aAC3B;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,MAAM;gBAClB,WAAW,EAAE,aAAa;aAC3B;SACF;QACD,mBAAmB,EAAE;YACnB,UAAU,EAAE,MAAM;YAClB,WAAW,EAAE,aAAa;YAE1B,QAAQ,EAAE;gBACR,UAAU,EAAE,MAAM;gBAClB,WAAW,EAAE,aAAa;aAC3B;YAED,SAAS,EAAE;gBACT,UAAU,EAAE,MAAM;gBAClB,WAAW,EAAE,aAAa;aAC3B;SACF;KACF,CAAC,CAAC;IAEH,IAAM,kBAAkB,GAAG,8BAAU,CAAC;QACpC,IAAI,EAAE,6CAA6B,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;YAC5C,WAAW,EAAE,aAAa;YAC1B,SAAS,EAAE,aACP,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,2BAChB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,WACnD;SACF,CAAC,EAN2C,CAM3C,CAAC;QACH,QAAQ,EAAE,6CAA6B,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;YAChD,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ;SACjD,CAAC,EAF+C,CAE/C,CAAC;QACH,OAAO,EAAE,6CAA6B,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;YAC/C,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,wBAAwB;YAC/D,SAAS,EAAK,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,oBAAe,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAc;SAChG,CAAC,EAH8C,CAG9C,CAAC;KACJ,CAAC,CAAC;IAEH,IAAM,qBAAqB,GAAG,8BAAU,CAAC;QACvC,KAAK,EAAE;YACL,OAAO,EAAE,qBAAa,CAAC,OAAO;YAE9B,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,MAAM;SACjB;QACD,MAAM,EAAE;YACN,OAAO,EAAE,qBAAa,CAAC,OAAO;YAE9B,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,MAAM;SACjB;QACD,KAAK,EAAE;YACL,OAAO,EAAE,qBAAa,CAAC,KAAK;YAE5B,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,MAAM;SACjB;KACF,CAAC,CAAC;IAEH,IAAM,aAAa,GAAG,8BAAU,CAAC;QAC/B,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,aAAa;YACtB,cAAc,EAAE,QAAQ;SACzB;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAC;IAEI,IAAM,eAAe,GAAG,UAAC,KAAkB;QAChD,IAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QACnC,IAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;QAC7C,IAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;QACnD,IAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QAEnC,KAAK,CAAC,SAAS,GAAG,gCAAY,CAC5B,UAAU,CAAC,IAAI,EACf,eAAe,CAAC,IAAI,EACpB,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EACtB,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,EAC/B,KAAK,CAAC,QAAQ,IAAI,UAAU,CAAC,QAAQ,EACrC,KAAK,CAAC,QAAQ,IAAI,eAAe,CAAC,QAAQ,EAC1C,KAAK,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EACnC,KAAK,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EACnC,KAAK,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,EACxC,KAAK,CAAC,MAAM,IAAI,UAAU,CAAC,MAAM,EACjC,KAAK,CAAC,WAAW,IAAI,UAAU,CAAC,WAAW,EAC3C,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,CAAC,IAAI,UAAU,CAAC,QAAQ,EAClE,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,OAAO,IAAI,UAAU,CAAC,eAAe,EAC1F,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,OAAO,IAAI,UAAU,CAAC,eAAe,EAC1F,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,UAAU,CAAC,cAAc,EACxF,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,WAAW,IAAI,UAAU,CAAC,mBAAmB,EAClG,KAAK,CAAC,QAAQ,IAAI,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,EAChD,KAAK,CAAC,SAAS,CAChB,CAAC;QAEF,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,gCAAY,CAAC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEnG,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA9BW,QAAA,eAAe,mBA8B1B","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"]}
+{"version":3,"file":"useButtonStyles.js","sourceRoot":"../src/","sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n    zIndex: 1,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"]}

package/lib-amd/components/CompoundButton/CompoundButton.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { CompoundButtonProps } from './CompoundButton.types';
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-export declare const CompoundButton: React.ForwardRefExoticComponent<CompoundButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const CompoundButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    secondaryContent?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    contentContainer?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+} & React.RefAttributes<HTMLElement>>;

package/lib-amd/components/CompoundButton/CompoundButton.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface CompoundButtonProps extends ButtonProps {
+export declare type CompoundButtonProps = ButtonProps & {
     /**
      * Second line of text that describes the action this button takes.
      */
@@ -10,8 +10,7 @@ export interface CompoundButtonProps extends ButtonProps {
      * Container that wraps the children and secondaryContent slots.
      */
     contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
+};
 export declare type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';
 export declare type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';
-export interface CompoundButtonState extends ButtonState, ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {
-}
+export declare type CompoundButtonState = ButtonState & ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;