@fluentui/react-toolbar 9.1.11 → 9.1.12

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/ToolbarToggleButton/index.ts"],"sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\nexport * from './useToolbarToggleButton';\nexport * from './useToolbarToggleButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/ToolbarToggleButton/index.ts"],"sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\nexport * from './useToolbarToggleButton';\nexport * from './useToolbarToggleButtonStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js

@@ -13,12 +13,10 @@ export const useToolbarToggleButton_unstable = (props, ref) => {
     var _ctx_checkedValues_props_name;
     return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
   });
-  const size = useToolbarContext_unstable(ctx => ctx.size);
   const {
     onClick: onClickOriginal
   } = props;
   const toggleButtonState = useToggleButton_unstable({
-    size,
     checked,
     ...props
   }, ref);

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

@@ -1 +1 @@
-{"version":3,"names":["React","useToggleButton_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","handleToggleButton","ctx","checked","_ctx_checkedValues_props_name","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"sources":["../../../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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,0BAA0B,QAAQ;AAG3C;;;;;;AAMA,OAAO,MAAMC,+BAAA,GAAkCA,CAC7CC,KAAA,EACAC,GAAA,KAC6B;EAC7B,MAAMC,kBAAA,GAAqBJ,0BAAA,CAA2BK,GAAA,IAAOA,GAAA,CAAID,kBAAkB;EACnF,MAAME,OAAA,GAAUN,0BAAA,CAA2BK,GAAA;QAASE,6BAAA;IAAF,QAAC,EAAC,CAAAA,6BAAA,GAAAF,GAAA,CAAIG,aAAa,CAACN,KAAA,CAAMO,IAAI,CAAC,cAA7BF,6BAAA,uBAAAA,6BAAA,CAA+BG,QAAA,CAASR,KAAA,CAAMS,KAAK;;EACvG,MAAMC,IAAA,GAAOZ,0BAAA,CAA2BK,GAAA,IAAOA,GAAA,CAAIO,IAAI;EAEvD,MAAM;IAAEC,OAAA,EAASC;EAAe,CAAE,GAAGZ,KAAA;EACrC,MAAMa,iBAAA,GAAoBhB,wBAAA,CAAyB;IAAEa,IAAA;IAAMN,OAAA;IAAS,GAAGJ;EAAM,GAAGC,GAAA;EAChF,MAAMa,KAAA,GAAkC;IACtC,GAAGD,iBAAiB;IACpBN,IAAA,EAAMP,KAAA,CAAMO,IAAI;IAChBE,KAAA,EAAOT,KAAA,CAAMS;EACf;EAEA,MAAMM,aAAA,GACJC,CAAA,IACG;IACH,IAAIF,KAAA,CAAMG,QAAQ,EAAE;MAClBD,CAAA,CAAEE,cAAc;MAChBF,CAAA,CAAEG,eAAe;MACjB;IACF;IAEAjB,kBAAA,aAAAA,kBAAA,uBAAAA,kBAAA,CAAqBc,CAAA,EAAGF,KAAA,CAAMP,IAAI,EAAEO,KAAA,CAAML,KAAK,EAAEK,KAAA,CAAMV,OAAO;IAC9DQ,eAAA,aAAAA,eAAA,uBAAAA,eAAA,CAAkBI,CAAA;EACpB;EAEAF,KAAA,CAAMM,IAAI,CAACT,OAAO,GAAGI,aAAA;EACrB,OAAOD,KAAA;AACT"}
+{"version":3,"names":["React","useToggleButton_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","handleToggleButton","ctx","checked","_ctx_checkedValues_props_name","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"sources":["../../../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\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,0BAA0B,QAAQ;AAG3C;;;;;;AAMA,OAAO,MAAMC,+BAAA,GAAkCA,CAC7CC,KAAA,EACAC,GAAA,KAC6B;EAC7B,MAAMC,kBAAA,GAAqBJ,0BAAA,CAA2BK,GAAA,IAAOA,GAAA,CAAID,kBAAkB;EACnF,MAAME,OAAA,GAAUN,0BAAA,CAA2BK,GAAA;QAASE,6BAAA;IAAF,QAAC,EAAC,CAAAA,6BAAA,GAAAF,GAAA,CAAIG,aAAa,CAACN,KAAA,CAAMO,IAAI,CAAC,cAA7BF,6BAAA,uBAAAA,6BAAA,CAA+BG,QAAA,CAASR,KAAA,CAAMS,KAAK;;EAEvG,MAAM;IAAEC,OAAA,EAASC;EAAe,CAAE,GAAGX,KAAA;EACrC,MAAMY,iBAAA,GAAoBf,wBAAA,CAAyB;IAAEO,OAAA;IAAS,GAAGJ;EAAM,GAAGC,GAAA;EAC1E,MAAMY,KAAA,GAAkC;IACtC,GAAGD,iBAAiB;IACpBL,IAAA,EAAMP,KAAA,CAAMO,IAAI;IAChBE,KAAA,EAAOT,KAAA,CAAMS;EACf;EAEA,MAAMK,aAAA,GACJC,CAAA,IACG;IACH,IAAIF,KAAA,CAAMG,QAAQ,EAAE;MAClBD,CAAA,CAAEE,cAAc;MAChBF,CAAA,CAAEG,eAAe;MACjB;IACF;IAEAhB,kBAAA,aAAAA,kBAAA,uBAAAA,kBAAA,CAAqBa,CAAA,EAAGF,KAAA,CAAMN,IAAI,EAAEM,KAAA,CAAMJ,KAAK,EAAEI,KAAA,CAAMT,OAAO;IAC9DO,eAAA,aAAAA,eAAA,uBAAAA,eAAA,CAAkBI,CAAA;EACpB;EAEAF,KAAA,CAAMM,IAAI,CAACT,OAAO,GAAGI,aAAA;EACrB,OAAOD,KAAA;AACT"}

package/lib/components/ToolbarToggleButton/{useToolbarToggleButtonStyles.js → useToolbarToggleButtonStyles.styles.js}

@@ -16,4 +16,4 @@ export const useToolbarToggleButtonStyles_unstable = state => {
   const toggleButtonStyles = useBaseStyles();
   state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
 };
-//# sourceMappingURL=useToolbarToggleButtonStyles.js.map
+//# sourceMappingURL=useToolbarToggleButtonStyles.styles.js.map

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","sj55zd","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked"],"sources":["../../../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AACvB,SAAAC,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,8BAA8B,QAAQ;AAG/C,MAAMC,aAAA,gBAAgBH,QAAA;EAAAI,QAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAItB;AAEA;;;AAGA,OAAO,MAAMC,qCAAA,GAAyCC,KAAA,IAAoC;EACxFN,8BAAA,CAA+BM,KAAA;EAC/B,MAAMC,kBAAA,GAAqBN,aAAA;EAE3BK,KAAA,CAAME,IAAI,CAACC,SAAS,GAAGV,YAAA,CAAaO,KAAA,CAAME,IAAI,CAACC,SAAS,EAAEH,KAAA,CAAMI,OAAO,IAAIH,kBAAA,CAAmBL,QAAQ;AACxG"}

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

@@ -10,15 +10,14 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useToolbar = require("./useToolbar");
 const _renderToolbar = require("./renderToolbar");
-const _useToolbarStyles = require("./useToolbarStyles");
+const _useToolbarStylesStyles = require("./useToolbarStyles.styles");
 const _useToolbarContextValues = require("./useToolbarContextValues");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const Toolbar = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useToolbar.useToolbar_unstable)(props, ref);
     const contextValues = (0, _useToolbarContextValues.useToolbarContextValues_unstable)(state);
-    (0, _useToolbarStyles.useToolbarStyles_unstable)(state);
-    const { useToolbarStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useToolbarStylesStyles.useToolbarStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useToolbarStyles_unstable')(state);
     return (0, _renderToolbar.renderToolbar_unstable)(state, contextValues);
 });
 Toolbar.displayName = 'Toolbar'; //# sourceMappingURL=Toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Toolbar/Toolbar.js"],"sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Toolbar component\n */\nexport const Toolbar = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  const {\n    useToolbarStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderToolbar_unstable(state, contextValues);\n});\nToolbar.displayName = 'Toolbar';\n//# sourceMappingURL=Toolbar.js.map"],"names":["Toolbar","React","forwardRef","props","ref","state","useToolbar_unstable","contextValues","useToolbarContextValues_unstable","useToolbarStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderToolbar_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;4BACa;+BACG;kCACG;yCACO;qCACJ;AAItC,MAAMA,UAAU,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnE,MAAMC,QAAQC,IAAAA,+BAAmB,EAACH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,yDAAgC,EAACH;IACvDI,IAAAA,2CAAyB,EAACJ;IAC1B,MAAM,EACJI,2BAA2BC,gBAAe,EAC3C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBL;IAChB,OAAOO,IAAAA,qCAAsB,EAACP,OAAOE;AACvC;AACAP,QAAQa,WAAW,GAAG,WACtB,mCAAmC"}
+{"version":3,"sources":["../../../lib/components/Toolbar/Toolbar.js"],"sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles.styles';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Toolbar component\n */\nexport const Toolbar = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);\n  return renderToolbar_unstable(state, contextValues);\n});\nToolbar.displayName = 'Toolbar';\n//# sourceMappingURL=Toolbar.js.map"],"names":["Toolbar","React","forwardRef","props","ref","state","useToolbar_unstable","contextValues","useToolbarContextValues_unstable","useToolbarStyles_unstable","useCustomStyleHook_unstable","renderToolbar_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;4BACa;+BACG;wCACG;yCACO;qCACL;AAIrC,MAAMA,UAAU,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnE,MAAMC,QAAQC,IAAAA,+BAAmB,EAACH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,yDAAgC,EAACH;IACvDI,IAAAA,iDAAyB,EAACJ;IAC1BK,IAAAA,gDAA2B,EAAC,6BAA6BL;IACzD,OAAOM,IAAAA,qCAAsB,EAACN,OAAOE;AACvC;AACAP,QAAQY,WAAW,GAAG,WACtB,mCAAmC"}

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

@@ -7,7 +7,7 @@ _exportStar(require("./Toolbar"), exports);
 _exportStar(require("./Toolbar.types"), exports);
 _exportStar(require("./renderToolbar"), exports);
 _exportStar(require("./useToolbar"), exports);
-_exportStar(require("./useToolbarStyles"), exports);
+_exportStar(require("./useToolbarStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Toolbar/index.js"],"sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/Toolbar/index.js"],"sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/Toolbar/{useToolbarStyles.js → useToolbarStyles.styles.js}

@@ -70,6 +70,6 @@ const useToolbarStyles_unstable = (state)=>{
     const { vertical , size  } = state;
     state.root.className = (0, _react.mergeClasses)(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;
-}; //# sourceMappingURL=useToolbarStyles.js.map
+}; //# sourceMappingURL=useToolbarStyles.styles.js.map
 
-//# sourceMappingURL=useToolbarStyles.js.map
+//# sourceMappingURL=useToolbarStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/Toolbar/useToolbarStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const toolbarClassNames = {\n  root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    z8tnut: \"f10ra9hq\",\n    z189sj: [\"f19lj068\", \"f177v4lu\"],\n    Byoj8tv: \"f1y2xyjm\",\n    uwmqm3: [\"f177v4lu\", \"f19lj068\"],\n    i8kkvl: \"f4px1ci\",\n    Belr9w4: \"fn67r4l\"\n  },\n  vertical: {\n    Beiy3e4: \"f1vx9l62\",\n    a9b677: \"f1acs6jw\"\n  },\n  small: {\n    Bqenvij: \"f1d2rq10\"\n  },\n  medium: {\n    Bqenvij: \"fbhnoac\"\n  },\n  large: {\n    Bqenvij: \"ff2sm71\"\n  }\n}, {\n  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;}\"]\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = state => {\n  const styles = useStyles();\n  const {\n    vertical,\n    size\n  } = state;\n  state.root.className = mergeClasses(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);\n  return state;\n};\n//# sourceMappingURL=useToolbarStyles.styles.js.map"],"names":["toolbarClassNames","useToolbarStyles_unstable","root","useStyles","__styles","mc9l5x","Bt984gj","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","vertical","Beiy3e4","a9b677","small","Bqenvij","medium","large","d","state","styles","size","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,iBAAiB,MAAjBA;IAoCAC,yBAAyB,MAAzBA;;uBArCsC;AAC5C,MAAMD,oBAAoB;IAC/BE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;AACF,GAAG;IACDG,GAAG;QAAC;QAAwF;QAA2G;QAA+B;QAAiC;QAAgC;QAAkC;QAAoD;QAA0B;QAA6F;QAAkF;QAA2B;QAA0B;KAAyB;AACtpB;AAIO,MAAMnB,4BAA4BoB,CAAAA,QAAS;IAChD,MAAMC,SAASnB;IACf,MAAM,EACJU,SAAQ,EACRU,KAAI,EACL,GAAGF;IACJA,MAAMnB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,kBAAkBE,IAAI,EAAEoB,OAAOpB,IAAI,EAAEW,YAAYS,OAAOT,QAAQ,EAAEU,SAAS,WAAW,CAACV,YAAYS,OAAON,KAAK,EAAEO,SAAS,YAAY,CAACV,YAAYS,OAAOJ,MAAM,EAAEK,SAAS,WAAW,CAACV,YAAYS,OAAOH,KAAK,EAAEE,MAAMnB,IAAI,CAACsB,SAAS;IACzQ,OAAOH;AACT,GACA,mDAAmD"}

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

@@ -9,14 +9,13 @@ Object.defineProperty(exports, "ToolbarButton", {
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactButton = require("@fluentui/react-button");
-const _useToolbarButtonStyles = require("./useToolbarButtonStyles");
+const _useToolbarButtonStylesStyles = require("./useToolbarButtonStyles.styles");
 const _useToolbarButton = require("./useToolbarButton");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const ToolbarButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useToolbarButton.useToolbarButton_unstable)(props, ref);
-    (0, _useToolbarButtonStyles.useToolbarButtonStyles_unstable)(state);
-    const { useToolbarButtonStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useToolbarButtonStylesStyles.useToolbarButtonStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useToolbarButtonStyles_unstable')(state);
     return (0, _reactButton.renderButton_unstable)(state);
 // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarButton/ToolbarButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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 = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarButton_unstable(props, ref);\n  useToolbarButtonStyles_unstable(state);\n  const {\n    useToolbarButtonStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n});\n\nToolbarButton.displayName = 'ToolbarButton';\n//# sourceMappingURL=ToolbarButton.js.map"],"names":["ToolbarButton","React","forwardRef","props","ref","state","useToolbarButton_unstable","useToolbarButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderButton_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;6BACe;wCACU;kCACN;qCACG;AAKtC,MAAMA,gBAAgB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,uDAA+B,EAACF;IAChC,MAAM,EACJE,iCAAiCC,gBAAe,EACjD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,kCAAqB,EAACL;AAC7B,0FAA0F;AAC5F;AAEAL,cAAcW,WAAW,GAAG,iBAC5B,yCAAyC"}
+{"version":3,"sources":["../../../lib/components/ToolbarButton/ToolbarButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarButton_unstable(props, ref);\n  useToolbarButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useToolbarButtonStyles_unstable')(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n});\n\nToolbarButton.displayName = 'ToolbarButton';\n//# sourceMappingURL=ToolbarButton.js.map"],"names":["ToolbarButton","React","forwardRef","props","ref","state","useToolbarButton_unstable","useToolbarButtonStyles_unstable","useCustomStyleHook_unstable","renderButton_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;6BACe;8CACU;kCACN;qCACE;AAKrC,MAAMA,gBAAgB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChCG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/D,OAAOI,IAAAA,kCAAqB,EAACJ;AAC7B,0FAA0F;AAC5F;AAEAL,cAAcU,WAAW,GAAG,iBAC5B,yCAAyC"}

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

@@ -6,7 +6,7 @@ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./ToolbarButton"), exports);
 _exportStar(require("./ToolbarButton.types"), exports);
 _exportStar(require("./useToolbarButton"), exports);
-_exportStar(require("./useToolbarButtonStyles"), exports);
+_exportStar(require("./useToolbarButtonStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarButton/index.js"],"sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\nexport * from './useToolbarButton';\nexport * from './useToolbarButtonStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/ToolbarButton/index.js"],"sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\nexport * from './useToolbarButton';\nexport * from './useToolbarButtonStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/ToolbarButton/{useToolbarButtonStyles.js → useToolbarButtonStyles.styles.js}

@@ -28,6 +28,6 @@ const useToolbarButtonStyles_unstable = (state)=>{
     if (state.icon) {
         state.icon.className = (0, _react.mergeClasses)(state.icon.className, state.vertical && buttonStyles.verticalIcon);
     }
-}; //# sourceMappingURL=useToolbarButtonStyles.js.map
+}; //# sourceMappingURL=useToolbarButtonStyles.styles.js.map
 
-//# sourceMappingURL=useToolbarButtonStyles.js.map
+//# sourceMappingURL=useToolbarButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/ToolbarButton/useToolbarButtonStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = /*#__PURE__*/__styles({\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  },\n  verticalIcon: {\n    Be2twd7: \"f1rt2boy\"\n  }\n}, {\n  d: [\".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1rt2boy{font-size:24px;}\"]\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = state => {\n  useButtonStyles_unstable(state);\n  const buttonStyles = useBaseStyles();\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//# sourceMappingURL=useToolbarButtonStyles.styles.js.map"],"names":["useToolbarButtonStyles_unstable","useBaseStyles","__styles","vertical","Beiy3e4","verticalIcon","Be2twd7","d","state","useButtonStyles_unstable","buttonStyles","root","className","mergeClasses","icon"],"mappings":";;;;+BAeaA;;aAAAA;;uBAf0B;6BACE;AACzC,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,SAAS;IACX;IACAC,cAAc;QACZC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA6F;KAA6B;AAChI;AAIO,MAAMP,kCAAkCQ,CAAAA,QAAS;IACtDC,IAAAA,qCAAwB,EAACD;IACzB,MAAME,eAAeT;IACrBO,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAML,QAAQ,IAAIO,aAAaP,QAAQ;IACjG,IAAIK,MAAMM,IAAI,EAAE;QACdN,MAAMM,IAAI,CAACF,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMM,IAAI,CAACF,SAAS,EAAEJ,MAAML,QAAQ,IAAIO,aAAaL,YAAY;IACvG,CAAC;AACH,GACA,yDAAyD"}

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

@@ -8,15 +8,14 @@ Object.defineProperty(exports, "ToolbarDivider", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _useToolbarDividerStyles = require("./useToolbarDividerStyles");
+const _useToolbarDividerStylesStyles = require("./useToolbarDividerStyles.styles");
 const _reactDivider = require("@fluentui/react-divider");
 const _useToolbarDivider = require("./useToolbarDivider");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const ToolbarDivider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useToolbarDivider.useToolbarDivider_unstable)(props, ref);
-    (0, _useToolbarDividerStyles.useToolbarDividerStyles_unstable)(state);
-    const { useToolbarDividerStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useToolbarDividerStylesStyles.useToolbarDividerStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useToolbarDividerStyles_unstable')(state);
     return (0, _reactDivider.renderDivider_unstable)(state);
 });
 ToolbarDivider.displayName = 'ToolbarDivider'; //# sourceMappingURL=ToolbarDivider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarDivider/ToolbarDivider.js"],"sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarDivider_unstable(props, ref);\n  useToolbarDividerStyles_unstable(state);\n  const {\n    useToolbarDividerStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderDivider_unstable(state);\n});\nToolbarDivider.displayName = 'ToolbarDivider';\n//# sourceMappingURL=ToolbarDivider.js.map"],"names":["ToolbarDivider","React","forwardRef","props","ref","state","useToolbarDivider_unstable","useToolbarDividerStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderDivider_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;yCAC0B;8BACV;mCACI;qCACE;AAItC,MAAMA,iBAAiB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC1E,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,yDAAgC,EAACF;IACjC,MAAM,EACJE,kCAAkCC,gBAAe,EAClD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,oCAAsB,EAACL;AAChC;AACAL,eAAeW,WAAW,GAAG,kBAC7B,0CAA0C"}
+{"version":3,"sources":["../../../lib/components/ToolbarDivider/ToolbarDivider.js"],"sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarDivider_unstable(props, ref);\n  useToolbarDividerStyles_unstable(state);\n  useCustomStyleHook_unstable('useToolbarDividerStyles_unstable')(state);\n  return renderDivider_unstable(state);\n});\nToolbarDivider.displayName = 'ToolbarDivider';\n//# sourceMappingURL=ToolbarDivider.js.map"],"names":["ToolbarDivider","React","forwardRef","props","ref","state","useToolbarDivider_unstable","useToolbarDividerStyles_unstable","useCustomStyleHook_unstable","renderDivider_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;+CAC0B;8BACV;mCACI;qCACC;AAIrC,MAAMA,iBAAiB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC1E,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,+DAAgC,EAACF;IACjCG,IAAAA,gDAA2B,EAAC,oCAAoCH;IAChE,OAAOI,IAAAA,oCAAsB,EAACJ;AAChC;AACAL,eAAeU,WAAW,GAAG,kBAC7B,0CAA0C"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./ToolbarDivider"), exports);
 _exportStar(require("./ToolbarDivider.types"), exports);
-_exportStar(require("./useToolbarDividerStyles"), exports);
+_exportStar(require("./useToolbarDividerStyles.styles"), exports);
 _exportStar(require("./useToolbarDivider"), exports);
  //# sourceMappingURL=index.js.map
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarDivider/index.js"],"sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/ToolbarDivider/index.js"],"sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles.styles';\nexport * from './useToolbarDivider';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/ToolbarDivider/{useToolbarDividerStyles.js → useToolbarDividerStyles.styles.js}

@@ -29,6 +29,6 @@ const useToolbarDividerStyles_unstable = (state)=>{
     const toolbarDividerStyles = useBaseStyles();
     state.root.className = (0, _react.mergeClasses)(state.root.className, toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical);
     return state;
-}; //# sourceMappingURL=useToolbarDividerStyles.js.map
+}; //# sourceMappingURL=useToolbarDividerStyles.styles.js.map
 
-//# sourceMappingURL=useToolbarDividerStyles.js.map
+//# sourceMappingURL=useToolbarDividerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/ToolbarDivider/useToolbarDividerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"ftuwxu6\",\n    B2u0y6b: \"f1lwjmbk\"\n  },\n  vertical: {\n    B2u0y6b: \"fe668z\"\n  }\n}, {\n  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;}\"]\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = state => {\n  useDividerStyles_unstable(state);\n  const {\n    vertical\n  } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(state.root.className, toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical);\n  return state;\n};\n//# sourceMappingURL=useToolbarDividerStyles.styles.js.map"],"names":["useToolbarDividerStyles_unstable","useBaseStyles","__styles","root","mc9l5x","B2u0y6b","vertical","d","state","useDividerStyles_unstable","toolbarDividerStyles","className","mergeClasses"],"mappings":";;;;+BAgBaA;;aAAAA;;uBAhB0B;8BACG;AAC1C,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRD,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAoH;QAA6B;KAA8B;AACrL;AAIO,MAAMP,mCAAmCQ,CAAAA,QAAS;IACvDC,IAAAA,uCAAyB,EAACD;IAC1B,MAAM,EACJF,SAAQ,EACT,GAAGE;IACJ,MAAME,uBAAuBT;IAC7BO,MAAML,IAAI,CAACQ,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,MAAML,IAAI,CAACQ,SAAS,EAAED,qBAAqBP,IAAI,EAAE,CAACG,YAAYI,qBAAqBJ,QAAQ;IAC/H,OAAOE;AACT,GACA,0DAA0D"}

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

@@ -9,14 +9,13 @@ Object.defineProperty(exports, "ToolbarGroup", {
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useToolbarGroup = require("./useToolbarGroup");
-const _useToolbarGroupStyles = require("./useToolbarGroupStyles");
+const _useToolbarGroupStylesStyles = require("./useToolbarGroupStyles.styles");
 const _renderToolbarGroup = require("./renderToolbarGroup");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const ToolbarGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useToolbarGroup.useToolbarGroup_unstable)(props, ref);
-    (0, _useToolbarGroupStyles.useToolbarGroupStyles_unstable)(state);
-    const { useToolbarGroupStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useToolbarGroupStylesStyles.useToolbarGroupStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useToolbarGroupStyles_unstable')(state);
     return (0, _renderToolbarGroup.renderToolbarGroup_unstable)(state);
 // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarGroup/ToolbarGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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 = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n  useToolbarGroupStyles_unstable(state);\n  const {\n    useToolbarGroupStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n});\n\nToolbarGroup.displayName = 'ToolbarGroup';\n//# sourceMappingURL=ToolbarGroup.js.map"],"names":["ToolbarGroup","React","forwardRef","props","ref","state","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderToolbarGroup_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;iCACkB;uCACM;oCACH;qCACC;AAKtC,MAAMA,eAAe,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACxE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9CG,IAAAA,qDAA8B,EAACF;IAC/B,MAAM,EACJE,gCAAgCC,gBAAe,EAChD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,+CAA2B,EAACL;AACnC,0FAA0F;AAC5F;AAEAL,aAAaW,WAAW,GAAG,gBAC3B,wCAAwC"}
+{"version":3,"sources":["../../../lib/components/ToolbarGroup/ToolbarGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n  useToolbarGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('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});\n\nToolbarGroup.displayName = 'ToolbarGroup';\n//# sourceMappingURL=ToolbarGroup.js.map"],"names":["ToolbarGroup","React","forwardRef","props","ref","state","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","useCustomStyleHook_unstable","renderToolbarGroup_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;iCACkB;6CACM;oCACH;qCACA;AAKrC,MAAMA,eAAe,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACxE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9CG,IAAAA,2DAA8B,EAACF;IAC/BG,IAAAA,gDAA2B,EAAC,kCAAkCH;IAC9D,OAAOI,IAAAA,+CAA2B,EAACJ;AACnC,0FAA0F;AAC5F;AAEAL,aAAaU,WAAW,GAAG,gBAC3B,wCAAwC"}

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

@@ -6,7 +6,7 @@ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./ToolbarGroup"), exports);
 _exportStar(require("./ToolbarGroup.types"), exports);
 _exportStar(require("./useToolbarGroup"), exports);
-_exportStar(require("./useToolbarGroupStyles"), exports);
+_exportStar(require("./useToolbarGroupStyles.styles"), exports);
 _exportStar(require("./renderToolbarGroup"), exports);
  //# sourceMappingURL=index.js.map
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarGroup/index.js"],"sourcesContent":["export * from './ToolbarGroup';\nexport * from './ToolbarGroup.types';\nexport * from './useToolbarGroup';\nexport * from './useToolbarGroupStyles';\nexport * from './renderToolbarGroup';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/ToolbarGroup/index.js"],"sourcesContent":["export * from './ToolbarGroup';\nexport * from './ToolbarGroup.types';\nexport * from './useToolbarGroup';\nexport * from './useToolbarGroupStyles.styles';\nexport * from './renderToolbarGroup';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/ToolbarGroup/{useToolbarGroupStyles.js → useToolbarGroupStyles.styles.js}

@@ -35,6 +35,6 @@ const useToolbarGroupStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, state.root.className);
     return state;
-}; //# sourceMappingURL=useToolbarGroupStyles.js.map
+}; //# sourceMappingURL=useToolbarGroupStyles.styles.js.map
 
-//# sourceMappingURL=useToolbarGroupStyles.js.map
+//# sourceMappingURL=useToolbarGroupStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n  root: 'fui-ToolbarGroup'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    i8kkvl: \"f4px1ci\",\n    Belr9w4: \"fn67r4l\"\n  }\n}, {\n  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;}\"]\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useToolbarGroupStyles.styles.js.map"],"names":["toolbarGroupClassNames","useToolbarGroupStyles_unstable","root","useStyles","__styles","mc9l5x","i8kkvl","Belr9w4","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,sBAAsB,MAAtBA;IAkBAC,8BAA8B,MAA9BA;;uBAnBsC;AAC5C,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAAoD;KAAyB;AAC3K;AAIO,MAAMP,iCAAiCQ,CAAAA,QAAS;IACrD,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACZ,uBAAuBE,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAClG,OAAOF;AACT,GACA,wDAAwD"}

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

@@ -10,13 +10,12 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactButton = require("@fluentui/react-button");
 const _useToolbarRadioButton = require("./useToolbarRadioButton");
-const _useToolbarRadioButtonStyles = require("./useToolbarRadioButtonStyles");
+const _useToolbarRadioButtonStylesStyles = require("./useToolbarRadioButtonStyles.styles");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const ToolbarRadioButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useToolbarRadioButton.useToolbarRadioButton_unstable)(props, ref);
-    (0, _useToolbarRadioButtonStyles.useToolbarRadioButtonStyles_unstable)(state);
-    const { useToolbarRadioButtonStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useToolbarRadioButtonStylesStyles.useToolbarRadioButtonStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useToolbarRadioButtonStyles_unstable')(state);
     return (0, _reactButton.renderToggleButton_unstable)(state);
 });
 ToolbarRadioButton.displayName = 'ToolbarRadioButton'; //# sourceMappingURL=ToolbarRadioButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarRadioButton/ToolbarRadioButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n  useToolbarRadioButtonStyles_unstable(state);\n  const {\n    useToolbarRadioButtonStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderToggleButton_unstable(state);\n});\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n//# sourceMappingURL=ToolbarRadioButton.js.map"],"names":["ToolbarRadioButton","React","forwardRef","props","ref","state","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderToggleButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACqB;uCACG;6CACM;qCACR;AAItC,MAAMA,qBAAqB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC9E,MAAMC,QAAQC,IAAAA,qDAA8B,EAACH,OAAOC;IACpDG,IAAAA,iEAAoC,EAACF;IACrC,MAAM,EACJE,sCAAsCC,gBAAe,EACtD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,wCAA2B,EAACL;AACrC;AACAL,mBAAmBW,WAAW,GAAG,sBACjC,8CAA8C"}
+{"version":3,"sources":["../../../lib/components/ToolbarRadioButton/ToolbarRadioButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n  useToolbarRadioButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useToolbarRadioButtonStyles_unstable')(state);\n  return renderToggleButton_unstable(state);\n});\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n//# sourceMappingURL=ToolbarRadioButton.js.map"],"names":["ToolbarRadioButton","React","forwardRef","props","ref","state","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable","useCustomStyleHook_unstable","renderToggleButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACqB;uCACG;mDACM;qCACT;AAIrC,MAAMA,qBAAqB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC9E,MAAMC,QAAQC,IAAAA,qDAA8B,EAACH,OAAOC;IACpDG,IAAAA,uEAAoC,EAACF;IACrCG,IAAAA,gDAA2B,EAAC,wCAAwCH;IACpE,OAAOI,IAAAA,wCAA2B,EAACJ;AACrC;AACAL,mBAAmBU,WAAW,GAAG,sBACjC,8CAA8C"}

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

@@ -6,7 +6,7 @@ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./ToolbarRadioButton"), exports);
 _exportStar(require("./ToolbarRadioButton.types"), exports);
 _exportStar(require("./useToolbarRadioButton"), exports);
-_exportStar(require("./useToolbarRadioButtonStyles"), exports);
+_exportStar(require("./useToolbarRadioButtonStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarRadioButton/index.js"],"sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\nexport * from './useToolbarRadioButton';\nexport * from './useToolbarRadioButtonStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/ToolbarRadioButton/index.js"],"sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\nexport * from './useToolbarRadioButton';\nexport * from './useToolbarRadioButtonStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/ToolbarRadioButton/{useToolbarRadioButtonStyles.js → useToolbarRadioButtonStyles.styles.js}

@@ -21,6 +21,6 @@ const useToolbarRadioButtonStyles_unstable = (state)=>{
     (0, _reactButton.useToggleButtonStyles_unstable)(state);
     const toggleButtonStyles = useBaseStyles();
     state.root.className = (0, _react.mergeClasses)(state.root.className, state.checked && toggleButtonStyles.selected);
-}; //# sourceMappingURL=useToolbarRadioButtonStyles.js.map
+}; //# sourceMappingURL=useToolbarRadioButtonStyles.styles.js.map
 
-//# sourceMappingURL=useToolbarRadioButtonStyles.js.map
+//# sourceMappingURL=useToolbarRadioButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = /*#__PURE__*/__styles({\n  selected: {\n    sj55zd: \"f16muhyy\"\n  }\n}, {\n  d: [\".f16muhyy{color:var(--colorBrandForeground1);}\"]\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = state => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n//# sourceMappingURL=useToolbarRadioButtonStyles.styles.js.map"],"names":["useToolbarRadioButtonStyles_unstable","useBaseStyles","__styles","selected","sj55zd","d","state","useToggleButtonStyles_unstable","toggleButtonStyles","root","className","mergeClasses","checked"],"mappings":";;;;+BAaaA;;aAAAA;;uBAZ0B;6BACQ;AAC/C,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiD;AACvD;AAIO,MAAML,uCAAuCM,CAAAA,QAAS;IAC3DC,IAAAA,2CAA8B,EAACD;IAC/B,MAAME,qBAAqBP;IAC3BK,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBL,QAAQ;AACxG,GACA,8DAA8D"}

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

@@ -16,8 +16,7 @@ const ToolbarRadioGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
         ...props
     }, ref);
     (0, _toolbarGroup.useToolbarGroupStyles_unstable)(state);
-    const { useToolbarGroupStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useToolbarGroupStyles_unstable')(state);
     return (0, _toolbarGroup.renderToolbarGroup_unstable)(state);
 // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarRadioGroup/ToolbarRadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { renderToolbarGroup_unstable, useToolbarGroupStyles_unstable, useToolbarGroup_unstable } from '../../ToolbarGroup';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarRadioGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarRadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable({\n    role: 'radiogroup',\n    ...props\n  }, ref);\n  useToolbarGroupStyles_unstable(state);\n  const {\n    useToolbarGroupStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n});\n\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n//# sourceMappingURL=ToolbarRadioGroup.js.map"],"names":["ToolbarRadioGroup","React","forwardRef","props","ref","state","useToolbarGroup_unstable","role","useToolbarGroupStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderToolbarGroup_unstable","displayName"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;8BAC+E;qCACzD;AAKtC,MAAMA,oBAAoB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC7E,MAAMC,QAAQC,IAAAA,sCAAwB,EAAC;QACrCC,MAAM;QACN,GAAGJ,KAAK;IACV,GAAGC;IACHI,IAAAA,4CAA8B,EAACH;IAC/B,MAAM,EACJG,gCAAgCC,gBAAe,EAChD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBJ;IAChB,OAAOM,IAAAA,yCAA2B,EAACN;AACnC,0FAA0F;AAC5F;AAEAL,kBAAkBY,WAAW,GAAG,qBAChC,6CAA6C"}
+{"version":3,"sources":["../../../lib/components/ToolbarRadioGroup/ToolbarRadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { renderToolbarGroup_unstable, useToolbarGroupStyles_unstable, useToolbarGroup_unstable } from '../../ToolbarGroup';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarRadioGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarRadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable({\n    role: 'radiogroup',\n    ...props\n  }, ref);\n  useToolbarGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('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});\n\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n//# sourceMappingURL=ToolbarRadioGroup.js.map"],"names":["ToolbarRadioGroup","React","forwardRef","props","ref","state","useToolbarGroup_unstable","role","useToolbarGroupStyles_unstable","useCustomStyleHook_unstable","renderToolbarGroup_unstable","displayName"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;8BAC+E;qCAC1D;AAKrC,MAAMA,oBAAoB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC7E,MAAMC,QAAQC,IAAAA,sCAAwB,EAAC;QACrCC,MAAM;QACN,GAAGJ,KAAK;IACV,GAAGC;IACHI,IAAAA,4CAA8B,EAACH;IAC/BI,IAAAA,gDAA2B,EAAC,kCAAkCJ;IAC9D,OAAOK,IAAAA,yCAA2B,EAACL;AACnC,0FAA0F;AAC5F;AAEAL,kBAAkBW,WAAW,GAAG,qBAChC,6CAA6C"}

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

@@ -10,13 +10,12 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactButton = require("@fluentui/react-button");
 const _useToolbarToggleButton = require("./useToolbarToggleButton");
-const _useToolbarToggleButtonStyles = require("./useToolbarToggleButtonStyles");
+const _useToolbarToggleButtonStylesStyles = require("./useToolbarToggleButtonStyles.styles");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const ToolbarToggleButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useToolbarToggleButton.useToolbarToggleButton_unstable)(props, ref);
-    (0, _useToolbarToggleButtonStyles.useToolbarToggleButtonStyles_unstable)(state);
-    const { useToolbarToggleButtonStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useToolbarToggleButtonStylesStyles.useToolbarToggleButtonStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useToolbarToggleButtonStyles_unstable')(state);
     return (0, _reactButton.renderToggleButton_unstable)(state);
 });
 ToolbarToggleButton.displayName = 'ToolbarToggleButton'; //# sourceMappingURL=ToolbarToggleButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarToggleButton/ToolbarToggleButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n  useToolbarToggleButtonStyles_unstable(state);\n  const {\n    useToolbarToggleButtonStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderToggleButton_unstable(state);\n});\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n//# sourceMappingURL=ToolbarToggleButton.js.map"],"names":["ToolbarToggleButton","React","forwardRef","props","ref","state","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderToggleButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACqB;wCACI;8CACM;qCACT;AAItC,MAAMA,sBAAsB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/E,MAAMC,QAAQC,IAAAA,uDAA+B,EAACH,OAAOC;IACrDG,IAAAA,mEAAqC,EAACF;IACtC,MAAM,EACJE,uCAAuCC,gBAAe,EACvD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,wCAA2B,EAACL;AACrC;AACAL,oBAAoBW,WAAW,GAAG,uBAClC,+CAA+C"}
+{"version":3,"sources":["../../../lib/components/ToolbarToggleButton/ToolbarToggleButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n  useToolbarToggleButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useToolbarToggleButtonStyles_unstable')(state);\n  return renderToggleButton_unstable(state);\n});\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n//# sourceMappingURL=ToolbarToggleButton.js.map"],"names":["ToolbarToggleButton","React","forwardRef","props","ref","state","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable","useCustomStyleHook_unstable","renderToggleButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACqB;wCACI;oDACM;qCACV;AAIrC,MAAMA,sBAAsB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/E,MAAMC,QAAQC,IAAAA,uDAA+B,EAACH,OAAOC;IACrDG,IAAAA,yEAAqC,EAACF;IACtCG,IAAAA,gDAA2B,EAAC,yCAAyCH;IACrE,OAAOI,IAAAA,wCAA2B,EAACJ;AACrC;AACAL,oBAAoBU,WAAW,GAAG,uBAClC,+CAA+C"}

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

@@ -6,7 +6,7 @@ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./ToolbarToggleButton"), exports);
 _exportStar(require("./ToolbarToggleButton.types"), exports);
 _exportStar(require("./useToolbarToggleButton"), exports);
-_exportStar(require("./useToolbarToggleButtonStyles"), exports);
+_exportStar(require("./useToolbarToggleButtonStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarToggleButton/index.js"],"sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\nexport * from './useToolbarToggleButton';\nexport * from './useToolbarToggleButtonStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/ToolbarToggleButton/index.js"],"sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\nexport * from './useToolbarToggleButton';\nexport * from './useToolbarToggleButtonStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -16,10 +16,8 @@ const useToolbarToggleButton_unstable = (props, ref)=>{
         var _ctx_checkedValues_props_name;
         return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
     });
-    const size = (0, _toolbarContext.useToolbarContext_unstable)((ctx)=>ctx.size);
     const { onClick: onClickOriginal  } = props;
     const toggleButtonState = (0, _reactButton.useToggleButton_unstable)({
-        size,
         checked,
         ...props
     }, ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/ToolbarToggleButton/useToolbarToggleButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\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 = (props, ref) => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => {\n    var _ctx_checkedValues_props_name;\n    return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));\n  });\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n  const {\n    onClick: onClickOriginal\n  } = props;\n  const toggleButtonState = useToggleButton_unstable({\n    size,\n    checked,\n    ...props\n  }, ref);\n  const state = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value\n  };\n  const handleOnClick = e => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);\n    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);\n  };\n  state.root.onClick = handleOnClick;\n  return state;\n};\n//# sourceMappingURL=useToolbarToggleButton.js.map"],"names":["useToolbarToggleButton_unstable","props","ref","handleToggleButton","useToolbarContext_unstable","ctx","checked","_ctx_checkedValues_props_name","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","useToggleButton_unstable","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;6BACkB;gCACE;AAOpC,MAAMA,kCAAkC,CAACC,OAAOC,MAAQ;IAC7D,MAAMC,qBAAqBC,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIF,kBAAkB;IACnF,MAAMG,UAAUF,IAAAA,0CAA0B,EAACC,CAAAA,MAAO;QAChD,IAAIE;QACJ,OAAO,CAAC,CAAE,CAAA,AAACA,CAAAA,gCAAgCF,IAAIG,aAAa,CAACP,MAAMQ,IAAI,CAAC,AAAD,MAAO,IAAI,IAAIF,kCAAkC,KAAK,IAAI,KAAK,IAAIA,8BAA8BG,QAAQ,CAACT,MAAMU,KAAK,CAAC,AAAD;IAC9L;IACA,MAAMC,OAAOR,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIO,IAAI;IACvD,MAAM,EACJC,SAASC,gBAAe,EACzB,GAAGb;IACJ,MAAMc,oBAAoBC,IAAAA,qCAAwB,EAAC;QACjDJ;QACAN;QACA,GAAGL,KAAK;IACV,GAAGC;IACH,MAAMe,QAAQ;QACZ,GAAGF,iBAAiB;QACpBN,MAAMR,MAAMQ,IAAI;QAChBE,OAAOV,MAAMU,KAAK;IACpB;IACA,MAAMO,gBAAgBC,CAAAA,IAAK;QACzB,IAAIF,MAAMG,QAAQ,EAAE;YAClBD,EAAEE,cAAc;YAChBF,EAAEG,eAAe;YACjB;QACF,CAAC;QACDnB,uBAAuB,IAAI,IAAIA,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBgB,GAAGF,MAAMR,IAAI,EAAEQ,MAAMN,KAAK,EAAEM,MAAMX,OAAO,CAAC;QACrIQ,oBAAoB,IAAI,IAAIA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBK,EAAE;IACtF;IACAF,MAAMM,IAAI,CAACV,OAAO,GAAGK;IACrB,OAAOD;AACT,GACA,kDAAkD"}
+{"version":3,"sources":["../../../lib/components/ToolbarToggleButton/useToolbarToggleButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\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 = (props, ref) => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => {\n    var _ctx_checkedValues_props_name;\n    return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));\n  });\n  const {\n    onClick: onClickOriginal\n  } = props;\n  const toggleButtonState = useToggleButton_unstable({\n    checked,\n    ...props\n  }, ref);\n  const state = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value\n  };\n  const handleOnClick = e => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);\n    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);\n  };\n  state.root.onClick = handleOnClick;\n  return state;\n};\n//# sourceMappingURL=useToolbarToggleButton.js.map"],"names":["useToolbarToggleButton_unstable","props","ref","handleToggleButton","useToolbarContext_unstable","ctx","checked","_ctx_checkedValues_props_name","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","useToggleButton_unstable","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;6BACkB;gCACE;AAOpC,MAAMA,kCAAkC,CAACC,OAAOC,MAAQ;IAC7D,MAAMC,qBAAqBC,IAAAA,0CAA0B,EAACC,CAAAA,MAAOA,IAAIF,kBAAkB;IACnF,MAAMG,UAAUF,IAAAA,0CAA0B,EAACC,CAAAA,MAAO;QAChD,IAAIE;QACJ,OAAO,CAAC,CAAE,CAAA,AAACA,CAAAA,gCAAgCF,IAAIG,aAAa,CAACP,MAAMQ,IAAI,CAAC,AAAD,MAAO,IAAI,IAAIF,kCAAkC,KAAK,IAAI,KAAK,IAAIA,8BAA8BG,QAAQ,CAACT,MAAMU,KAAK,CAAC,AAAD;IAC9L;IACA,MAAM,EACJC,SAASC,gBAAe,EACzB,GAAGZ;IACJ,MAAMa,oBAAoBC,IAAAA,qCAAwB,EAAC;QACjDT;QACA,GAAGL,KAAK;IACV,GAAGC;IACH,MAAMc,QAAQ;QACZ,GAAGF,iBAAiB;QACpBL,MAAMR,MAAMQ,IAAI;QAChBE,OAAOV,MAAMU,KAAK;IACpB;IACA,MAAMM,gBAAgBC,CAAAA,IAAK;QACzB,IAAIF,MAAMG,QAAQ,EAAE;YAClBD,EAAEE,cAAc;YAChBF,EAAEG,eAAe;YACjB;QACF,CAAC;QACDlB,uBAAuB,IAAI,IAAIA,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBe,GAAGF,MAAMP,IAAI,EAAEO,MAAML,KAAK,EAAEK,MAAMV,OAAO,CAAC;QACrIO,oBAAoB,IAAI,IAAIA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBK,EAAE;IACtF;IACAF,MAAMM,IAAI,CAACV,OAAO,GAAGK;IACrB,OAAOD;AACT,GACA,kDAAkD"}

package/lib-commonjs/components/ToolbarToggleButton/{useToolbarToggleButtonStyles.js → useToolbarToggleButtonStyles.styles.js}

@@ -21,6 +21,6 @@ const useToolbarToggleButtonStyles_unstable = (state)=>{
     (0, _reactButton.useToggleButtonStyles_unstable)(state);
     const toggleButtonStyles = useBaseStyles();
     state.root.className = (0, _react.mergeClasses)(state.root.className, state.checked && toggleButtonStyles.selected);
-}; //# sourceMappingURL=useToolbarToggleButtonStyles.js.map
+}; //# sourceMappingURL=useToolbarToggleButtonStyles.styles.js.map
 
-//# sourceMappingURL=useToolbarToggleButtonStyles.js.map
+//# sourceMappingURL=useToolbarToggleButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = /*#__PURE__*/__styles({\n  selected: {\n    sj55zd: \"f16muhyy\"\n  }\n}, {\n  d: [\".f16muhyy{color:var(--colorBrandForeground1);}\"]\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = state => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n//# sourceMappingURL=useToolbarToggleButtonStyles.styles.js.map"],"names":["useToolbarToggleButtonStyles_unstable","useBaseStyles","__styles","selected","sj55zd","d","state","useToggleButtonStyles_unstable","toggleButtonStyles","root","className","mergeClasses","checked"],"mappings":";;;;+BAaaA;;aAAAA;;uBAZ0B;6BACQ;AAC/C,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiD;AACvD;AAIO,MAAML,wCAAwCM,CAAAA,QAAS;IAC5DC,IAAAA,2CAA8B,EAACD;IAC/B,MAAME,qBAAqBP;IAC3BK,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBL,QAAQ;AACxG,GACA,+DAA+D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.1.11",
+  "version": "9.1.12",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,21 +28,21 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.21",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.3.10",
-    "@fluentui/react-divider": "^9.2.10",
-    "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-utilities": "^9.8.0",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.2",
-    "@fluentui/react-context-selector": "^9.1.18",
-    "@fluentui/react-radio": "^9.1.11",
-    "@fluentui/react-shared-contexts": "^9.3.3",
-    "@fluentui/react-tabster": "^9.6.5",
+    "@fluentui/react-button": "^9.3.11",
+    "@fluentui/react-divider": "^9.2.11",
+    "@fluentui/react-theme": "^9.1.8",
+    "@fluentui/react-utilities": "^9.8.1",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.3",
+    "@fluentui/react-context-selector": "^9.1.19",
+    "@fluentui/react-radio": "^9.1.12",
+    "@fluentui/react-shared-contexts": "^9.4.0",
+    "@fluentui/react-tabster": "^9.7.0",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

package/.swcrc

@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}