@fluentui/react-button 0.0.0-nightly-20221228-0425.1 → 0.0.0-nightly-20221229-0425.1

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE,gBAD6D;EAEnE,IAAI,EAAE,sBAF6D;EAGnE,QAAQ,EAAE;AAHyD,CAAxD;;AAMb,MAAM,qBAAqB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA9B;;AAkCA,MAAM,qBAAqB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA9B;;AAmBA,MAAM,iBAAiB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA1B;;AA+BO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,IAF7B,EAGrB,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,KAAK,CAAC,UAAP,CAH5B,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,KAAK,CAAC,IAAN,CAAW,eAAX,KAA+B,kBAAkB,CAAC,KAAK,CAAC,UAAP,CAF5B,EAGrB,KAAK,CAAC,IAAN,CAAW,SAHU,CAAvB;EAKD;;EAED,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,oBAAA,CAAqB,QADI,EAEzB,cAAc,CAAC,IAFU,EAGzB,cAAc,CAAC,KAAK,CAAC,IAAP,CAHW,EAIzB,CAAC,KAAK,CAAC,QAAP,IAAmB,cAAc,CAAC,WAJT,EAKzB,KAAK,CAAC,QAAN,CAAe,SALU,CAA3B;EAOD;;EAED,iBAAA,CAAA,wBAAA,CAAyB,EAAE,GAAG,KAAL;IAAY,YAAY,EAAE;EAA1B,CAAzB;EAEA,OAAO,KAAP;AACD,CAjCM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAGaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE,sBAAsB;EAC5BC,QAAQ,EAAE;CACX;AAED,MAAMC,qBAAqB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgCtC;AAEF,MAAMC,qBAAqB,gBAAGD,gBAAU;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAiBtC;AAEF,MAAME,iBAAiB,gBAAGF,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA6BlC;AAEK,MAAMG,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,kBAAkB,GAAGN,qBAAqB,EAAE;EAClD,MAAMO,kBAAkB,GAAGL,qBAAqB,EAAE;EAClD,MAAMM,cAAc,GAAGL,iBAAiB,EAAE;EAE1CE,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGR,oBAAY,CACjCL,4BAAoB,CAACC,IAAI,EACzBQ,KAAK,CAACR,IAAI,CAAC,eAAe,CAAC,IAAIS,kBAAkB,CAACI,IAAI,EACtDL,KAAK,CAACR,IAAI,CAAC,eAAe,CAAC,IAAIS,kBAAkB,CAACD,KAAK,CAACM,UAAU,CAAC,EACnEN,KAAK,CAACR,IAAI,CAACY,SAAS,CACrB;EAED,IAAIJ,KAAK,CAACP,IAAI,EAAE;IACdO,KAAK,CAACP,IAAI,CAACW,SAAS,GAAGR,oBAAY,CACjCL,4BAAoB,CAACE,IAAI,EACzBO,KAAK,CAACR,IAAI,CAAC,eAAe,CAAC,IAAIU,kBAAkB,CAACF,KAAK,CAACM,UAAU,CAAC,EACnEN,KAAK,CAACP,IAAI,CAACW,SAAS,CACrB;;EAGH,IAAIJ,KAAK,CAACN,QAAQ,EAAE;IAClBM,KAAK,CAACN,QAAQ,CAACU,SAAS,GAAGR,oBAAY,CACrCL,4BAAoB,CAACG,QAAQ,EAC7BS,cAAc,CAACE,IAAI,EACnBF,cAAc,CAACH,KAAK,CAACO,IAAI,CAAC,EAC1B,CAACP,KAAK,CAACQ,QAAQ,IAAIL,cAAc,CAACM,WAAW,EAC7CT,KAAK,CAACN,QAAQ,CAACU,SAAS,CACzB;;EAGHM,0CAAwB,CAAC;IAAE,GAAGV,KAAK;IAAEW,YAAY,EAAE;EAAQ,CAAE,CAAC;EAE9D,OAAOX,KAAK;AACd,CAAC;AAjCYT,oCAA4B","names":["exports","root","icon","menuIcon","useRootExpandedStyles","react_1","useIconExpandedStyles","useMenuIconStyles","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","base","appearance","size","iconOnly","notIconOnly","useButtonStyles_1","iconPosition"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n  base: {\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n  },\n  secondary: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useIconExpandedStyles = makeStyles({\n  // Appearance variations\n  outline: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  primary: {\n    /* The primary styles are exactly the same as the base styles. */\n  },\n  secondary: {\n    color: tokens.colorNeutralForeground1Selected,\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  transparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst useMenuIconStyles = makeStyles({\n  base: {\n    lineHeight: 0,\n  },\n\n  // Size appearance\n  small: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n    height: '12px',\n    lineHeight: tokens.lineHeightBase200,\n    width: '12px',\n  },\n  large: {\n    fontSize: '16px',\n    height: '16px',\n    lineHeight: tokens.lineHeightBase400,\n    width: '16px',\n  },\n\n  // Not-icon only\n  notIconOnly: {\n    marginLeft: tokens.spacingHorizontalXS,\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const rootExpandedStyles = useRootExpandedStyles();\n  const iconExpandedStyles = useIconExpandedStyles();\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(\n    menuButtonClassNames.root,\n    state.root['aria-expanded'] && rootExpandedStyles.base,\n    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      menuButtonClassNames.icon,\n      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],\n      state.icon.className,\n    );\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles.base,\n      menuIconStyles[state.size],\n      !state.iconOnly && menuIconStyles.notIconOnly,\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n  return state;\n};\n"]}

package/lib-commonjs/components/SplitButton/SplitButton.js

@@ -4,24 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SplitButton = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const renderSplitButton_1 = /*#__PURE__*/require("./renderSplitButton");
-
 const useSplitButton_1 = /*#__PURE__*/require("./useSplitButton");
-
 const useSplitButtonStyles_1 = /*#__PURE__*/require("./useSplitButtonStyles");
 /**
  * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
  * action, while interacting with the second one opens a menu with secondary actions.
  */
-
-
 exports.SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSplitButton_1.useSplitButton_unstable(props, ref);
   useSplitButtonStyles_1.useSplitButtonStyles_unstable(state);
-  return renderSplitButton_1.renderSplitButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
+  return renderSplitButton_1.renderSplitButton_unstable(state);
+  // Casting is required due to lack of distributive union to support unions on @types/react
 });
+
 exports.SplitButton.displayName = 'SplitButton';
 //# sourceMappingURL=SplitButton.js.map

package/lib-commonjs/components/SplitButton/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EAEA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP,CALgG,CAMhG;AACD,CAPiE,CAArD;AASb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;;AAIaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EAEpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;EACxC;AACF,CAAC,CAA0C;;AAE3CL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useSplitButton_1","useSplitButtonStyles_1","renderSplitButton_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSplitButton_unstable(props, ref);\n\n  useSplitButtonStyles_unstable(state);\n\n  return renderSplitButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"]}

package/lib-commonjs/components/SplitButton/SplitButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/SplitButton/index.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSplitButtonStyles_unstable = exports.splitButtonClassNames = void 0;
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./SplitButton"), exports);
-
 tslib_1.__exportStar(require("./SplitButton.types"), exports);
-
 tslib_1.__exportStar(require("./renderSplitButton"), exports);
-
 tslib_1.__exportStar(require("./useSplitButton"), exports);
-
 var useSplitButtonStyles_1 = /*#__PURE__*/require("./useSplitButtonStyles");
-
 Object.defineProperty(exports, "splitButtonClassNames", {
   enumerable: true,
   get: function () {

package/lib-commonjs/components/SplitButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,sBAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AAAuB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,sBAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;;AAAAA;AACAA;AACAA;AACAA;AACA;AAASC;EAAAC;EAAAC;IAAA,mDAAqB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,2DAA6B;EAAA;AAAA","names":["tslib_1","Object","enumerable","get"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/index.ts"],"sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}

package/lib-commonjs/components/SplitButton/renderSplitButton.js

@@ -4,25 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderSplitButton_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
  */
-
-
 const renderSplitButton_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, slots.primaryActionButton && React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
-  }), slots.menuButton && React.createElement(slots.menuButton, { ...slotProps.menuButton
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.primaryActionButton && React.createElement(slots.primaryActionButton, {
+    ...slotProps.primaryActionButton
+  }), slots.menuButton && React.createElement(slots.menuButton, {
+    ...slotProps.menuButton
   }));
 };
-
 exports.renderSplitButton_unstable = renderSplitButton_unstable;
 //# sourceMappingURL=renderSplitButton.js.map

package/lib-commonjs/components/SplitButton/renderSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,mBAAN,IAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,IAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAE9D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,mBAAmB,IAAIF,oBAACH,KAAK,CAACK,mBAAmB;IAAA,GAAKJ,SAAS,CAACI;EAAmB,EAAI,EAC7FL,KAAK,CAACM,UAAU,IAAIH,oBAACH,KAAK,CAACM,UAAU;IAAA,GAAKL,SAAS,CAACK;EAAU,EAAI,CACxD;AAEjB,CAAC;AATYC,kCAA0B","names":["renderSplitButton_unstable","state","slots","slotProps","react_utilities_1","React","root","primaryActionButton","menuButton","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n      {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/SplitButton/useSplitButton.js

@@ -4,19 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSplitButton_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const Button_1 = /*#__PURE__*/require("../Button/Button");
-
 const MenuButton_1 = /*#__PURE__*/require("../MenuButton/MenuButton");
 /**
  * Given user props, defines default props for the SplitButton and returns processed state.
  * @param props - User provided props to the SplitButton component.
  * @param ref - User provided ref to be passed to the SplitButton component.
  */
-
-
 const useSplitButton_unstable = (props, ref) => {
   const {
     appearance = 'secondary',
@@ -56,13 +51,12 @@ const useSplitButton_unstable = (props, ref) => {
       size
     },
     required: true
-  }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
+  });
+  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
   // by the user.
-
   if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
     menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
   }
-
   return {
     // Props passed at the top-level
     appearance,
@@ -85,6 +79,5 @@ const useSplitButton_unstable = (props, ref) => {
     primaryActionButton: primaryActionButtonShorthand
   };
 };
-
 exports.useSplitButton_unstable = useSplitButton_unstable;
 //# sourceMappingURL=useSplitButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;EACpB,MAAM;IACJ,UAAU,GAAG,WADT;IAEJ,QAFI;IAGJ,QAAQ,GAAG,KAHP;IAIJ,iBAAiB,GAAG,KAJhB;IAKJ,IALI;IAMJ,YAAY,GAAG,QANX;IAOJ,UAPI;IAQJ,QARI;IASJ,mBATI;IAUJ,KAAK,GAAG,SAVJ;IAWJ,IAAI,GAAG;EAXH,IAYF,KAZJ;EAcA,MAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,cAAN,CAAf;EAEA,MAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;IACvD,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,iBAHY;MAIZ,QAJY;MAKZ,KALY;MAMZ;IANY,CADyC;IASvD,QAAQ,EAAE;EAT6C,CAA7B,CAA5B;EAYA,MAAM,4BAA4B,GAAG,iBAAA,CAAA,gBAAA,CAAiB,mBAAjB,EAAsC;IACzE,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,QAHY;MAIZ,iBAJY;MAKZ,IALY;MAMZ,YANY;MAOZ,EAAE,EAAE,MAAM,GAAG,uBAPD;MAQZ,KARY;MASZ;IATY,CAD2D;IAYzE,QAAQ,EAAE;EAZ+D,CAAtC,CAArC,CA7BoB,CA4CpB;EACA;;EACA,IACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;IACA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;EACD;;EAED,OAAO;IACL;IACA,UAFK;IAGL,QAHK;IAIL,iBAJK;IAKL,YALK;IAML,KANK;IAOL,IAPK;IASL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,UAAU,EAAE,YAAA,CAAA,UAFF;MAGV,mBAAmB,EAAE,QAAA,CAAA;IAHX,CAVP;IAgBL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MAAE,GAAF;MAAO,GAAG;IAAV,CAA7B,CAhBD;IAiBL,UAAU,EAAE,mBAjBP;IAkBL,mBAAmB,EAAE;EAlBhB,CAAP;AAoBD,CA9EM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AAGA;;;;;AAKO,MAAMA,uBAAuB,GAAG,CACrCC,KAAuB,EACvBC,GAAqD,KACjC;EACpB,MAAM;IACJC,UAAU,GAAG,WAAW;IACxBC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,iBAAiB,GAAG,KAAK;IACzBC,IAAI;IACJC,YAAY,GAAG,QAAQ;IACvBC,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,KAAK,GAAG,SAAS;IACjBC,IAAI,GAAG;EAAQ,CAChB,GAAGZ,KAAK;EAET,MAAMa,MAAM,GAAGC,uBAAK,CAAC,cAAc,CAAC;EAEpC,MAAMC,mBAAmB,GAAGD,kCAAgB,CAACN,UAAU,EAAE;IACvDQ,YAAY,EAAE;MACZd,UAAU;MACVE,QAAQ;MACRC,iBAAiB;MACjBI,QAAQ;MACRE,KAAK;MACLC;KACD;IACDK,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,4BAA4B,GAAGJ,kCAAgB,CAACJ,mBAAmB,EAAE;IACzEM,YAAY,EAAE;MACZd,UAAU;MACVC,QAAQ;MACRC,QAAQ;MACRC,iBAAiB;MACjBC,IAAI;MACJC,YAAY;MACZY,EAAE,EAAEN,MAAM,GAAG,uBAAuB;MACpCF,KAAK;MACLC;KACD;IACDK,QAAQ,EAAE;GACX,CAAC;EAEF;EACA;EACA,IACEF,mBAAmB,IACnBG,4BAA4B,IAC5B,CAACH,mBAAmB,CAAC,YAAY,CAAC,IAClC,CAACA,mBAAmB,CAAC,iBAAiB,CAAC,EACvC;IACAA,mBAAmB,CAAC,iBAAiB,CAAC,GAAGG,4BAA4B,CAACC,EAAE;;EAG1E,OAAO;IACL;IACAjB,UAAU;IACVE,QAAQ;IACRC,iBAAiB;IACjBE,YAAY;IACZI,KAAK;IACLC,IAAI;IAEJ;IACAQ,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXb,UAAU,EAAEc,uBAAU;MACtBZ,mBAAmB,EAAEa;KACtB;IAEDF,IAAI,EAAEP,uCAAqB,CAAC,KAAK,EAAE;MAAEb,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDQ,UAAU,EAAEO,mBAAmB;IAC/BL,mBAAmB,EAAEQ;GACtB;AACH,CAAC;AA9EYM,+BAAuB","names":["useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","react_utilities_1","menuButtonShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root","MenuButton_1","Button_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance = 'secondary',\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"]}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js

@@ -4,19 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSplitButtonStyles_unstable = exports.splitButtonClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 exports.splitButtonClassNames = {
   root: 'fui-SplitButton',
   menuButton: 'fui-SplitButton__menuButton',
   primaryActionButton: 'fui-SplitButton__primaryActionButton'
 };
-
 const useFocusStyles = /*#__PURE__*/react_1.__styles({
   "primaryActionButton": {
     "Brovlpu": "ftqa4ok",
@@ -36,7 +31,6 @@ const useFocusStyles = /*#__PURE__*/react_1.__styles({
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
   "d": [".f1x37qnr[data-fui-focus-visible]{border-top-right-radius:0;}", ".f1um7c6d[data-fui-focus-visible]{border-top-left-radius:0;}", ".fn4c73s[data-fui-focus-visible]{border-bottom-right-radius:0;}", ".f6pwzcr[data-fui-focus-visible]{border-bottom-left-radius:0;}", ".frrbwxo[data-fui-focus-visible]{border-left-width:0;}", ".f1rgcpbv[data-fui-focus-visible]{border-right-width:0;}"]
 });
-
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "mc9l5x": "ftuwxu6",
@@ -91,7 +85,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "m": "(forced-colors: active)"
   }]]
 });
-
 const useSplitButtonStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const focusStyles = useFocusStyles();
@@ -101,17 +94,13 @@ const useSplitButtonStyles_unstable = state => {
     disabledFocusable
   } = state;
   state.root.className = react_1.mergeClasses(exports.splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
-
   if (state.menuButton) {
     state.menuButton.className = react_1.mergeClasses(exports.splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
   }
-
   if (state.primaryActionButton) {
     state.primaryActionButton.className = react_1.mergeClasses(exports.splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
   }
-
   return state;
 };
-
 exports.useSplitButtonStyles_unstable = useSplitButtonStyles_unstable;
 //# sourceMappingURL=useSplitButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,UAAU,EAAE,6BAFyD;EAGrE,mBAAmB,EAAE;AAHgD,CAA1D;;AAMb,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;;AA8HO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EAEA,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB;EAAxB,IAA8C,KAApD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,IAAI,UAAU,CAAC,UAAD,CAHH,EAIrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJzB,EAKrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBALzB,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;EASA,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,OAAA,CAAA,YAAA,CAC3B,OAAA,CAAA,qBAAA,CAAsB,UADK,EAE3B,WAAW,CAAC,UAFe,EAG3B,KAAK,CAAC,UAAN,CAAiB,SAHU,CAA7B;EAKD;;EAED,IAAI,KAAK,CAAC,mBAAV,EAA+B;IAC7B,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,OAAA,CAAA,YAAA,CACpC,OAAA,CAAA,qBAAA,CAAsB,mBADc,EAEpC,WAAW,CAAC,mBAFwB,EAGpC,KAAK,CAAC,mBAAN,CAA0B,SAHU,CAAtC;EAKD;;EAED,OAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: 0,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,6BAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAW/B;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA4H9B;AAEK,MAAME,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGH,aAAa,EAAE;EAClC,MAAMI,WAAW,GAAGN,cAAc,EAAE;EAEpC,MAAM;IAAEO,UAAU;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EAEzDA,KAAK,CAACP,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,6BAAqB,CAACC,IAAI,EAC1BQ,UAAU,CAACM,IAAI,EACfJ,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EACpC,CAACC,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACG,QAAQ,EACtD,CAACA,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACO,oBAAoB,EAClER,KAAK,CAACP,IAAI,CAACa,SAAS,CACrB;EAED,IAAIN,KAAK,CAACN,UAAU,EAAE;IACpBM,KAAK,CAACN,UAAU,CAACY,SAAS,GAAGT,oBAAY,CACvCL,6BAAqB,CAACE,UAAU,EAChCQ,WAAW,CAACR,UAAU,EACtBM,KAAK,CAACN,UAAU,CAACY,SAAS,CAC3B;;EAGH,IAAIN,KAAK,CAACL,mBAAmB,EAAE;IAC7BK,KAAK,CAACL,mBAAmB,CAACW,SAAS,GAAGT,oBAAY,CAChDL,6BAAqB,CAACG,mBAAmB,EACzCO,WAAW,CAACP,mBAAmB,EAC/BK,KAAK,CAACL,mBAAmB,CAACW,SAAS,CACpC;;EAGH,OAAON,KAAK;AACd,CAAC;AAhCYR,qCAA6B","names":["exports","root","menuButton","primaryActionButton","useFocusStyles","react_1","useRootStyles","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabled","disabledFocusable","className","base","disabledHighContrast"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      minWidth: 0,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Pressed,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-commonjs/components/ToggleButton/ToggleButton.js

@@ -4,23 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleButton = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const renderToggleButton_1 = /*#__PURE__*/require("./renderToggleButton");
-
 const useToggleButton_1 = /*#__PURE__*/require("./useToggleButton");
-
 const useToggleButtonStyles_1 = /*#__PURE__*/require("./useToggleButtonStyles");
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-
-
 exports.ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToggleButton_1.useToggleButton_unstable(props, ref);
   useToggleButtonStyles_1.useToggleButtonStyles_unstable(state);
-  return renderToggleButton_1.renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
+  return renderToggleButton_1.renderToggleButton_unstable(state);
+  // Casting is required due to lack of distributive union to support unions on @types/react
 });
+
 exports.ToggleButton.displayName = 'ToggleButton';
 //# sourceMappingURL=ToggleButton.js.map

package/lib-commonjs/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,GAAhC,CAAd;EAEA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;EAEA,OAAO,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP,CALkG,CAMlG;AACD,CAPmE,CAAvD;AASb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,oBAAY,gBAA2CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGC,0CAAwB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAElDG,sDAA8B,CAACF,KAAK,CAAC;EAErC,OAAOG,gDAA2B,CAACH,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CL,oBAAY,CAACS,WAAW,GAAG,cAAc","names":["exports","React","forwardRef","props","ref","state","useToggleButton_1","useToggleButtonStyles_1","renderToggleButton_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/ToggleButton/index.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToggleButtonStyles_unstable = exports.toggleButtonClassNames = void 0;
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./ToggleButton"), exports);
-
 tslib_1.__exportStar(require("./ToggleButton.types"), exports);
-
 tslib_1.__exportStar(require("./renderToggleButton"), exports);
-
 tslib_1.__exportStar(require("./useToggleButton"), exports);
-
 var useToggleButtonStyles_1 = /*#__PURE__*/require("./useToggleButtonStyles");
-
 Object.defineProperty(exports, "toggleButtonClassNames", {
   enumerable: true,
   get: function () {

package/lib-commonjs/components/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,uBAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AAAwB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,uBAAA,CAAA,8BAAA;EAA8B;AAA9B,CAAA","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;;AAAAA;AACAA;AACAA;AACAA;AACA;AAASC;EAAAC;EAAAC;IAAA,qDAAsB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,6DAA8B;EAAA;AAAA","names":["tslib_1","Object","enumerable","get"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/index.ts"],"sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}

package/lib-commonjs/components/ToggleButton/renderToggleButton.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderToggleButton_unstable = void 0;
-
 var renderButton_1 = /*#__PURE__*/require("../Button/renderButton");
-
 Object.defineProperty(exports, "renderToggleButton_unstable", {
   enumerable: true,
   get: function () {

package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,2CAAqB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}

package/lib-commonjs/components/ToggleButton/useToggleButton.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToggleButton_unstable = void 0;
-
 const useToggleState_1 = /*#__PURE__*/require("../../utils/useToggleState");
-
 const useButton_1 = /*#__PURE__*/require("../Button/useButton");
 /**
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
@@ -14,12 +12,9 @@ const useButton_1 = /*#__PURE__*/require("../Button/useButton");
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
-
-
 const useToggleButton_unstable = (props, ref) => {
   const buttonState = useButton_1.useButton_unstable(props, ref);
   return useToggleState_1.useToggleState(props, buttonState);
 };
-
 exports.useToggleButton_unstable = useToggleButton_unstable;
 //# sourceMappingURL=useToggleButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,MAAM,WAAW,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAApB;EAEA,OAAO,gBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,WAAtB,CAAP;AACD,CAPM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\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_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AACA;AACA;AAGA;;;;;;AAMO,MAAMA,wBAAwB,GAAG,CACtCC,KAAwB,EACxBC,GAAqD,KAChC;EACrB,MAAMC,WAAW,GAAGC,8BAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAElD,OAAOG,+BAAc,CAACJ,KAAK,EAAEE,WAAW,CAAC;AAC3C,CAAC;AAPYG,gCAAwB","names":["useToggleButton_unstable","props","ref","buttonState","useButton_1","useToggleState_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\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_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"]}

package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js

@@ -4,22 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToggleButtonStyles_unstable = exports.toggleButtonClassNames = void 0;
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
-
 exports.toggleButtonClassNames = {
   root: 'fui-ToggleButton',
   icon: 'fui-ToggleButton__icon'
 };
-
 const useRootCheckedStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "De3pzq": "f1nfm20t",
@@ -222,7 +215,6 @@ const useRootCheckedStyles = /*#__PURE__*/react_1.__styles({
   "f": [".ftqa4ok:focus{outline-style:none;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
-
 const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "De3pzq": "f1bg9a2p",
@@ -298,7 +290,6 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
   "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
   "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}"]
 });
-
 const useIconCheckedStyles = /*#__PURE__*/react_1.__styles({
   "subtleOrTransparent": {
     "sj55zd": "f1qj7y59"
@@ -306,7 +297,6 @@ const useIconCheckedStyles = /*#__PURE__*/react_1.__styles({
 }, {
   "d": [".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
 });
-
 const useToggleButtonStyles_unstable = state => {
   const rootCheckedStyles = useRootCheckedStyles();
   const rootDisabledStyles = useRootDisabledStyles();
@@ -317,18 +307,18 @@ const useToggleButtonStyles_unstable = state => {
     disabled,
     disabledFocusable
   } = state;
-  state.root.className = react_1.mergeClasses(exports.toggleButtonClassNames.root, // Checked styles
-  checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles
-  (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
+  state.root.className = react_1.mergeClasses(exports.toggleButtonClassNames.root,
+  // Checked styles
+  checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
+  // Disabled styles
+  (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
+  // User provided class name
   state.root.className);
-
   if (state.icon) {
     state.icon.className = react_1.mergeClasses(exports.toggleButtonClassNames.icon, (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, state.icon.className);
   }
-
   useButtonStyles_1.useButtonStyles_unstable(state);
   return state;
 };
-
 exports.useToggleButtonStyles_unstable = useToggleButtonStyles_unstable;
 //# sourceMappingURL=useToggleButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n  highContrastFocusStyles: createCustomFocusIndicatorStyle({\n    ...shorthands.border('1px', 'solid', 'HighlightText'),\n    outlineColor: 'Highlight',\n  }),\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":"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","names":["exports","root","icon","useRootCheckedStyles","react_1","useRootDisabledStyles","useIconCheckedStyles","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","appearance","checked","disabled","disabledFocusable","className","base","highContrast","subtleOrTransparent","useButtonStyles_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n  highContrastFocusStyles: createCustomFocusIndicatorStyle({\n    ...shorthands.border('1px', 'solid', 'HighlightText'),\n    outlineColor: 'Highlight',\n  }),\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"]}