@fluentui/react-toolbar 9.0.0-rc.2 → 9.0.0-rc.3

package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarDivider_unstable = void 0;
-
 const react_divider_1 = /*#__PURE__*/require("@fluentui/react-divider");
-
 const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 /**
  * Create the state required to render ToolbarDivider.
@@ -17,8 +15,6 @@ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
  * @param props - props from this instance of ToolbarDivider
  * @param ref - reference to root HTMLElement of ToolbarDivider
  */
-
-
 const useToolbarDivider_unstable = (props, ref) => {
   const vertical = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.vertical);
   return react_divider_1.useDivider_unstable({
@@ -26,6 +22,5 @@ const useToolbarDivider_unstable = (props, ref) => {
     ...props
   }, ref);
 };
-
 exports.useToolbarDivider_unstable = useToolbarDivider_unstable;
 //# sourceMappingURL=useToolbarDivider.js.map

package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,QAAtC,CAAjB;EACA,OAAO,eAAA,CAAA,mBAAA,CAAoB;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAApB,EAAuD,GAAvD,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n  props: ToolbarDividerProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,QAAQ,GAAGC,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACF,QAAQ,CAAC;EAChE,OAAOG,mCAAmB,CAAC;IAAEH,QAAQ,EAAE,CAACA,QAAQ;IAAE,GAAGF;EAAK,CAAE,EAAEC,GAAG,CAAC;AACpE,CAAC;AANYK,kCAA0B","names":["useToolbarDivider_unstable","props","ref","vertical","ToolbarContext_1","ctx","react_divider_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n  props: ToolbarDividerProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"]}

package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.js

@@ -4,27 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarDividerStyles_unstable = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_divider_1 = /*#__PURE__*/require("@fluentui/react-divider");
-
 const useBaseStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "ftuwxu6",
-    "B2u0y6b": "f1lwjmbk"
+  root: {
+    mc9l5x: "ftuwxu6",
+    B2u0y6b: "f1lwjmbk"
   },
-  "vertical": {
-    "B2u0y6b": "fe668z"
+  vertical: {
+    B2u0y6b: "fe668z"
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1lwjmbk{max-width:1px;}", ".fe668z{max-width:initial;}"]
+  d: [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1lwjmbk{max-width:1px;}", ".fe668z{max-width:initial;}"]
 });
 /**
  * Apply styling to the ToolbarDivider slots based on the state
  */
-
-
 const useToolbarDividerStyles_unstable = state => {
   react_divider_1.useDividerStyles_unstable(state);
   const {
@@ -34,6 +29,5 @@ const useToolbarDividerStyles_unstable = state => {
   state.root.className = react_1.mergeClasses(state.root.className, toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical);
   return state;
 };
-
 exports.useToolbarDividerStyles_unstable = useToolbarDividerStyles_unstable;
 //# sourceMappingURL=useToolbarDividerStyles.js.map

package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,eAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EAErB,oBAAoB,CAAC,IAFA,EAGrB,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHb,CAAvB;EAKA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    state.root.className,\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA,MAAMA,aAAa,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAS9B;AAEF;;;AAGO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAyB;EAClGC,yCAAyB,CAACD,KAAK,CAAC;EAChC,MAAM;IAAEE;EAAQ,CAAE,GAAGF,KAAK;EAC1B,MAAMG,oBAAoB,GAAGN,aAAa,EAAE;EAC5CG,KAAK,CAACI,IAAI,CAACC,SAAS,GAAGP,oBAAY,CACjCE,KAAK,CAACI,IAAI,CAACC,SAAS,EACpBF,oBAAoB,CAACC,IAAI,EACzB,CAACF,QAAQ,IAAIC,oBAAoB,CAACD,QAAQ,CAC3C;EACD,OAAOF,KAAK;AACd,CAAC;AAVYM,wCAAgC","names":["useBaseStyles","react_1","useToolbarDividerStyles_unstable","state","react_divider_1","vertical","toolbarDividerStyles","root","className","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    state.root.className,\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n  );\n  return state;\n};\n"]}

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

@@ -4,24 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarGroup = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useToolbarGroup_1 = /*#__PURE__*/require("./useToolbarGroup");
-
 const useToolbarGroupStyles_1 = /*#__PURE__*/require("./useToolbarGroupStyles");
-
 const renderToolbarGroup_1 = /*#__PURE__*/require("./renderToolbarGroup");
 /**
  * ToolbarGroup component is a Button to be used inside Toolbar
  * which will respect toolbar props such as `size`
  */
-
-
 exports.ToolbarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarGroup_1.useToolbarGroup_unstable(props, ref);
   useToolbarGroupStyles_1.useToolbarGroupStyles_unstable(state);
-  return renderToolbarGroup_1.renderToolbarGroup_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
+  return renderToolbarGroup_1.renderToolbarGroup_unstable(state);
+  // Casting is required due to lack of distributive union to support unions on @types/react
 });
+
 exports.ToolbarGroup.displayName = 'ToolbarGroup';
 //# sourceMappingURL=ToolbarGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;;AAGG;;;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;EACA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,OAAO,oBAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP,CAHkG,CAIlG;AACD,CALmE,CAAvD;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n  useToolbarGroupStyles_unstable(state);\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AAEA;;;;AAIaA,oBAAY,gBAA2CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGC,0CAAwB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAClDG,sDAA8B,CAACF,KAAK,CAAC;EACrC,OAAOG,gDAA2B,CAACH,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CL,oBAAY,CAACS,WAAW,GAAG,cAAc","names":["exports","React","forwardRef","props","ref","state","useToolbarGroup_1","useToolbarGroupStyles_1","renderToolbarGroup_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n  useToolbarGroupStyles_unstable(state);\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"]}

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

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

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./ToolbarGroup"), exports);
-
 tslib_1.__exportStar(require("./ToolbarGroup.types"), exports);
+tslib_1.__exportStar(require("./useToolbarGroup"), exports);
+tslib_1.__exportStar(require("./useToolbarGroupStyles"), exports);
+tslib_1.__exportStar(require("./renderToolbarGroup"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/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","sourcesContent":["export * from './ToolbarGroup';\nexport * from './ToolbarGroup.types';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts"],"sourcesContent":["export * from './ToolbarGroup';\nexport * from './ToolbarGroup.types';\nexport * from './useToolbarGroup';\nexport * from './useToolbarGroupStyles';\nexport * from './renderToolbarGroup';\n"]}

package/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js

@@ -4,23 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderToolbarGroup_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of ToolbarGroup
  */
-
-
 const renderToolbarGroup_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
+  return React.createElement(slots.root, {
+    ...slotProps.root
   }, slotProps.root.children);
 };
-
 exports.renderToolbarGroup_unstable = renderToolbarGroup_unstable;
 //# sourceMappingURL=renderToolbarGroup.js.map

package/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/renderToolbarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA6B;EACtE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA4B,KAA5B,CAA7B;EAEA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n  const { slots, slotProps } = getSlots<ToolbarGroupSlots>(state);\n\n  return <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,2BAA2B,GAAIC,KAAwB,IAAI;EACtE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAoBH,KAAK,CAAC;EAE/D,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAAGH,SAAS,CAACG,IAAI,CAACC,QAAQ,CAAc;AAC/E,CAAC;AAJYC,mCAA2B","names":["renderToolbarGroup_unstable","state","slots","slotProps","react_utilities_1","React","root","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n  const { slots, slotProps } = getSlots<ToolbarGroupSlots>(state);\n\n  return <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>;\n};\n"]}

package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarGroup_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Given user props, defines default props for the Group
  * @param props - User provided props to the Group component.
  * @param ref - User provided ref to be passed to the Group component.
  */
-
-
 const useToolbarGroup_unstable = (props, ref) => {
   return {
     components: {
@@ -25,6 +22,5 @@ const useToolbarGroup_unstable = (props, ref) => {
     })
   };
 };
-
 exports.useToolbarGroup_unstable = useToolbarGroup_unstable;
 //# sourceMappingURL=useToolbarGroup.js.map

package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAA4D,KAA5D,EAAmE;MACvE,GADuE;MAEvE,IAAI,EAAE,cAFiE;MAGvE,GAAG;IAHoE,CAAnE;EAJD,CAAP;AAUD,CAdM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n      ref,\n      role: 'presentation',\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAIA;;;;;AAKO,MAAMA,wBAAwB,GAAG,CACtCC,KAAwB,EACxBC,GAA8B,KACT;EACrB,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEC,uCAAqB,CAAuC,KAAK,EAAE;MACvEH,GAAG;MACHI,IAAI,EAAE,cAAc;MACpB,GAAGL;KACJ;GACF;AACH,CAAC;AAdYM,gCAAwB","names":["useToolbarGroup_unstable","props","ref","components","root","react_utilities_1","role","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n      ref,\n      role: 'presentation',\n      ...props,\n    }),\n  };\n};\n"]}

package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.js

@@ -4,35 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarGroupStyles_unstable = exports.toolbarGroupClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 exports.toolbarGroupClassNames = {
   root: 'fui-ToolbarGroup'
 };
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "i8kkvl": "f4px1ci",
-    "Belr9w4": "fn67r4l"
+  root: {
+    mc9l5x: "f22iagw",
+    i8kkvl: "f4px1ci",
+    Belr9w4: "fn67r4l"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"]
 });
 /**
  * Apply styling to the Toolbar slots based on the state
  */
-
-
 const useToolbarGroupStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = react_1.mergeClasses(exports.toolbarGroupClassNames.root, styles.root, state.root.className);
   return state;
 };
-
 exports.useToolbarGroupStyles_unstable = useToolbarGroupStyles_unstable;
 //# sourceMappingURL=useToolbarGroupStyles.js.map

package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,sBAAA,GAA4D;EACvE,IAAI,EAAE;AADiE,CAA5D;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgD;EAC5F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAA,CAAuB,IAApC,EAA0C,MAAM,CAAC,IAAjD,EAAuD,KAAK,CAAC,IAAN,CAAW,SAAlE,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.gap('8px'),\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAGaA,8BAAsB,GAAsC;EACvEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK1B;AAEF;;;AAGO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5F,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CAACH,8BAAsB,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAEnG,OAAOF,KAAK;AACd,CAAC;AALYL,sCAA8B","names":["exports","root","useStyles","react_1","useToolbarGroupStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.gap('8px'),\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarRadioButton = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const useToolbarRadioButton_1 = /*#__PURE__*/require("./useToolbarRadioButton");
-
 const useToolbarRadioButtonStyles_1 = /*#__PURE__*/require("./useToolbarRadioButtonStyles");
 /**
  * ToolbarRadioButton component
  */
-
-
 exports.ToolbarRadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarRadioButton_1.useToolbarRadioButton_unstable(props, ref);
   useToolbarRadioButtonStyles_1.useToolbarRadioButtonStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAmE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,EAAsC,GAAtC,CAAd;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CAL+E,CAAnE;AAOb,OAAA,CAAA,kBAAA,CAAmB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n\n  useToolbarRadioButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AAEA;;;AAGaA,0BAAkB,gBAAiDC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9G,MAAMC,KAAK,GAAGC,sDAA8B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAExDG,kEAAoC,CAACF,KAAK,CAAC;EAC3C,OAAOG,0CAA2B,CAACH,KAAK,CAAC;AAC3C,CAAC,CAAiD;AAElDL,0BAAkB,CAACS,WAAW,GAAG,oBAAoB","names":["exports","React","forwardRef","props","ref","state","useToolbarRadioButton_1","useToolbarRadioButtonStyles_1","react_button_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n\n  useToolbarRadioButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"]}

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

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

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./ToolbarRadioButton"), exports);
-
 tslib_1.__exportStar(require("./ToolbarRadioButton.types"), exports);
+tslib_1.__exportStar(require("./useToolbarRadioButton"), exports);
+tslib_1.__exportStar(require("./useToolbarRadioButtonStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts"],"sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\nexport * from './useToolbarRadioButton';\nexport * from './useToolbarRadioButtonStyles';\n"]}

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarRadioButton_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 /**
  * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns
@@ -16,13 +13,10 @@ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
  * @param props - User provided props to the RadioButton component.
  * @param ref - User provided ref to be passed to the RadioButton component.
  */
-
-
 const useToolbarRadioButton_unstable = (props, ref) => {
   const handleRadio = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.handleRadio);
   const checked = ToolbarContext_1.useToolbarContext_unstable(ctx => {
     var _a;
-
     return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value));
   });
   const size = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.size);
@@ -34,7 +28,8 @@ const useToolbarRadioButton_unstable = (props, ref) => {
     checked,
     ...props
   }, ref);
-  const state = { ...toggleButtonState,
+  const state = {
+    ...toggleButtonState,
     name: props.name,
     value: props.value
   };
@@ -45,6 +40,5 @@ const useToolbarRadioButton_unstable = (props, ref) => {
   state.root.onClick = handleOnClick;
   return state;
 };
-
 exports.useToolbarRadioButton_unstable = useToolbarRadioButton_unstable;
 //# sourceMappingURL=useToolbarRadioButton.js.map

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,WAAtC,CAApB;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CACnB,CAAD,IAAyG;IACvG,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAJmB,CAAtB;EAOA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AAGA;;;;;;AAMO,MAAMA,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAAqD,KAC1B;EAC3B,MAAMC,WAAW,GAAGC,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACF,WAAW,CAAC;EACtE,MAAMG,OAAO,GAAGF,2CAA0B,CAACC,GAAG,IAAG;IAAA;IAAC,QAAC,EAAC,SAAG,CAACE,aAAa,CAACN,KAAK,CAACO,IAAI,CAAC,0CAAEC,QAAQ,CAACR,KAAK,CAACS,KAAK,CAAC;EAAA,EAAC;EACzG,MAAMC,IAAI,GAAGP,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACM,IAAI,CAAC;EAExD,MAAM;IAAEC,OAAO,EAAEC;EAAe,CAAE,GAAGZ,KAAK;EAC1C,MAAMa,iBAAiB,GAAGC,uCAAwB,CAAC;IAAEJ,IAAI;IAAEL,OAAO;IAAE,GAAGL;EAAK,CAAE,EAAEC,GAAG,CAAC;EACpF,MAAMc,KAAK,GAA4B;IACrC,GAAGF,iBAAiB;IACpBN,IAAI,EAAEP,KAAK,CAACO,IAAI;IAChBE,KAAK,EAAET,KAAK,CAACS;GACd;EAED,MAAMO,aAAa,GAAGC,kCAAgB,CACnCC,CAAoG,IAAI;IACvGhB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGgB,CAAC,EAAEH,KAAK,CAACR,IAAI,EAAEQ,KAAK,CAACN,KAAK,EAAEM,KAAK,CAACV,OAAO,CAAC;IACxDO,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGM,CAAC,CAAC;EACtB,CAAC,CACF;EAEDH,KAAK,CAACI,IAAI,CAACR,OAAO,GAAGK,aAAa;EAClC,OAAOD,KAAK;AACd,CAAC;AAzBYK,sCAA8B","names":["useToolbarRadioButton_unstable","props","ref","handleRadio","ToolbarContext_1","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","react_button_1","state","handleOnClick","react_utilities_1","e","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"]}

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js

@@ -4,30 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarRadioButtonStyles_unstable = void 0;
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const useBaseStyles = /*#__PURE__*/react_1.__styles({
-  "selected": {
-    "sj55zd": "f16muhyy"
+  selected: {
+    sj55zd: "f16muhyy"
   }
 }, {
-  "d": [".f16muhyy{color:var(--colorBrandForeground1);}"]
+  d: [".f16muhyy{color:var(--colorBrandForeground1);}"]
 });
 /**
  * Apply styling to the ToolbarRadioButton slots based on the state
  */
-
-
 const useToolbarRadioButtonStyles_unstable = state => {
   react_button_1.useToggleButtonStyles_unstable(state);
   const toggleButtonStyles = useBaseStyles();
   state.root.className = react_1.mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
 };
-
 exports.useToolbarRadioButtonStyles_unstable = useToolbarRadioButtonStyles_unstable;
 //# sourceMappingURL=useToolbarRadioButtonStyles.js.map

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA,MAAMA,aAAa,gBAAGC,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI9B;AAEF;;;AAGO,MAAMC,oCAAoC,GAAIC,KAA8B,IAAI;EACrFC,6CAA8B,CAACD,KAAK,CAAC;EACrC,MAAME,kBAAkB,GAAGL,aAAa,EAAE;EAE1CG,KAAK,CAACG,IAAI,CAACC,SAAS,GAAGN,oBAAY,CAACE,KAAK,CAACG,IAAI,CAACC,SAAS,EAAEJ,KAAK,CAACK,OAAO,IAAIH,kBAAkB,CAACI,QAAQ,CAAC;AACzG,CAAC;AALYC,4CAAoC","names":["useBaseStyles","react_1","useToolbarRadioButtonStyles_unstable","state","react_button_1","toggleButtonStyles","root","className","checked","selected","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarToggleButton = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const useToolbarToggleButton_1 = /*#__PURE__*/require("./useToolbarToggleButton");
-
 const useToolbarToggleButtonStyles_1 = /*#__PURE__*/require("./useToolbarToggleButtonStyles");
 /**
  * ToolbarToggleButton component
  */
-
-
 exports.ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarToggleButton_1.useToolbarToggleButton_unstable(props, ref);
   useToolbarToggleButtonStyles_1.useToolbarToggleButtonStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AAEA;;;AAGaA,2BAAmB,gBAAkDC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChH,MAAMC,KAAK,GAAGC,wDAA+B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEzDG,oEAAqC,CAACF,KAAK,CAAC;EAC5C,OAAOG,0CAA2B,CAACH,KAAK,CAAC;AAC3C,CAAC,CAAkD;AAEnDL,2BAAmB,CAACS,WAAW,GAAG,qBAAqB","names":["exports","React","forwardRef","props","ref","state","useToolbarToggleButton_1","useToolbarToggleButtonStyles_1","react_button_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"]}

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

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

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./ToolbarToggleButton"), exports);
-
 tslib_1.__exportStar(require("./ToolbarToggleButton.types"), exports);
+tslib_1.__exportStar(require("./useToolbarToggleButton"), exports);
+tslib_1.__exportStar(require("./useToolbarToggleButtonStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\nexport * from './useToolbarToggleButton';\nexport * from './useToolbarToggleButtonStyles';\n"]}

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarToggleButton_unstable = void 0;
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 /**
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
@@ -14,13 +12,10 @@ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
-
-
 const useToolbarToggleButton_unstable = (props, ref) => {
   const handleToggleButton = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.handleToggleButton);
   const checked = ToolbarContext_1.useToolbarContext_unstable(ctx => {
     var _a;
-
     return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value));
   });
   const size = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.size);
@@ -32,25 +27,22 @@ const useToolbarToggleButton_unstable = (props, ref) => {
     checked,
     ...props
   }, ref);
-  const state = { ...toggleButtonState,
+  const state = {
+    ...toggleButtonState,
     name: props.name,
     value: props.value
   };
-
   const handleOnClick = e => {
     if (state.disabled) {
       e.preventDefault();
       e.stopPropagation();
       return;
     }
-
     handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
     onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
   };
-
   state.root.onClick = handleOnClick;
   return state;
 };
-
 exports.useToolbarToggleButton_unstable = useToolbarToggleButton_unstable;
 //# sourceMappingURL=useToolbarToggleButton.js.map

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,kBAAtC,CAA3B;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.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 useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AACA;AAGA;;;;;;AAMO,MAAMA,+BAA+B,GAAG,CAC7CC,KAA+B,EAC/BC,GAAqD,KACzB;EAC5B,MAAMC,kBAAkB,GAAGC,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACF,kBAAkB,CAAC;EACpF,MAAMG,OAAO,GAAGF,2CAA0B,CAACC,GAAG,IAAG;IAAA;IAAC,QAAC,EAAC,SAAG,CAACE,aAAa,CAACN,KAAK,CAACO,IAAI,CAAC,0CAAEC,QAAQ,CAACR,KAAK,CAACS,KAAK,CAAC;EAAA,EAAC;EACzG,MAAMC,IAAI,GAAGP,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACM,IAAI,CAAC;EAExD,MAAM;IAAEC,OAAO,EAAEC;EAAe,CAAE,GAAGZ,KAAK;EAC1C,MAAMa,iBAAiB,GAAGC,uCAAwB,CAAC;IAAEJ,IAAI;IAAEL,OAAO;IAAE,GAAGL;EAAK,CAAE,EAAEC,GAAG,CAAC;EACpF,MAAMc,KAAK,GAA6B;IACtC,GAAGF,iBAAiB;IACpBN,IAAI,EAAEP,KAAK,CAACO,IAAI;IAChBE,KAAK,EAAET,KAAK,CAACS;GACd;EAED,MAAMO,aAAa,GACjBC,CAAoG,IAClG;IACF,IAAIF,KAAK,CAACG,QAAQ,EAAE;MAClBD,CAAC,CAACE,cAAc,EAAE;MAClBF,CAAC,CAACG,eAAe,EAAE;MACnB;;IAGFlB,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAGe,CAAC,EAAEF,KAAK,CAACR,IAAI,EAAEQ,KAAK,CAACN,KAAK,EAAEM,KAAK,CAACV,OAAO,CAAC;IAC/DO,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGK,CAAC,CAAC;EACtB,CAAC;EAEDF,KAAK,CAACM,IAAI,CAACV,OAAO,GAAGK,aAAa;EAClC,OAAOD,KAAK;AACd,CAAC;AA/BYO,uCAA+B","names":["useToolbarToggleButton_unstable","props","ref","handleToggleButton","ToolbarContext_1","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","react_button_1","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.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 useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"]}