@fluentui/react-toolbar 9.5.8 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Wed, 16 Jul 2025 13:51:51 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.0)
+
+Thu, 17 Jul 2025 13:45:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.5.8..@fluentui/react-toolbar_v9.6.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-button to v9.6.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-divider to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-radio to v9.5.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.5.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.5.8)
 
-Wed, 16 Jul 2025 13:51:51 GMT 
+Wed, 16 Jul 2025 13:52:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.5.7..@fluentui/react-toolbar_v9.5.8)
 
 ### Patches

package/lib/components/Toolbar/useToolbarStyles.styles.raw.js

@@ -0,0 +1,35 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const toolbarClassNames = {
+    root: 'fui-Toolbar'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '4px 8px'
+    },
+    vertical: {
+        flexDirection: 'column',
+        width: 'fit-content'
+    },
+    small: {
+        padding: '0px 4px'
+    },
+    medium: {
+        padding: '4px 8px'
+    },
+    large: {
+        padding: '4px 20px'
+    }
+});
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */ export const useToolbarStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { vertical, size } = state;
+    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);
+    return state;
+};

package/lib/components/Toolbar/useToolbarStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } 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    padding: '4px 8px',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: { padding: '0px 4px' },\n  medium: { padding: '4px 8px' },\n  large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  'use no memo';\n\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"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAEA;;CAEC,GACD,OAAO,MAAMO,4BAA4B,CAACC;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3BA,MAAMZ,IAAI,CAACe,SAAS,GAAGjB,aACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js

@@ -0,0 +1,22 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
+const useBaseStyles = makeStyles({
+    vertical: {
+        flexDirection: 'column'
+    },
+    verticalIcon: {
+        fontSize: '24px',
+        margin: '0'
+    }
+});
+/**
+ * Apply styling to the ToolbarButton slots based on the state
+ */ export const useToolbarButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const buttonStyles = useBaseStyles();
+    state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);
+    }
+    useButtonStyles_unstable(state);
+};

package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.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    margin: '0',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  'use no memo';\n\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n  }\n\n  useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE,MAAMC,gBAAgBH,WAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;IAEAX,yBAAyBQ;AAC3B,EAAE"}

package/lib/components/ToolbarDivider/useToolbarDividerStyles.styles.raw.js

@@ -0,0 +1,23 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useDividerStyles_unstable } from '@fluentui/react-divider';
+const useBaseStyles = makeStyles({
+    // Base styles
+    root: {
+        display: 'inline-flex',
+        maxWidth: '1px',
+        padding: '0 12px'
+    },
+    vertical: {
+        maxWidth: 'initial'
+    }
+});
+/**
+ * Apply styling to the ToolbarDivider slots based on the state
+ */ export const useToolbarDividerStyles_unstable = (state)=>{
+    'use no memo';
+    useDividerStyles_unstable(state);
+    const { vertical } = state;
+    const toolbarDividerStyles = useBaseStyles();
+    state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
+    return state;
+};

package/lib/components/ToolbarDivider/useToolbarDividerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n    padding: '0 12px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  'use no memo';\n\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","display","maxWidth","padding","vertical","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,yBAAyB,QAAQ,0BAA0B;AAGpE,MAAMC,gBAAgBH,WAAW;IAC/B,cAAc;IACdI,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMG,mCAAmC,CAACC;IAC/C;IAEAR,0BAA0BQ;IAC1B,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,uBAAuBR;IAC7BO,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aACrBU,qBAAqBP,IAAI,EACzB,CAACI,YAAYG,qBAAqBH,QAAQ,EAC1CE,MAAMN,IAAI,CAACQ,SAAS;IAEtB,OAAOF;AACT,EAAE"}

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js

@@ -0,0 +1,11 @@
+import { mergeClasses } from '@griffel/react';
+export const toolbarGroupClassNames = {
+    root: 'fui-ToolbarGroup'
+};
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */ export const useToolbarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);
+    return state;
+};

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","toolbarGroupClassNames","root","useToolbarGroupStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;","mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,uBAAuBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAErF,OAAOD;AACT,EAAE"}

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js

@@ -0,0 +1,24 @@
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
+const useBaseStyles = makeStyles({
+    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {
+        backgroundColor: tokens.colorSubtleBackgroundSelected,
+        color: tokens.colorNeutralForeground2Selected
+    },
+    iconSelected: {
+        color: tokens.colorNeutralForeground2BrandSelected
+    }
+});
+/**
+ * Apply styling to the ToolbarRadioButton slots based on the state
+ */ export const useToolbarRadioButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const toggleButtonStyles = useBaseStyles();
+    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
+    }
+    useToggleButtonStyles_unstable(state);
+    return state;
+};

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}

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

@@ -0,0 +1,24 @@
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
+const useBaseStyles = makeStyles({
+    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {
+        backgroundColor: tokens.colorSubtleBackgroundSelected,
+        color: tokens.colorNeutralForeground2Selected
+    },
+    iconSelected: {
+        color: tokens.colorNeutralForeground2BrandSelected
+    }
+});
+/**
+ * Apply styling to the ToolbarToggleButton slots based on the state
+ */ export const useToolbarToggleButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const toggleButtonStyles = useBaseStyles();
+    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
+    }
+    useToggleButtonStyles_unstable(state);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"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  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toolbarClassNames: function() {
+        return toolbarClassNames;
+    },
+    useToolbarStyles_unstable: function() {
+        return useToolbarStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toolbarClassNames = {
+    root: 'fui-Toolbar'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '4px 8px'
+    },
+    vertical: {
+        flexDirection: 'column',
+        width: 'fit-content'
+    },
+    small: {
+        padding: '0px 4px'
+    },
+    medium: {
+        padding: '4px 8px'
+    },
+    large: {
+        padding: '4px 20px'
+    }
+});
+const useToolbarStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } 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    padding: '4px 8px',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: { padding: '0px 4px' },\n  medium: { padding: '4px 8px' },\n  large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  'use no memo';\n\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"],"names":["toolbarClassNames","useToolbarStyles_unstable","root","useStyles","makeStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","state","styles","size","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iBAAAA;eAAAA;;IAyBAC,yBAAAA;eAAAA;;;uBA5B4B;AAGlC,MAAMD,oBAAkD;IAC7DE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,MAAMN,4BAA4B,CAACa;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEK,QAAQ,EAAEQ,IAAI,EAAE,GAAGF;IAC3BA,MAAMZ,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EACrBlB,kBAAkBE,IAAI,EACtBa,OAAOb,IAAI,EACXM,YAAYO,OAAOP,QAAQ,EAC3BQ,SAAS,WAAW,CAACR,YAAYO,OAAOJ,KAAK,EAC7CK,SAAS,YAAY,CAACR,YAAYO,OAAOH,MAAM,EAC/CI,SAAS,WAAW,CAACR,YAAYO,OAAOF,KAAK,EAC7CC,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToolbarButtonStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToolbarButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const useBaseStyles = (0, _react.makeStyles)({
+    vertical: {
+        flexDirection: 'column'
+    },
+    verticalIcon: {
+        fontSize: '24px',
+        margin: '0'
+    }
+});
+const useToolbarButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const buttonStyles = useBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
+    }
+    (0, _reactbutton.useButtonStyles_unstable)(state);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.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    margin: '0',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  'use no memo';\n\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n  }\n\n  useButtonStyles_unstable(state);\n};\n"],"names":["useToolbarButtonStyles_unstable","useBaseStyles","makeStyles","vertical","flexDirection","verticalIcon","fontSize","margin","state","buttonStyles","root","className","mergeClasses","icon","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;uBAjB4B;6BACA;AAGzC,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/BC,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,MAAMP,kCAAkC,CAACQ;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAAA,EAAaJ,MAAML,QAAQ,IAAIM,aAAaN,QAAQ,EAAEK,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,GAAGC,IAAAA,mBAAAA,EAAaJ,MAAML,QAAQ,IAAIM,aAAaJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IACvG;IAEAG,IAAAA,qCAAAA,EAAyBN;AAC3B"}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToolbarDividerStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToolbarDividerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactdivider = require("@fluentui/react-divider");
+const useBaseStyles = (0, _react.makeStyles)({
+    // Base styles
+    root: {
+        display: 'inline-flex',
+        maxWidth: '1px',
+        padding: '0 12px'
+    },
+    vertical: {
+        maxWidth: 'initial'
+    }
+});
+const useToolbarDividerStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reactdivider.useDividerStyles_unstable)(state);
+    const { vertical } = state;
+    const toolbarDividerStyles = useBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n    padding: '0 12px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  'use no memo';\n\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["useToolbarDividerStyles_unstable","useBaseStyles","makeStyles","root","display","maxWidth","padding","vertical","state","useDividerStyles_unstable","toolbarDividerStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;uBAnB4B;8BACC;AAG1C,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/B,cAAc;IACdC,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAKO,MAAML,mCAAmC,CAACQ;IAC/C;IAEAC,IAAAA,uCAAAA,EAA0BD;IAC1B,MAAM,EAAED,QAAQ,EAAE,GAAGC;IACrB,MAAME,uBAAuBT;IAC7BO,MAAML,IAAI,CAACQ,SAAS,GAAGC,IAAAA,mBAAAA,EACrBF,qBAAqBP,IAAI,EACzB,CAACI,YAAYG,qBAAqBH,QAAQ,EAC1CC,MAAML,IAAI,CAACQ,SAAS;IAEtB,OAAOH;AACT"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toolbarGroupClassNames: function() {
+        return toolbarGroupClassNames;
+    },
+    useToolbarGroupStyles_unstable: function() {
+        return useToolbarGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toolbarGroupClassNames = {
+    root: 'fui-ToolbarGroup'
+};
+const useToolbarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["toolbarGroupClassNames","useToolbarGroupStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,sBAAAA;eAAAA;;IAOAC,8BAAAA;eAAAA;;;uBAVgB;AAGtB,MAAMD,yBAA4D;IACvEE,MAAM;AACR;AAKO,MAAMD,iCAAiC,CAACE;IAC7C;IAEAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaL,uBAAuBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAErF,OAAOD;AACT"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToolbarRadioButtonStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToolbarRadioButtonStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const useBaseStyles = (0, _react.makeStyles)({
+    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
+        color: _reacttheme.tokens.colorNeutralForeground2Selected
+    },
+    iconSelected: {
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    }
+});
+const useToolbarRadioButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const toggleButtonStyles = useBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
+    }
+    (0, _reactbutton.useToggleButtonStyles_unstable)(state);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["useToolbarRadioButtonStyles_unstable","useBaseStyles","makeStyles","selected","backgroundColor","tokens","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","state","toggleButtonStyles","root","className","mergeClasses","checked","icon","useToggleButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBaA;;;eAAAA;;;4BApBU;uBACkB;6BACM;AAG/C,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EC,UAAU;QACRC,iBAAiBC,kBAAAA,CAAOC,6BAA6B;QACrDC,OAAOF,kBAAAA,CAAOG,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOF,kBAAAA,CAAOK,oCAAoC;IACpD;AACF;AAKO,MAAMV,uCAAuC,CAACW;IACnD;IAEA,MAAMC,qBAAqBX;IAE3BU,MAAME,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAAA,EAAaJ,MAAMK,OAAO,IAAIJ,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMM,IAAI,EAAE;QACdN,MAAMM,IAAI,CAACH,SAAS,GAAGC,IAAAA,mBAAAA,EAAaJ,MAAMK,OAAO,IAAIJ,mBAAmBH,YAAY,EAAEE,MAAMM,IAAI,CAACH,SAAS;IAC5G;IAEAI,IAAAA,2CAAAA,EAA+BP;IAE/B,OAAOA;AACT"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToolbarToggleButtonStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToolbarToggleButtonStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const useBaseStyles = (0, _react.makeStyles)({
+    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
+        color: _reacttheme.tokens.colorNeutralForeground2Selected
+    },
+    iconSelected: {
+        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+    }
+});
+const useToolbarToggleButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const toggleButtonStyles = useBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
+    }
+    (0, _reactbutton.useToggleButtonStyles_unstable)(state);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"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  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["useToolbarToggleButtonStyles_unstable","useBaseStyles","makeStyles","selected","backgroundColor","tokens","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","state","toggleButtonStyles","root","className","mergeClasses","checked","icon","useToggleButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBaA;;;eAAAA;;;4BApBU;uBACkB;6BACM;AAG/C,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EC,UAAU;QACRC,iBAAiBC,kBAAAA,CAAOC,6BAA6B;QACrDC,OAAOF,kBAAAA,CAAOG,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOF,kBAAAA,CAAOK,oCAAoC;IACpD;AACF;AAKO,MAAMV,wCAAwC,CAACW;IACpD;IAEA,MAAMC,qBAAqBX;IAE3BU,MAAME,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAAA,EAAaJ,MAAMK,OAAO,IAAIJ,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMM,IAAI,EAAE;QACdN,MAAMM,IAAI,CAACH,SAAS,GAAGC,IAAAA,mBAAAA,EAAaJ,MAAMK,OAAO,IAAIJ,mBAAmBH,YAAY,EAAEE,MAAMM,IAAI,CAACH,SAAS;IAC5G;IAEAI,IAAAA,2CAAAA,EAA+BP;IAE/B,OAAOA;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.5.8",
+  "version": "9.6.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,15 +20,15 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.5.3",
-    "@fluentui/react-divider": "^9.3.2",
+    "@fluentui/react-button": "^9.6.0",
+    "@fluentui/react-divider": "^9.4.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-context-selector": "^9.2.2",
-    "@fluentui/react-radio": "^9.4.7",
+    "@fluentui/react-radio": "^9.5.0",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },