@fluentui/react-toolbar 9.7.7 → 9.8.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n  } & {\n    vertical?: boolean;\n  };\n\nexport type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> &\n  ButtonState &\n  Required<Pick<ToolbarButtonProps, 'vertical'>>;\n\nexport type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n  } & {\n    vertical?: boolean;\n  };\n\nexport type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> &\n  ButtonState &\n  Required<Pick<ToolbarButtonProps, 'vertical'>>;\n\nexport type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}

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

@@ -17,13 +17,12 @@ _export(exports, {
         return useToolbarButton_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactbutton = require("@fluentui/react-button");
 const useToolbarButton_unstable = (props, ref)=>{
-    const state = useToolbarButtonBase_unstable(props, ref);
+    const { appearance = 'subtle', ...baseProps } = props;
+    const state = useToolbarButtonBase_unstable(baseProps, ref);
     return {
-        appearance: 'subtle',
+        appearance,
         size: 'medium',
         shape: 'rounded',
         ...state
@@ -31,11 +30,7 @@ const useToolbarButton_unstable = (props, ref)=>{
 };
 const useToolbarButtonBase_unstable = (props, ref)=>{
     const { vertical = false, ...buttonProps } = props;
-    const state = (0, _reactbutton.useButton_unstable)({
-        appearance: 'subtle',
-        ...buttonProps,
-        size: 'medium'
-    }, ref);
+    const state = (0, _reactbutton.useButtonBase_unstable)(buttonProps, ref);
     return {
         vertical,
         ...state

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

@@ -1 +1 @@
-{"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 type {\n  ToolbarButtonBaseProps,\n  ToolbarButtonBaseState,\n  ToolbarButtonProps,\n  ToolbarButtonState,\n} 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 state = useToolbarButtonBase_unstable(props, ref);\n\n  return {\n    appearance: 'subtle',\n    size: 'medium',\n    shape: 'rounded',\n    ...state,\n  };\n};\n\n/**\n * Base hook that builds Toolbar Button state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarButtonBase_unstable = (\n  props: ToolbarButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonBaseState => {\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","state","useToolbarButtonBase_unstable","appearance","size","shape","vertical","buttonProps"],"mappings":"AAAA;;;;;;;;;;;;iCAuCaM;eAAAA;;6BAtBAJ;;;;;iEAfU,QAAQ;6BACI,yBAAyB;AAcrD,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,QAAQC,8BAA8BH,OAAOC;IAEnD,OAAO;QACLG,YAAY;QACZC,MAAM;QACNC,OAAO;QACP,GAAGJ,KAAK;IACV;AACF,EAAE;AAUK,sCAAsC,CAC3CF,OACAC;IAEA,MAAM,EAAEM,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGR;IAC7C,MAAME,YAAQJ,+BAAAA,EACZ;QACEM,YAAY;QACZ,GAAGI,WAAW;QACdH,MAAM;IACR,GACAJ;IAGF,OAAO;QACLM;QACA,GAAGL,KAAK;IACV;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useButtonBase_unstable } from '@fluentui/react-button';\nimport type {\n  ToolbarButtonBaseProps,\n  ToolbarButtonBaseState,\n  ToolbarButtonProps,\n  ToolbarButtonState,\n} 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 { appearance = 'subtle', ...baseProps } = props;\n  const state = useToolbarButtonBase_unstable(baseProps, ref);\n\n  return {\n    appearance,\n    size: 'medium',\n    shape: 'rounded',\n    ...state,\n  };\n};\n\n/**\n * Base hook that builds Toolbar Button state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarButtonBase_unstable = (\n  props: ToolbarButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonBaseState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"names":["useButtonBase_unstable","useToolbarButton_unstable","props","ref","appearance","baseProps","state","useToolbarButtonBase_unstable","size","shape","vertical","buttonProps"],"mappings":"AAAA;;;;;;;;;;;;IAwCaO,6BAAAA;;;6BAvBAN;;;;6BAd0B,yBAAyB;AAczD,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAChD,MAAMI,QAAQC,8BAA8BF,WAAWF;IAEvD,OAAO;QACLC;QACAI,MAAM;QACNC,OAAO;QACP,GAAGH,KAAK;IACV;AACF,EAAE;AAUK,sCAAsC,CAC3CJ,OACAC;IAEA,MAAM,EAAEO,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGT;IAC7C,MAAMI,YAAQN,mCAAAA,EAAuBW,aAAaR;IAElD,OAAO;QACLO;QACA,GAAGJ,KAAK;IACV;AACF,EAAE"}

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

@@ -38,8 +38,10 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useToolbarButtonStyles_unstable = (state)=>{
     'use no memo';
     const buttonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
     }
     (0, _reactbutton.useButtonStyles_unstable)(state);

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

@@ -1 +1 @@
-{"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"}
+{"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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\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;IACpC,oDAAA;IACAa,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;QACZ,oDAAA;QACAJ,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

@@ -23,8 +23,10 @@ const useBaseStyles = (0, _react.makeStyles)({
 const useToolbarButtonStyles_unstable = (state)=>{
     'use no memo';
     const buttonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
     }
     (0, _reactbutton.useButtonStyles_unstable)(state);

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

@@ -1 +1 @@
-{"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"}
+{"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 type { 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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\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;IAErB,oDAAoD;IACpDO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACd,oDAAoD;QACpDJ,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.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from '@fluentui/react-divider';\n\n/**\n * ToolbarDivider Props\n */\nexport type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {\n  /**\n   * A divider can be horizontal or vertical (default).\n   *\n   * @default true\n   */\n  vertical?: boolean;\n};\n\nexport type ToolbarDividerBaseProps = ToolbarDividerProps;\n\n/**\n * State used in rendering ToolbarDivider\n */\nexport type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;\n\nexport type ToolbarDividerBaseState = Omit<ToolbarDividerState, 'appearance'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState, DividerBaseState } from '@fluentui/react-divider';\n\n/**\n * ToolbarDivider Props\n */\nexport type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {\n  /**\n   * A divider can be horizontal or vertical (default).\n   *\n   * @default true\n   */\n  vertical?: boolean;\n};\n\nexport type ToolbarDividerBaseProps = ToolbarDividerProps;\n\n/**\n * State used in rendering ToolbarDivider\n */\nexport type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;\n\nexport type ToolbarDividerBaseState = ComponentState<Partial<DividerSlots>> & DividerBaseState;\n"],"names":[],"mappings":""}

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

@@ -17,20 +17,20 @@ _export(exports, {
         return useToolbarDivider_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactdivider = require("@fluentui/react-divider");
 const _ToolbarContext = require("../Toolbar/ToolbarContext");
 const useToolbarDivider_unstable = (props, ref)=>{
     const state = useToolbarDividerBase_unstable(props, ref);
     return {
-        ...state,
-        appearance: 'default'
+        alignContent: 'center',
+        appearance: 'default',
+        inset: false,
+        ...state
     };
 };
 const useToolbarDividerBase_unstable = (props, ref)=>{
     const vertical = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.vertical);
-    return (0, _reactdivider.useDivider_unstable)({
+    return (0, _reactdivider.useDividerBase_unstable)({
         vertical: !vertical,
         ...props
     }, ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  ToolbarDividerBaseProps,\n  ToolbarDividerBaseState,\n  ToolbarDividerProps,\n  ToolbarDividerState,\n} 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 state = useToolbarDividerBase_unstable(props, ref);\n  return {\n    ...state,\n    appearance: 'default',\n  };\n};\n\n/**\n * Base hook that builds ToolbarDivider state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDividerBase_unstable = (\n  props: ToolbarDividerBaseProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerBaseState => {\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","state","useToolbarDividerBase_unstable","appearance","vertical","ctx"],"mappings":"AAAA;;;;;;;;;;;;kCAwCaO;;;8BAnBAJ;;;;;iEAnBU,QAAQ;8BAOK,0BAA0B;gCACnB,4BAA4B;AAWhE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IACpD,OAAO;QACL,GAAGC,KAAK;QACRE,YAAY;IACd;AACF,EAAE;AAUK,MAAMD,iCAAiC,CAC5CH,OACAC;IAEA,MAAMI,eAAWP,0CAAAA,EAA2BQ,CAAAA,MAAOA,IAAID,QAAQ;IAC/D,WAAOR,iCAAAA,EAAoB;QAAEQ,UAAU,CAACA;QAAU,GAAGL,KAAK;IAAC,GAAGC;AAChE,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type {\n  ToolbarDividerBaseProps,\n  ToolbarDividerBaseState,\n  ToolbarDividerProps,\n  ToolbarDividerState,\n} from './ToolbarDivider.types';\nimport { useDividerBase_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 state = useToolbarDividerBase_unstable(props, ref);\n  return {\n    alignContent: 'center',\n    appearance: 'default',\n    inset: false,\n    ...state,\n  };\n};\n\n/**\n * Base hook that builds ToolbarDivider state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDividerBase_unstable = (\n  props: ToolbarDividerBaseProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerBaseState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDividerBase_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"names":["useDividerBase_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","state","useToolbarDividerBase_unstable","alignContent","appearance","inset","vertical","ctx"],"mappings":"AAAA;;;;;;;;;;;;IA0CaM,8BAAAA;;;8BArBAJ;;;;8BAZ2B,0BAA0B;gCACvB,4BAA4B;AAWhE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IACpD,OAAO;QACLG,cAAc;QACdC,YAAY;QACZC,OAAO;QACP,GAAGJ,KAAK;IACV;AACF,EAAE;AAUK,uCAAuC,CAC5CF,OACAC;IAEA,MAAMM,eAAWT,0CAAAA,EAA2BU,CAAAA,MAAOA,IAAID,QAAQ;IAC/D,WAAOV,qCAAAA,EAAwB;QAAEU,UAAU,CAACA;QAAU,GAAGP,KAAK;IAAC,GAAGC;AACpE,EAAE"}

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

@@ -42,6 +42,7 @@ const useToolbarDividerStyles_unstable = (state)=>{
     (0, _reactdivider.useDividerStyles_unstable)(state);
     const { vertical } = state;
     const toolbarDividerStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"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"}
+{"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    // eslint-disable-next-line react-hooks/immutability\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;IAC5C,oDAAA;IACAa,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

@@ -27,6 +27,7 @@ const useToolbarDividerStyles_unstable = (state)=>{
     (0, _reactdivider.useDividerStyles_unstable)(state);
     const { vertical } = state;
     const toolbarDividerStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"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"}
+{"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  // eslint-disable-next-line react-hooks/immutability\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;;;;;;;;;;;uBAEyC,iBAAiB;8BAChB,0BAA0B;AAGpE,MAAMG,oBAAgBH,iBAAAA,EAAW;IAC/B,cAAc;IACdI,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAKO,MAAMG,mCAAmC,CAACC;IAC/C;QAEAR,uCAAAA,EAA0BQ;IAC1B,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,uBAAuBR;IAC7B,oDAAoD;IACpDO,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/useToolbarGroup.js

@@ -17,8 +17,6 @@ _export(exports, {
         return useToolbarGroup_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _ToolbarContext = require("../Toolbar/ToolbarContext");
 const useToolbarGroup_unstable = (props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return useToolbarGroupBase_unstable(props, ref);\n};\n\n/**\n * Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarGroupBase_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":["React","getIntrinsicElementProps","slot","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;gCA4BaO;eAAAA;;4BAfAH;;;;;iEAXU,QAAQ;gCAGgB,4BAA4B;gCAChC,4BAA4B;AAOhE,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAUK,qCAAqC,CAC1CD,OACAC;IAEA,MAAME,eAAWL,0CAAAA,EAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return useToolbarGroupBase_unstable(props, ref);\n};\n\n/**\n * Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarGroupBase_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","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;gCA4BaM;eAAAA;;4BAfAH;;;;gCARkC,4BAA4B;gCAChC,4BAA4B;AAOhE,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAUK,qCAAqC,CAC1CD,OACAC;IAEA,MAAME,eAAWL,0CAAAA,EAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

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

@@ -42,6 +42,7 @@ const useToolbarGroupStyles_unstable = (state)=>{
     'use no memo';
     const { vertical } = state;
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"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"}
+{"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    // eslint-disable-next-line react-hooks/immutability\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;;;;uBAhBN,gBAAgB;AAClD,+BAA+B;IAClCC,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,MAAMC,kCAAkCC,KAAK,IAAG;IACvD,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAQ,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

@@ -35,6 +35,7 @@ const useToolbarGroupStyles_unstable = (state)=>{
     'use no memo';
     const { vertical } = state;
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { 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  // eslint-disable-next-line react-hooks/immutability\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;IAEf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,GAAGZ,uBAAAA,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.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\nexport type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n\nexport type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\nexport type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n\nexport type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}

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

@@ -17,19 +17,18 @@ _export(exports, {
         return useToolbarRadioButton_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactbutton = require("@fluentui/react-button");
 const _ToolbarContext = require("../Toolbar/ToolbarContext");
 const useToolbarRadioButton_unstable = (props, ref)=>{
-    const { appearance = 'secondary' } = props;
-    const size = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.size);
-    const state = useToolbarRadioButtonBase_unstable(props, ref);
+    const contextSize = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.size);
+    const { appearance = 'subtle', size = contextSize, ...baseProps } = props;
+    const state = useToolbarRadioButtonBase_unstable(baseProps, ref);
     return {
         ...state,
         appearance,
-        size: props.size || size
+        size,
+        shape: 'rounded'
     };
 };
 const useToolbarRadioButtonBase_unstable = (props, ref)=>{
@@ -39,7 +38,7 @@ const useToolbarRadioButtonBase_unstable = (props, ref)=>{
         return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
     });
     const { onClick: onClickOriginal } = props;
-    const toggleButtonState = (0, _reactbutton.useToggleButton_unstable)({
+    const toggleButtonState = (0, _reactbutton.useToggleButtonBase_unstable)({
         checked,
         role: 'radio',
         'aria-checked': checked,
@@ -54,7 +53,9 @@ const useToolbarRadioButtonBase_unstable = (props, ref)=>{
         handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
         onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
     });
+    // eslint-disable-next-line react-hooks/immutability
     state.root['aria-pressed'] = undefined;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.onClick = handleOnClick;
     return state;
 };

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

@@ -1 +1 @@
-{"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 type {\n  ToolbarRadioButtonProps,\n  ToolbarRadioButtonState,\n  ToolbarRadioButtonBaseProps,\n  ToolbarRadioButtonBaseState,\n} 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 { appearance = 'secondary' } = props;\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n  const state = useToolbarRadioButtonBase_unstable(props, ref);\n\n  return {\n    ...state,\n\n    appearance,\n    size: props.size || size,\n  };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarRadioButtonBase_unstable = (\n  props: ToolbarRadioButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable(\n    { checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\n  const state: ToolbarRadioButtonBaseState = {\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\n  return state;\n};\n"],"names":["React","useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","appearance","size","ctx","state","useToolbarRadioButtonBase_unstable","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;;;;;;;;;;;;IA2CaW,kCAAAA;;;kCAxBAP;;;;;iEAjBU,QAAQ;gCACE,4BAA4B;6BACpB,yBAAyB;gCACvB,4BAA4B;AAchE,MAAMA,iCAAiC,CAC5CC,OACAC;IAEA,MAAM,EAAEC,aAAa,WAAW,EAAE,GAAGF;IACrC,MAAMG,WAAOL,0CAAAA,EAA2BM,CAAAA,MAAOA,IAAID,IAAI;IACvD,MAAME,QAAQC,mCAAmCN,OAAOC;IAExD,OAAO;QACL,GAAGI,KAAK;QAERH;QACAC,MAAMH,MAAMG,IAAI,IAAIA;IACtB;AACF,EAAE;AAUK,2CAA2C,CAChDH,OACAC;IAEA,MAAMM,cAAcT,8CAAAA,EAA2BM,CAAAA,MAAOA,IAAIG,WAAW;IACrE,MAAMC,cAAUV,0CAAAA,EAA2BM,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIK,aAAa,CAACT,MAAMU,KAAI,AAAC,MAAA,QAA7BN,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BO,QAAQ,CAACX,MAAMY,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGd;IACrC,MAAMe,wBAAoBlB,qCAAAA,EACxB;QAAEW;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGR,KAAK;IAAC,GAC5DC;IAEF,MAAMI,QAAqC;QACzC,GAAGU,iBAAiB;QACpBL,MAAMV,MAAMU,IAAI;QAChBE,OAAOZ,MAAMY,KAAK;IACpB;IAEA,MAAMK,oBAAgBrB,gCAAAA,EACpB,CAACsB;QACCX,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcW,GAAGb,MAAMK,IAAI,EAAEL,MAAMO,KAAK,EAAEP,MAAMG,OAAO;QACvDM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBI;IACpB;IAEFb,MAAMc,IAAI,CAAC,eAAe,GAAGC;IAC7Bf,MAAMc,IAAI,CAACN,OAAO,GAAGI;IAErB,OAAOZ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n  ToolbarRadioButtonProps,\n  ToolbarRadioButtonState,\n  ToolbarRadioButtonBaseProps,\n  ToolbarRadioButtonBaseState,\n} 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 contextSize = useToolbarContext_unstable(ctx => ctx.size);\n  const { appearance = 'subtle', size = contextSize, ...baseProps } = props;\n  const state = useToolbarRadioButtonBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    appearance,\n    size,\n    shape: 'rounded',\n  };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarRadioButtonBase_unstable = (\n  props: ToolbarRadioButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButtonBase_unstable(\n    { checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\n  const state: ToolbarRadioButtonBaseState = {\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  // eslint-disable-next-line react-hooks/immutability\n  state.root['aria-pressed'] = undefined;\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.onClick = handleOnClick;\n\n  return state;\n};\n"],"names":["useEventCallback","useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarRadioButtonBase_unstable","shape","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;;;;;;;;;;;;IA2CaY,kCAAAA;;;kCAxBAT;;;;gCAhBoB,4BAA4B;6BAChB,yBAAyB;gCAC3B,4BAA4B;AAchE,MAAMA,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,kBAAcJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,WAAW,EAAE,GAAGI,WAAW,GAAGN;IACpE,MAAMO,QAAQC,mCAAmCF,WAAWL;IAE5D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAUK,2CAA2C,CAChDT,OACAC;IAEA,MAAMS,kBAAcZ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIO,WAAW;IACrE,MAAMC,cAAUb,0CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAACA,AAAD,iCAACA,IAAIS,aAAa,CAACZ,MAAMa,KAAI,AAAC,MAAA,QAA7BV,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,wBAAoBrB,yCAAAA,EACxB;QAAEc;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGX,KAAK;IAAC,GAC5DC;IAEF,MAAMM,QAAqC;QACzC,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMK,oBAAgBxB,gCAAAA,EACpB,CAACyB;QACCX,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcW,GAAGd,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QACvDM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBI;IACpB;IAEF,oDAAoD;IACpDd,MAAMe,IAAI,CAAC,eAAe,GAAGC;IAC7B,oDAAoD;IACpDhB,MAAMe,IAAI,CAACN,OAAO,GAAGI;IAErB,OAAOb;AACT,EAAE"}

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

@@ -29,8 +29,10 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useToolbarRadioButtonStyles_unstable = (state)=>{
     'use no memo';
     const toggleButtonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
     }
     (0, _reactbutton.useToggleButtonStyles_unstable)(state);

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

@@ -1 +1 @@
-{"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"}
+{"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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\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;IAC1C,oDAAA;IACAO,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;QACZ,oDAAA;QACAL,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

@@ -24,8 +24,10 @@ const useBaseStyles = (0, _react.makeStyles)({
 const useToolbarRadioButtonStyles_unstable = (state)=>{
     'use no memo';
     const toggleButtonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
     }
     (0, _reactbutton.useToggleButtonStyles_unstable)(state);

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

@@ -1 +1 @@
-{"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"}
+{"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 type { 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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\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;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,GAAGd,uBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,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/ToolbarToggleButton/ToolbarToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\nexport type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n\nexport type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\nexport type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n\nexport type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}

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

@@ -17,16 +17,17 @@ _export(exports, {
         return useToolbarToggleButton_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactbutton = require("@fluentui/react-button");
 const _ToolbarContext = require("../Toolbar/ToolbarContext");
 const useToolbarToggleButton_unstable = (props, ref)=>{
-    const { appearance = 'subtle', ...baseProps } = props;
+    const contextSize = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.size);
+    const { appearance = 'subtle', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
     const state = useToolbarToggleButtonBase_unstable(baseProps, ref);
     return {
+        ...state,
         appearance,
-        ...state
+        size,
+        shape: 'rounded'
     };
 };
 const useToolbarToggleButtonBase_unstable = (props, ref)=>{
@@ -36,7 +37,7 @@ const useToolbarToggleButtonBase_unstable = (props, ref)=>{
         return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
     });
     const { onClick: onClickOriginal } = props;
-    const toggleButtonState = (0, _reactbutton.useToggleButton_unstable)({
+    const toggleButtonState = (0, _reactbutton.useToggleButtonBase_unstable)({
         checked,
         ...props
     }, ref);

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

@@ -1 +1 @@
-{"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 type {\n  ToolbarToggleButtonProps,\n  ToolbarToggleButtonState,\n  ToolbarToggleButtonBaseProps,\n  ToolbarToggleButtonBaseState,\n} 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 { appearance = 'subtle', ...baseProps } = props;\n  const state = useToolbarToggleButtonBase_unstable(baseProps, ref);\n  return {\n    appearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook that builds Toolbar ToggleButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarToggleButtonBase_unstable = (\n  props: ToolbarToggleButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonBaseState => {\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: ToolbarToggleButtonBaseState = {\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 || state.disabledFocusable) {\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","appearance","baseProps","state","useToolbarToggleButtonBase_unstable","handleToggleButton","ctx","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","handleOnClick","e","disabled","disabledFocusable","preventDefault","stopPropagation","root"],"mappings":"AAAA;;;;;;;;;;;;uCAsCaS;eAAAA;;mCApBAN;;;;;iEAhBU,QAAQ;6BACU,yBAAyB;gCACvB,4BAA4B;AAchE,MAAMA,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAChD,MAAMI,QAAQC,oCAAoCF,WAAWF;IAC7D,OAAO;QACLC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAUK,4CAA4C,CACjDJ,OACAC;IAEA,MAAMK,yBAAqBR,0CAAAA,EAA2BS,CAAAA,MAAOA,IAAID,kBAAkB;IACnF,MAAME,UAAUV,8CAAAA,EAA2BS,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIE,aAAa,CAACT,MAAMU,IAAI,CAAC,MAAA,QAA7BH,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BI,QAAQ,CAACX,MAAMY,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGd;IACrC,MAAMe,wBAAoBlB,qCAAAA,EAAyB;QAAEW;QAAS,GAAGR,KAAK;IAAC,GAAGC;IAC1E,MAAMG,QAAsC;QAC1C,GAAGW,iBAAiB;QACpBL,MAAMV,MAAMU,IAAI;QAChBE,OAAOZ,MAAMY,KAAK;IACpB;IAEA,MAAMI,gBAAgB,CACpBC;QAEA,IAAIb,MAAMc,QAAQ,IAAId,MAAMe,iBAAiB,EAAE;YAC7CF,EAAEG,cAAc;YAChBH,EAAEI,eAAe;YACjB;QACF;QAEAf,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAqBW,GAAGb,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QAC9DM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBG;IACpB;IAEAb,MAAMkB,IAAI,CAACT,OAAO,GAAGG;IACrB,OAAOZ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n  ToolbarToggleButtonProps,\n  ToolbarToggleButtonState,\n  ToolbarToggleButtonBaseProps,\n  ToolbarToggleButtonBaseState,\n} 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 contextSize = useToolbarContext_unstable(ctx => ctx.size);\n  const { appearance = 'subtle', size = contextSize ?? 'medium', ...baseProps } = props;\n  const state = useToolbarToggleButtonBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    appearance,\n    size,\n    shape: 'rounded',\n  };\n};\n\n/**\n * Base hook that builds Toolbar ToggleButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\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 useToolbarToggleButtonBase_unstable = (\n  props: ToolbarToggleButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonBaseState => {\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 = useToggleButtonBase_unstable({ checked, ...props }, ref);\n  const state: ToolbarToggleButtonBaseState = {\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 || state.disabledFocusable) {\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":["useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarToggleButtonBase_unstable","shape","handleToggleButton","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","handleOnClick","e","disabled","disabledFocusable","preventDefault","stopPropagation","root"],"mappings":"AAAA;;;;;;;;;;;;IA0CaW,mCAAAA;;;mCAxBAT;;;;6BAfgC,yBAAyB;gCAC3B,4BAA4B;AAchE,MAAMA,kCAAkC,CAC7CC,OACAC;IAEA,MAAMC,kBAAcJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGI,WAAW,GAAGN;IAChF,MAAMO,QAAQC,oCAAoCF,WAAWL;IAE7D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAUK,4CAA4C,CACjDT,OACAC;IAEA,MAAMS,yBAAqBZ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIO,kBAAkB;IACnF,MAAMC,cAAUb,0CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIS,aAAa,CAACZ,MAAMa,KAAI,AAAC,MAAA,QAA7BV,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,wBAAoBrB,yCAAAA,EAA6B;QAAEc;QAAS,GAAGX,KAAK;IAAC,GAAGC;IAC9E,MAAMM,QAAsC;QAC1C,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMI,gBAAgB,CACpBC;QAEA,IAAIb,MAAMc,QAAQ,IAAId,MAAMe,iBAAiB,EAAE;YAC7CF,EAAEG,cAAc;YAChBH,EAAEI,eAAe;YACjB;QACF;QAEAd,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAqBU,GAAGb,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QAC9DM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBG;IACpB;IAEAb,MAAMkB,IAAI,CAACT,OAAO,GAAGG;IACrB,OAAOZ;AACT,EAAE"}

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

@@ -29,8 +29,10 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useToolbarToggleButtonStyles_unstable = (state)=>{
     'use no memo';
     const toggleButtonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
     }
     (0, _reactbutton.useToggleButtonStyles_unstable)(state);

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

@@ -1 +1 @@
-{"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"}
+{"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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\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;IAC1C,oDAAA;IACAO,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;QACZ,oDAAA;QACAL,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

@@ -24,8 +24,10 @@ const useBaseStyles = (0, _react.makeStyles)({
 const useToolbarToggleButtonStyles_unstable = (state)=>{
     'use no memo';
     const toggleButtonStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
     }
     (0, _reactbutton.useToggleButtonStyles_unstable)(state);

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

@@ -1 +1 @@
-{"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"}
+{"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 type { 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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\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;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,GAAGd,uBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,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"}