@fluentui/react-toolbar 9.0.6 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,109 @@
   "name": "@fluentui/react-toolbar",
   "entries": [
     {
-      "date": "Mon, 13 Feb 2023 23:40:50 GMT",
+      "date": "Wed, 08 Mar 2023 17:39:16 GMT",
+      "tag": "@fluentui/react-toolbar_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "5207cd3464c2cff4b3ff2a84fcf96edada5e3677",
+            "comment": "feat: custom styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.2.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.11",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.1.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.5.4",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Feb 2023 11:44:52 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.7",
+      "version": "9.0.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.2.5",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.16",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.6.0",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.10",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.26",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.5.3",
+            "commit": "087d981aab96bef2e332a373069a19bc702a7ca2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 13 Feb 2023 23:43:14 GMT",
       "tag": "@fluentui/react-toolbar_v9.0.6",
       "version": "9.0.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Mon, 13 Feb 2023 23:40:50 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Mar 2023 17:39:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.0)
+
+Wed, 08 Mar 2023 17:39:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.7..@fluentui/react-toolbar_v9.1.0)
+
+### Minor changes
+
+- feat: custom styles ([PR #27083](https://github.com/microsoft/fluentui/pull/27083) by gcox@microsoft.com)
+- Bump @fluentui/react-button to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-divider to v9.2.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.11 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-radio to v9.1.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-tabster to v9.5.4 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
+## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.7)
+
+Wed, 15 Feb 2023 11:44:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.6..@fluentui/react-toolbar_v9.0.7)
+
+### Patches
+
+- Bump @fluentui/react-button to v9.2.5 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-divider to v9.1.16 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-utilities to v9.6.0 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.10 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-radio to v9.0.26 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-tabster to v9.5.3 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+
 ## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.6)
 
-Mon, 13 Feb 2023 23:40:50 GMT 
+Mon, 13 Feb 2023 23:43:14 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.5..@fluentui/react-toolbar_v9.0.6)
 
 ### Patches

package/lib/components/Toolbar/Toolbar.js

@@ -3,6 +3,7 @@ import { useToolbar_unstable } from './useToolbar';
 import { renderToolbar_unstable } from './renderToolbar';
 import { useToolbarStyles_unstable } from './useToolbarStyles';
 import { useToolbarContextValues_unstable } from './useToolbarContextValues';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Toolbar component
  */
@@ -10,6 +11,10 @@ export const Toolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbar_unstable(props, ref);
   const contextValues = useToolbarContextValues_unstable(state);
   useToolbarStyles_unstable(state);
+  const {
+    useToolbarStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderToolbar_unstable(state, contextValues);
 });
 Toolbar.displayName = 'Toolbar';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,gCAAgC,QAAQ,2BAA2B;AAE5E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGN,gCAAgC,CAACK,KAAK,CAAC;EAC7DN,yBAAyB,CAACM,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACM,WAAW,GAAG,SAAS","names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"]}
+{"version":3,"names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","useCustomStyleHooks_unstable","Toolbar","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n\n  useToolbarStyles_unstable(state);\n\n  const { useToolbarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGT,mBAAmB,CAACO,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGP,gCAAgC,CAACM,KAAK,CAAC;EAE7DP,yBAAyB,CAACO,KAAK,CAAC;EAEhC,MAAM;IAAEP,yBAAyB,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACrFO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,sBAAsB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACO,WAAW,GAAG,SAAS"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIrG,OAAO,MAAMC,cAAc,gBAAGF,aAAa,CAAkCG,SAAS,CAAiC;AAEvH,MAAMC,0BAA0B,GAAwB;EACtDC,IAAI,EAAE,QAAoB;EAC1BC,kBAAkB,EAAE,MAAM,IAAI;EAC9BC,WAAW,EAAE,MAAM,IAAI;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE;CAChB;AAED,OAAO,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FV,kBAAkB,CAACC,cAAc,EAAE,CAACU,GAAG,GAAGR,0BAA0B,KAAKO,QAAQ,CAACC,GAAG,CAAC,CAAC","names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"]}
+{"version":3,"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"sources":["../src/packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"mappings":"AAAA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIrG,OAAO,MAAMC,cAAc,gBAAGF,aAAa,CAAkCG,SAAS,CAAiC;AAEvH,MAAMC,0BAA0B,GAAwB;EACtDC,IAAI,EAAE,QAAoB;EAC1BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE;CAChB;AAED,OAAO,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FV,kBAAkB,CAACC,cAAc,EAAE,CAACU,GAAG,GAAGR,0BAA0B,KAAKO,QAAQ,CAACC,GAAG,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,cAAc,QAAQ,kBAAkB;AAEjD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,oBAACE,cAAc,CAACM,QAAQ;IAACC,KAAK,EAAEJ,aAAa,CAACK;EAAO,gBACnDV,oBAACM,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAAGJ,SAAS,CAACI,IAAI,CAACC,QAAQ,CAAc,CAC9C;AAE9B,CAAC","names":["React","getSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","slots","slotProps","Provider","value","toolbar","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","slots","slotProps","createElement","Provider","value","toolbar","root","children"],"sources":["../src/packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,cAAc,QAAQ,kBAAkB;AAEjD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAGA,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,cAAc,CAACO,QAAQ;IAACC,KAAK,EAAEL,aAAa,CAACM;EAAO,gBACnDX,KAAA,CAAAQ,aAAA,CAACF,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,GAAGL,SAAS,CAACK,IAAI,CAACC,QAAQ,CAAc,CAC9C;AAE9B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...(vertical && { 'aria-orientation': 'vertical' }),\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"]}
+{"version":3,"names":["useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"sources":["../src/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...(vertical && { 'aria-orientation': 'vertical' }),\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,OAAM,SAAUA,gCAAgC,CAACC,KAAmB;EAClE,MAAM;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC,QAAQ;IAAEC,aAAa;IAAEC;EAAW,CAAE,GAAGL,KAAK;EAChF;EACA,MAAMM,OAAO,GAAwB;IACnCL,IAAI;IACJE,QAAQ;IACRD,kBAAkB;IAClBG,WAAW;IACXD;GACD;EAED,OAAO;IAAEE;EAAO,CAAE;AACpB","names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"]}
+{"version":3,"names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"sources":["../src/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,gCAAgCA,CAACC,KAAmB;EAClE,MAAM;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC,QAAQ;IAAEC,aAAa;IAAEC;EAAW,CAAE,GAAGL,KAAK;EAChF;EACA,MAAMM,OAAO,GAAwB;IACnCL,IAAI;IACJE,QAAQ;IACRD,kBAAkB;IAClBG,WAAW;IACXD;GACD;EAED,OAAO;IAAEE;EAAO,CAAE;AACpB"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAoBhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAM;IAAEI,QAAQ;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAChCA,KAAK,CAACH,IAAI,CAACO,SAAS,GAAGV,YAAY,CACjCE,iBAAiB,CAACC,IAAI,EACtBI,MAAM,CAACJ,IAAI,EACXK,QAAQ,IAAID,MAAM,CAACC,QAAQ,EAC3BC,IAAI,KAAK,OAAO,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACI,KAAK,EAC7CF,IAAI,KAAK,QAAQ,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACK,MAAM,EAC/CH,IAAI,KAAK,OAAO,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACM,KAAK,EAC7CP,KAAK,CAACH,IAAI,CAACO,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","toolbarClassNames","root","useStyles","useToolbarStyles_unstable","state","styles","vertical","size","className","small","medium","large"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: {\n    height: '32px',\n  },\n  medium: {\n    height: '40px',\n  },\n  large: {\n    height: '48px',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","vertical","Beiy3e4","a9b677","small","Bqenvij","medium","large","d","useToolbarStyles_unstable","state","styles","size","className"],"sources":["../src/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: {\n    height: '32px',\n  },\n  medium: {\n    height: '40px',\n  },\n  large: {\n    height: '48px',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,EAoBhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGnB,SAAS,EAAE;EAC1B,MAAM;IAAES,QAAQ;IAAEW;EAAI,CAAE,GAAGF,KAAK;EAChCA,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAGzB,YAAY,CACjCE,iBAAiB,CAACC,IAAI,EACtBoB,MAAM,CAACpB,IAAI,EACXU,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAC3BW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAC7CQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,MAAM,EAC/CM,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACJ,KAAK,EAC7CG,KAAK,CAACnB,IAAI,CAACsB,SAAS,CACrB;EAED,OAAOH,KAAK;AACd,CAAC"}

package/lib/components/ToolbarButton/ToolbarButton.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { renderButton_unstable } from '@fluentui/react-button';
 import { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';
 import { useToolbarButton_unstable } from './useToolbarButton';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ToolbarButton component is a Button to be used inside Toolbar
  * which will respect toolbar props such as `size`
@@ -9,6 +10,10 @@ import { useToolbarButton_unstable } from './useToolbarButton';
 export const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarButton_unstable(props, ref);
   useToolbarButtonStyles_unstable(state);
+  const {
+    useToolbarButtonStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderButton_unstable(state);
   // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,yBAAyB,QAAQ,oBAAoB;AAE9D;;;;AAIA,OAAO,MAAMC,aAAa,gBAA4CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGL,yBAAyB,CAACG,KAAK,EAAEC,GAAG,CAAC;EACnDL,+BAA+B,CAACM,KAAK,CAAC;EAEtC,OAAOP,qBAAqB,CAACO,KAAK,CAAC;EACnC;AACF,CAAC,CAA4C;;AAE7CJ,aAAa,CAACK,WAAW,GAAG,eAAe","names":["React","renderButton_unstable","useToolbarButtonStyles_unstable","useToolbarButton_unstable","ToolbarButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarButton_unstable(props, ref);\n  useToolbarButtonStyles_unstable(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"]}
+{"version":3,"names":["React","renderButton_unstable","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useCustomStyleHooks_unstable","ToolbarButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarButton_unstable(props, ref);\n\n  useToolbarButtonStyles_unstable(state);\n\n  const { useToolbarButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;;AAIA,OAAO,MAAMC,aAAa,gBAA4CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGN,yBAAyB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAEnDN,+BAA+B,CAACO,KAAK,CAAC;EAEtC,MAAM;IAAEP,+BAA+B,EAAEQ;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC3FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,qBAAqB,CAACQ,KAAK,CAAC;EACnC;AACF,CAAC,CAA4C;;AAE7CJ,aAAa,CAACM,WAAW,GAAG,eAAe"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,kBAAkB,QAAQ,wBAAwB;AAG3D;;;;;;AAMA,OAAO,MAAMC,yBAAyB,GAAG,CACvCC,KAAyB,EACzBC,GAAqD,KAC/B;EACtB,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAE,GAAGC;EAAW,CAAE,GAAGH,KAAK;EAClD,MAAMI,KAAK,GAAGN,kBAAkB,CAAC;IAAEO,UAAU,EAAE,QAAQ;IAAE,GAAGF;EAAW,CAAE,EAAEF,GAAG,CAAC;EAC/E,OAAO;IACLC,QAAQ;IACR,GAAGE;GACJ;AACH,CAAC","names":["useButton_unstable","useToolbarButton_unstable","props","ref","vertical","buttonProps","state","appearance"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable({ appearance: 'subtle', ...buttonProps }, ref);\n  return {\n    vertical,\n    ...state,\n  };\n};\n"]}
+{"version":3,"names":["useButton_unstable","useToolbarButton_unstable","props","ref","vertical","buttonProps","state","appearance"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable({ appearance: 'subtle', ...buttonProps }, ref);\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"mappings":"AACA,SAASA,kBAAkB,QAAQ,wBAAwB;AAG3D;;;;;;AAMA,OAAO,MAAMC,yBAAyB,GAAGA,CACvCC,KAAyB,EACzBC,GAAqD,KAC/B;EACtB,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAE,GAAGC;EAAW,CAAE,GAAGH,KAAK;EAClD,MAAMI,KAAK,GAAGN,kBAAkB,CAAC;IAAEO,UAAU,EAAE,QAAQ;IAAE,GAAGF;EAAW,CAAE,EAAEF,GAAG,CAAC;EAC/E,OAAO;IACLC,QAAQ;IACR,GAAGE;GACJ;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AAGjE,MAAMC,aAAa,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAOpB;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAI;EAC3EH,wBAAwB,CAACG,KAAK,CAAC;EAC/B,MAAMC,YAAY,GAAGH,aAAa,EAAE;EAEpCE,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGP,YAAY,CAACI,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,QAAQ,IAAIH,YAAY,CAACG,QAAQ,CAAC;EAClG,IAAIJ,KAAK,CAACK,IAAI,EAAE;IACdL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGP,YAAY,CAACI,KAAK,CAACK,IAAI,CAACF,SAAS,EAAEH,KAAK,CAACI,QAAQ,IAAIH,YAAY,CAACK,YAAY,CAAC;;AAE1G,CAAC","names":["mergeClasses","useButtonStyles_unstable","useBaseStyles","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","vertical","icon","verticalIcon"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  useButtonStyles_unstable(state);\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);\n  }\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","d","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  useButtonStyles_unstable(state);\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);\n  }\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AAGjE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAOpB;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAI;EAC3ER,wBAAwB,CAACQ,KAAK,CAAC;EAC/B,MAAMC,YAAY,GAAGR,aAAa,EAAE;EAEpCO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACN,QAAQ,IAAIO,YAAY,CAACP,QAAQ,CAAC;EAClG,IAAIM,KAAK,CAACI,IAAI,EAAE;IACdJ,KAAK,CAACI,IAAI,CAACD,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,IAAI,CAACD,SAAS,EAAEH,KAAK,CAACN,QAAQ,IAAIO,YAAY,CAACL,YAAY,CAAC;;AAE1G,CAAC"}

package/lib/components/ToolbarDivider/ToolbarDivider.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';
 import { renderDivider_unstable } from '@fluentui/react-divider';
 import { useToolbarDivider_unstable } from './useToolbarDivider';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ToolbarDivider component
  */
 export const ToolbarDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarDivider_unstable(props, ref);
   useToolbarDividerStyles_unstable(state);
+  const {
+    useToolbarDividerStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderDivider_unstable(state);
 });
 ToolbarDivider.displayName = 'ToolbarDivider';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gCAAgC,QAAQ,2BAA2B;AAG5E,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGL,0BAA0B,CAACG,KAAK,EAAEC,GAAG,CAAC;EACpDN,gCAAgC,CAACO,KAAK,CAAC;EACvC,OAAON,sBAAsB,CAACM,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,cAAc,CAACK,WAAW,GAAG,gBAAgB","names":["React","useToolbarDividerStyles_unstable","renderDivider_unstable","useToolbarDivider_unstable","ToolbarDivider","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarDivider_unstable(props, ref);\n  useToolbarDividerStyles_unstable(state);\n  return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"]}
+{"version":3,"names":["React","useToolbarDividerStyles_unstable","renderDivider_unstable","useToolbarDivider_unstable","useCustomStyleHooks_unstable","ToolbarDivider","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarDivider_unstable(props, ref);\n\n  useToolbarDividerStyles_unstable(state);\n\n  const { useToolbarDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gCAAgC,QAAQ,2BAA2B;AAG5E,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGN,0BAA0B,CAACI,KAAK,EAAEC,GAAG,CAAC;EAEpDP,gCAAgC,CAACQ,KAAK,CAAC;EAEvC,MAAM;IAAER,gCAAgC,EAAES;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC5FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,sBAAsB,CAACO,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,cAAc,CAACM,WAAW,GAAG,gBAAgB"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,SAASA,mBAAmB,QAAQ,yBAAyB;AAC7D,SAASC,0BAA0B,QAAQ,2BAA2B;AAEtE;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,QAAQ,GAAGJ,0BAA0B,CAACK,GAAG,IAAIA,GAAG,CAACD,QAAQ,CAAC;EAChE,OAAOL,mBAAmB,CAAC;IAAEK,QAAQ,EAAE,CAACA,QAAQ;IAAE,GAAGF;EAAK,CAAE,EAAEC,GAAG,CAAC;AACpE,CAAC","names":["useDivider_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","vertical","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n  props: ToolbarDividerProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"]}
+{"version":3,"names":["useDivider_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","vertical","ctx"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n  props: ToolbarDividerProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,yBAAyB;AAC7D,SAASC,0BAA0B,QAAQ,2BAA2B;AAEtE;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,QAAQ,GAAGJ,0BAA0B,CAACK,GAAG,IAAIA,GAAG,CAACD,QAAQ,CAAC;EAChE,OAAOL,mBAAmB,CAAC;IAAEK,QAAQ,EAAE,CAACA,QAAQ;IAAE,GAAGF;EAAK,CAAE,EAAEC,GAAG,CAAC;AACpE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,yBAAyB,QAAQ,yBAAyB;AAGnE,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EASpB;AAEF;;;AAGA,OAAO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAyB;EAClGH,yBAAyB,CAACG,KAAK,CAAC;EAChC,MAAM;IAAEC;EAAQ,CAAE,GAAGD,KAAK;EAC1B,MAAME,oBAAoB,GAAGJ,aAAa,EAAE;EAC5CE,KAAK,CAACG,IAAI,CAACC,SAAS,GAAGR,YAAY,CACjCI,KAAK,CAACG,IAAI,CAACC,SAAS,EACpBF,oBAAoB,CAACC,IAAI,EACzB,CAACF,QAAQ,IAAIC,oBAAoB,CAACD,QAAQ,CAC3C;EACD,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useDividerStyles_unstable","useBaseStyles","useToolbarDividerStyles_unstable","state","vertical","toolbarDividerStyles","root","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    state.root.className,\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n  );\n  return state;\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","mc9l5x","B2u0y6b","vertical","d","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    state.root.className,\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n  );\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,yBAAyB,QAAQ,yBAAyB;AAGnE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,EASpB;AAEF;;;AAGA,OAAO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAyB;EAClGR,yBAAyB,CAACQ,KAAK,CAAC;EAChC,MAAM;IAAEH;EAAQ,CAAE,GAAGG,KAAK;EAC1B,MAAMC,oBAAoB,GAAGR,aAAa,EAAE;EAC5CO,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGX,YAAY,CACjCS,KAAK,CAACN,IAAI,CAACQ,SAAS,EACpBD,oBAAoB,CAACP,IAAI,EACzB,CAACG,QAAQ,IAAII,oBAAoB,CAACJ,QAAQ,CAC3C;EACD,OAAOG,KAAK;AACd,CAAC"}

package/lib/components/ToolbarGroup/ToolbarGroup.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useToolbarGroup_unstable } from './useToolbarGroup';
 import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';
 import { renderToolbarGroup_unstable } from './renderToolbarGroup';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ToolbarGroup component is a Button to be used inside Toolbar
  * which will respect toolbar props such as `size`
@@ -9,6 +10,10 @@ import { renderToolbarGroup_unstable } from './renderToolbarGroup';
 export const ToolbarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarGroup_unstable(props, ref);
   useToolbarGroupStyles_unstable(state);
+  const {
+    useToolbarGroupStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderToolbarGroup_unstable(state);
   // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,2BAA2B,QAAQ,sBAAsB;AAElE;;;;AAIA,OAAO,MAAMC,YAAY,gBAA2CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGP,wBAAwB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAClDL,8BAA8B,CAACM,KAAK,CAAC;EACrC,OAAOL,2BAA2B,CAACK,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CJ,YAAY,CAACK,WAAW,GAAG,cAAc","names":["React","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable","ToolbarGroup","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n  useToolbarGroupStyles_unstable(state);\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"]}
+{"version":3,"names":["React","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable","useCustomStyleHooks_unstable","ToolbarGroup","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n\n  useToolbarGroupStyles_unstable(state);\n\n  const { useToolbarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;;AAIA,OAAO,MAAMC,YAAY,gBAA2CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGR,wBAAwB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAElDN,8BAA8B,CAACO,KAAK,CAAC;EAErC,MAAM;IAAEP,8BAA8B,EAAEQ;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC1FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAON,2BAA2B,CAACM,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CJ,YAAY,CAACM,WAAW,GAAG,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,2BAA2B,GAAIC,KAAwB,IAAI;EACtE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAoBE,KAAK,CAAC;EAE/D,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAAGD,SAAS,CAACC,IAAI,CAACC,QAAQ,CAAc;AAC/E,CAAC","names":["React","getSlots","renderToolbarGroup_unstable","state","slots","slotProps","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n  const { slots, slotProps } = getSlots<ToolbarGroupSlots>(state);\n\n  return <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>;\n};\n"]}
+{"version":3,"names":["React","getSlots","renderToolbarGroup_unstable","state","slots","slotProps","createElement","root","children"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n  const { slots, slotProps } = getSlots<ToolbarGroupSlots>(state);\n\n  return <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,2BAA2B,GAAIC,KAAwB,IAAI;EACtE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAoBE,KAAK,CAAC;EAE/D,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAAGF,SAAS,CAACE,IAAI,CAACC,QAAQ,CAAc;AAC/E,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,qBAAqB,QAAQ,2BAA2B;AAIjE;;;;;AAKA,OAAO,MAAMC,wBAAwB,GAAG,CACtCC,KAAwB,EACxBC,GAA8B,KACT;EACrB,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEL,qBAAqB,CAAuC,KAAK,EAAE;MACvEG,GAAG;MACHG,IAAI,EAAE,cAAc;MACpB,GAAGJ;KACJ;GACF;AACH,CAAC","names":["getNativeElementProps","useToolbarGroup_unstable","props","ref","components","root","role"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n      ref,\n      role: 'presentation',\n      ...props,\n    }),\n  };\n};\n"]}
+{"version":3,"names":["getNativeElementProps","useToolbarGroup_unstable","props","ref","components","root","role"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n      ref,\n      role: 'presentation',\n      ...props,\n    }),\n  };\n};\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,2BAA2B;AAIjE;;;;;AAKA,OAAO,MAAMC,wBAAwB,GAAGA,CACtCC,KAAwB,EACxBC,GAA8B,KACT;EACrB,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEL,qBAAqB,CAAuC,KAAK,EAAE;MACvEG,GAAG;MACHG,IAAI,EAAE,cAAc;MACpB,GAAGJ;KACJ;GACF;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,sBAAsB,GAAsC;EACvEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKhB;AAEF;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5F,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAEnG,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","toolbarGroupClassNames","root","useStyles","useToolbarGroupStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.gap('8px'),\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","toolbarGroupClassNames","root","useStyles","mc9l5x","i8kkvl","Belr9w4","d","useToolbarGroupStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.gap('8px'),\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,sBAAsB,GAAsC;EACvEC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAKhB;AAEF;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5F,MAAMC,MAAM,GAAGP,SAAS,EAAE;EAC1BM,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGZ,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EAEnG,OAAOF,KAAK;AACd,CAAC"}

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { renderToggleButton_unstable } from '@fluentui/react-button';
 import { useToolbarRadioButton_unstable } from './useToolbarRadioButton';
 import { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ToolbarRadioButton component
  */
 export const ToolbarRadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarRadioButton_unstable(props, ref);
   useToolbarRadioButtonStyles_unstable(state);
+  const {
+    useToolbarRadioButtonStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderToggleButton_unstable(state);
 });
 ToolbarRadioButton.displayName = 'ToolbarRadioButton';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,oCAAoC,QAAQ,+BAA+B;AAEpF;;;AAGA,OAAO,MAAMC,kBAAkB,gBAAiDJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9G,MAAMC,KAAK,GAAGN,8BAA8B,CAACI,KAAK,EAAEC,GAAG,CAAC;EAExDJ,oCAAoC,CAACK,KAAK,CAAC;EAC3C,OAAOP,2BAA2B,CAACO,KAAK,CAAC;AAC3C,CAAC,CAAiD;AAElDJ,kBAAkB,CAACK,WAAW,GAAG,oBAAoB","names":["React","renderToggleButton_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable","ToolbarRadioButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n\n  useToolbarRadioButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"]}
+{"version":3,"names":["React","renderToggleButton_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable","useCustomStyleHooks_unstable","ToolbarRadioButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n\n  useToolbarRadioButtonStyles_unstable(state);\n\n  const { useToolbarRadioButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,oCAAoC,QAAQ,+BAA+B;AACpF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,kBAAkB,gBAAiDL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9G,MAAMC,KAAK,GAAGP,8BAA8B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAExDL,oCAAoC,CAACM,KAAK,CAAC;EAE3C,MAAM;IAAEN,oCAAoC,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAChGM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,2BAA2B,CAACQ,KAAK,CAAC;AAC3C,CAAC,CAAiD;AAElDJ,kBAAkB,CAACM,WAAW,GAAG,oBAAoB"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,0BAA0B,QAAQ,2BAA2B;AAGtE;;;;;;AAMA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAAqD,KAC1B;EAC3B,MAAMC,WAAW,GAAGJ,0BAA0B,CAACK,GAAG,IAAIA,GAAG,CAACD,WAAW,CAAC;EACtE,MAAME,OAAO,GAAGN,0BAA0B,CAACK,GAAG,IAAG;IAAA;IAAC,QAAC,EAAC,SAAG,CAACE,aAAa,CAACL,KAAK,CAACM,IAAI,CAAC,0CAAEC,QAAQ,CAACP,KAAK,CAACQ,KAAK,CAAC;EAAA,EAAC;EACzG,MAAMC,IAAI,GAAGX,0BAA0B,CAACK,GAAG,IAAIA,GAAG,CAACM,IAAI,CAAC;EAExD,MAAM;IAAEC,OAAO,EAAEC;EAAe,CAAE,GAAGX,KAAK;EAC1C,MAAMY,iBAAiB,GAAGf,wBAAwB,CAChD;IAAEY,IAAI;IAAEL,OAAO;IAAES,IAAI,EAAE,OAAO;IAAE,cAAc,EAAET,OAAO;IAAE,GAAGJ;EAAK,CAAE,EACnEC,GAAG,CACJ;EACD,MAAMa,KAAK,GAA4B;IACrC,GAAGF,iBAAiB;IACpBN,IAAI,EAAEN,KAAK,CAACM,IAAI;IAChBE,KAAK,EAAER,KAAK,CAACQ;GACd;EAED,MAAMO,aAAa,GAAGnB,gBAAgB,CACnCoB,CAAoG,IAAI;IACvGd,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGc,CAAC,EAAEF,KAAK,CAACR,IAAI,EAAEQ,KAAK,CAACN,KAAK,EAAEM,KAAK,CAACV,OAAO,CAAC;IACxDO,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGK,CAAC,CAAC;EACtB,CAAC,CACF;EACDF,KAAK,CAACG,IAAI,CAAC,cAAc,CAAC,GAAGC,SAAS;EACtCJ,KAAK,CAACG,IAAI,CAACP,OAAO,GAAGK,aAAa;EAClC,OAAOD,KAAK;AACd,CAAC","names":["useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","handleRadio","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","role","state","handleOnClick","e","root","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable(\n    { size, checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n  state.root['aria-pressed'] = undefined;\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"]}
+{"version":3,"names":["useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","handleRadio","ctx","checked","_a","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","role","state","handleOnClick","e","root","undefined"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable(\n    { size, checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n  state.root['aria-pressed'] = undefined;\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,0BAA0B,QAAQ,2BAA2B;AAGtE;;;;;;AAMA,OAAO,MAAMC,8BAA8B,GAAGA,CAC5CC,KAA8B,EAC9BC,GAAqD,KAC1B;EAC3B,MAAMC,WAAW,GAAGJ,0BAA0B,CAACK,GAAG,IAAIA,GAAG,CAACD,WAAW,CAAC;EACtE,MAAME,OAAO,GAAGN,0BAA0B,CAACK,GAAG,IAAG;IAAA,IAAAE,EAAA;IAAC,QAAC,EAAC,CAAAA,EAAA,GAAAF,GAAG,CAACG,aAAa,CAACN,KAAK,CAACO,IAAI,CAAC,cAAAF,EAAA,uBAAAA,EAAA,CAAEG,QAAQ,CAACR,KAAK,CAACS,KAAK,CAAC;EAAA,EAAC;EACzG,MAAMC,IAAI,GAAGZ,0BAA0B,CAACK,GAAG,IAAIA,GAAG,CAACO,IAAI,CAAC;EAExD,MAAM;IAAEC,OAAO,EAAEC;EAAe,CAAE,GAAGZ,KAAK;EAC1C,MAAMa,iBAAiB,GAAGhB,wBAAwB,CAChD;IAAEa,IAAI;IAAEN,OAAO;IAAEU,IAAI,EAAE,OAAO;IAAE,cAAc,EAAEV,OAAO;IAAE,GAAGJ;EAAK,CAAE,EACnEC,GAAG,CACJ;EACD,MAAMc,KAAK,GAA4B;IACrC,GAAGF,iBAAiB;IACpBN,IAAI,EAAEP,KAAK,CAACO,IAAI;IAChBE,KAAK,EAAET,KAAK,CAACS;GACd;EAED,MAAMO,aAAa,GAAGpB,gBAAgB,CACnCqB,CAAoG,IAAI;IACvGf,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGe,CAAC,EAAEF,KAAK,CAACR,IAAI,EAAEQ,KAAK,CAACN,KAAK,EAAEM,KAAK,CAACX,OAAO,CAAC;IACxDQ,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGK,CAAC,CAAC;EACtB,CAAC,CACF;EACDF,KAAK,CAACG,IAAI,CAAC,cAAc,CAAC,GAAGC,SAAS;EACtCJ,KAAK,CAACG,IAAI,CAACP,OAAO,GAAGK,aAAa;EAClC,OAAOD,KAAK;AACd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,mBAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AAGvE,MAAMC,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIpB;AAEF;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAAI;EACrFH,8BAA8B,CAACG,KAAK,CAAC;EACrC,MAAMC,kBAAkB,GAAGH,aAAa,EAAE;EAE1CE,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGP,YAAY,CAACI,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACI,QAAQ,CAAC;AACzG,CAAC","names":["tokens","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","selected"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"]}
+{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","sj55zd","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AAGvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAIpB;AAEF;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAAI;EACrFN,8BAA8B,CAACM,KAAK,CAAC;EACrC,MAAMC,kBAAkB,GAAGN,aAAa,EAAE;EAE1CK,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGV,YAAY,CAACO,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACL,QAAQ,CAAC;AACzG,CAAC"}

package/lib/components/ToolbarRadioGroup/ToolbarRadioGroup.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { renderToolbarGroup_unstable, useToolbarGroupStyles_unstable, useToolbarGroup_unstable } from '../../ToolbarGroup';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ToolbarRadioGroup component is a Button to be used inside Toolbar
  * which will respect toolbar props such as `size`
@@ -10,6 +11,10 @@ export const ToolbarRadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...props
   }, ref);
   useToolbarGroupStyles_unstable(state);
+  const {
+    useToolbarGroupStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderToolbarGroup_unstable(state);
   // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SACEC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,oBAAoB;AAE3B;;;;AAIA,OAAO,MAAMC,iBAAiB,gBAAgDJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5G,MAAMC,KAAK,GAAGL,wBAAwB,CAAC;IAAEM,IAAI,EAAE,YAAY;IAAE,GAAGH;EAAK,CAAE,EAAEC,GAAG,CAAC;EAC7EL,8BAA8B,CAACM,KAAK,CAAC;EACrC,OAAOP,2BAA2B,CAACO,KAAK,CAAC;EACzC;AACF,CAAC,CAAgD;;AAEjDJ,iBAAiB,CAACM,WAAW,GAAG,mBAAmB","names":["React","renderToolbarGroup_unstable","useToolbarGroupStyles_unstable","useToolbarGroup_unstable","ToolbarRadioGroup","forwardRef","props","ref","state","role","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioGroupProps } from './ToolbarRadioGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  renderToolbarGroup_unstable,\n  useToolbarGroupStyles_unstable,\n  useToolbarGroup_unstable,\n} from '../../ToolbarGroup';\n\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: ForwardRefComponent<ToolbarRadioGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable({ role: 'radiogroup', ...props }, ref);\n  useToolbarGroupStyles_unstable(state);\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarRadioGroupProps>;\n\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n"]}
+{"version":3,"names":["React","renderToolbarGroup_unstable","useToolbarGroupStyles_unstable","useToolbarGroup_unstable","useCustomStyleHooks_unstable","ToolbarRadioGroup","forwardRef","props","ref","state","role","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioGroupProps } from './ToolbarRadioGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  renderToolbarGroup_unstable,\n  useToolbarGroupStyles_unstable,\n  useToolbarGroup_unstable,\n} from '../../ToolbarGroup';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\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: ForwardRefComponent<ToolbarRadioGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable({ role: 'radiogroup', ...props }, ref);\n\n  useToolbarGroupStyles_unstable(state);\n\n  const { useToolbarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarRadioGroupProps>;\n\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SACEC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,oBAAoB;AAC3B,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;;AAIA,OAAO,MAAMC,iBAAiB,gBAAgDL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5G,MAAMC,KAAK,GAAGN,wBAAwB,CAAC;IAAEO,IAAI,EAAE,YAAY;IAAE,GAAGH;EAAK,CAAE,EAAEC,GAAG,CAAC;EAE7EN,8BAA8B,CAACO,KAAK,CAAC;EAErC,MAAM;IAAEP,8BAA8B,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAC1FO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,2BAA2B,CAACQ,KAAK,CAAC;EACzC;AACF,CAAC,CAAgD;;AAEjDJ,iBAAiB,CAACO,WAAW,GAAG,mBAAmB"}

package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { renderToggleButton_unstable } from '@fluentui/react-button';
 import { useToolbarToggleButton_unstable } from './useToolbarToggleButton';
 import { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * ToolbarToggleButton component
  */
 export const ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarToggleButton_unstable(props, ref);
   useToolbarToggleButtonStyles_unstable(state);
+  const {
+    useToolbarToggleButtonStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderToggleButton_unstable(state);
 });
 ToolbarToggleButton.displayName = 'ToolbarToggleButton';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,qCAAqC,QAAQ,gCAAgC;AAEtF;;;AAGA,OAAO,MAAMC,mBAAmB,gBAAkDJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChH,MAAMC,KAAK,GAAGN,+BAA+B,CAACI,KAAK,EAAEC,GAAG,CAAC;EAEzDJ,qCAAqC,CAACK,KAAK,CAAC;EAC5C,OAAOP,2BAA2B,CAACO,KAAK,CAAC;AAC3C,CAAC,CAAkD;AAEnDJ,mBAAmB,CAACK,WAAW,GAAG,qBAAqB","names":["React","renderToggleButton_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable","ToolbarToggleButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"]}
+{"version":3,"names":["React","renderToggleButton_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable","useCustomStyleHooks_unstable","ToolbarToggleButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n\n  const { useToolbarToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,qCAAqC,QAAQ,gCAAgC;AACtF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,mBAAmB,gBAAkDL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChH,MAAMC,KAAK,GAAGP,+BAA+B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEzDL,qCAAqC,CAACM,KAAK,CAAC;EAE5C,MAAM;IAAEN,qCAAqC,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACjGM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,2BAA2B,CAACQ,KAAK,CAAC;AAC3C,CAAC,CAAkD;AAEnDJ,mBAAmB,CAACM,WAAW,GAAG,qBAAqB"}