@fluentui/react-toolbar 9.6.6 → 9.6.7

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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.styles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);\n\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","useCustomStyleHook_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"mappings":";;;;+BAYaM;;;;;;;iEAZU,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;yCAGrB,4BAA4B;qCACjC,kCAAkC;AAKvE,gBAAMA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,yDAAAA,EAAiCM;QAEvDP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles.styles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);\n\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","useCustomStyleHook_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;yCAGrB,4BAA4B;qCACjC,kCAAkC;AAKvE,MAAMM,UAAAA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,yDAAAA,EAAiCM;QAEvDP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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"],"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"mappings":";;;;;;;;;;;IAIaE,cAAAA;;;8BAUAQ;;;;sCAdsD,mCAAmC;AAI/F,2BAAuBV,mCAAAA,EAA+CG,WAA2C;AAExH,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,oBAAoB,IAAM;IAC1BC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe,CAAC;AAClB;AAEO,MAAMC,6BAA6B,CAAIC,eAC5CV,wCAAAA,EAAmBC,gBAAgB,CAACU,MAAMR,0BAA0B,GAAKO,SAASC,MAAM"}
+{"version":3,"sources":["../src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["'use client';\n\nimport { 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"],"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;kBAMaE;;;8BAUAQ;;;;sCAdsD,mCAAmC;AAI/F,MAAMR,qBAAiBF,mCAAAA,EAA+CG,WAA2C;AAExH,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,oBAAoB,IAAM;IAC1BC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe,CAAC;AAClB;AAEO,MAAMC,6BAA6B,CAAIC,eAC5CV,wCAAAA,EAAmBC,gBAAgB,CAACU,MAAMR,0BAA0B,GAAKO,SAASC,MAAM"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toolbar/useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState, getIntrinsicElementProps, slot } 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: slot.always(\n      getIntrinsicElementProps('div', {\n        role: 'toolbar',\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\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"],"names":["React","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":";;;;+BAcaM;;;;;;;iEAdU,QAAQ;gCACwD,4BAA4B;8BAE3E,0BAA0B;AAW3D,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,MAAMI,2BAAuBN,qCAAAA,EAAwB;QACnDO,UAAU;QACVC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9Be,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,KAAKA;YACL,GAAIE,YAAa;gBAAE,oBAAoB;YAAW,CAAW;YAC7D,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeb,MAAMa,aAAa;QAClCG,sBAAsBhB,MAAMgB,oBAAoB;QAChDF,sBAAsBd,MAAMc,oBAAoB;IAClD;IAEA,MAAMG,yBAAsCvB,gCAAAA,EAC1C,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe,CAACM,KAAAA,AAAK,KAAI,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,kBAA+BjC,gCAAAA,EACnC,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGb,YAAY;QACfU;QACAU;QACAd,eAAeA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCa;IAEA,MAAM,CAACf,eAAegB,iBAAiB,OAAGlC,oCAAAA,EAAqB;QAC7DiC,OAAOA,MAAMf,aAAa;QAC1BiB,cAAcF,MAAMZ,oBAAoB;QACxCT,cAAc,CAAC;IACjB;IACA,MAAM,EAAEO,sBAAsBiB,4BAA4B,EAAE,GAAGH;IAC/D,MAAMd,2BAA6DpB,gCAAAA,EAAiB,CAACwB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QAC5G,IAAIS,8BAA8B;YAChCA,6BAA6Bb,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAO,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACb,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAEA,OAAO;QAACT;QAAeC;KAAqB;AAC9C"}
+{"version":3,"sources":["../src/components/Toolbar/useToolbar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, useControllableState, getIntrinsicElementProps, slot } 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: slot.always(\n      getIntrinsicElementProps('div', {\n        role: 'toolbar',\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\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"],"names":["React","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":"AAAA;;;;;+BAgBaM;;;;;;;iEAdU,QAAQ;gCACwD,4BAA4B;8BAE3E,0BAA0B;AAW3D,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,MAAMI,2BAAuBN,qCAAAA,EAAwB;QACnDO,UAAU;QACVC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9Be,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,KAAKA;YACL,GAAIE,YAAa;gBAAE,oBAAoB;YAAW,CAAW;YAC7D,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeb,MAAMa,aAAa;QAClCG,sBAAsBhB,MAAMgB,oBAAoB;QAChDF,sBAAsBd,MAAMc,oBAAoB;IAClD;IAEA,MAAMG,yBAAsCvB,gCAAAA,EAC1C,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe,CAACM,KAAK,AAALA,KAAS,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,kBAA+BjC,gCAAAA,EACnC,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGb,YAAY;QACfU;QACAU;QACAd,eAAeA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCa;IAEA,MAAM,CAACf,eAAegB,iBAAiB,OAAGlC,oCAAAA,EAAqB;QAC7DiC,OAAOA,MAAMf,aAAa;QAC1BiB,cAAcF,MAAMZ,oBAAoB;QACxCT,cAAc,CAAC;IACjB;IACA,MAAM,EAAEO,sBAAsBiB,4BAA4B,EAAE,GAAGH;IAC/D,MAAMd,uBAA6DpB,oCAAAA,EAAiB,CAACwB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QAC5G,IAAIS,8BAA8B;YAChCA,6BAA6Bb,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAO,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACb,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAEA,OAAO;QAACT;QAAeC;KAAqB;AAC9C"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n    root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '4px 8px'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    },\n    small: {\n        padding: '0px 4px'\n    },\n    medium: {\n        padding: '4px 8px'\n    },\n    large: {\n        padding: '4px 20px'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { vertical, size } = state;\n    state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"mappings":";;;;;;;;;;;IACaE,iBAAiB;;;6BA2BY;eAAzBkB;;;uBA5BwB,gBAAgB;AAClD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,mCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEQ,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;IAChCA,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGvB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IAC1Q,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n    root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '4px 8px'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    },\n    small: {\n        padding: '0px 4px'\n    },\n    medium: {\n        padding: '4px 8px'\n    },\n    large: {\n        padding: '4px 20px'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { vertical, size } = state;\n    state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,iBAAiB;;;IA2BbkB,yBAAyB;;;;uBA5BD,gBAAgB;AAClD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,kCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEQ,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;IAChCA,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGvB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IAC1Q,OAAOH,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '4px 8px',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: { padding: '0px 4px' },\n  medium: { padding: '4px 8px' },\n  large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":";;;;;;;;;;;IAIaE,iBAAAA;;;IAyBAY,yBAAAA;;;;uBA5B4B,iBAAiB;AAGnD,0BAAwD;IAC7DX,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,kCAAkC,CAACQ;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3BA,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '4px 8px',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: { padding: '0px 4px' },\n  medium: { padding: '4px 8px' },\n  large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,iBAAAA;;;6BAyBAY;eAAAA;;;uBA5B4B,iBAAiB;AAGnD,0BAAwD;IAC7DX,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,kCAAkC,CAACQ;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3BA,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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.styles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('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"],"names":["React","renderButton_unstable","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useCustomStyleHook_unstable","ToolbarButton","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;6BAGO,yBAAyB;8CACf,kCAAkC;kCACxC,qBAAqB;qCACnB,kCAAkC;AAMvE,sBAAMA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQN,+CAAAA,EAA0BI,OAAOC;QAE/CN,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,kCAAAA,EAAsBQ;AAC7B,0FAA0F;AAC5F,GAA8C;AAE9CJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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.styles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('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"],"names":["React","renderButton_unstable","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useCustomStyleHook_unstable","ToolbarButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGO,yBAAyB;8CACf,kCAAkC;kCACxC,qBAAqB;qCACnB,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQN,2CAAAA,EAA0BI,OAAOC;QAE/CN,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,kCAAAA,EAAsBQ;AAC7B,0FAA0F;AAC5F,GAA8C;AAE9CJ,cAAcK,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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(\n    {\n      appearance: 'subtle',\n      ...buttonProps,\n      size: 'medium',\n    },\n    ref,\n  );\n\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"names":["React","useButton_unstable","useToolbarButton_unstable","props","ref","vertical","buttonProps","state","appearance","size"],"mappings":";;;;+BAUaE;;;;;;;iEAVU,QAAQ;6BACI,yBAAyB;AASrD,kCAAkC,CACvCC,OACAC;IAEA,MAAM,EAAEC,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGH;IAC7C,MAAMI,YAAQN,+BAAAA,EACZ;QACEO,YAAY;QACZ,GAAGF,WAAW;QACdG,MAAM;IACR,GACAL;IAGF,OAAO;QACLC;QACA,GAAGE,KAAK;IACV;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["'use client';\n\nimport * 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(\n    {\n      appearance: 'subtle',\n      ...buttonProps,\n      size: 'medium',\n    },\n    ref,\n  );\n\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"names":["React","useButton_unstable","useToolbarButton_unstable","props","ref","vertical","buttonProps","state","appearance","size"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACI,yBAAyB;AASrD,MAAME,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGH;IAC7C,MAAMI,YAAQN,+BAAAA,EACZ;QACEO,YAAY;QACZ,GAAGF,WAAW;QACdG,MAAM;IACR,GACAL;IAGF,OAAO;QACLC;QACA,GAAGE,KAAK;IACV;AACF,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    },\n    verticalIcon: {\n        fontSize: '24px',\n        margin: '0'\n    }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const buttonStyles = useBaseStyles();\n    state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":";;;;+BAaiBe,+BAA+B;;;;;;uBAbP,gBAAgB;6BAChB,wBAAwB;AACjE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,YAAY,GAAGd,aAAa,CAAC,CAAC;IACpCa,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACb,QAAQ,EAAEY,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IAClG,IAAIH,KAAK,CAACI,IAAI,EAAE;QACZJ,KAAK,CAACI,IAAI,CAACD,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACX,YAAY,EAAEU,KAAK,CAACI,IAAI,CAACD,SAAS,CAAC;IAC1G;QACAjB,qCAAwB,EAACc,KAAK,CAAC;AACnC,CAAC"}
+{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    },\n    verticalIcon: {\n        fontSize: '24px',\n        margin: '0'\n    }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const buttonStyles = useBaseStyles();\n    state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA,YAAY;;;;;+BAcKe,+BAA+B;;;;;;uBAbP,gBAAgB;6BAChB,wBAAwB;AACjE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,YAAY,GAAGd,aAAa,CAAC,CAAC;IACpCa,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACb,QAAQ,EAAEY,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IAClG,IAAIH,KAAK,CAACI,IAAI,EAAE;QACZJ,KAAK,CAACI,IAAI,CAACD,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACX,YAAY,EAAEU,KAAK,CAACI,IAAI,CAACD,SAAS,CAAC;IAC1G;QACAjB,qCAAwB,EAACc,KAAK,CAAC;AACnC,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n    margin: '0',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n  'use no memo';\n\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n  }\n\n  useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":";;;;+BAiBaS;;;;;;uBAjB4B,iBAAiB;6BACjB,yBAAyB;AAGlE,MAAMN,oBAAgBH,iBAAAA,EAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,GAAGZ,uBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;QAEAX,qCAAAA,EAAyBQ;AAC3B,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n    margin: '0',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n  'use no memo';\n\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n  }\n\n  useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA;;;;;;;;;;;uBAEyC,iBAAiB;6BACjB,yBAAyB;AAGlE,MAAMG,oBAAgBH,iBAAAA,EAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;QAEAX,qCAAAA,EAAyBQ;AAC3B,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';\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 { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarDividerStyles_unstable')(state);\n\n  return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"names":["React","useToolbarDividerStyles_unstable","renderDivider_unstable","useToolbarDivider_unstable","useCustomStyleHook_unstable","ToolbarDivider","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;+CACkB,mCAAmC;8BAG7C,0BAA0B;mCACtB,sBAAsB;qCACrB,kCAAkC;AAKvE,uBAAMA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQN,iDAAAA,EAA2BI,OAAOC;QAEhDP,+DAAAA,EAAiCQ;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,oCAAAA,EAAuBO;AAChC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';\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 { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarDividerStyles_unstable')(state);\n\n  return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"names":["React","useToolbarDividerStyles_unstable","renderDivider_unstable","useToolbarDivider_unstable","useCustomStyleHook_unstable","ToolbarDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+CACkB,mCAAmC;8BAG7C,0BAA0B;mCACtB,sBAAsB;qCACrB,kCAAkC;AAKvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQN,6CAAAA,EAA2BI,OAAOC;QAEhDP,+DAAAA,EAAiCQ;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,oCAAAA,EAAuBO;AAChC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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"],"names":["React","useDivider_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","vertical","ctx"],"mappings":";;;;+BAcaG;;;;;;;iEAdU,QAAQ;8BAEK,0BAA0B;gCACnB,4BAA4B;AAWhE,mCAAmC,CACxCC,OACAC;IAEA,MAAMC,eAAWJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAC/D,WAAOL,iCAAAA,EAAoB;QAAEK,UAAU,CAACA;QAAU,GAAGF,KAAK;IAAC,GAAGC;AAChE,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["React","useDivider_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","vertical","ctx"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BAEK,0BAA0B;gCACnB,4BAA4B;AAWhE,MAAMG,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,eAAWJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAC/D,WAAOL,iCAAAA,EAAoB;QAAEK,UAAU,CAACA;QAAU,GAAGF,KAAK;IAAC,GAAGC;AAChE,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = makeStyles({\n    // Base styles\n    root: {\n        display: 'inline-flex',\n        maxWidth: '1px',\n        padding: '0 12px'\n    },\n    vertical: {\n        maxWidth: 'initial'\n    }\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */ export const useToolbarDividerStyles_unstable = (state)=>{\n    'use no memo';\n    useDividerStyles_unstable(state);\n    const { vertical } = state;\n    const toolbarDividerStyles = useBaseStyles();\n    state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","mc9l5x","B2u0y6b","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","d","p","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":";;;;;;;eAeiBe,gCAAgC;;;uBAfR,gBAAgB;8BACf,yBAAyB;AACnE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;IACzD,aAAa;QACbd,uCAAyB,EAACc,KAAK,CAAC;IAChC,MAAM,EAAEJ,QAAAA,EAAU,GAAGI,KAAK;IAC1B,MAAMC,oBAAoB,GAAGd,aAAa,CAAC,CAAC;IAC5Ca,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACgB,oBAAoB,CAACb,IAAI,EAAE,CAACQ,QAAQ,IAAIK,oBAAoB,CAACL,QAAQ,EAAEI,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = makeStyles({\n    // Base styles\n    root: {\n        display: 'inline-flex',\n        maxWidth: '1px',\n        padding: '0 12px'\n    },\n    vertical: {\n        maxWidth: 'initial'\n    }\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */ export const useToolbarDividerStyles_unstable = (state)=>{\n    'use no memo';\n    useDividerStyles_unstable(state);\n    const { vertical } = state;\n    const toolbarDividerStyles = useBaseStyles();\n    state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","mc9l5x","B2u0y6b","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","d","p","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":"AAAA,YAAY;;;;;+BAgBKe,gCAAgC;;;;;;uBAfR,gBAAgB;8BACf,yBAAyB;AACnE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;IACzD,aAAa;QACbd,uCAAyB,EAACc,KAAK,CAAC;IAChC,MAAM,EAAEJ,QAAAA,EAAU,GAAGI,KAAK;IAC1B,MAAMC,oBAAoB,GAAGd,aAAa,CAAC,CAAC;IAC5Ca,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACgB,oBAAoB,CAACb,IAAI,EAAE,CAACQ,QAAQ,IAAIK,oBAAoB,CAACL,QAAQ,EAAEI,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n    padding: '0 12px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  'use no memo';\n\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","display","maxWidth","padding","vertical","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":";;;;+BAmBaS;;;;;;uBAnB4B,iBAAiB;8BAChB,0BAA0B;AAGpE,MAAMN,oBAAgBH,iBAAAA,EAAW;IAC/B,cAAc;IACdI,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAKO,yCAAyC,CAACI;IAC/C;QAEAR,uCAAAA,EAA0BQ;IAC1B,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,uBAAuBR;IAC7BO,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EACrBU,qBAAqBP,IAAI,EACzB,CAACI,YAAYG,qBAAqBH,QAAQ,EAC1CE,MAAMN,IAAI,CAACQ,SAAS;IAEtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n    padding: '0 12px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  'use no memo';\n\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","display","maxWidth","padding","vertical","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":"AAAA;;;;;+BAqBaS;;;;;;uBAnB4B,iBAAiB;8BAChB,0BAA0B;AAGpE,MAAMN,oBAAgBH,iBAAAA,EAAW;IAC/B,cAAc;IACdI,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAKO,yCAAyC,CAACI;IAC/C;QAEAR,uCAAAA,EAA0BQ;IAC1B,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,uBAAuBR;IAC7BO,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EACrBU,qBAAqBP,IAAI,EACzB,CAACI,YAAYG,qBAAqBH,QAAQ,EAC1CE,MAAMN,IAAI,CAACQ,SAAS;IAEtB,OAAOF;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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.styles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(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"],"names":["React","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarGroup","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;iCAGU,oBAAoB;6CACd,iCAAiC;oCACpC,uBAAuB;qCACvB,kCAAkC;AAMvE,qBAAMA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,6CAAAA,EAAyBM,OAAOC;QAE9CN,2DAAAA,EAA+BO;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAON,+CAAAA,EAA4BM;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * 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.styles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(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"],"names":["React","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAGU,oBAAoB;6CACd,iCAAiC;oCACpC,uBAAuB;qCACvB,kCAAkC;AAMvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CN,2DAAAA,EAA+BO;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAON,+CAAAA,EAA4BM;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type { 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  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","vertical","ctx","components","root","always","role","elementType"],"mappings":";;;;+BAWaI;;;;;;;gCAXkC,4BAA4B;iEACpD,QAAQ;gCAEY,4BAA4B;AAQhE,iCAAiC,CACtCC,OACAC;IAEA,MAAMC,eAAWJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAA+D,OAAO;YACpEM;YACAM,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type { 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  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;gCAE+C,4BAA4B;iEACpD,QAAQ;gCAEY,4BAA4B;AAQhE,MAAMI,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,eAAWJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAA+D,OAAO;YACpEM;YACAM,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const { vertical } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IACaE,sBAAsB;;;IAelBS,8BAA8B;;;;uBAhBN,gBAAgB;AAClD,+BAA+B;IAClCR,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGb,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const { vertical } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAeY;eAA9BS;;;uBAhBwB,gBAAgB;AAClD,+BAA+B;IAClCR,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGb,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  const { vertical } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    toolbarGroupClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAKaE,sBAAAA;;;kCAkBAQ;;;;uBAtB4B,iBAAiB;AAInD,+BAAkE;IACvEP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAKO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEfO,MAAMR,IAAI,CAACU,SAAS,OAAGZ,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  const { vertical } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    toolbarGroupClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaE,sBAAAA;;;IAkBAQ,8BAAAA;;;;uBAtB4B,iBAAiB;AAInD,+BAAkE;IACvEP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEfO,MAAMR,IAAI,CAACU,SAAS,OAAGZ,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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.styles';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarRadioButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"names":["React","renderToggleButton_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable","useCustomStyleHook_unstable","ToolbarRadioButton","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;6BAGa,yBAAyB;uCACtB,0BAA0B;mDACpB,uCAAuC;qCAChD,kCAAkC;AAKvE,2BAAMA,WAAAA,GAAmEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,QAAQP,yDAAAA,EAA+BK,OAAOC;QAEpDL,uEAAAA,EAAqCM;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOR,wCAAAA,EAA4BQ;AACrC,GAAmD;AAEnDJ,mBAAmBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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.styles';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarRadioButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"names":["React","renderToggleButton_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable","useCustomStyleHook_unstable","ToolbarRadioButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGa,yBAAyB;uCACtB,0BAA0B;mDACpB,uCAAuC;qCAChD,kCAAkC;AAKvE,MAAMK,qBAAAA,WAAAA,GAAmEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,YAAQP,qDAAAA,EAA+BK,OAAOC;QAEpDL,uEAAAA,EAAqCM;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOR,wCAAAA,EAA4BQ;AACrC,GAAmD;AAEnDJ,mBAAmBK,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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"],"names":["React","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"],"mappings":";;;;+BAYaI;;;;;;;iEAZU,QAAQ;gCACE,4BAA4B;6BACpB,yBAAyB;gCACvB,4BAA4B;AAShE,uCAAuC,CAC5CC,OACAC;IAEA,MAAMC,kBAAcJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,WAAW;IACrE,MAAME,cAAUN,0CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,KAAI,AAAC,MAAA,QAA7BH,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,MAAK;;IACvG,MAAMC,WAAOX,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIM,IAAI;IAEvD,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGX;IACrC,MAAMY,wBAAoBf,qCAAAA,EACxB;QAAEY;QAAML;QAASS,MAAM;QAAS,gBAAgBT;QAAS,GAAGJ,KAAK;IAAC,GAClEC;IAEF,MAAMa,QAAiC;QACrC,GAAGF,iBAAiB;QACpBN,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMO,oBAAgBnB,gCAAAA,EACpB,CAACoB;QACCd,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcc,GAAGF,MAAMR,IAAI,EAAEQ,MAAMN,KAAK,EAAEM,MAAMV,OAAO;QACvDO,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBK;IACpB;IAEFF,MAAMG,IAAI,CAAC,eAAe,GAAGC;IAC7BJ,MAAMG,IAAI,CAACP,OAAO,GAAGK;IACrB,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["React","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"],"mappings":"AAAA;;;;;+BAcaI;;;;;;;iEAZU,QAAQ;gCACE,4BAA4B;6BACpB,yBAAyB;gCACvB,4BAA4B;AAShE,uCAAuC,CAC5CC,OACAC;IAEA,MAAMC,kBAAcJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,WAAW;IACrE,MAAME,UAAUN,8CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,IAAI,CAAC,MAAA,QAA7BH,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,MAAK;;IACvG,MAAMC,WAAOX,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIM,IAAI;IAEvD,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGX;IACrC,MAAMY,wBAAoBf,qCAAAA,EACxB;QAAEY;QAAML;QAASS,MAAM;QAAS,gBAAgBT;QAAS,GAAGJ,KAAK;IAAC,GAClEC;IAEF,MAAMa,QAAiC;QACrC,GAAGF,iBAAiB;QACpBN,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMO,oBAAgBnB,gCAAAA,EACpB,CAACoB;QACCd,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcc,GAAGF,MAAMR,IAAI,EAAEQ,MAAMN,KAAK,EAAEM,MAAMV,OAAO;QACvDO,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBK;IACpB;IAEFF,MAAMG,IAAI,CAAC,eAAe,GAAGC;IAC7BJ,MAAMG,IAAI,CAACP,OAAO,GAAGK;IACrB,OAAOD;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground2Selected\n    },\n    iconSelected: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const toggleButtonStyles = useBaseStyles();\n    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n    }\n    useToggleButtonStyles_unstable(state);\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":";;;;+BAciBU,oCAAoC;;;;;;uBAbZ,gBAAgB;6BACV,wBAAwB;AACvE,MAAMN,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,8CAA8CE,KAAK,IAAG;IAC7D,aAAa;IACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground2Selected\n    },\n    iconSelected: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const toggleButtonStyles = useBaseStyles();\n    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n    }\n    useToggleButtonStyles_unstable(state);\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBAE6B,gBAAgB;6BACV,wBAAwB;AACvE,MAAMI,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,MAAMC,oCAAoC,IAAIC,KAAK,IAAG;IAC7D,aAAa;IACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,uBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":";;;;+BAoBaY;;;;;;4BApBU,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMR,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,6CAA6C,CAACE;IACnD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;;;;;;;;;;;4BAEuB,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMI,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,MAAMC,uCAAuC,CAACC;IACnD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,GAAGd,uBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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 { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(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"],"names":["React","renderToolbarGroup_unstable","useToolbarGroupStyles_unstable","useToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarRadioGroup","forwardRef","props","ref","state","role","displayName"],"mappings":";;;;+BAcaK;;;;;;;iEAdU,QAAQ;8BAOxB,qBAAqB;qCACgB,kCAAkC;AAMvE,0BAAMA,WAAAA,GAAiEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQN,sCAAAA,EAAyB;QAAEO,MAAM;QAAc,GAAGH,KAAK;IAAC,GAAGC;QAEzEN,4CAAAA,EAA+BO;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,yCAAAA,EAA4BQ;AACnC,0FAA0F;AAC5F,GAAkD;AAElDJ,kBAAkBM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(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"],"names":["React","renderToolbarGroup_unstable","useToolbarGroupStyles_unstable","useToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarRadioGroup","forwardRef","props","ref","state","role","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BAOxB,qBAAqB;qCACgB,kCAAkC;AAMvE,MAAMK,oBAAAA,WAAAA,GAAiEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQN,sCAAAA,EAAyB;QAAEO,MAAM;QAAc,GAAGH,KAAK;IAAC,GAAGC;QAEzEN,4CAAAA,EAA+BO;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,yCAAAA,EAA4BQ;AACnC,0FAA0F;AAC5F,GAAkD;AAElDJ,kBAAkBM,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../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.styles';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToolbarToggleButton","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;6BAGa,yBAAyB;wCACrB,2BAA2B;oDACrB,wCAAwC;qCAClD,kCAAkC;AAKvE,4BAAMA,WAAAA,GAAqEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,QAAQP,2DAAAA,EAAgCK,OAAOC;QAErDL,yEAAAA,EAAsCM;QAEtCL,gDAAAA,EAA4B,yCAAyCK;IAErE,WAAOR,wCAAAA,EAA4BQ;AACrC,GAAoD;AAEpDJ,oBAAoBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * 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.styles';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useToolbarToggleButtonStyles_unstable')(state);\n\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToolbarToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGa,yBAAyB;wCACrB,2BAA2B;oDACrB,wCAAwC;qCAClD,kCAAkC;AAKvE,MAAMK,sBAAAA,WAAAA,GAAqEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,YAAQP,uDAAAA,EAAgCK,OAAOC;QAErDL,yEAAAA,EAAsCM;QAEtCL,gDAAAA,EAA4B,yCAAyCK;IAErE,WAAOR,wCAAAA,EAA4BQ;AACrC,GAAoD;AAEpDJ,oBAAoBK,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"names":["React","useToggleButton_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","handleToggleButton","ctx","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"mappings":";;;;+BAWaG;;;;;;;iEAXU,QAAQ;6BACU,yBAAyB;gCACvB,4BAA4B;AAShE,wCAAwC,CAC7CC,OACAC;IAEA,MAAMC,yBAAqBJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,kBAAkB;IACnF,MAAME,cAAUN,0CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,KAAI,AAAC,MAAA,QAA7BH,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGV;IACrC,MAAMW,wBAAoBd,qCAAAA,EAAyB;QAAEO;QAAS,GAAGJ,KAAK;IAAC,GAAGC;IAC1E,MAAMW,QAAkC;QACtC,GAAGD,iBAAiB;QACpBL,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMK,gBAAgB,CACpBC;QAEA,IAAIF,MAAMG,QAAQ,EAAE;YAClBD,EAAEE,cAAc;YAChBF,EAAEG,eAAe;YACjB;QACF;QAEAf,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAqBY,GAAGF,MAAMN,IAAI,EAAEM,MAAMJ,KAAK,EAAEI,MAAMR,OAAO;QAC9DM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBI;IACpB;IAEAF,MAAMM,IAAI,CAACT,OAAO,GAAGI;IACrB,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"names":["React","useToggleButton_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","handleToggleButton","ctx","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"mappings":"AAAA;;;;;+BAaaG;;;;;;;iEAXU,QAAQ;6BACU,yBAAyB;gCACvB,4BAA4B;AAShE,wCAAwC,CAC7CC,OACAC;IAEA,MAAMC,yBAAqBJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,kBAAkB;IACnF,MAAME,cAAUN,0CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,KAAI,AAAC,MAAA,QAA7BH,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGV;IACrC,MAAMW,wBAAoBd,qCAAAA,EAAyB;QAAEO;QAAS,GAAGJ,KAAK;IAAC,GAAGC;IAC1E,MAAMW,QAAkC;QACtC,GAAGD,iBAAiB;QACpBL,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMK,gBAAgB,CACpBC;QAEA,IAAIF,MAAMG,QAAQ,EAAE;YAClBD,EAAEE,cAAc;YAChBF,EAAEG,eAAe;YACjB;QACF;QAEAf,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAqBY,GAAGF,MAAMN,IAAI,EAAEM,MAAMJ,KAAK,EAAEI,MAAMR,OAAO;QAC9DM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBI;IACpB;IAEAF,MAAMM,IAAI,CAACT,OAAO,GAAGI;IACrB,OAAOD;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground2Selected\n    },\n    iconSelected: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const toggleButtonStyles = useBaseStyles();\n    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n    }\n    useToggleButtonStyles_unstable(state);\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":";;;;+BAciBU,qCAAqC;;;;;;uBAbb,gBAAgB;6BACV,wBAAwB;AACvE,MAAMN,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,+CAA+CE,KAAK,IAAG;IAC9D,aAAa;IACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n    /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground2Selected\n    },\n    iconSelected: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const toggleButtonStyles = useBaseStyles();\n    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n    }\n    useToggleButtonStyles_unstable(state);\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBAE6B,gBAAgB;6BACV,wBAAwB;AACvE,MAAMI,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,MAAMC,qCAAqC,IAAIC,KAAK,IAAG;IAC9D,aAAa;IACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,uBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":";;;;+BAoBaY;;;;;;4BApBU,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMR,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,8CAA8C,CAACE;IACpD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n  selected: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground2Selected,\n  },\n\n  iconSelected: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n  'use no memo';\n\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n  }\n\n  useToggleButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;;;;;;;;;;;4BAEuB,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMI,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,GAAGd,uBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}