@fluentui/react-radio 9.1.27 → 9.1.29

package/CHANGELOG.json

@@ -2,7 +2,115 @@
   "name": "@fluentui/react-radio",
   "entries": [
     {
-      "date": "Tue, 01 Aug 2023 10:14:29 GMT",
+      "date": "Wed, 09 Aug 2023 13:11:43 GMT",
+      "tag": "@fluentui/react-radio_v9.1.29",
+      "version": "9.1.29",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-radio",
+            "commit": "796e4426c50ede34b30e2dc2392328dcbadc2702",
+            "comment": "chore(cxe-red): migrate to new slot API"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-field to v9.1.16",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.1.24",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:58 GMT",
+      "tag": "@fluentui/react-radio_v9.1.28",
+      "version": "9.1.28",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-field to v9.1.15",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.1.23",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.12.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.1.10",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-utilities to v9.11.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
       "tag": "@fluentui/react-radio_v9.1.27",
       "version": "9.1.27",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Tue, 01 Aug 2023 10:14:29 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Aug 2023 13:11:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.29)
+
+Wed, 09 Aug 2023 13:11:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.28..@fluentui/react-radio_v9.1.29)
+
+### Patches
+
+- chore(cxe-red): migrate to new slot API ([PR #28753](https://github.com/microsoft/fluentui/pull/28753) by bernardo.sunderhus@gmail.com)
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- Bump @fluentui/react-field to v9.1.16 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-label to v9.1.24 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+
+## [9.1.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.28)
+
+Fri, 04 Aug 2023 08:52:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.27..@fluentui/react-radio_v9.1.28)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.1.15 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-label to v9.1.23 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-tabster to v9.12.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+
 ## [9.1.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.27)
 
-Tue, 01 Aug 2023 10:14:29 GMT 
+Tue, 01 Aug 2023 10:17:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.26..@fluentui/react-radio_v9.1.27)
 
 ### Patches

package/lib/components/Radio/renderRadio.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Radio
  */ export const renderRadio_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.input, slotProps.input), /*#__PURE__*/ createElement(slots.indicator, slotProps.indicator), slots.label && /*#__PURE__*/ createElement(slots.label, slotProps.label));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(state.input, null), /*#__PURE__*/ createElement(state.indicator, null), state.label && /*#__PURE__*/ createElement(state.label, null));
 };

package/lib/components/Radio/renderRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderRadio.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n  const { slots, slotProps } = getSlotsNext<RadioSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.indicator {...slotProps.indicator} />\n      {slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderRadio_unstable","state","slots","slotProps","root","input","indicator","label"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAsB;IACzD,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAyBE;IAEtD,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeOF,MAAMG,KAAK,EAAKF,UAAUE,KAAK,iBAChC,AAhBN,cAgBOH,MAAMI,SAAS,EAAKH,UAAUG,SAAS,GACvCJ,MAAMK,KAAK,kBAAI,AAjBtB,cAiBuBL,MAAMK,KAAK,EAAKJ,UAAUI,KAAK;AAGtD,EAAE"}
+{"version":3,"sources":["renderRadio.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n  assertSlots<RadioSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.indicator />\n      {state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderRadio_unstable","state","root","input","indicator","label"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAsB;IACzDF,YAAwBE;IAExB,qBACE,AAdJ,cAcKA,MAAMC,IAAI,sBACT,AAfN,cAeOD,MAAME,KAAK,uBACZ,AAhBN,cAgBOF,MAAMG,SAAS,SACfH,MAAMI,KAAK,kBAAI,AAjBtB,cAiBuBJ,MAAMI,KAAK;AAGlC,EAAE"}

package/lib/components/Radio/useRadio.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
 import { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';
 import { useFocusWithin } from '@fluentui/react-tabster';
 /**
@@ -24,15 +24,14 @@ import { useFocusWithin } from '@fluentui/react-tabster';
             'onChange'
         ]
     });
-    const root = resolveShorthand(props.root, {
-        required: true,
+    const root = slot.always(props.root, {
         defaultProps: {
             ref: useFocusWithin(),
             ...nativeProps.root
-        }
+        },
+        elementType: 'span'
     });
-    const input = resolveShorthand(props.input, {
-        required: true,
+    const input = slot.always(props.input, {
         defaultProps: {
             ref,
             type: 'radio',
@@ -44,25 +43,27 @@ import { useFocusWithin } from '@fluentui/react-tabster';
             required,
             'aria-describedby': ariaDescribedBy,
             ...nativeProps.primary
-        }
+        },
+        elementType: 'input'
     });
     input.onChange = mergeCallbacks(input.onChange, (ev)=>{
         return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
             value: ev.currentTarget.value
         });
     });
-    const label = resolveShorthand(props.label, {
+    const label = slot.optional(props.label, {
         defaultProps: {
             htmlFor: input.id,
             disabled: input.disabled
-        }
+        },
+        elementType: Label
     });
-    const indicator = resolveShorthand(props.indicator, {
-        required: true,
+    const indicator = slot.always(props.indicator, {
         defaultProps: {
             'aria-hidden': true,
             children: /*#__PURE__*/ React.createElement(CircleFilled, null)
-        }
+        },
+        elementType: 'div'
     });
     return {
         labelPosition,

package/lib/components/Radio/useRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const group = useRadioGroupContextValue_unstable();\n\n  const {\n    name = group.name,\n    checked = group.value !== undefined ? group.value === props.value : undefined,\n    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n    labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required = group.required,\n    'aria-describedby': ariaDescribedBy = group['aria-describedby'],\n    onChange,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const root = resolveShorthand(props.root, {\n    required: true,\n    defaultProps: {\n      ref: useFocusWithin<HTMLSpanElement>(),\n      ...nativeProps.root,\n    },\n  });\n\n  const input = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      required,\n      'aria-describedby': ariaDescribedBy,\n      ...nativeProps.primary,\n    },\n  });\n\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled: input.disabled,\n    },\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    required: true,\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n  });\n\n  return {\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      label: Label,\n      indicator: 'div',\n    },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"names":["React","CircleFilled","Label","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useId","useRadioGroupContextValue_unstable","useFocusWithin","useRadio_unstable","props","ref","group","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","defaultProps","input","type","id","primary","ev","currentTarget","label","htmlFor","indicator","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAC/G,SAASC,kCAAkC,QAAQ,mCAAmC;AACtF,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAAiD;IACpG,MAAMC,QAAQL;IAEd,MAAM,EACJM,MAAOD,MAAMC,IAAI,CAAA,EACjBC,SAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,CAAA,EAC7EC,gBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,CAAA,EAClGG,eAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,CAAA,EACzEC,UAAWT,MAAMS,QAAQ,CAAA,EACzBC,UAAWV,MAAMU,QAAQ,CAAA,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,CAAA,EAC/DY,SAAQ,EACT,GAAGd;IAEJ,MAAMe,cAActB,0BAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAOvB,iBAAiBK,MAAMkB,IAAI,EAAE;QACxCN,UAAU,IAAI;QACdO,cAAc;YACZlB,KAAKH;YACL,GAAGiB,YAAYG,IAAI;QACrB;IACF;IAEA,MAAME,QAAQzB,iBAAiBK,MAAMoB,KAAK,EAAE;QAC1CR,UAAU,IAAI;QACdO,cAAc;YACZlB;YACAoB,MAAM;YACNC,IAAI1B,MAAM,UAAUmB,YAAYQ,OAAO,CAACD,EAAE;YAC1CnB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYQ,OAAO;QACxB;IACF;IAEAH,MAAMN,QAAQ,GAAGpB,eAAe0B,MAAMN,QAAQ,EAAEU,CAAAA;QAAMV,OAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWU,IAAI;YAAEnB,OAAOmB,GAAGC,aAAa,CAACpB,KAAK;QAAC;;IAErG,MAAMqB,QAAQ/B,iBAAiBK,MAAM0B,KAAK,EAAE;QAC1CP,cAAc;YACZQ,SAASP,MAAME,EAAE;YACjBX,UAAUS,MAAMT,QAAQ;QAC1B;IACF;IAEA,MAAMiB,YAAYjC,iBAAiBK,MAAM4B,SAAS,EAAE;QAClDhB,UAAU,IAAI;QACdO,cAAc;YACZ,eAAe,IAAI;YACnBU,wBAAU,oBAACtC;QACb;IACF;IAEA,OAAO;QACLkB;QACAqB,YAAY;YACVZ,MAAM;YACNE,OAAO;YACPM,OAAOlC;YACPoC,WAAW;QACb;QACAV;QACAE;QACAM;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const group = useRadioGroupContextValue_unstable();\n\n  const {\n    name = group.name,\n    checked = group.value !== undefined ? group.value === props.value : undefined,\n    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n    labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required = group.required,\n    'aria-describedby': ariaDescribedBy = group['aria-describedby'],\n    onChange,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const root = slot.always(props.root, {\n    defaultProps: {\n      ref: useFocusWithin<HTMLSpanElement>(),\n      ...nativeProps.root,\n    },\n    elementType: 'span',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      required,\n      'aria-describedby': ariaDescribedBy,\n      ...nativeProps.primary,\n    },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: input.id, disabled: input.disabled },\n    elementType: Label,\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  return {\n    labelPosition,\n    components: { root: 'span', input: 'input', label: Label, indicator: 'div' },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"names":["React","CircleFilled","Label","getPartitionedNativeProps","mergeCallbacks","useId","slot","useRadioGroupContextValue_unstable","useFocusWithin","useRadio_unstable","props","ref","group","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","always","defaultProps","elementType","input","type","id","primary","ev","currentTarget","label","optional","htmlFor","indicator","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACnG,SAASC,kCAAkC,QAAQ,mCAAmC;AACtF,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAAiD;IACpG,MAAMC,QAAQL;IAEd,MAAM,EACJM,MAAOD,MAAMC,IAAI,CAAA,EACjBC,SAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,CAAA,EAC7EC,gBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,CAAA,EAClGG,eAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,CAAA,EACzEC,UAAWT,MAAMS,QAAQ,CAAA,EACzBC,UAAWV,MAAMU,QAAQ,CAAA,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,CAAA,EAC/DY,SAAQ,EACT,GAAGd;IAEJ,MAAMe,cAActB,0BAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAOtB,KAAKuB,MAAM,CAACnB,MAAMkB,IAAI,EAAE;QACnCE,cAAc;YACZnB,KAAKH;YACL,GAAGiB,YAAYG,IAAI;QACrB;QACAG,aAAa;IACf;IACA,MAAMC,QAAQ1B,KAAKuB,MAAM,CAACnB,MAAMsB,KAAK,EAAE;QACrCF,cAAc;YACZnB;YACAsB,MAAM;YACNC,IAAI7B,MAAM,UAAUoB,YAAYU,OAAO,CAACD,EAAE;YAC1CrB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYU,OAAO;QACxB;QACAJ,aAAa;IACf;IACAC,MAAMR,QAAQ,GAAGpB,eAAe4B,MAAMR,QAAQ,EAAEY,CAAAA;QAAMZ,OAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWY,IAAI;YAAErB,OAAOqB,GAAGC,aAAa,CAACtB,KAAK;QAAC;;IACrG,MAAMuB,QAAQhC,KAAKiC,QAAQ,CAAC7B,MAAM4B,KAAK,EAAE;QACvCR,cAAc;YAAEU,SAASR,MAAME,EAAE;YAAEb,UAAUW,MAAMX,QAAQ;QAAC;QAC5DU,aAAa7B;IACf;IACA,MAAMuC,YAAYnC,KAAKuB,MAAM,CAACnB,MAAM+B,SAAS,EAAE;QAC7CX,cAAc;YAAE,eAAe,IAAI;YAAEY,wBAAU,oBAACzC;QAAgB;QAChE8B,aAAa;IACf;IACA,OAAO;QACLZ;QACAwB,YAAY;YAAEf,MAAM;YAAQI,OAAO;YAASM,OAAOpC;YAAOuC,WAAW;QAAM;QAC3Eb;QACAI;QACAM;QACAG;IACF;AACF,EAAE"}

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

@@ -9,14 +9,14 @@ export const radioClassNames = {
 };
 // The indicator size is used by the indicator and label styles
 const indicatorSize = '16px';
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("r12l4eqc", "r18esy0c", [".r12l4eqc{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r12l4eqc:focus{outline-style:none;}", ".r12l4eqc:focus-visible{outline-style:none;}", ".r12l4eqc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r12l4eqc[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);}", ".r18esy0c{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18esy0c:focus{outline-style:none;}", ".r18esy0c:focus-visible{outline-style:none;}", ".r18esy0c[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r18esy0c[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);}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r12l4eqc", "r18esy0c", [".r12l4eqc{display:inline-flex;position:relative;}", ".r12l4eqc:focus{outline-style:none;}", ".r12l4eqc:focus-visible{outline-style:none;}", ".r12l4eqc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r12l4eqc[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);}", ".r18esy0c{display:inline-flex;position:relative;}", ".r18esy0c:focus{outline-style:none;}", ".r18esy0c:focus-visible{outline-style:none;}", ".r18esy0c[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r18esy0c[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);}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   vertical: {
     Beiy3e4: "f1vx9l62",
     Bt984gj: "f122n59"
   }
 }, {
-  d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
+  d: [".f1vx9l62{flex-direction:column;}", ".f122n59{align-items:center;}"]
 });
 const useInputBaseClassName = /*#__PURE__*/__resetStyles("r9gx1vl", "r1uk1i2c", [".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r9gx1vl:enabled{cursor:pointer;}", ".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}", ".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r1uk1i2c:enabled{cursor:pointer;}", ".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}", ".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"]);
 const useInputStyles = /*#__PURE__*/__styles({
@@ -27,7 +27,7 @@ const useInputStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
 });
-const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rid4516", null, [".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"]);
+const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rid4516", null, [".rid4516{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;}"]);
 // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/__styles({
   base: {
@@ -47,7 +47,7 @@ const useLabelStyles = /*#__PURE__*/__styles({
     fsow6f: "f17mccla"
   }
 }, {
-  d: [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;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;}"]
+  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;}"]
 });
 /**
  * Apply styling to the Radio slots based on the state

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","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","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    // When unchecked, hide the circle icon (child of the indicator)\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n        opacity: '0'\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        },\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        },\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        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled,\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    below: {\n        width: '100%',\n        height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\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});\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.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};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,SAAS,EAAE,sBAAsB;EACjCC,KAAK,EAAE,kBAAkB;EACzBC,KAAK,EAAE;AACX,CAAC;AACD;AACA,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,oBAAoB,gBAAGV,aAAA,+yEAO5B,CAAC;AACF,MAAMW,aAAa,gBAAGV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGhB,aAAA,26GA6E7B,CAAC;AACF,MAAMiB,cAAc,gBAAGhB,QAAA;EAAAiB,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAKtB,CAAC;AACF,MAAMM,yBAAyB,gBAAGrB,aAAA,2lBAejC,CAAC;AACF;AACA,MAAMsB,cAAc,gBAAGrB,QAAA;EAAAsB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,CAgBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMkB,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAM;IAAEC;EAAe,CAAC,GAAGD,KAAK;EAChC,MAAME,iBAAiB,GAAG1B,oBAAoB,CAAC,CAAC;EAChD,MAAM2B,UAAU,GAAG1B,aAAa,CAAC,CAAC;EAClCuB,KAAK,CAAC7B,IAAI,CAACiC,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACC,IAAI,EAAE+B,iBAAiB,EAAED,aAAa,KAAK,OAAO,IAAIE,UAAU,CAACzB,QAAQ,EAAEsB,KAAK,CAAC7B,IAAI,CAACiC,SAAS,CAAC;EACpJ,MAAMC,kBAAkB,GAAGvB,qBAAqB,CAAC,CAAC;EAClD,MAAMwB,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpCiB,KAAK,CAAC3B,KAAK,CAAC+B,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACG,KAAK,EAAEgC,kBAAkB,EAAEJ,aAAa,KAAK,OAAO,IAAIK,WAAW,CAACtB,KAAK,EAAEgB,KAAK,CAAC3B,KAAK,CAAC+B,SAAS,CAAC;EACtJ,MAAMG,sBAAsB,GAAGpB,yBAAyB,CAAC,CAAC;EAC1Da,KAAK,CAAC5B,SAAS,CAACgC,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACE,SAAS,EAAEmC,sBAAsB,EAAEP,KAAK,CAAC5B,SAAS,CAACgC,SAAS,CAAC;EACtH,MAAMI,WAAW,GAAGpB,cAAc,CAAC,CAAC;EACpC,IAAIY,KAAK,CAAC1B,KAAK,EAAE;IACb0B,KAAK,CAAC1B,KAAK,CAAC8B,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACI,KAAK,EAAEkC,WAAW,CAACnB,IAAI,EAAEmB,WAAW,CAACP,aAAa,CAAC,EAAED,KAAK,CAAC1B,KAAK,CAAC8B,SAAS,CAAC;EACpI;AACJ,CAAC"}
+{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","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    // When unchecked, hide the circle icon (child of the indicator)\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n        opacity: '0'\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        },\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        },\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        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled,\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    below: {\n        width: '100%',\n        height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\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});\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.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};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,SAAS,EAAE,sBAAsB;EACjCC,KAAK,EAAE,kBAAkB;EACzBC,KAAK,EAAE;AACX,CAAC;AACD;AACA,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,oBAAoB,gBAAGV,aAAA,2oEAO5B,CAAC;AACF,MAAMW,aAAa,gBAAGV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGhB,aAAA,26GA6E7B,CAAC;AACF,MAAMiB,cAAc,gBAAGhB,QAAA;EAAAiB,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAKtB,CAAC;AACF,MAAMM,yBAAyB,gBAAGrB,aAAA,8VAejC,CAAC;AACF;AACA,MAAMsB,cAAc,gBAAGrB,QAAA;EAAAsB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,CAgBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMkB,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAM;IAAEC;EAAe,CAAC,GAAGD,KAAK;EAChC,MAAME,iBAAiB,GAAG1B,oBAAoB,CAAC,CAAC;EAChD,MAAM2B,UAAU,GAAG1B,aAAa,CAAC,CAAC;EAClCuB,KAAK,CAAC7B,IAAI,CAACiC,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACC,IAAI,EAAE+B,iBAAiB,EAAED,aAAa,KAAK,OAAO,IAAIE,UAAU,CAACzB,QAAQ,EAAEsB,KAAK,CAAC7B,IAAI,CAACiC,SAAS,CAAC;EACpJ,MAAMC,kBAAkB,GAAGvB,qBAAqB,CAAC,CAAC;EAClD,MAAMwB,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpCiB,KAAK,CAAC3B,KAAK,CAAC+B,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACG,KAAK,EAAEgC,kBAAkB,EAAEJ,aAAa,KAAK,OAAO,IAAIK,WAAW,CAACtB,KAAK,EAAEgB,KAAK,CAAC3B,KAAK,CAAC+B,SAAS,CAAC;EACtJ,MAAMG,sBAAsB,GAAGpB,yBAAyB,CAAC,CAAC;EAC1Da,KAAK,CAAC5B,SAAS,CAACgC,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACE,SAAS,EAAEmC,sBAAsB,EAAEP,KAAK,CAAC5B,SAAS,CAACgC,SAAS,CAAC;EACtH,MAAMI,WAAW,GAAGpB,cAAc,CAAC,CAAC;EACpC,IAAIY,KAAK,CAAC1B,KAAK,EAAE;IACb0B,KAAK,CAAC1B,KAAK,CAAC8B,SAAS,GAAGpC,YAAY,CAACE,eAAe,CAACI,KAAK,EAAEkC,WAAW,CAACnB,IAAI,EAAEmB,WAAW,CAACP,aAAa,CAAC,EAAED,KAAK,CAAC1B,KAAK,CAAC8B,SAAS,CAAC;EACpI;AACJ,CAAC"}

package/lib/components/RadioGroup/renderRadioGroup.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { RadioGroupContext } from '../../contexts/RadioGroupContext';
 /**
  * Render the final JSX of RadioGroup
  */ export const renderRadioGroup_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(RadioGroupContext.Provider, {
         value: contextValues.radioGroup
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

package/lib/components/RadioGroup/renderRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderRadioGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => {\n  const { slots, slotProps } = getSlotsNext<RadioGroupSlots>(state);\n\n  return (\n    <RadioGroupContext.Provider value={contextValues.radioGroup}>\n      <slots.root {...slotProps.root} />\n    </RadioGroupContext.Provider>\n  );\n};\n"],"names":["createElement","getSlotsNext","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","slots","slotProps","Provider","value","radioGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,iBAAiB,QAAQ,mCAAmC;AAGrE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC,gBAA2C;IAC3G,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA8BG;IAE3D,qBACE,AAfJ,cAeKF,kBAAkBM,QAAQ;QAACC,OAAOJ,cAAcK,UAAU;qBACzD,AAhBN,cAgBOJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderRadioGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => {\n  assertSlots<RadioGroupSlots>(state);\n\n  return (\n    <RadioGroupContext.Provider value={contextValues.radioGroup}>\n      <state.root />\n    </RadioGroupContext.Provider>\n  );\n};\n"],"names":["createElement","assertSlots","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","Provider","value","radioGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,iBAAiB,QAAQ,mCAAmC;AAGrE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC,gBAA2C;IAC3GJ,YAA6BG;IAE7B,qBACE,AAfJ,cAeKF,kBAAkBI,QAAQ;QAACC,OAAOF,cAAcG,UAAU;qBACzD,AAhBN,cAgBOJ,MAAMK,IAAI;AAGjB,EAAE"}

package/lib/components/RadioGroup/useRadioGroup.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { getNativeElementProps, isHTMLElement, useEventCallback, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render RadioGroup.
  *
@@ -27,10 +27,12 @@ import { getNativeElementProps, isHTMLElement, useEventCallback, useId } from '@
         root: {
             ref,
             role: 'radiogroup',
-            ...getNativeElementProps('div', props, /*excludedPropNames:*/ [
+            ...slot.always(getNativeElementProps('div', props, /*excludedPropNames:*/ [
                 'onChange',
                 'name'
-            ]),
+            ]), {
+                elementType: 'div'
+            }),
             onChange: useEventCallback((ev)=>{
                 if (onChange && isHTMLElement(ev.target, {
                     constructorName: 'HTMLInputElement'

package/lib/components/RadioGroup/useRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRadioGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getNativeElementProps, isHTMLElement, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const generatedName = useId('radiogroup-');\n\n  const { name = generatedName, value, defaultValue, disabled, layout = 'vertical', onChange, required } = props;\n\n  return {\n    layout,\n    name,\n    value,\n    defaultValue,\n    disabled,\n    required,\n    components: {\n      root: 'div',\n    },\n    root: {\n      ref,\n      role: 'radiogroup',\n      ...getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']),\n      onChange: useEventCallback(ev => {\n        if (\n          onChange &&\n          isHTMLElement(ev.target, { constructorName: 'HTMLInputElement' }) &&\n          ev.target.type === 'radio'\n        ) {\n          onChange(ev, { value: ev.target.value });\n        }\n      }),\n    },\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","getNativeElementProps","isHTMLElement","useEventCallback","useId","useRadioGroup_unstable","props","ref","generatedName","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","ev","target","constructorName","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAG1G;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAoD;IACjH,+CAA+C;IAC/CD,QAAQN,8BAA8BM;IAEtC,MAAME,gBAAgBJ,MAAM;IAE5B,MAAM,EAAEK,MAAOD,cAAa,EAAEE,MAAK,EAAEC,aAAY,EAAEC,SAAQ,EAAEC,QAAS,WAAU,EAAEC,SAAQ,EAAEC,SAAQ,EAAE,GAAGT;IAEzG,OAAO;QACLO;QACAJ;QACAC;QACAC;QACAC;QACAG;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM;YACJV;YACAW,MAAM;YACN,GAAGjB,sBAAsB,OAAOK,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,CAAC;YACnFQ,UAAUX,iBAAiBgB,CAAAA,KAAM;gBAC/B,IACEL,YACAZ,cAAciB,GAAGC,MAAM,EAAE;oBAAEC,iBAAiB;gBAAmB,MAC/DF,GAAGC,MAAM,CAACE,IAAI,KAAK,SACnB;oBACAR,SAASK,IAAI;wBAAET,OAAOS,GAAGC,MAAM,CAACV,KAAK;oBAAC;gBACxC,CAAC;YACH;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useRadioGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getNativeElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const generatedName = useId('radiogroup-');\n\n  const { name = generatedName, value, defaultValue, disabled, layout = 'vertical', onChange, required } = props;\n\n  return {\n    layout,\n    name,\n    value,\n    defaultValue,\n    disabled,\n    required,\n    components: {\n      root: 'div',\n    },\n    root: {\n      ref,\n      role: 'radiogroup',\n      ...slot.always(getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']), {\n        elementType: 'div',\n      }),\n      onChange: useEventCallback(ev => {\n        if (\n          onChange &&\n          isHTMLElement(ev.target, { constructorName: 'HTMLInputElement' }) &&\n          ev.target.type === 'radio'\n        ) {\n          onChange(ev, { value: ev.target.value });\n        }\n      }),\n    },\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","getNativeElementProps","isHTMLElement","useEventCallback","useId","slot","useRadioGroup_unstable","props","ref","generatedName","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","always","elementType","ev","target","constructorName","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGhH;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAoD;IACjH,+CAA+C;IAC/CD,QAAQP,8BAA8BO;IAEtC,MAAME,gBAAgBL,MAAM;IAE5B,MAAM,EAAEM,MAAOD,cAAa,EAAEE,MAAK,EAAEC,aAAY,EAAEC,SAAQ,EAAEC,QAAS,WAAU,EAAEC,SAAQ,EAAEC,SAAQ,EAAE,GAAGT;IAEzG,OAAO;QACLO;QACAJ;QACAC;QACAC;QACAC;QACAG;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM;YACJV;YACAW,MAAM;YACN,GAAGd,KAAKe,MAAM,CAACnB,sBAAsB,OAAOM,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,GAAG;gBAC/Fc,aAAa;YACf,EAAE;YACFN,UAAUZ,iBAAiBmB,CAAAA,KAAM;gBAC/B,IACEP,YACAb,cAAcoB,GAAGC,MAAM,EAAE;oBAAEC,iBAAiB;gBAAmB,MAC/DF,GAAGC,MAAM,CAACE,IAAI,KAAK,SACnB;oBACAV,SAASO,IAAI;wBAAEX,OAAOW,GAAGC,MAAM,CAACZ,KAAK;oBAAC;gBACxC,CAAC;YACH;QACF;IACF;AACF,EAAE"}

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

@@ -11,7 +11,7 @@ const useStyles = /*#__PURE__*/__styles({
     Beiy3e4: "f1vx9l62"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+  d: [".f22iagw{display:flex;}", ".f6jr5hl{align-items:flex-start;}", ".f1vx9l62{flex-direction:column;}"]
 });
 /**
  * Apply styling to the RadioGroup slots based on the state

package/lib-commonjs/components/Radio/renderRadio.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderRadio_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderRadio_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.input, slotProps.input), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.indicator, slotProps.indicator), slots.label && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.label, slotProps.label));
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.input, null), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.indicator, null), state.label && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.label, null));
 };

package/lib-commonjs/components/Radio/renderRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderRadio.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Radio\n */ export const renderRadio_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.input, slotProps.input), /*#__PURE__*/ createElement(slots.indicator, slotProps.indicator), slots.label && /*#__PURE__*/ createElement(slots.label, slotProps.label));\n};\n"],"names":["renderRadio_unstable","state","slots","slotProps","getSlotsNext","createElement","root","input","indicator","label"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,uBAAuB,CAACC,QAAQ;IAC7C,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACH,MAAMK,KAAK,EAAEJ,UAAUI,KAAK,GAAG,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMM,SAAS,EAAEL,UAAUK,SAAS,GAAGN,MAAMO,KAAK,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMO,KAAK,EAAEN,UAAUM,KAAK;AACxQ"}
+{"version":3,"sources":["renderRadio.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Radio\n */ export const renderRadio_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(state.input, null), /*#__PURE__*/ createElement(state.indicator, null), state.label && /*#__PURE__*/ createElement(state.label, null));\n};\n"],"names":["renderRadio_unstable","state","assertSlots","createElement","root","input","indicator","label"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,uBAAuB,CAACC,QAAQ;IAC7CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACF,MAAMI,KAAK,EAAE,IAAI,GAAG,WAAW,GAAGF,IAAAA,8BAAa,EAACF,MAAMK,SAAS,EAAE,IAAI,GAAGL,MAAMM,KAAK,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACF,MAAMM,KAAK,EAAE,IAAI;AACzN"}

package/lib-commonjs/components/Radio/useRadio.js

@@ -25,15 +25,14 @@ const useRadio_unstable = (props, ref)=>{
             'onChange'
         ]
     });
-    const root = (0, _reactUtilities.resolveShorthand)(props.root, {
-        required: true,
+    const root = _reactUtilities.slot.always(props.root, {
         defaultProps: {
             ref: (0, _reactTabster.useFocusWithin)(),
             ...nativeProps.root
-        }
+        },
+        elementType: 'span'
     });
-    const input = (0, _reactUtilities.resolveShorthand)(props.input, {
-        required: true,
+    const input = _reactUtilities.slot.always(props.input, {
         defaultProps: {
             ref,
             type: 'radio',
@@ -45,25 +44,27 @@ const useRadio_unstable = (props, ref)=>{
             required,
             'aria-describedby': ariaDescribedBy,
             ...nativeProps.primary
-        }
+        },
+        elementType: 'input'
     });
     input.onChange = (0, _reactUtilities.mergeCallbacks)(input.onChange, (ev)=>{
         return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
             value: ev.currentTarget.value
         });
     });
-    const label = (0, _reactUtilities.resolveShorthand)(props.label, {
+    const label = _reactUtilities.slot.optional(props.label, {
         defaultProps: {
             htmlFor: input.id,
             disabled: input.disabled
-        }
+        },
+        elementType: _reactLabel.Label
     });
-    const indicator = (0, _reactUtilities.resolveShorthand)(props.indicator, {
-        required: true,
+    const indicator = _reactUtilities.slot.always(props.indicator, {
         defaultProps: {
             'aria-hidden': true,
             children: /*#__PURE__*/ _react.createElement(_reactIcons.CircleFilled, null)
-        }
+        },
+        elementType: 'div'
     });
     return {
         labelPosition,

package/lib-commonjs/components/Radio/useRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRadio.js"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */ export const useRadio_unstable = (props, ref)=>{\n    const group = useRadioGroupContextValue_unstable();\n    const { name =group.name , checked =group.value !== undefined ? group.value === props.value : undefined , defaultChecked =group.defaultValue !== undefined ? group.defaultValue === props.value : undefined , labelPosition =group.layout === 'horizontal-stacked' ? 'below' : 'after' , disabled =group.disabled , required =group.required , 'aria-describedby': ariaDescribedBy = group['aria-describedby'] , onChange  } = props;\n    const nativeProps = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'checked',\n            'defaultChecked',\n            'onChange'\n        ]\n    });\n    const root = resolveShorthand(props.root, {\n        required: true,\n        defaultProps: {\n            ref: useFocusWithin(),\n            ...nativeProps.root\n        }\n    });\n    const input = resolveShorthand(props.input, {\n        required: true,\n        defaultProps: {\n            ref,\n            type: 'radio',\n            id: useId('radio-', nativeProps.primary.id),\n            name,\n            checked,\n            defaultChecked,\n            disabled,\n            required,\n            'aria-describedby': ariaDescribedBy,\n            ...nativeProps.primary\n        }\n    });\n    input.onChange = mergeCallbacks(input.onChange, (ev)=>{\n        return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n            value: ev.currentTarget.value\n        });\n    });\n    const label = resolveShorthand(props.label, {\n        defaultProps: {\n            htmlFor: input.id,\n            disabled: input.disabled\n        }\n    });\n    const indicator = resolveShorthand(props.indicator, {\n        required: true,\n        defaultProps: {\n            'aria-hidden': true,\n            children: /*#__PURE__*/ React.createElement(CircleFilled, null)\n        }\n    });\n    return {\n        labelPosition,\n        components: {\n            root: 'span',\n            input: 'input',\n            label: Label,\n            indicator: 'div'\n        },\n        root,\n        input,\n        label,\n        indicator\n    };\n};\n"],"names":["useRadio_unstable","props","ref","group","useRadioGroupContextValue_unstable","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","root","resolveShorthand","defaultProps","useFocusWithin","input","type","id","useId","primary","mergeCallbacks","ev","currentTarget","label","htmlFor","indicator","children","React","createElement","CircleFilled","components","Label"],"mappings":";;;;+BAciBA;;aAAAA;;;6DAdM;4BACM;4BACP;gCAC6D;mCAChC;8BACpB;AASpB,MAAMA,oBAAoB,CAACC,OAAOC,MAAM;IAC/C,MAAMC,QAAQC,IAAAA,qDAAkC;IAChD,MAAM,EAAEC,MAAMF,MAAME,IAAI,CAAA,EAAGC,SAASH,MAAMI,KAAK,KAAKC,YAAYL,MAAMI,KAAK,KAAKN,MAAMM,KAAK,GAAGC,SAAS,CAAA,EAAGC,gBAAgBN,MAAMO,YAAY,KAAKF,YAAYL,MAAMO,YAAY,KAAKT,MAAMM,KAAK,GAAGC,SAAS,CAAA,EAAGG,eAAeR,MAAMS,MAAM,KAAK,uBAAuB,UAAU,OAAO,CAAA,EAAGC,UAAUV,MAAMU,QAAQ,CAAA,EAAGC,UAAUX,MAAMW,QAAQ,CAAA,EAAG,oBAAoBC,kBAAkBZ,KAAK,CAAC,mBAAmB,CAAA,EAAGa,SAAQ,EAAG,GAAGf;IAC/Z,MAAMgB,cAAcC,IAAAA,yCAAyB,EAAC;QAC1CjB;QACAkB,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;SACH;IACL;IACA,MAAMC,OAAOC,IAAAA,gCAAgB,EAACrB,MAAMoB,IAAI,EAAE;QACtCP,UAAU,IAAI;QACdS,cAAc;YACVrB,KAAKsB,IAAAA,4BAAc;YACnB,GAAGP,YAAYI,IAAI;QACvB;IACJ;IACA,MAAMI,QAAQH,IAAAA,gCAAgB,EAACrB,MAAMwB,KAAK,EAAE;QACxCX,UAAU,IAAI;QACdS,cAAc;YACVrB;YACAwB,MAAM;YACNC,IAAIC,IAAAA,qBAAK,EAAC,UAAUX,YAAYY,OAAO,CAACF,EAAE;YAC1CtB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYY,OAAO;QAC1B;IACJ;IACAJ,MAAMT,QAAQ,GAAGc,IAAAA,8BAAc,EAACL,MAAMT,QAAQ,EAAE,CAACe,KAAK;QAClD,OAAOf,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASe,IAAI;YACpExB,OAAOwB,GAAGC,aAAa,CAACzB,KAAK;QACjC,EAAE;IACN;IACA,MAAM0B,QAAQX,IAAAA,gCAAgB,EAACrB,MAAMgC,KAAK,EAAE;QACxCV,cAAc;YACVW,SAAST,MAAME,EAAE;YACjBd,UAAUY,MAAMZ,QAAQ;QAC5B;IACJ;IACA,MAAMsB,YAAYb,IAAAA,gCAAgB,EAACrB,MAAMkC,SAAS,EAAE;QAChDrB,UAAU,IAAI;QACdS,cAAc;YACV,eAAe,IAAI;YACnBa,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,wBAAY,EAAE,IAAI;QAClE;IACJ;IACA,OAAO;QACH5B;QACA6B,YAAY;YACRnB,MAAM;YACNI,OAAO;YACPQ,OAAOQ,iBAAK;YACZN,WAAW;QACf;QACAd;QACAI;QACAQ;QACAE;IACJ;AACJ"}
+{"version":3,"sources":["useRadio.js"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */ export const useRadio_unstable = (props, ref)=>{\n    const group = useRadioGroupContextValue_unstable();\n    const { name =group.name , checked =group.value !== undefined ? group.value === props.value : undefined , defaultChecked =group.defaultValue !== undefined ? group.defaultValue === props.value : undefined , labelPosition =group.layout === 'horizontal-stacked' ? 'below' : 'after' , disabled =group.disabled , required =group.required , 'aria-describedby': ariaDescribedBy = group['aria-describedby'] , onChange  } = props;\n    const nativeProps = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'checked',\n            'defaultChecked',\n            'onChange'\n        ]\n    });\n    const root = slot.always(props.root, {\n        defaultProps: {\n            ref: useFocusWithin(),\n            ...nativeProps.root\n        },\n        elementType: 'span'\n    });\n    const input = slot.always(props.input, {\n        defaultProps: {\n            ref,\n            type: 'radio',\n            id: useId('radio-', nativeProps.primary.id),\n            name,\n            checked,\n            defaultChecked,\n            disabled,\n            required,\n            'aria-describedby': ariaDescribedBy,\n            ...nativeProps.primary\n        },\n        elementType: 'input'\n    });\n    input.onChange = mergeCallbacks(input.onChange, (ev)=>{\n        return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n            value: ev.currentTarget.value\n        });\n    });\n    const label = slot.optional(props.label, {\n        defaultProps: {\n            htmlFor: input.id,\n            disabled: input.disabled\n        },\n        elementType: Label\n    });\n    const indicator = slot.always(props.indicator, {\n        defaultProps: {\n            'aria-hidden': true,\n            children: /*#__PURE__*/ React.createElement(CircleFilled, null)\n        },\n        elementType: 'div'\n    });\n    return {\n        labelPosition,\n        components: {\n            root: 'span',\n            input: 'input',\n            label: Label,\n            indicator: 'div'\n        },\n        root,\n        input,\n        label,\n        indicator\n    };\n};\n"],"names":["useRadio_unstable","props","ref","group","useRadioGroupContextValue_unstable","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","root","slot","always","defaultProps","useFocusWithin","elementType","input","type","id","useId","primary","mergeCallbacks","ev","currentTarget","label","optional","htmlFor","Label","indicator","children","React","createElement","CircleFilled","components"],"mappings":";;;;+BAciBA;;aAAAA;;;6DAdM;4BACM;4BACP;gCACiD;mCACpB;8BACpB;AASpB,MAAMA,oBAAoB,CAACC,OAAOC,MAAM;IAC/C,MAAMC,QAAQC,IAAAA,qDAAkC;IAChD,MAAM,EAAEC,MAAMF,MAAME,IAAI,CAAA,EAAGC,SAASH,MAAMI,KAAK,KAAKC,YAAYL,MAAMI,KAAK,KAAKN,MAAMM,KAAK,GAAGC,SAAS,CAAA,EAAGC,gBAAgBN,MAAMO,YAAY,KAAKF,YAAYL,MAAMO,YAAY,KAAKT,MAAMM,KAAK,GAAGC,SAAS,CAAA,EAAGG,eAAeR,MAAMS,MAAM,KAAK,uBAAuB,UAAU,OAAO,CAAA,EAAGC,UAAUV,MAAMU,QAAQ,CAAA,EAAGC,UAAUX,MAAMW,QAAQ,CAAA,EAAG,oBAAoBC,kBAAkBZ,KAAK,CAAC,mBAAmB,CAAA,EAAGa,SAAQ,EAAG,GAAGf;IAC/Z,MAAMgB,cAAcC,IAAAA,yCAAyB,EAAC;QAC1CjB;QACAkB,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;SACH;IACL;IACA,MAAMC,OAAOC,oBAAI,CAACC,MAAM,CAACtB,MAAMoB,IAAI,EAAE;QACjCG,cAAc;YACVtB,KAAKuB,IAAAA,4BAAc;YACnB,GAAGR,YAAYI,IAAI;QACvB;QACAK,aAAa;IACjB;IACA,MAAMC,QAAQL,oBAAI,CAACC,MAAM,CAACtB,MAAM0B,KAAK,EAAE;QACnCH,cAAc;YACVtB;YACA0B,MAAM;YACNC,IAAIC,IAAAA,qBAAK,EAAC,UAAUb,YAAYc,OAAO,CAACF,EAAE;YAC1CxB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYc,OAAO;QAC1B;QACAL,aAAa;IACjB;IACAC,MAAMX,QAAQ,GAAGgB,IAAAA,8BAAc,EAACL,MAAMX,QAAQ,EAAE,CAACiB,KAAK;QAClD,OAAOjB,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASiB,IAAI;YACpE1B,OAAO0B,GAAGC,aAAa,CAAC3B,KAAK;QACjC,EAAE;IACN;IACA,MAAM4B,QAAQb,oBAAI,CAACc,QAAQ,CAACnC,MAAMkC,KAAK,EAAE;QACrCX,cAAc;YACVa,SAASV,MAAME,EAAE;YACjBhB,UAAUc,MAAMd,QAAQ;QAC5B;QACAa,aAAaY,iBAAK;IACtB;IACA,MAAMC,YAAYjB,oBAAI,CAACC,MAAM,CAACtB,MAAMsC,SAAS,EAAE;QAC3Cf,cAAc;YACV,eAAe,IAAI;YACnBgB,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,wBAAY,EAAE,IAAI;QAClE;QACAjB,aAAa;IACjB;IACA,OAAO;QACHf;QACAiC,YAAY;YACRvB,MAAM;YACNM,OAAO;YACPQ,OAAOG,iBAAK;YACZC,WAAW;QACf;QACAlB;QACAM;QACAQ;QACAI;IACJ;AACJ"}

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

@@ -22,12 +22,12 @@ const radioClassNames = {
 // The indicator size is used by the indicator and label styles
 const indicatorSize = '16px';
 const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r12l4eqc", "r18esy0c", [
-    ".r12l4eqc{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}",
+    ".r12l4eqc{display:inline-flex;position:relative;}",
     ".r12l4eqc:focus{outline-style:none;}",
     ".r12l4eqc:focus-visible{outline-style:none;}",
     ".r12l4eqc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
     ".r12l4eqc[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);}",
-    ".r18esy0c{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}",
+    ".r18esy0c{display:inline-flex;position:relative;}",
     ".r18esy0c:focus{outline-style:none;}",
     ".r18esy0c:focus-visible{outline-style:none;}",
     ".r18esy0c[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
@@ -40,8 +40,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     d: [
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
-        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"
+        ".f1vx9l62{flex-direction:column;}",
+        ".f122n59{align-items:center;}"
     ]
 });
 const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r9gx1vl", "r1uk1i2c", [
@@ -90,7 +90,7 @@ const useInputStyles = /*#__PURE__*/ (0, _react["__styles"])({
     ]
 });
 const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rid4516", null, [
-    ".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"
+    ".rid4516{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;}"
 ]);
 // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
@@ -121,7 +121,7 @@ const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     d: [
-        ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}",
+        ".f7nlbp4{align-self:center;}",
         ".f1kwiid1{padding-top:var(--spacingVerticalS);}",
         ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
         ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",

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(\"r12l4eqc\", \"r18esy0c\", [\".r12l4eqc{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r12l4eqc:focus{outline-style:none;}\", \".r12l4eqc:focus-visible{outline-style:none;}\", \".r12l4eqc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r12l4eqc[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);}\", \".r18esy0c{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r18esy0c:focus{outline-style:none;}\", \".r18esy0c:focus-visible{outline-style:none;}\", \".r18esy0c[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r18esy0c[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);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n  vertical: {\n    Beiy3e4: \"f1vx9l62\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"r9gx1vl\", \"r1uk1i2c\", [\".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r9gx1vl:enabled{cursor:pointer;}\", \".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}\", \".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r1uk1i2c:enabled{cursor:pointer;}\", \".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}\", \".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n  below: {\n    a9b677: \"fly5x3f\",\n    Bqenvij: \"f1je6zif\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rid4516\", null, [\".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}\"]);\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{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;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.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};\n//# sourceMappingURL=useRadioStyles.styles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"mappings":";;;;;;;;;;;IAGaA,eAAe,MAAfA;IAmDAC,uBAAuB,MAAvBA;;uBApDqD;AAC3D,MAAMD,kBAAkB;IAC7BE,MAAM;IACNC,WAAW;IACXC,OAAO;IACPC,OAAO;AACT;AACA,+DAA+D;AAC/D,MAAMC,gBAAgB;AACtB,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,YAAY,YAAY;IAAC;IAAuI;IAAwC;IAAgD;IAA6K;IAA+vB;IAAuI;IAAwC;IAAgD;IAA6K;CAA8vB;AACt2E,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA6F;KAA0G;AAC7M;AACA,MAAMC,wBAAwB,WAAW,GAAEP,IAAAA,uBAAa,EAAC,WAAW,YAAY;IAAC;IAAmJ;IAAqC;IAAuD;IAA8D;IAA2F;IAA2G;IAAiG;IAAsH;IAAwG;IAA+H;IAAqF;IAA4I;IAA4J;IAAuK;IAAoG;IAAwI;IAAqJ;IAAsC;IAAwD;IAA+D;IAA4F;IAA4G;IAAkG;IAAuH;IAAyG;IAAgI;IAAsF;IAA6I;IAA6J;IAAwK;IAAqG;CAAwI;AACn+G,MAAMQ,iBAAiB,WAAW,GAAEN,IAAAA,kBAAQ,EAAC;IAC3CO,OAAO;QACLC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDL,GAAG;QAAC;QAAyB;KAA8D;AAC7F;AACA,MAAMM,4BAA4B,WAAW,GAAEZ,IAAAA,uBAAa,EAAC,WAAW,IAAI,EAAE;IAAC;CAAwkB;AACvpB,mGAAmG;AACnG,MAAMa,iBAAiB,WAAW,GAAEX,IAAAA,kBAAQ,EAAC;IAC3CY,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAC,OAAO;QACLD,QAAQ;YAAC;YAAW;SAAU;QAC9BE,SAAS;QACTC,QAAQ;IACV;IACAb,OAAO;QACLO,QAAQ;QACRO,QAAQ;IACV;AACF,GAAG;IACDjB,GAAG;QAAC;QAA+G;QAAmD;QAAuD;QAAsD;QAAqD;QAAsD;QAAuD;QAAqE;QAAwE;QAAoD;KAAgC;AACxpB;AAIO,MAAMb,0BAA0B+B,CAAAA,QAAS;IAC9C,MAAM,EACJC,cAAa,EACd,GAAGD;IACJ,MAAME,oBAAoB3B;IAC1B,MAAM4B,aAAa1B;IACnBuB,MAAM9B,IAAI,CAACkC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBE,IAAI,EAAEgC,mBAAmBD,kBAAkB,WAAWE,WAAWxB,QAAQ,EAAEqB,MAAM9B,IAAI,CAACkC,SAAS;IACnJ,MAAME,qBAAqBvB;IAC3B,MAAMwB,cAAcvB;IACpBgB,MAAM5B,KAAK,CAACgC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBI,KAAK,EAAEkC,oBAAoBL,kBAAkB,WAAWM,YAAYtB,KAAK,EAAEe,MAAM5B,KAAK,CAACgC,SAAS;IACrJ,MAAMI,yBAAyBpB;IAC/BY,MAAM7B,SAAS,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBG,SAAS,EAAEqC,wBAAwBR,MAAM7B,SAAS,CAACiC,SAAS;IACrH,MAAMK,cAAcpB;IACpB,IAAIW,MAAM3B,KAAK,EAAE;QACf2B,MAAM3B,KAAK,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBK,KAAK,EAAEoC,YAAYnB,IAAI,EAAEmB,WAAW,CAACR,cAAc,EAAED,MAAM3B,KAAK,CAAC+B,SAAS;IACjI,CAAC;AACH,GACA,iDAAiD"}
+{"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(\"r12l4eqc\", \"r18esy0c\", [\".r12l4eqc{display:inline-flex;position:relative;}\", \".r12l4eqc:focus{outline-style:none;}\", \".r12l4eqc:focus-visible{outline-style:none;}\", \".r12l4eqc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r12l4eqc[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);}\", \".r18esy0c{display:inline-flex;position:relative;}\", \".r18esy0c:focus{outline-style:none;}\", \".r18esy0c:focus-visible{outline-style:none;}\", \".r18esy0c[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r18esy0c[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);}\"]);\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(\"r9gx1vl\", \"r1uk1i2c\", [\".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r9gx1vl:enabled{cursor:pointer;}\", \".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}\", \".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\", \".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}\", \".r1uk1i2c:enabled{cursor:pointer;}\", \".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}\", \".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}\", \".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}\", \".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}\", \".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}\", \".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}\", \".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}\", \".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}\", \".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n  below: {\n    a9b677: \"fly5x3f\",\n    Bqenvij: \"f1je6zif\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rid4516\", null, [\".rid4516{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;}\"]);\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.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};\n//# sourceMappingURL=useRadioStyles.styles.js.map"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"mappings":";;;;;;;;;;;IAGaA,eAAe,MAAfA;IAmDAC,uBAAuB,MAAvBA;;uBApDqD;AAC3D,MAAMD,kBAAkB;IAC7BE,MAAM;IACNC,WAAW;IACXC,OAAO;IACPC,OAAO;AACT;AACA,+DAA+D;AAC/D,MAAMC,gBAAgB;AACtB,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,YAAY,YAAY;IAAC;IAAqD;IAAwC;IAAgD;IAA6K;IAA+vB;IAAqD;IAAwC;IAAgD;IAA6K;CAA8vB;AAClsE,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAqC;KAAgC;AAC3E;AACA,MAAMC,wBAAwB,WAAW,GAAEP,IAAAA,uBAAa,EAAC,WAAW,YAAY;IAAC;IAAmJ;IAAqC;IAAuD;IAA8D;IAA2F;IAA2G;IAAiG;IAAsH;IAAwG;IAA+H;IAAqF;IAA4I;IAA4J;IAAuK;IAAoG;IAAwI;IAAqJ;IAAsC;IAAwD;IAA+D;IAA4F;IAA4G;IAAkG;IAAuH;IAAyG;IAAgI;IAAsF;IAA6I;IAA6J;IAAwK;IAAqG;CAAwI;AACn+G,MAAMQ,iBAAiB,WAAW,GAAEN,IAAAA,kBAAQ,EAAC;IAC3CO,OAAO;QACLC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDL,GAAG;QAAC;QAAyB;KAA8D;AAC7F;AACA,MAAMM,4BAA4B,WAAW,GAAEZ,IAAAA,uBAAa,EAAC,WAAW,IAAI,EAAE;IAAC;CAA2U;AAC1Z,mGAAmG;AACnG,MAAMa,iBAAiB,WAAW,GAAEX,IAAAA,kBAAQ,EAAC;IAC3CY,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAC,OAAO;QACLD,QAAQ;YAAC;YAAW;SAAU;QAC9BE,SAAS;QACTC,QAAQ;IACV;IACAb,OAAO;QACLO,QAAQ;QACRO,QAAQ;IACV;AACF,GAAG;IACDjB,GAAG;QAAC;QAAgC;QAAmD;QAAuD;QAAsD;QAAqD;QAAsD;QAAuD;QAAqE;QAAwE;QAAoD;KAAgC;AACzkB;AAIO,MAAMb,0BAA0B+B,CAAAA,QAAS;IAC9C,MAAM,EACJC,cAAa,EACd,GAAGD;IACJ,MAAME,oBAAoB3B;IAC1B,MAAM4B,aAAa1B;IACnBuB,MAAM9B,IAAI,CAACkC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBE,IAAI,EAAEgC,mBAAmBD,kBAAkB,WAAWE,WAAWxB,QAAQ,EAAEqB,MAAM9B,IAAI,CAACkC,SAAS;IACnJ,MAAME,qBAAqBvB;IAC3B,MAAMwB,cAAcvB;IACpBgB,MAAM5B,KAAK,CAACgC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBI,KAAK,EAAEkC,oBAAoBL,kBAAkB,WAAWM,YAAYtB,KAAK,EAAEe,MAAM5B,KAAK,CAACgC,SAAS;IACrJ,MAAMI,yBAAyBpB;IAC/BY,MAAM7B,SAAS,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBG,SAAS,EAAEqC,wBAAwBR,MAAM7B,SAAS,CAACiC,SAAS;IACrH,MAAMK,cAAcpB;IACpB,IAAIW,MAAM3B,KAAK,EAAE;QACf2B,MAAM3B,KAAK,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACrC,gBAAgBK,KAAK,EAAEoC,YAAYnB,IAAI,EAAEmB,WAAW,CAACR,cAAc,EAAED,MAAM3B,KAAK,CAAC+B,SAAS;IACjI,CAAC;AACH,GACA,iDAAiD"}

package/lib-commonjs/components/RadioGroup/renderRadioGroup.js

@@ -10,8 +10,8 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _radioGroupContext = require("../../contexts/RadioGroupContext");
 const renderRadioGroup_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    (0, _reactUtilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_radioGroupContext.RadioGroupContext.Provider, {
         value: contextValues.radioGroup
-    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null));
 };

package/lib-commonjs/components/RadioGroup/renderRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderRadioGroup.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\n/**\n * Render the final JSX of RadioGroup\n */ export const renderRadioGroup_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(RadioGroupContext.Provider, {\n        value: contextValues.radioGroup\n    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));\n};\n"],"names":["renderRadioGroup_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","RadioGroupContext","Provider","value","radioGroup","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;mCACK;AAGvB,MAAMA,4BAA4B,CAACC,OAAOC,gBAAgB;IACjE,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACC,oCAAiB,CAACC,QAAQ,EAAE;QAC3DC,OAAOP,cAAcQ,UAAU;IACnC,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMQ,IAAI,EAAEP,UAAUO,IAAI;AAC7D"}
+{"version":3,"sources":["renderRadioGroup.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\n/**\n * Render the final JSX of RadioGroup\n */ export const renderRadioGroup_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(RadioGroupContext.Provider, {\n        value: contextValues.radioGroup\n    }, /*#__PURE__*/ createElement(state.root, null));\n};\n"],"names":["renderRadioGroup_unstable","state","contextValues","assertSlots","createElement","RadioGroupContext","Provider","value","radioGroup","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;mCACM;AAGvB,MAAMA,4BAA4B,CAACC,OAAOC,gBAAgB;IACjEC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACC,oCAAiB,CAACC,QAAQ,EAAE;QAC3DC,OAAOL,cAAcM,UAAU;IACnC,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMQ,IAAI,EAAE,IAAI;AACnD"}

package/lib-commonjs/components/RadioGroup/useRadioGroup.js

@@ -28,10 +28,12 @@ const useRadioGroup_unstable = (props, ref)=>{
         root: {
             ref,
             role: 'radiogroup',
-            ...(0, _reactUtilities.getNativeElementProps)('div', props, /*excludedPropNames:*/ [
+            ..._reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', props, /*excludedPropNames:*/ [
                 'onChange',
                 'name'
-            ]),
+            ]), {
+                elementType: 'div'
+            }),
             onChange: (0, _reactUtilities.useEventCallback)((ev)=>{
                 if (onChange && (0, _reactUtilities.isHTMLElement)(ev.target, {
                     constructorName: 'HTMLInputElement'

package/lib-commonjs/components/RadioGroup/useRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getNativeElementProps, isHTMLElement, useEventCallback, useId } from '@fluentui/react-utilities';\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */ export const useRadioGroup_unstable = (props, ref)=>{\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props);\n    const generatedName = useId('radiogroup-');\n    const { name =generatedName , value , defaultValue , disabled , layout ='vertical' , onChange , required  } = props;\n    return {\n        layout,\n        name,\n        value,\n        defaultValue,\n        disabled,\n        required,\n        components: {\n            root: 'div'\n        },\n        root: {\n            ref,\n            role: 'radiogroup',\n            ...getNativeElementProps('div', props, /*excludedPropNames:*/ [\n                'onChange',\n                'name'\n            ]),\n            onChange: useEventCallback((ev)=>{\n                if (onChange && isHTMLElement(ev.target, {\n                    constructorName: 'HTMLInputElement'\n                }) && ev.target.type === 'radio') {\n                    onChange(ev, {\n                        value: ev.target.value\n                    });\n                }\n            })\n        }\n    };\n};\n"],"names":["useRadioGroup_unstable","props","ref","useFieldControlProps_unstable","generatedName","useId","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","getNativeElementProps","useEventCallback","ev","isHTMLElement","target","constructorName","type"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;4BACuB;gCACgC;AASnE,MAAMA,yBAAyB,CAACC,OAAOC,MAAM;IACpD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAA6B,EAACF;IACtC,MAAMG,gBAAgBC,IAAAA,qBAAK,EAAC;IAC5B,MAAM,EAAEC,MAAMF,cAAa,EAAGG,MAAK,EAAGC,aAAY,EAAGC,SAAQ,EAAGC,QAAQ,WAAU,EAAGC,SAAQ,EAAGC,SAAQ,EAAG,GAAGX;IAC9G,OAAO;QACHS;QACAJ;QACAC;QACAC;QACAC;QACAG;QACAC,YAAY;YACRC,MAAM;QACV;QACAA,MAAM;YACFZ;YACAa,MAAM;YACN,GAAGC,IAAAA,qCAAqB,EAAC,OAAOf,OAAO,oBAAoB,GAAG;gBAC1D;gBACA;aACH,CAAC;YACFU,UAAUM,IAAAA,gCAAgB,EAAC,CAACC,KAAK;gBAC7B,IAAIP,YAAYQ,IAAAA,6BAAa,EAACD,GAAGE,MAAM,EAAE;oBACrCC,iBAAiB;gBACrB,MAAMH,GAAGE,MAAM,CAACE,IAAI,KAAK,SAAS;oBAC9BX,SAASO,IAAI;wBACTX,OAAOW,GAAGE,MAAM,CAACb,KAAK;oBAC1B;gBACJ,CAAC;YACL;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useRadioGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getNativeElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */ export const useRadioGroup_unstable = (props, ref)=>{\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props);\n    const generatedName = useId('radiogroup-');\n    const { name =generatedName , value , defaultValue , disabled , layout ='vertical' , onChange , required  } = props;\n    return {\n        layout,\n        name,\n        value,\n        defaultValue,\n        disabled,\n        required,\n        components: {\n            root: 'div'\n        },\n        root: {\n            ref,\n            role: 'radiogroup',\n            ...slot.always(getNativeElementProps('div', props, /*excludedPropNames:*/ [\n                'onChange',\n                'name'\n            ]), {\n                elementType: 'div'\n            }),\n            onChange: useEventCallback((ev)=>{\n                if (onChange && isHTMLElement(ev.target, {\n                    constructorName: 'HTMLInputElement'\n                }) && ev.target.type === 'radio') {\n                    onChange(ev, {\n                        value: ev.target.value\n                    });\n                }\n            })\n        }\n    };\n};\n"],"names":["useRadioGroup_unstable","props","ref","useFieldControlProps_unstable","generatedName","useId","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","slot","always","getNativeElementProps","elementType","useEventCallback","ev","isHTMLElement","target","constructorName","type"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;4BACuB;gCACsC;AASzE,MAAMA,yBAAyB,CAACC,OAAOC,MAAM;IACpD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAA6B,EAACF;IACtC,MAAMG,gBAAgBC,IAAAA,qBAAK,EAAC;IAC5B,MAAM,EAAEC,MAAMF,cAAa,EAAGG,MAAK,EAAGC,aAAY,EAAGC,SAAQ,EAAGC,QAAQ,WAAU,EAAGC,SAAQ,EAAGC,SAAQ,EAAG,GAAGX;IAC9G,OAAO;QACHS;QACAJ;QACAC;QACAC;QACAC;QACAG;QACAC,YAAY;YACRC,MAAM;QACV;QACAA,MAAM;YACFZ;YACAa,MAAM;YACN,GAAGC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAOjB,OAAO,oBAAoB,GAAG;gBACtE;gBACA;aACH,GAAG;gBACAkB,aAAa;YACjB,EAAE;YACFR,UAAUS,IAAAA,gCAAgB,EAAC,CAACC,KAAK;gBAC7B,IAAIV,YAAYW,IAAAA,6BAAa,EAACD,GAAGE,MAAM,EAAE;oBACrCC,iBAAiB;gBACrB,MAAMH,GAAGE,MAAM,CAACE,IAAI,KAAK,SAAS;oBAC9Bd,SAASU,IAAI;wBACTd,OAAOc,GAAGE,MAAM,CAAChB,KAAK;oBAC1B;gBACJ,CAAC;YACL;QACJ;IACJ;AACJ"}

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

@@ -26,9 +26,9 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}",
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"
+        ".f22iagw{display:flex;}",
+        ".f6jr5hl{align-items:flex-start;}",
+        ".f1vx9l62{flex-direction:column;}"
     ]
 });
 const useRadioGroupStyles_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n  root: 'fui-RadioGroup'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f6jr5hl\"\n  },\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\"]\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n};\n//# sourceMappingURL=useRadioGroupStyles.styles.js.map"],"names":["radioGroupClassNames","useRadioGroupStyles_unstable","root","useStyles","__styles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","state","styles","className","mergeClasses","layout"],"mappings":";;;;;;;;;;;IACaA,oBAAoB,MAApBA;IAiBAC,4BAA4B,MAA5BA;;uBAlB0B;AAChC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA2H;KAA4F;AACrT;AAIO,MAAMR,+BAA+BS,CAAAA,QAAS;IACnD,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBE,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMI,MAAM,KAAK,cAAcH,OAAOJ,QAAQ,EAAEG,MAAMR,IAAI,CAACU,SAAS;AAClJ,GACA,sDAAsD"}
+{"version":3,"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n  root: 'fui-RadioGroup'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f6jr5hl\"\n  },\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f6jr5hl{align-items:flex-start;}\", \".f1vx9l62{flex-direction:column;}\"]\n});\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n};\n//# sourceMappingURL=useRadioGroupStyles.styles.js.map"],"names":["radioGroupClassNames","useRadioGroupStyles_unstable","root","useStyles","__styles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","state","styles","className","mergeClasses","layout"],"mappings":";;;;;;;;;;;IACaA,oBAAoB,MAApBA;IAiBAC,4BAA4B,MAA5BA;;uBAlB0B;AAChC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAAqC;KAAoC;AAC1G;AAIO,MAAMR,+BAA+BS,CAAAA,QAAS;IACnD,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,qBAAqBE,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMI,MAAM,KAAK,cAAcH,OAAOJ,QAAQ,EAAEG,MAAMR,IAAI,CAACU,SAAS;AAClJ,GACA,sDAAsD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.1.27",
+  "version": "9.1.29",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,15 +33,15 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.1.14",
+    "@fluentui/react-field": "^9.1.16",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-label": "^9.1.22",
-    "@fluentui/react-shared-contexts": "^9.7.0",
-    "@fluentui/react-tabster": "^9.11.1",
-    "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-utilities": "^9.10.1",
-    "@griffel/react": "^1.5.7",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.14",
+    "@fluentui/react-label": "^9.1.24",
+    "@fluentui/react-shared-contexts": "^9.7.2",
+    "@fluentui/react-tabster": "^9.12.1",
+    "@fluentui/react-theme": "^9.1.11",
+    "@fluentui/react-utilities": "^9.11.0",
+    "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {