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

package/lib-commonjs/ToolbarDivider.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/ToolbarDivider/index"), exports);
 //# sourceMappingURL=ToolbarDivider.js.map

package/lib-commonjs/ToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarDivider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/ToolbarDivider.ts"],"sourcesContent":["export * from './components/ToolbarDivider/index';\n"]}

package/lib-commonjs/ToolbarGroup.js

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

package/lib-commonjs/ToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarGroup/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/ToolbarGroup.ts"],"sourcesContent":["export * from './components/ToolbarGroup/index';\n"]}

package/lib-commonjs/ToolbarRadioButton.js

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

package/lib-commonjs/ToolbarRadioButton.js.map

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

package/lib-commonjs/ToolbarToggleButton.js

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

package/lib-commonjs/ToolbarToggleButton.js.map

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

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

@@ -4,21 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Toolbar = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useToolbar_1 = /*#__PURE__*/require("./useToolbar");
-
 const renderToolbar_1 = /*#__PURE__*/require("./renderToolbar");
-
 const useToolbarStyles_1 = /*#__PURE__*/require("./useToolbarStyles");
-
 const useToolbarContextValues_1 = /*#__PURE__*/require("./useToolbarContextValues");
 /**
  * Toolbar component
  */
-
-
 exports.Toolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbar_1.useToolbar_unstable(props, ref);
   const contextValues = useToolbarContextValues_1.useToolbarContextValues_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,gCAAA,CAAiC,KAAjC,CAAtB;EACA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;AAEA;;;AAGaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAMG,aAAa,GAAGC,0DAAgC,CAACH,KAAK,CAAC;EAC7DI,4CAAyB,CAACJ,KAAK,CAAC;EAChC,OAAOK,sCAAsB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFP,eAAO,CAACW,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","useToolbar_1","contextValues","useToolbarContextValues_1","useToolbarStyles_1","renderToolbar_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"]}

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

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

package/lib-commonjs/components/Toolbar/ToolbarContext.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarContext_unstable = exports.ToolbarContext = void 0;
-
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
-
 exports.ToolbarContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
 const toolbarContextDefaultValue = {
   size: 'medium',
@@ -15,8 +13,6 @@ const toolbarContextDefaultValue = {
   vertical: false,
   checkedValues: {}
 };
-
 const useToolbarContext_unstable = selector => react_context_selector_1.useContextSelector(exports.ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));
-
 exports.useToolbarContext_unstable = useToolbarContext_unstable;
 //# sourceMappingURL=ToolbarContext.js.map

package/lib-commonjs/components/Toolbar/ToolbarContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;;AAQO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAIaA,sBAAc,gBAAGC,sCAAa,CAAkCC,SAAS,CAAiC;AAEvH,MAAMC,0BAA0B,GAAwB;EACtDC,IAAI,EAAE,QAAoB;EAC1BC,kBAAkB,EAAE,MAAM,IAAI;EAC9BC,WAAW,EAAE,MAAM,IAAI;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE;CAChB;AAEM,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FT,2CAAkB,CAACD,sBAAc,EAAE,CAACW,GAAG,GAAGR,0BAA0B,KAAKO,QAAQ,CAACC,GAAG,CAAC,CAAC;AAD5EX,kCAA0B","names":["exports","react_context_selector_1","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Toolbar"), exports);
-
 tslib_1.__exportStar(require("./Toolbar.types"), exports);
-
 tslib_1.__exportStar(require("./renderToolbar"), exports);
-
 tslib_1.__exportStar(require("./useToolbar"), exports);
-
 tslib_1.__exportStar(require("./useToolbarStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/index.ts"],"sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"]}

package/lib-commonjs/components/Toolbar/renderToolbar.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderToolbar_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const ToolbarContext_1 = /*#__PURE__*/require("./ToolbarContext");
 /**
  * Render the final JSX of Toolbar
  */
-
-
 const renderToolbar_unstable = (state, contextValues) => {
   const {
     slots,
@@ -22,9 +17,9 @@ const renderToolbar_unstable = (state, contextValues) => {
   } = react_utilities_1.getSlots(state);
   return React.createElement(ToolbarContext_1.ToolbarContext.Provider, {
     value: contextValues.toolbar
-  }, React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.root, {
+    ...slotProps.root
   }, slotProps.root.children));
 };
-
 exports.renderToolbar_unstable = renderToolbar_unstable;
 //# sourceMappingURL=renderToolbar.js.map

package/lib-commonjs/components/Toolbar/renderToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeJ,KAAK,CAAC;EAE1D,OACEK,oBAACC,+BAAc,CAACC,QAAQ;IAACC,KAAK,EAAEP,aAAa,CAACQ;EAAO,GACnDJ,oBAACH,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,GAAGP,SAAS,CAACO,IAAI,CAACC,QAAQ,CAAc,CAC9C;AAE9B,CAAC;AARYC,8BAAsB","names":["renderToolbar_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","ToolbarContext_1","Provider","value","toolbar","root","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"]}

package/lib-commonjs/components/Toolbar/useToolbar.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbar_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
  * Create the state required to render Toolbar.
@@ -19,8 +16,6 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
  * @param props - props from this instance of Toolbar
  * @param ref - reference to root HTMLElement of Toolbar
  */
-
-
 const useToolbar_unstable = (props, ref) => {
   const {
     size = 'medium',
@@ -56,13 +51,11 @@ const useToolbar_unstable = (props, ref) => {
     if (name && value) {
       const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
       const newCheckedItems = [...checkedItems];
-
       if (checked) {
         newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
       } else {
         newCheckedItems.push(value);
       }
-
       onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
         name,
         checkedItems: newCheckedItems
@@ -77,19 +70,18 @@ const useToolbar_unstable = (props, ref) => {
       });
     }
   });
-  return { ...initialState,
+  return {
+    ...initialState,
     handleToggleButton,
     handleRadio,
     checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
   };
 };
-
 exports.useToolbar_unstable = useToolbar_unstable;
 /**
  * Adds appropriate state values and handlers for selectable items
  * i.e checkboxes and radios
  */
-
 const useToolbarSelectableState = state => {
   const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
     state: state.checkedValues,
@@ -109,9 +101,9 @@ const useToolbarSelectableState = state => {
         checkedItems
       });
     }
-
     setCheckedValues(s => {
-      return s ? { ...s,
+      return s ? {
+        ...s,
         [name]: checkedItems
       } : {
         [name]: checkedItems

package/lib-commonjs/components/Toolbar/useToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,QAAQ,GAAG;EAA9B,IAAwC,KAA9C;EAEA,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAE9C,QAF8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAA7B;EAVwC,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,oBAAhB,IAAwC,yBAAyB,CAAC;IACtE,aAAa,EAAE,KAAK,CAAC,aADiD;IAEtE,oBAAoB,EAAE,KAAK,CAAC,oBAF0C;IAGtE,oBAAoB,EAAE,KAAK,CAAC;EAH0C,CAAD,CAAvE;EAMA,MAAM,kBAAkB,GAAoB,iBAAA,CAAA,gBAAA,CAC1C,CAAC,CAAD,EAA4C,IAA5C,EAA0D,KAA1D,EAAyE,OAAzE,KAA8F;IAC5F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MACD,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;IACD;EACF,CAZyC,CAA5C;EAeA,MAAM,WAAW,GAAoB,iBAAA,CAAA,gBAAA,CACnC,CAAC,CAAD,EAA4C,IAA5C,EAA0D,KAA1D,EAAyE,OAAzE,KAA8F;IAC5F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QACxB,IADwB;QAExB,YAAY,EAAE,CAAC,KAAD;MAFU,CAAN,CAApB;IAID;EACF,CARkC,CAArC;EAWA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,WAHK;IAIL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAJ3B,CAAP;AAMD,CAhEM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB;AAkEb;;;AAGG;;AACH,MAAM,yBAAyB,GAC7B,KADgC,IAE9B;EACF,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,KAAK,CAAC,aADgD;IAE7D,YAAY,EAAE,KAAK,CAAC,oBAFyC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAKA,MAAM;IAAE,oBAAoB,EAAE;EAAxB,IAAyD,KAA/D;EACA,MAAM,oBAAoB,GAAyC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI;IAAE,IAAF;IAAQ;EAAR,CAAJ,KAA8B;IAChH,IAAI,4BAAJ,EAAkC;MAChC,4BAA4B,CAAC,CAAD,EAAI;QAAE,IAAF;QAAQ;MAAR,CAAJ,CAA5B;IACD;;IAED,gBAAgB,CAAC,CAAC,IAAG;MACnB,OAAO,CAAC,GAAG,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAH,GAAoC;QAAE,CAAC,IAAD,GAAQ;MAAV,CAA5C;IACD,CAFe,CAAhB;EAGD,CARkE,CAAnE;EAUA,OAAO,CAAC,aAAD,EAAgB,oBAAhB,CAAP;AACD,CApBD","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","react_tabster_1","circular","axis","initialState","components","root","react_utilities_2","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","react_utilities_1","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","exports","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"]}

package/lib-commonjs/components/Toolbar/useToolbarContextValues.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarContextValues_unstable = void 0;
-
 function useToolbarContextValues_unstable(state) {
   const {
     size,
@@ -12,8 +11,8 @@ function useToolbarContextValues_unstable(state) {
     vertical,
     checkedValues,
     handleRadio
-  } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-
+  } = state;
+  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
   const toolbar = {
     size,
     vertical,
@@ -25,6 +24,5 @@ function useToolbarContextValues_unstable(state) {
     toolbar
   };
 }
-
 exports.useToolbarContextValues_unstable = useToolbarContextValues_unstable;
 //# sourceMappingURL=useToolbarContextValues.js.map

package/lib-commonjs/components/Toolbar/useToolbarContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD;;AAZD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAEA,SAAgBA,gCAAgC,CAACC,KAAmB;EAClE,MAAM;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC,QAAQ;IAAEC,aAAa;IAAEC;EAAW,CAAE,GAAGL,KAAK;EAChF;EACA,MAAMM,OAAO,GAAwB;IACnCL,IAAI;IACJE,QAAQ;IACRD,kBAAkB;IAClBG,WAAW;IACXD;GACD;EAED,OAAO;IAAEE;EAAO,CAAE;AACpB;AAZAC","names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"]}

package/lib-commonjs/components/Toolbar/useToolbarStyles.js

@@ -4,48 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarStyles_unstable = exports.toolbarClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 exports.toolbarClassNames = {
   root: 'fui-Toolbar'
 };
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "z8tnut": "f10ra9hq",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f1y2xyjm",
-    "uwmqm3": ["f177v4lu", "f19lj068"],
-    "i8kkvl": "f4px1ci",
-    "Belr9w4": "fn67r4l"
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    z8tnut: "f10ra9hq",
+    z189sj: ["f19lj068", "f177v4lu"],
+    Byoj8tv: "f1y2xyjm",
+    uwmqm3: ["f177v4lu", "f19lj068"],
+    i8kkvl: "f4px1ci",
+    Belr9w4: "fn67r4l"
   },
-  "vertical": {
-    "Beiy3e4": "f1vx9l62",
-    "a9b677": "f1acs6jw"
+  vertical: {
+    Beiy3e4: "f1vx9l62",
+    a9b677: "f1acs6jw"
   },
-  "small": {
-    "Bqenvij": "f1d2rq10"
+  small: {
+    Bqenvij: "f1d2rq10"
   },
-  "medium": {
-    "Bqenvij": "fbhnoac"
+  medium: {
+    Bqenvij: "fbhnoac"
   },
-  "large": {
-    "Bqenvij": "ff2sm71"
+  large: {
+    Bqenvij: "ff2sm71"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f10ra9hq{padding-top:4px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1acs6jw{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}", ".f1d2rq10{height:32px;}", ".fbhnoac{height:40px;}", ".ff2sm71{height:48px;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f10ra9hq{padding-top:4px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1acs6jw{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}", ".f1d2rq10{height:32px;}", ".fbhnoac{height:40px;}", ".ff2sm71{height:48px;}"]
 });
 /**
  * Apply styling to the Toolbar slots based on the state
  */
-
-
 const useToolbarStyles_unstable = state => {
   const styles = useStyles();
   const {
@@ -55,6 +50,5 @@ const useToolbarStyles_unstable = state => {
   state.root.className = react_1.mergeClasses(exports.toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
   return state;
 };
-
 exports.useToolbarStyles_unstable = useToolbarStyles_unstable;
 //# sourceMappingURL=useToolbarStyles.js.map

package/lib-commonjs/components/Toolbar/useToolbarStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAAqB,KAA3B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KAJnB,EAKrB,IAAI,KAAK,QAAT,IAAqB,CAAC,QAAtB,IAAkC,MAAM,CAAC,MALpB,EAMrB,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KANnB,EAOrB,KAAK,CAAC,IAAN,CAAW,SAPU,CAAvB;EAUA,OAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: {\n    height: '32px',\n  },\n  medium: {\n    height: '40px',\n  },\n  large: {\n    height: '48px',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAGaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAoB1B;AAEF;;;AAGO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1B,MAAM;IAAEK,QAAQ;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAChCA,KAAK,CAACJ,IAAI,CAACQ,SAAS,GAAGN,oBAAY,CACjCH,yBAAiB,CAACC,IAAI,EACtBK,MAAM,CAACL,IAAI,EACXM,QAAQ,IAAID,MAAM,CAACC,QAAQ,EAC3BC,IAAI,KAAK,OAAO,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACI,KAAK,EAC7CF,IAAI,KAAK,QAAQ,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACK,MAAM,EAC/CH,IAAI,KAAK,OAAO,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACM,KAAK,EAC7CP,KAAK,CAACJ,IAAI,CAACQ,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC;AAdYL,iCAAyB","names":["exports","root","useStyles","react_1","useToolbarStyles_unstable","state","styles","vertical","size","className","small","medium","large"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: {\n    height: '32px',\n  },\n  medium: {\n    height: '40px',\n  },\n  large: {\n    height: '48px',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

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

@@ -4,24 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarButton = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const useToolbarButtonStyles_1 = /*#__PURE__*/require("./useToolbarButtonStyles");
-
 const useToolbarButton_1 = /*#__PURE__*/require("./useToolbarButton");
 /**
  * ToolbarButton component is a Button to be used inside Toolbar
  * which will respect toolbar props such as `size`
  */
-
-
 exports.ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarButton_1.useToolbarButton_unstable(props, ref);
   useToolbarButtonStyles_1.useToolbarButtonStyles_unstable(state);
-  return react_button_1.renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
+  return react_button_1.renderButton_unstable(state);
+  // Casting is required due to lack of distributive union to support unions on @types/react
 });
+
 exports.ToolbarButton.displayName = 'ToolbarButton';
 //# sourceMappingURL=ToolbarButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.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,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;EACA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAJoG,CAKpG;AACD,CANqE,CAAzD;AAQb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarButton_unstable(props, ref);\n  useToolbarButtonStyles_unstable(state);\n  \n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AAEA;;;;AAIaA,qBAAa,gBAA4CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGC,4CAAyB,CAACH,KAAK,EAAEC,GAAG,CAAC;EACnDG,wDAA+B,CAACF,KAAK,CAAC;EAEtC,OAAOG,oCAAqB,CAACH,KAAK,CAAC;EACnC;AACF,CAAC,CAA4C;;AAE7CL,qBAAa,CAACS,WAAW,GAAG,eAAe","names":["exports","React","forwardRef","props","ref","state","useToolbarButton_1","useToolbarButtonStyles_1","react_button_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarButton_unstable(props, ref);\n  useToolbarButtonStyles_unstable(state);\n  \n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"]}

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

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

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

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

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

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

package/lib-commonjs/components/ToolbarButton/useToolbarButton.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarButton_unstable = void 0;
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
 /**
  * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns
@@ -12,8 +11,6 @@ const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
  * @param props - User provided props to the Button component.
  * @param ref - User provided ref to be passed to the Button component.
  */
-
-
 const useToolbarButton_unstable = (props, ref) => {
   const {
     vertical = false,
@@ -28,6 +25,5 @@ const useToolbarButton_unstable = (props, ref) => {
     ...state
   };
 };
-
 exports.useToolbarButton_unstable = useToolbarButton_unstable;
 //# sourceMappingURL=useToolbarButton.js.map

package/lib-commonjs/components/ToolbarButton/useToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,GAAG;EAAvB,IAAuC,KAA7C;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,UAAU,EAAE,QAAd;IAAwB,GAAG;EAA3B,CAAnB,EAA6D,GAA7D,CAAd;EACA,OAAO;IACL,QADK;IAEL,GAAG;EAFE,CAAP;AAID,CAVM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable({ appearance: 'subtle', ...buttonProps }, ref);\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;AAMO,MAAMA,yBAAyB,GAAG,CACvCC,KAAyB,EACzBC,GAAqD,KAC/B;EACtB,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAE,GAAGC;EAAW,CAAE,GAAGH,KAAK;EAClD,MAAMI,KAAK,GAAGC,iCAAkB,CAAC;IAAEC,UAAU,EAAE,QAAQ;IAAE,GAAGH;EAAW,CAAE,EAAEF,GAAG,CAAC;EAC/E,OAAO;IACLC,QAAQ;IACR,GAAGE;GACJ;AACH,CAAC;AAVYG,iCAAyB","names":["useToolbarButton_unstable","props","ref","vertical","buttonProps","state","react_button_1","appearance","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable({ appearance: 'subtle', ...buttonProps }, ref);\n  return {\n    vertical,\n    ...state,\n  };\n};\n"]}

package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.js

@@ -4,35 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToolbarButtonStyles_unstable = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const useBaseStyles = /*#__PURE__*/react_1.__styles({
-  "vertical": {
-    "Beiy3e4": "f1vx9l62"
+  vertical: {
+    Beiy3e4: "f1vx9l62"
   },
-  "verticalIcon": {
-    "Be2twd7": "f1rt2boy"
+  verticalIcon: {
+    Be2twd7: "f1rt2boy"
   }
 }, {
-  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1rt2boy{font-size:24px;}"]
+  d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1rt2boy{font-size:24px;}"]
 });
 /**
  * Apply styling to the ToolbarButton slots based on the state
  */
-
-
 const useToolbarButtonStyles_unstable = state => {
   react_button_1.useButtonStyles_unstable(state);
   const buttonStyles = useBaseStyles();
   state.root.className = react_1.mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);
-
   if (state.icon) {
     state.icon.className = react_1.mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);
   }
 };
-
 exports.useToolbarButtonStyles_unstable = useToolbarButtonStyles_unstable;
 //# sourceMappingURL=useToolbarButtonStyles.js.map

package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AASA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAA8B;EAC3E,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,MAAM,YAAY,GAAG,aAAa,EAAlC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,QAAN,IAAkB,YAAY,CAAC,QAAlE,CAAvB;;EACA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,QAAN,IAAkB,YAAY,CAAC,YAAlE,CAAvB;EACD;AACF,CARM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  useButtonStyles_unstable(state);\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA,MAAMA,aAAa,gBAAGC,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAO9B;AAEF;;;AAGO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAI;EAC3EC,uCAAwB,CAACD,KAAK,CAAC;EAC/B,MAAME,YAAY,GAAGL,aAAa,EAAE;EAEpCG,KAAK,CAACG,IAAI,CAACC,SAAS,GAAGN,oBAAY,CAACE,KAAK,CAACG,IAAI,CAACC,SAAS,EAAEJ,KAAK,CAACK,QAAQ,IAAIH,YAAY,CAACG,QAAQ,CAAC;EAClG,IAAIL,KAAK,CAACM,IAAI,EAAE;IACdN,KAAK,CAACM,IAAI,CAACF,SAAS,GAAGN,oBAAY,CAACE,KAAK,CAACM,IAAI,CAACF,SAAS,EAAEJ,KAAK,CAACK,QAAQ,IAAIH,YAAY,CAACK,YAAY,CAAC;;AAE1G,CAAC;AARYC,uCAA+B","names":["useBaseStyles","react_1","useToolbarButtonStyles_unstable","state","react_button_1","buttonStyles","root","className","vertical","icon","verticalIcon","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  useButtonStyles_unstable(state);\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);\n  }\n};\n"]}