@fluentui/react-radio 9.2.20 → 9.2.21

package/CHANGELOG.md

@@ -1,17 +1,32 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Thu, 16 May 2024 09:21:27 GMT and should not be manually modified.
+This log was last generated on Mon, 20 May 2024 12:36:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.21)
+
+Mon, 20 May 2024 12:36:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.20..@fluentui/react-radio_v9.2.21)
+
+### Patches
+
+- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
+- Bump @fluentui/react-field to v9.1.66 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.38 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-label to v9.1.70 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-tabster to v9.21.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+
 ## [9.2.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.20)
 
-Thu, 16 May 2024 09:21:27 GMT 
+Thu, 16 May 2024 09:25:20 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.2.19..@fluentui/react-radio_v9.2.20)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.1.65 ([commit](https://github.com/microsoft/fluentui/commit/3ae9ed772fbcedeff1a76e154f6eb7d515785698) by beachball)
+- Bump @fluentui/react-field to v9.1.65 ([PR #31390](https://github.com/microsoft/fluentui/pull/31390) by beachball)
 
 ## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.2.19)
 

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

@@ -34,10 +34,10 @@ const useInputStyles = /*#__PURE__*/__styles({
     Blbys7f: "f9ma1gx"
   },
   customIndicator: {
-    Bojc29n: "fhb1dn5"
+    Bj53wkj: "f12zxao0"
   }
 }, {
-  d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}", ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"]
+  d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}", ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}", ".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"]
 });
 const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rwtekvw", null, [".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}", ".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}"]);
 // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.

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

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bojc29n","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } 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        ...shorthands.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    state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\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    state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\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","shorthands","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","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } 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        ...shorthands.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    state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\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    state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\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-commonjs/components/Radio/useRadioStyles.styles.js

@@ -107,14 +107,14 @@ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
         Blbys7f: "f9ma1gx"
     },
     customIndicator: {
-        Bojc29n: "fhb1dn5"
+        Bj53wkj: "f12zxao0"
     }
 }, {
     d: [
         ".fly5x3f{width:100%;}",
         ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}",
         ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}",
-        ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"
+        ".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"
     ]
 });
 const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rwtekvw", null, [

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

@@ -1 +1 @@
-{"version":3,"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } 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 = /*#__PURE__*/__resetStyles(\"rm0dkue\", \"rjjxb3w\", {\n  r: [\".rm0dkue{display:inline-flex;position:relative;}\", \".rm0dkue:focus{outline-style:none;}\", \".rm0dkue:focus-visible{outline-style:none;}\", \".rm0dkue[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rm0dkue[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rjjxb3w{display:inline-flex;position:relative;}\", \".rjjxb3w:focus{outline-style:none;}\", \".rjjxb3w:focus-visible{outline-style:none;}\", \".rjjxb3w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rjjxb3w[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media (forced-colors: active){.rm0dkue[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rjjxb3w[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n  vertical: {\n    Beiy3e4: \"f1vx9l62\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".f1vx9l62{flex-direction:column;}\", \".f122n59{align-items:center;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"rg1upok\", \"rzwdzb4\", {\n  r: [\".rg1upok{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".rg1upok:enabled{cursor:pointer;}\", \".rg1upok:enabled~.fui-Radio__label{cursor:pointer;}\", \".rg1upok:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".rg1upok:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".rg1upok:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rg1upok:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rg1upok:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".rg1upok:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".rg1upok:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".rg1upok:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".rg1upok:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".rzwdzb4{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".rzwdzb4:enabled{cursor:pointer;}\", \".rzwdzb4:enabled~.fui-Radio__label{cursor:pointer;}\", \".rzwdzb4:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rzwdzb4:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".rzwdzb4:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".rzwdzb4:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".rzwdzb4:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".rzwdzb4:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"],\n  s: [\"@media (forced-colors: active){.rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}\", \"@media (forced-colors: active){.rg1upok:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rg1upok:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}\", \"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__label{color:GrayText;}}\", \"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rg1upok:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}\", \"@media (forced-colors: active){.rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}\", \"@media (forced-colors: active){.rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rzwdzb4:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}\", \"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__label{color:GrayText;}}\", \"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rzwdzb4:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}\"]\n});\nconst useInputStyles = /*#__PURE__*/__styles({\n  below: {\n    a9b677: \"fly5x3f\",\n    Bqenvij: \"f1je6zif\"\n  },\n  defaultIndicator: {\n    Blbys7f: \"f9ma1gx\"\n  },\n  customIndicator: {\n    Bojc29n: \"fhb1dn5\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\", \".f9ma1gx:checked~.fui-Radio__indicator::after{content:\\\"\\\";}\", \".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rwtekvw\", null, [\".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\", \".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}\"]);\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    qb2dma: \"f7nlbp4\",\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  },\n  after: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"],\n    B6of3ja: \"fjzwpt6\",\n    jrapky: \"fh6j2fo\"\n  },\n  below: {\n    z8tnut: \"f1ywm7hm\",\n    fsow6f: \"f17mccla\"\n  }\n}, {\n  d: [\".f7nlbp4{align-self:center;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f17mccla{text-align:center;}\"]\n});\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = state => {\n  const {\n    labelPosition\n  } = state;\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\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  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useRadioStyles.styles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bojc29n","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}
+{"version":3,"sources":["useRadioStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } 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 = /*#__PURE__*/__resetStyles(\"rm0dkue\", \"rjjxb3w\", {\n  r: [\".rm0dkue{display:inline-flex;position:relative;}\", \".rm0dkue:focus{outline-style:none;}\", \".rm0dkue:focus-visible{outline-style:none;}\", \".rm0dkue[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rm0dkue[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rjjxb3w{display:inline-flex;position:relative;}\", \".rjjxb3w:focus{outline-style:none;}\", \".rjjxb3w:focus-visible{outline-style:none;}\", \".rjjxb3w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rjjxb3w[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media (forced-colors: active){.rm0dkue[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rjjxb3w[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n  vertical: {\n    Beiy3e4: \"f1vx9l62\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".f1vx9l62{flex-direction:column;}\", \".f122n59{align-items:center;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"rg1upok\", \"rzwdzb4\", {\n  r: [\".rg1upok{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".rg1upok:enabled{cursor:pointer;}\", \".rg1upok:enabled~.fui-Radio__label{cursor:pointer;}\", \".rg1upok:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".rg1upok:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".rg1upok:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rg1upok:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rg1upok:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".rg1upok:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".rg1upok:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".rg1upok:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".rg1upok:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".rzwdzb4{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".rzwdzb4:enabled{cursor:pointer;}\", \".rzwdzb4:enabled~.fui-Radio__label{cursor:pointer;}\", \".rzwdzb4:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rzwdzb4:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".rzwdzb4:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".rzwdzb4:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".rzwdzb4:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".rzwdzb4:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"],\n  s: [\"@media (forced-colors: active){.rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}\", \"@media (forced-colors: active){.rg1upok:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rg1upok:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}\", \"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__label{color:GrayText;}}\", \"@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rg1upok:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}\", \"@media (forced-colors: active){.rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}\", \"@media (forced-colors: active){.rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rzwdzb4:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}\", \"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__label{color:GrayText;}}\", \"@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rzwdzb4:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}\"]\n});\nconst useInputStyles = /*#__PURE__*/__styles({\n  below: {\n    a9b677: \"fly5x3f\",\n    Bqenvij: \"f1je6zif\"\n  },\n  defaultIndicator: {\n    Blbys7f: \"f9ma1gx\"\n  },\n  customIndicator: {\n    Bj53wkj: \"f12zxao0\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\", \".f9ma1gx:checked~.fui-Radio__indicator::after{content:\\\"\\\";}\", \".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rwtekvw\", null, [\".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\", \".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}\"]);\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    qb2dma: \"f7nlbp4\",\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  },\n  after: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"],\n    B6of3ja: \"fjzwpt6\",\n    jrapky: \"fh6j2fo\"\n  },\n  below: {\n    z8tnut: \"f1ywm7hm\",\n    fsow6f: \"f17mccla\"\n  }\n}, {\n  d: [\".f7nlbp4{align-self:center;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f17mccla{text-align:center;}\"]\n});\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = state => {\n  const {\n    labelPosition\n  } = state;\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\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  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useRadioStyles.styles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","defaultIndicator","Blbys7f","customIndicator","Bj53wkj","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.2.20",
+  "version": "9.2.21",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,14 +33,14 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.65",
-    "@fluentui/react-jsx-runtime": "^9.0.37",
-    "@fluentui/react-label": "^9.1.69",
-    "@fluentui/react-shared-contexts": "^9.18.0",
-    "@fluentui/react-tabster": "^9.21.2",
+    "@fluentui/react-field": "^9.1.66",
+    "@fluentui/react-jsx-runtime": "^9.0.38",
+    "@fluentui/react-label": "^9.1.70",
+    "@fluentui/react-shared-contexts": "^9.19.0",
+    "@fluentui/react-tabster": "^9.21.3",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.8",
-    "@griffel/react": "^1.5.14",
+    "@fluentui/react-utilities": "^9.18.9",
+    "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {