@fluentui/react-radio 9.6.3 → 9.6.4

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Tue, 26 May 2026 09:33:56 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.6.4)
+
+Wed, 24 Jun 2026 11:03:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.6.3..@fluentui/react-radio_v9.6.4)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-label to v9.4.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
 ## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.6.3)
 
-Tue, 26 May 2026 09:33:56 GMT 
+Tue, 26 May 2026 09:39:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.6.2..@fluentui/react-radio_v9.6.3)
 
 ### Patches

package/lib/components/Radio/useRadioStyles.styles.js

@@ -70,8 +70,6 @@ const useLabelStyles = /*#__PURE__*/__styles({
  * Apply styling to the Radio slots based on the state
  */
 export const useRadioStyles_unstable = state => {
-  'use no memo';
-
   const {
     labelPosition
   } = state;

package/lib/components/Radio/useRadioStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bj53wkj","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","after","B6of3ja","jrapky","fsow6f","p","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"sources":["useRadioStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const radioClassNames = {\n    root: 'fui-Radio',\n    indicator: 'fui-Radio__indicator',\n    input: 'fui-Radio__input',\n    label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = makeResetStyles({\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column',\n        alignItems: 'center'\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n    height: '100%',\n    boxSizing: 'border-box',\n    margin: 0,\n    opacity: 0,\n    ':enabled': {\n        cursor: 'pointer',\n        [`& ~ .${radioClassNames.label}`]: {\n            cursor: 'pointer'\n        }\n    },\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground3\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeAccessible,\n            '@media (forced-colors: active)': {\n                borderColor: 'ButtonBorder'\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground2\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground1\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Colors for the checked state\n    ':enabled:checked': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorCompoundBrandStroke,\n            color: tokens.colorCompoundBrandForeground1,\n            '@media (forced-colors: active)': {\n                borderColor: 'Highlight',\n                color: 'Highlight',\n                '::after': {\n                    backgroundColor: 'Highlight'\n                }\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokeHover,\n                color: tokens.colorCompoundBrandForeground1Hover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokePressed,\n                color: tokens.colorCompoundBrandForeground1Pressed\n            }\n        }\n    },\n    // Colors for the disabled state\n    ':disabled': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'default',\n            '@media (forced-colors: active)': {\n                color: 'GrayText'\n            }\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled,\n            color: tokens.colorNeutralForegroundDisabled,\n            '@media (forced-colors: active)': {\n                borderColor: 'GrayText',\n                color: 'GrayText',\n                '::after': {\n                    backgroundColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    below: {\n        width: '100%',\n        height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n    },\n    // If the indicator has no children, use the ::after pseudo-element for the checked state\n    defaultIndicator: {\n        [`:checked ~ .${radioClassNames.indicator}::after`]: {\n            content: '\"\"'\n        }\n    },\n    // If the indicator has a child, hide it until the radio is checked\n    customIndicator: {\n        [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n            opacity: '0'\n        }\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    position: 'relative',\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    border: tokens.strokeWidthThin + ' solid',\n    borderRadius: tokens.borderRadiusCircular,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    '::after': {\n        position: 'absolute',\n        width: indicatorSize,\n        height: indicatorSize,\n        borderRadius: tokens.borderRadiusCircular,\n        // Use a transform to avoid pixel rounding errors at 125% DPI\n        // https://github.com/microsoft/fluentui/issues/30025\n        transform: 'scale(0.625)',\n        backgroundColor: 'currentColor'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS,\n        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n        // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n        marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    below: {\n        paddingTop: tokens.spacingVerticalXS,\n        textAlign: 'center'\n    }\n});\n/**\n * Apply styling to the Radio slots based on the state\n */ export const useRadioStyles_unstable = (state)=>{\n    'use no memo';\n    const { labelPosition } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bj53wkj","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","after","B6of3ja","jrapky","fsow6f","p","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"sources":["useRadioStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const radioClassNames = {\n    root: 'fui-Radio',\n    indicator: 'fui-Radio__indicator',\n    input: 'fui-Radio__input',\n    label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = makeResetStyles({\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column',\n        alignItems: 'center'\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n    height: '100%',\n    boxSizing: 'border-box',\n    margin: 0,\n    opacity: 0,\n    ':enabled': {\n        cursor: 'pointer',\n        [`& ~ .${radioClassNames.label}`]: {\n            cursor: 'pointer'\n        }\n    },\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground3\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeAccessible,\n            '@media (forced-colors: active)': {\n                borderColor: 'ButtonBorder'\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground2\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground1\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Colors for the checked state\n    ':enabled:checked': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorCompoundBrandStroke,\n            color: tokens.colorCompoundBrandForeground1,\n            '@media (forced-colors: active)': {\n                borderColor: 'Highlight',\n                color: 'Highlight',\n                '::after': {\n                    backgroundColor: 'Highlight'\n                }\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokeHover,\n                color: tokens.colorCompoundBrandForeground1Hover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokePressed,\n                color: tokens.colorCompoundBrandForeground1Pressed\n            }\n        }\n    },\n    // Colors for the disabled state\n    ':disabled': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'default',\n            '@media (forced-colors: active)': {\n                color: 'GrayText'\n            }\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled,\n            color: tokens.colorNeutralForegroundDisabled,\n            '@media (forced-colors: active)': {\n                borderColor: 'GrayText',\n                color: 'GrayText',\n                '::after': {\n                    backgroundColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    below: {\n        width: '100%',\n        height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n    },\n    // If the indicator has no children, use the ::after pseudo-element for the checked state\n    defaultIndicator: {\n        [`:checked ~ .${radioClassNames.indicator}::after`]: {\n            content: '\"\"'\n        }\n    },\n    // If the indicator has a child, hide it until the radio is checked\n    customIndicator: {\n        [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n            opacity: '0'\n        }\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    position: 'relative',\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    border: tokens.strokeWidthThin + ' solid',\n    borderRadius: tokens.borderRadiusCircular,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    '::after': {\n        position: 'absolute',\n        width: indicatorSize,\n        height: indicatorSize,\n        borderRadius: tokens.borderRadiusCircular,\n        // Use a transform to avoid pixel rounding errors at 125% DPI\n        // https://github.com/microsoft/fluentui/issues/30025\n        transform: 'scale(0.625)',\n        backgroundColor: 'currentColor'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS,\n        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n        // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n        marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    below: {\n        paddingTop: tokens.spacingVerticalXS,\n        textAlign: 'center'\n    }\n});\n/**\n * Apply styling to the Radio slots based on the state\n */ export const useRadioStyles_unstable = (state)=>{\n    const { labelPosition } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Radio/useRadioStyles.styles.raw.js

@@ -184,7 +184,6 @@ const useLabelStyles = makeStyles({
 /**
  * Apply styling to the Radio slots based on the state
  */ export const useRadioStyles_unstable = (state)=>{
-    'use no memo';
     const { labelPosition } = state;
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();

package/lib/components/Radio/useRadioStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  position: 'relative',\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n  height: '100%',\n  boxSizing: 'border-box',\n  margin: 0,\n  opacity: 0,\n\n  ':enabled': {\n    cursor: 'pointer',\n    [`& ~ .${radioClassNames.label}`]: {\n      cursor: 'pointer',\n    },\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked)': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n      '@media (forced-colors: active)': {\n        borderColor: 'ButtonBorder',\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n      '@media (forced-colors: active)': {\n        borderColor: 'Highlight',\n        color: 'Highlight',\n        '::after': {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  // Colors for the disabled state\n  ':disabled': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n      cursor: 'default',\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n        color: 'GrayText',\n        '::after': {\n          backgroundColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  below: {\n    width: '100%',\n    height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n  },\n\n  // If the indicator has no children, use the ::after pseudo-element for the checked state\n  defaultIndicator: {\n    [`:checked ~ .${radioClassNames.indicator}::after`]: {\n      content: '\"\"',\n    },\n  },\n\n  // If the indicator has a child, hide it until the radio is checked\n  customIndicator: {\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  position: 'relative',\n  width: indicatorSize,\n  height: indicatorSize,\n  fontSize: '12px',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  border: tokens.strokeWidthThin + ' solid',\n  borderRadius: tokens.borderRadiusCircular,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  '::after': {\n    position: 'absolute',\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transform to avoid pixel rounding errors at 125% DPI\n    // https://github.com/microsoft/fluentui/issues/30025\n    transform: 'scale(0.625)',\n    backgroundColor: 'currentColor',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n\n  below: {\n    paddingTop: tokens.spacingVerticalXS,\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState): RadioState => {\n  'use no memo';\n\n  const { labelPosition } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    radioClassNames.input,\n    inputBaseClassName,\n    labelPosition === 'below' && inputStyles.below,\n    state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator,\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  // eslint-disable-next-line react-hooks/immutability\n  state.indicator.className = mergeClasses(\n    radioClassNames.indicator,\n    indicatorBaseClassName,\n    state.indicator.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","display","position","style","selector","useRootStyles","vertical","flexDirection","alignItems","useInputBaseClassName","left","top","width","spacingHorizontalS","height","boxSizing","margin","opacity","cursor","color","colorNeutralForeground3","borderColor","colorNeutralStrokeAccessible","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","colorCompoundBrandStroke","colorCompoundBrandForeground1","backgroundColor","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputStyles","below","spacingVerticalS","defaultIndicator","content","customIndicator","useIndicatorBaseClassName","fontSize","flexShrink","justifyContent","overflow","border","strokeWidthThin","borderRadius","borderRadiusCircular","fill","pointerEvents","transform","useLabelStyles","base","alignSelf","padding","after","paddingLeft","spacingHorizontalXS","marginTop","lineHeightBase300","marginBottom","paddingTop","spacingVerticalXS","textAlign","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"AAAA;AAEA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI3E,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;IACNC,WAAW;IACXC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,+DAA+D;AAC/D,MAAMC,gBAAgB;AAEtB,MAAMC,uBAAuBT,gBAAgB;IAC3CU,SAAS;IACTC,UAAU;IACV,GAAGb,wBAAwB;QAAEc,OAAO,CAAC;QAAGC,UAAU;IAAe,EAAE;AACrE;AAEA,MAAMC,gBAAgBb,WAAW;IAC/Bc,UAAU;QACRC,eAAe;QACfC,YAAY;IACd;AACF;AAEA,MAAMC,wBAAwBlB,gBAAgB;IAC5CW,UAAU;IACVQ,MAAM;IACNC,KAAK;IACLC,OAAO,CAAC,KAAK,EAAEb,cAAc,OAAO,EAAET,OAAOuB,kBAAkB,CAAC,CAAC,CAAC;IAClEC,QAAQ;IACRC,WAAW;IACXC,QAAQ;IACRC,SAAS;IAET,YAAY;QACVC,QAAQ;QACR,CAAC,CAAC,KAAK,EAAExB,gBAAgBI,KAAK,EAAE,CAAC,EAAE;YACjCoB,QAAQ;QACV;IACF;IAEA,iCAAiC;IACjC,0BAA0B;QACxB,CAAC,CAAC,KAAK,EAAExB,gBAAgBI,KAAK,EAAE,CAAC,EAAE;YACjCqB,OAAO7B,OAAO8B,uBAAuB;QACvC;QACA,CAAC,CAAC,KAAK,EAAE1B,gBAAgBE,SAAS,EAAE,CAAC,EAAE;YACrCyB,aAAa/B,OAAOgC,4BAA4B;YAChD,kCAAkC;gBAChCD,aAAa;YACf;QACF;QAEA,UAAU;YACR,CAAC,CAAC,KAAK,EAAE3B,gBAAgBI,KAAK,EAAE,CAAC,EAAE;gBACjCqB,OAAO7B,OAAOiC,uBAAuB;YACvC;YACA,CAAC,CAAC,KAAK,EAAE7B,gBAAgBE,SAAS,EAAE,CAAC,EAAE;gBACrCyB,aAAa/B,OAAOkC,iCAAiC;YACvD;QACF;QAEA,iBAAiB;YACf,CAAC,CAAC,KAAK,EAAE9B,gBAAgBI,KAAK,EAAE,CAAC,EAAE;gBACjCqB,OAAO7B,OAAOmC,uBAAuB;YACvC;YACA,CAAC,CAAC,KAAK,EAAE/B,gBAAgBE,SAAS,EAAE,CAAC,EAAE;gBACrCyB,aAAa/B,OAAOoC,mCAAmC;YACzD;QACF;IACF;IAEA,+BAA+B;IAC/B,oBAAoB;QAClB,CAAC,CAAC,KAAK,EAAEhC,gBAAgBI,KAAK,EAAE,CAAC,EAAE;YACjCqB,OAAO7B,OAAOmC,uBAAuB;QACvC;QACA,CAAC,CAAC,KAAK,EAAE/B,gBAAgBE,SAAS,EAAE,CAAC,EAAE;YACrCyB,aAAa/B,OAAOqC,wBAAwB;YAC5CR,OAAO7B,OAAOsC,6BAA6B;YAC3C,kCAAkC;gBAChCP,aAAa;gBACbF,OAAO;gBACP,WAAW;oBACTU,iBAAiB;gBACnB;YACF;QACF;QAEA,UAAU;YACR,CAAC,CAAC,KAAK,EAAEnC,gBAAgBE,SAAS,EAAE,CAAC,EAAE;gBACrCyB,aAAa/B,OAAOwC,6BAA6B;gBACjDX,OAAO7B,OAAOyC,kCAAkC;YAClD;QACF;QAEA,iBAAiB;YACf,CAAC,CAAC,KAAK,EAAErC,gBAAgBE,SAAS,EAAE,CAAC,EAAE;gBACrCyB,aAAa/B,OAAO0C,+BAA+B;gBACnDb,OAAO7B,OAAO2C,oCAAoC;YACpD;QACF;IACF;IAEA,gCAAgC;IAChC,aAAa;QACX,CAAC,CAAC,KAAK,EAAEvC,gBAAgBI,KAAK,EAAE,CAAC,EAAE;YACjCqB,OAAO7B,OAAO4C,8BAA8B;YAC5ChB,QAAQ;YACR,kCAAkC;gBAChCC,OAAO;YACT;QACF;QACA,CAAC,CAAC,KAAK,EAAEzB,gBAAgBE,SAAS,EAAE,CAAC,EAAE;YACrCyB,aAAa/B,OAAO6C,0BAA0B;YAC9ChB,OAAO7B,OAAO4C,8BAA8B;YAC5C,kCAAkC;gBAChCb,aAAa;gBACbF,OAAO;gBACP,WAAW;oBACTU,iBAAiB;gBACnB;YACF;QACF;IACF;AACF;AAEA,MAAMO,iBAAiB5C,WAAW;IAChC6C,OAAO;QACLzB,OAAO;QACPE,QAAQ,CAAC,KAAK,EAAEf,cAAc,OAAO,EAAET,OAAOgD,gBAAgB,CAAC,CAAC,CAAC;IACnE;IAEA,yFAAyF;IACzFC,kBAAkB;QAChB,CAAC,CAAC,YAAY,EAAE7C,gBAAgBE,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE;YACnD4C,SAAS;QACX;IACF;IAEA,mEAAmE;IACnEC,iBAAiB;QACf,CAAC,CAAC,kBAAkB,EAAE/C,gBAAgBE,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE;YACtDqB,SAAS;QACX;IACF;AACF;AAEA,MAAMyB,4BAA4BnD,gBAAgB;IAChDW,UAAU;IACVU,OAAOb;IACPe,QAAQf;IACR4C,UAAU;IACV5B,WAAW;IACX6B,YAAY;IAEZ3C,SAAS;IACTO,YAAY;IACZqC,gBAAgB;IAChBC,UAAU;IAEVC,QAAQzD,OAAO0D,eAAe,GAAG;IACjCC,cAAc3D,OAAO4D,oBAAoB;IACzClC,QAAQ1B,OAAOgD,gBAAgB,GAAG,MAAMhD,OAAOuB,kBAAkB;IACjEsC,MAAM;IACNC,eAAe;IAEf,WAAW;QACTlD,UAAU;QACVU,OAAOb;QACPe,QAAQf;QACRkD,cAAc3D,OAAO4D,oBAAoB;QACzC,6DAA6D;QAC7D,qDAAqD;QACrDG,WAAW;QACXxB,iBAAiB;IACnB;AACF;AAEA,mGAAmG;AACnG,MAAMyB,iBAAiB9D,WAAW;IAChC+D,MAAM;QACJC,WAAW;QACXC,SAAS,GAAGnE,OAAOgD,gBAAgB,CAAC,CAAC,EAAEhD,OAAOuB,kBAAkB,EAAE;IACpE;IAEA6C,OAAO;QACLC,aAAarE,OAAOsE,mBAAmB;QAEvC,oHAAoH;QACpH,gHAAgH;QAChHC,WAAW,CAAC,MAAM,EAAE9D,cAAc,GAAG,EAAET,OAAOwE,iBAAiB,CAAC,MAAM,CAAC;QACvEC,cAAc,CAAC,MAAM,EAAEhE,cAAc,GAAG,EAAET,OAAOwE,iBAAiB,CAAC,MAAM,CAAC;IAC5E;IAEAzB,OAAO;QACL2B,YAAY1E,OAAO2E,iBAAiB;QACpCC,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoBtE;IAC1B,MAAMuE,aAAalE;IACnB,oDAAoD;IACpD+D,MAAMzE,IAAI,CAAC6E,SAAS,GAAG/E,aACrBC,gBAAgBC,IAAI,EACpB2E,mBACAD,kBAAkB,WAAWE,WAAWjE,QAAQ,EAChD8D,MAAMzE,IAAI,CAAC6E,SAAS;IAGtB,MAAMC,qBAAqBhE;IAC3B,MAAMiE,cAActC;IACpB,oDAAoD;IACpDgC,MAAMvE,KAAK,CAAC2E,SAAS,GAAG/E,aACtBC,gBAAgBG,KAAK,EACrB4E,oBACAJ,kBAAkB,WAAWK,YAAYrC,KAAK,EAC9C+B,MAAMxE,SAAS,CAAC+E,QAAQ,GAAGD,YAAYjC,eAAe,GAAGiC,YAAYnC,gBAAgB,EACrF6B,MAAMvE,KAAK,CAAC2E,SAAS;IAGvB,MAAMI,yBAAyBlC;IAC/B,oDAAoD;IACpD0B,MAAMxE,SAAS,CAAC4E,SAAS,GAAG/E,aAC1BC,gBAAgBE,SAAS,EACzBgF,wBACAR,MAAMxE,SAAS,CAAC4E,SAAS;IAG3B,MAAMK,cAAcvB;IACpB,IAAIc,MAAMtE,KAAK,EAAE;QACf,oDAAoD;QACpDsE,MAAMtE,KAAK,CAAC0E,SAAS,GAAG/E,aACtBC,gBAAgBI,KAAK,EACrB+E,YAAYtB,IAAI,EAChBsB,WAAW,CAACR,cAAc,EAC1BD,MAAMtE,KAAK,CAAC0E,SAAS;IAEzB;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  position: 'relative',\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n  height: '100%',\n  boxSizing: 'border-box',\n  margin: 0,\n  opacity: 0,\n\n  ':enabled': {\n    cursor: 'pointer',\n    [`& ~ .${radioClassNames.label}`]: {\n      cursor: 'pointer',\n    },\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked)': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n      '@media (forced-colors: active)': {\n        borderColor: 'ButtonBorder',\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n      '@media (forced-colors: active)': {\n        borderColor: 'Highlight',\n        color: 'Highlight',\n        '::after': {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  // Colors for the disabled state\n  ':disabled': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n      cursor: 'default',\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n        color: 'GrayText',\n        '::after': {\n          backgroundColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  below: {\n    width: '100%',\n    height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n  },\n\n  // If the indicator has no children, use the ::after pseudo-element for the checked state\n  defaultIndicator: {\n    [`:checked ~ .${radioClassNames.indicator}::after`]: {\n      content: '\"\"',\n    },\n  },\n\n  // If the indicator has a child, hide it until the radio is checked\n  customIndicator: {\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  position: 'relative',\n  width: indicatorSize,\n  height: indicatorSize,\n  fontSize: '12px',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  border: tokens.strokeWidthThin + ' solid',\n  borderRadius: tokens.borderRadiusCircular,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  '::after': {\n    position: 'absolute',\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transform to avoid pixel rounding errors at 125% DPI\n    // https://github.com/microsoft/fluentui/issues/30025\n    transform: 'scale(0.625)',\n    backgroundColor: 'currentColor',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n\n  below: {\n    paddingTop: tokens.spacingVerticalXS,\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState): RadioState => {\n  const { labelPosition } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    radioClassNames.input,\n    inputBaseClassName,\n    labelPosition === 'below' && inputStyles.below,\n    state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator,\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  // eslint-disable-next-line react-hooks/immutability\n  state.indicator.className = mergeClasses(\n    radioClassNames.indicator,\n    indicatorBaseClassName,\n    state.indicator.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","display","position","style","selector","useRootStyles","vertical","flexDirection","alignItems","useInputBaseClassName","left","top","width","spacingHorizontalS","height","boxSizing","margin","opacity","cursor","color","colorNeutralForeground3","borderColor","colorNeutralStrokeAccessible","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","colorCompoundBrandStroke","colorCompoundBrandForeground1","backgroundColor","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputStyles","below","spacingVerticalS","defaultIndicator","content","customIndicator","useIndicatorBaseClassName","fontSize","flexShrink","justifyContent","overflow","border","strokeWidthThin","borderRadius","borderRadiusCircular","fill","pointerEvents","transform","useLabelStyles","base","alignSelf","padding","after","paddingLeft","spacingHorizontalXS","marginTop","lineHeightBase300","marginBottom","paddingTop","spacingVerticalXS","textAlign","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}

package/lib/components/RadioGroup/useRadioGroupStyles.styles.js

@@ -19,8 +19,6 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the RadioGroup slots based on the state
  */
 export const useRadioGroupStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
   // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);

package/lib/components/RadioGroup/useRadioGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n    root: 'fui-RadioGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'flex-start'\n    },\n    vertical: {\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */ export const useRadioGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAQjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B;EACAO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGZ,YAAY,CAACC,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n    root: 'fui-RadioGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'flex-start'\n    },\n    vertical: {\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */ export const useRadioGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAQjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B;EACAO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGZ,YAAY,CAACC,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/RadioGroup/useRadioGroupStyles.styles.raw.js

@@ -15,7 +15,6 @@ const useStyles = makeStyles({
 /**
  * Apply styling to the RadioGroup slots based on the state
  */ export const useRadioGroupStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);

package/lib/components/RadioGroup/useRadioGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASP;IAEf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,MAAMC,SAASP;IAEf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/Radio/useRadioStyles.styles.js

@@ -162,7 +162,6 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useRadioStyles_unstable = (state)=>{
-    'use no memo';
     const { labelPosition } = state;
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();

package/lib-commonjs/components/Radio/useRadioStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRadioStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const radioClassNames = {\n    root: 'fui-Radio',\n    indicator: 'fui-Radio__indicator',\n    input: 'fui-Radio__input',\n    label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = makeResetStyles({\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column',\n        alignItems: 'center'\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n    height: '100%',\n    boxSizing: 'border-box',\n    margin: 0,\n    opacity: 0,\n    ':enabled': {\n        cursor: 'pointer',\n        [`& ~ .${radioClassNames.label}`]: {\n            cursor: 'pointer'\n        }\n    },\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground3\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeAccessible,\n            '@media (forced-colors: active)': {\n                borderColor: 'ButtonBorder'\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground2\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground1\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Colors for the checked state\n    ':enabled:checked': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorCompoundBrandStroke,\n            color: tokens.colorCompoundBrandForeground1,\n            '@media (forced-colors: active)': {\n                borderColor: 'Highlight',\n                color: 'Highlight',\n                '::after': {\n                    backgroundColor: 'Highlight'\n                }\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokeHover,\n                color: tokens.colorCompoundBrandForeground1Hover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokePressed,\n                color: tokens.colorCompoundBrandForeground1Pressed\n            }\n        }\n    },\n    // Colors for the disabled state\n    ':disabled': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'default',\n            '@media (forced-colors: active)': {\n                color: 'GrayText'\n            }\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled,\n            color: tokens.colorNeutralForegroundDisabled,\n            '@media (forced-colors: active)': {\n                borderColor: 'GrayText',\n                color: 'GrayText',\n                '::after': {\n                    backgroundColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    below: {\n        width: '100%',\n        height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n    },\n    // If the indicator has no children, use the ::after pseudo-element for the checked state\n    defaultIndicator: {\n        [`:checked ~ .${radioClassNames.indicator}::after`]: {\n            content: '\"\"'\n        }\n    },\n    // If the indicator has a child, hide it until the radio is checked\n    customIndicator: {\n        [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n            opacity: '0'\n        }\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    position: 'relative',\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    border: tokens.strokeWidthThin + ' solid',\n    borderRadius: tokens.borderRadiusCircular,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    '::after': {\n        position: 'absolute',\n        width: indicatorSize,\n        height: indicatorSize,\n        borderRadius: tokens.borderRadiusCircular,\n        // Use a transform to avoid pixel rounding errors at 125% DPI\n        // https://github.com/microsoft/fluentui/issues/30025\n        transform: 'scale(0.625)',\n        backgroundColor: 'currentColor'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS,\n        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n        // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n        marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    below: {\n        paddingTop: tokens.spacingVerticalXS,\n        textAlign: 'center'\n    }\n});\n/**\n * Apply styling to the Radio slots based on the state\n */ export const useRadioStyles_unstable = (state)=>{\n    'use no memo';\n    const { labelPosition } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bj53wkj","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","after","B6of3ja","jrapky","fsow6f","p","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}
+{"version":3,"sources":["useRadioStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const radioClassNames = {\n    root: 'fui-Radio',\n    indicator: 'fui-Radio__indicator',\n    input: 'fui-Radio__input',\n    label: 'fui-Radio__label'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\nconst useRootBaseClassName = makeResetStyles({\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column',\n        alignItems: 'center'\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n    height: '100%',\n    boxSizing: 'border-box',\n    margin: 0,\n    opacity: 0,\n    ':enabled': {\n        cursor: 'pointer',\n        [`& ~ .${radioClassNames.label}`]: {\n            cursor: 'pointer'\n        }\n    },\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground3\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeAccessible,\n            '@media (forced-colors: active)': {\n                borderColor: 'ButtonBorder'\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground2\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.label}`]: {\n                color: tokens.colorNeutralForeground1\n            },\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Colors for the checked state\n    ':enabled:checked': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorCompoundBrandStroke,\n            color: tokens.colorCompoundBrandForeground1,\n            '@media (forced-colors: active)': {\n                borderColor: 'Highlight',\n                color: 'Highlight',\n                '::after': {\n                    backgroundColor: 'Highlight'\n                }\n            }\n        },\n        ':hover': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokeHover,\n                color: tokens.colorCompoundBrandForeground1Hover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${radioClassNames.indicator}`]: {\n                borderColor: tokens.colorCompoundBrandStrokePressed,\n                color: tokens.colorCompoundBrandForeground1Pressed\n            }\n        }\n    },\n    // Colors for the disabled state\n    ':disabled': {\n        [`& ~ .${radioClassNames.label}`]: {\n            color: tokens.colorNeutralForegroundDisabled,\n            cursor: 'default',\n            '@media (forced-colors: active)': {\n                color: 'GrayText'\n            }\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled,\n            color: tokens.colorNeutralForegroundDisabled,\n            '@media (forced-colors: active)': {\n                borderColor: 'GrayText',\n                color: 'GrayText',\n                '::after': {\n                    backgroundColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    below: {\n        width: '100%',\n        height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n    },\n    // If the indicator has no children, use the ::after pseudo-element for the checked state\n    defaultIndicator: {\n        [`:checked ~ .${radioClassNames.indicator}::after`]: {\n            content: '\"\"'\n        }\n    },\n    // If the indicator has a child, hide it until the radio is checked\n    customIndicator: {\n        [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n            opacity: '0'\n        }\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    position: 'relative',\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    border: tokens.strokeWidthThin + ' solid',\n    borderRadius: tokens.borderRadiusCircular,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    '::after': {\n        position: 'absolute',\n        width: indicatorSize,\n        height: indicatorSize,\n        borderRadius: tokens.borderRadiusCircular,\n        // Use a transform to avoid pixel rounding errors at 125% DPI\n        // https://github.com/microsoft/fluentui/issues/30025\n        transform: 'scale(0.625)',\n        backgroundColor: 'currentColor'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS,\n        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n        // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n        marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    below: {\n        paddingTop: tokens.spacingVerticalXS,\n        textAlign: 'center'\n    }\n});\n/**\n * Apply styling to the Radio slots based on the state\n */ export const useRadioStyles_unstable = (state)=>{\n    const { labelPosition } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bj53wkj","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","after","B6of3ja","jrapky","fsow6f","p","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}

package/lib-commonjs/components/Radio/useRadioStyles.styles.raw.js

@@ -200,7 +200,6 @@ const useLabelStyles = (0, _react.makeStyles)({
     }
 });
 const useRadioStyles_unstable = (state)=>{
-    'use no memo';
     const { labelPosition } = state;
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();

package/lib-commonjs/components/Radio/useRadioStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  position: 'relative',\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n  height: '100%',\n  boxSizing: 'border-box',\n  margin: 0,\n  opacity: 0,\n\n  ':enabled': {\n    cursor: 'pointer',\n    [`& ~ .${radioClassNames.label}`]: {\n      cursor: 'pointer',\n    },\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked)': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n      '@media (forced-colors: active)': {\n        borderColor: 'ButtonBorder',\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n      '@media (forced-colors: active)': {\n        borderColor: 'Highlight',\n        color: 'Highlight',\n        '::after': {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  // Colors for the disabled state\n  ':disabled': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n      cursor: 'default',\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n        color: 'GrayText',\n        '::after': {\n          backgroundColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  below: {\n    width: '100%',\n    height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n  },\n\n  // If the indicator has no children, use the ::after pseudo-element for the checked state\n  defaultIndicator: {\n    [`:checked ~ .${radioClassNames.indicator}::after`]: {\n      content: '\"\"',\n    },\n  },\n\n  // If the indicator has a child, hide it until the radio is checked\n  customIndicator: {\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  position: 'relative',\n  width: indicatorSize,\n  height: indicatorSize,\n  fontSize: '12px',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  border: tokens.strokeWidthThin + ' solid',\n  borderRadius: tokens.borderRadiusCircular,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  '::after': {\n    position: 'absolute',\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transform to avoid pixel rounding errors at 125% DPI\n    // https://github.com/microsoft/fluentui/issues/30025\n    transform: 'scale(0.625)',\n    backgroundColor: 'currentColor',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n\n  below: {\n    paddingTop: tokens.spacingVerticalXS,\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState): RadioState => {\n  'use no memo';\n\n  const { labelPosition } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    radioClassNames.input,\n    inputBaseClassName,\n    labelPosition === 'below' && inputStyles.below,\n    state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator,\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  // eslint-disable-next-line react-hooks/immutability\n  state.indicator.className = mergeClasses(\n    radioClassNames.indicator,\n    indicatorBaseClassName,\n    state.indicator.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","display","position","style","selector","useRootStyles","vertical","flexDirection","alignItems","useInputBaseClassName","left","top","width","spacingHorizontalS","height","boxSizing","margin","opacity","cursor","color","colorNeutralForeground3","borderColor","colorNeutralStrokeAccessible","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","colorCompoundBrandStroke","colorCompoundBrandForeground1","backgroundColor","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputStyles","below","spacingVerticalS","defaultIndicator","content","customIndicator","useIndicatorBaseClassName","fontSize","flexShrink","justifyContent","overflow","border","strokeWidthThin","borderRadius","borderRadiusCircular","fill","pointerEvents","transform","useLabelStyles","base","alignSelf","padding","after","paddingLeft","spacingHorizontalXS","marginTop","lineHeightBase300","marginBottom","paddingTop","spacingVerticalXS","textAlign","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  position: 'relative',\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n  height: '100%',\n  boxSizing: 'border-box',\n  margin: 0,\n  opacity: 0,\n\n  ':enabled': {\n    cursor: 'pointer',\n    [`& ~ .${radioClassNames.label}`]: {\n      cursor: 'pointer',\n    },\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked)': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n      '@media (forced-colors: active)': {\n        borderColor: 'ButtonBorder',\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n      '@media (forced-colors: active)': {\n        borderColor: 'Highlight',\n        color: 'Highlight',\n        '::after': {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  // Colors for the disabled state\n  ':disabled': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n      cursor: 'default',\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n        color: 'GrayText',\n        '::after': {\n          backgroundColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  below: {\n    width: '100%',\n    height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n  },\n\n  // If the indicator has no children, use the ::after pseudo-element for the checked state\n  defaultIndicator: {\n    [`:checked ~ .${radioClassNames.indicator}::after`]: {\n      content: '\"\"',\n    },\n  },\n\n  // If the indicator has a child, hide it until the radio is checked\n  customIndicator: {\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  position: 'relative',\n  width: indicatorSize,\n  height: indicatorSize,\n  fontSize: '12px',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  border: tokens.strokeWidthThin + ' solid',\n  borderRadius: tokens.borderRadiusCircular,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  '::after': {\n    position: 'absolute',\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transform to avoid pixel rounding errors at 125% DPI\n    // https://github.com/microsoft/fluentui/issues/30025\n    transform: 'scale(0.625)',\n    backgroundColor: 'currentColor',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n\n  below: {\n    paddingTop: tokens.spacingVerticalXS,\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState): RadioState => {\n  const { labelPosition } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    radioClassNames.input,\n    inputBaseClassName,\n    labelPosition === 'below' && inputStyles.below,\n    state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator,\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  // eslint-disable-next-line react-hooks/immutability\n  state.indicator.className = mergeClasses(\n    radioClassNames.indicator,\n    indicatorBaseClassName,\n    state.indicator.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","display","position","style","selector","useRootStyles","vertical","flexDirection","alignItems","useInputBaseClassName","left","top","width","spacingHorizontalS","height","boxSizing","margin","opacity","cursor","color","colorNeutralForeground3","borderColor","colorNeutralStrokeAccessible","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","colorCompoundBrandStroke","colorCompoundBrandForeground1","backgroundColor","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputStyles","below","spacingVerticalS","defaultIndicator","content","customIndicator","useIndicatorBaseClassName","fontSize","flexShrink","justifyContent","overflow","border","strokeWidthThin","borderRadius","borderRadiusCircular","fill","pointerEvents","transform","useLabelStyles","base","alignSelf","padding","after","paddingLeft","spacingHorizontalXS","marginTop","lineHeightBase300","marginBottom","paddingTop","spacingVerticalXS","textAlign","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.js

@@ -37,7 +37,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useRadioGroupStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n    root: 'fui-RadioGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'flex-start'\n    },\n    vertical: {\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */ export const useRadioGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,oBAAoB;;;gCAcY;eAA5BQ;;;uBAfwB,gBAAgB;AAClD,6BAA6B;IAChCP,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;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAO,KAAK,CAACR,IAAI,CAACU,SAAS,OAAGZ,mBAAY,EAACC,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n    root: 'fui-RadioGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'flex-start'\n    },\n    vertical: {\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */ export const useRadioGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,oBAAoB;;;gCAcY;eAA5BQ;;;uBAfwB,gBAAgB;AAClD,6BAA6B;IAChCP,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;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGZ,uBAAY,EAACC,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.raw.js

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

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,oBAAAA;;;IAkBAO,4BAAAA;;;;uBAtB4B,iBAAiB;AAInD,6BAA8D;IACnEN,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,SAASP;IAEf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,oBAAAA;;;gCAkBAO;;;;uBAtB4B,iBAAiB;AAInD,6BAA8D;IACnEN,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,qBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAKO,MAAMC,+BAA+B,CAACC;IAC3C,MAAMC,SAASP;IAEf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.6.3",
+  "version": "9.6.4",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,13 +12,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.2",
-    "@fluentui/react-jsx-runtime": "^9.4.3",
-    "@fluentui/react-label": "^9.4.2",
+    "@fluentui/react-field": "^9.5.3",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
+    "@fluentui/react-label": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.15",
+    "@fluentui/react-tabster": "^9.26.16",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.4",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },