npm - @fluentui/react-radio - Versions diffs - 9.5.5 → 9.5.6 - Mend

@fluentui/react-radio 9.5.5 → 9.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-radio
-This log was last generated on Mon, 08 Sep 2025 12:41:58 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:21 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.5.6)
+Thu, 02 Oct 2025 15:07:21 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.5.5..@fluentui/react-radio_v9.5.6)
+### Patches
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.4.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-label to v9.3.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
 ## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.5.5)
-Mon, 08 Sep 2025 12:41:58 GMT
+Mon, 08 Sep 2025 12:51:19 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.5.4..@fluentui/react-radio_v9.5.5)
 ### Patches

package/lib/components/Radio/Radio.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { renderRadio_unstable } from './renderRadio';
 import { useRadio_unstable } from './useRadio';

package/lib/components/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQP,kBAAkBK,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQP,kBAAkBK,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

package/lib/components/Radio/useRadio.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { Label } from '@fluentui/react-label';
 import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\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 },\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","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","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,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;IACnD,MAAMC,QAAQL;IAEd,MAAM,EACJM,OAAOD,MAAMC,IAAI,EACjBC,UAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,EAC7EC,iBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,EAClGG,gBAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,EACzEC,WAAWT,MAAMS,QAAQ,EACzBC,WAAWV,MAAMU,QAAQ,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,EAC/DY,QAAQ,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,KAAMZ,qBAAAA,+BAAAA,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;QAAK;QACpCC,aAAa;IACf;IACA,OAAO;QACLZ;QACAuB,YAAY;YAAEd,MAAM;YAAQI,OAAO;YAASM,OAAOpC;YAAOuC,WAAW;QAAM;QAC3Eb;QACAI;QACAM;QACAG;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\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 },\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","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","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,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;IACnD,MAAMC,QAAQL;IAEd,MAAM,EACJM,OAAOD,MAAMC,IAAI,EACjBC,UAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,EAC7EC,iBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,EAClGG,gBAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,EACzEC,WAAWT,MAAMS,QAAQ,EACzBC,WAAWV,MAAMU,QAAQ,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,EAC/DY,QAAQ,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,KAAMZ,qBAAAA,+BAAAA,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;QAAK;QACpCC,aAAa;IACf;IACA,OAAO;QACLZ;QACAuB,YAAY;YAAEd,MAAM;YAAQI,OAAO;YAASM,OAAOpC;YAAOuC,WAAW;QAAM;QAC3Eb;QACAI;QACAM;QACAG;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';

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

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

package/lib/components/RadioGroup/RadioGroup.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { renderRadioGroup_unstable } from './renderRadioGroup';
 import { useRadioGroup_unstable } from './useRadioGroup';

package/lib/components/RadioGroup/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAC5E,SAASC,0BAA0B,QAAQ,4CAA4C;AACvF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAC5C,MAAME,gBAAgBP,2BAA2BM;IAEjDP,6BAA6BO;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOT,0BAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAC5E,SAASC,0BAA0B,QAAQ,4CAA4C;AACvF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAC5C,MAAME,gBAAgBP,2BAA2BM;IAEjDP,6BAA6BO;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOT,0BAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}

package/lib/components/RadioGroup/useRadioGroup.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('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","getIntrinsicElementProps","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,wBAAwB,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnH;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQP,8BAA8BO;IAEtC,MAAME,gBAAgBL,MAAM;IAE5B,MAAM,EAAEM,OAAOD,aAAa,EAAEE,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,SAAS,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,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,yBAAyB,OAAOM,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,GAAG;gBAClGc,aAAa;YACf,EAAE;YACFN,UAAUZ,iBAAiBmB,CAAAA;gBACzB,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;YACF;QACF;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('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","getIntrinsicElementProps","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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnH;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQP,8BAA8BO;IAEtC,MAAME,gBAAgBL,MAAM;IAE5B,MAAM,EAAEM,OAAOD,aAAa,EAAEE,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,SAAS,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,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,yBAAyB,OAAOM,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,GAAG;gBAClGc,aAAa;YACf,EAAE;YACFN,UAAUZ,iBAAiBmB,CAAAA;gBACzB,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;YACF;QACF;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 export const radioGroupClassNames = {
   root: 'fui-RadioGroup'

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 export const radioGroupClassNames = {
     root: 'fui-RadioGroup'

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

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

package/lib/contexts/RadioGroupContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 /**
  * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.

package/lib/contexts/RadioGroupContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/RadioGroupContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/*\n RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n /\nexport const RadioGroupContext = React.createContext<RadioGroupContextValue \| undefined>(undefined);\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\n/\n Get the value of the RadioGroupContext.\n /\nexport const useRadioGroupContextValue_unstable = (): RadioGroupContextValue =>\n React.useContext(RadioGroupContext) \|\| radioGroupContextDefaultValue;\n\n/\n @deprecated Use useRadioGroupContextValue_unstable instead.\n * RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.\n */\nexport const useRadioGroupContext_unstable = <T>(selector: (ctx: RadioGroupContextValue) => T): T =>\n selector(useRadioGroupContextValue_unstable());\n"],"names":["React","RadioGroupContext","createContext","undefined","radioGroupContextDefaultValue","RadioGroupProvider","Provider","useRadioGroupContextValue_unstable","useContext","useRadioGroupContext_unstable","selector"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;CAEC,GACD,OAAO,MAAMC,oBAAoBD,MAAME,aAAa,CAAqCC,WAAW;AAEpG,MAAMC,gCAAwD,CAAC;AAE/D,OAAO,MAAMC,qBAAqBJ,kBAAkBK,QAAQ,CAAC;AAE7D;;CAEC,GACD,OAAO,MAAMC,qCAAqC,IAChDP,MAAMQ,UAAU,CAACP,sBAAsBG,8BAA8B;AAEvE;;;CAGC,GACD,OAAO,MAAMK,gCAAgC,CAAIC,WAC/CA,SAASH,sCAAsC"}
1	+ {"version":3,"sources":["../src/contexts/RadioGroupContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/*\n RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n /\nexport const RadioGroupContext = React.createContext<RadioGroupContextValue \| undefined>(undefined);\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\n/\n Get the value of the RadioGroupContext.\n /\nexport const useRadioGroupContextValue_unstable = (): RadioGroupContextValue =>\n React.useContext(RadioGroupContext) \|\| radioGroupContextDefaultValue;\n\n/\n @deprecated Use useRadioGroupContextValue_unstable instead.\n * RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.\n */\nexport const useRadioGroupContext_unstable = <T>(selector: (ctx: RadioGroupContextValue) => T): T =>\n selector(useRadioGroupContextValue_unstable());\n"],"names":["React","RadioGroupContext","createContext","undefined","radioGroupContextDefaultValue","RadioGroupProvider","Provider","useRadioGroupContextValue_unstable","useContext","useRadioGroupContext_unstable","selector"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B;;CAEC,GACD,OAAO,MAAMC,oBAAoBD,MAAME,aAAa,CAAqCC,WAAW;AAEpG,MAAMC,gCAAwD,CAAC;AAE/D,OAAO,MAAMC,qBAAqBJ,kBAAkBK,QAAQ,CAAC;AAE7D;;CAEC,GACD,OAAO,MAAMC,qCAAqC,IAChDP,MAAMQ,UAAU,CAACP,sBAAsBG,8BAA8B;AAEvE;;;CAGC,GACD,OAAO,MAAMK,gCAAgC,CAAIC,WAC/CA,SAASH,sCAAsC"}

package/lib/contexts/useRadioGroupContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const useRadioGroupContextValues = (state)=>{
     const { name, value, defaultValue, disabled, layout, required } = state;

package/lib/contexts/useRadioGroupContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/useRadioGroupContextValues.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n const { name, value, defaultValue, disabled, layout, required } = state;\n const ariaDescribedBy = state.root['aria-describedby'];\n\n const radioGroup = React.useMemo<RadioGroupContextValue>(\n () => ({\n name,\n value,\n defaultValue,\n disabled,\n layout,\n required,\n 'aria-describedby': ariaDescribedBy,\n }),\n [name, value, defaultValue, disabled, layout, required, ariaDescribedBy],\n );\n\n return { radioGroup };\n};\n"],"names":["React","useRadioGroupContextValues","state","name","value","defaultValue","disabled","layout","required","ariaDescribedBy","root","radioGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAClE,MAAMO,kBAAkBP,MAAMQ,IAAI,CAAC,mBAAmB;IAEtD,MAAMC,aAAaX,MAAMY,OAAO,CAC9B,IAAO,CAAA;YACLT;YACAC;YACAC;YACAC;YACAC;YACAC;YACA,oBAAoBC;QACtB,CAAA,GACA;QAACN;QAAMC;QAAOC;QAAcC;QAAUC;QAAQC;QAAUC;KAAgB;IAG1E,OAAO;QAAEE;IAAW;AACtB,EAAE"}
1	+ {"version":3,"sources":["../src/contexts/useRadioGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n const { name, value, defaultValue, disabled, layout, required } = state;\n const ariaDescribedBy = state.root['aria-describedby'];\n\n const radioGroup = React.useMemo<RadioGroupContextValue>(\n () => ({\n name,\n value,\n defaultValue,\n disabled,\n layout,\n required,\n 'aria-describedby': ariaDescribedBy,\n }),\n [name, value, defaultValue, disabled, layout, required, ariaDescribedBy],\n );\n\n return { radioGroup };\n};\n"],"names":["React","useRadioGroupContextValues","state","name","value","defaultValue","disabled","layout","required","ariaDescribedBy","root","radioGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAClE,MAAMO,kBAAkBP,MAAMQ,IAAI,CAAC,mBAAmB;IAEtD,MAAMC,aAAaX,MAAMY,OAAO,CAC9B,IAAO,CAAA;YACLT;YACAC;YACAC;YACAC;YACAC;YACAC;YACA,oBAAoBC;QACtB,CAAA,GACA;QAACN;QAAMC;QAAOC;QAAcC;QAAUC;QAAQC;QAAUC;KAAgB;IAG1E,OAAO;QAAEE;IAAW;AACtB,EAAE"}

package/lib-commonjs/components/Radio/Radio.js CHANGED Viewed

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

package/lib-commonjs/components/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"mappings":"~~;;;;+BAWaK;;;;;;;iEAXU~~,QAAQ;6BAGM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;qCACtB,kCAAkC;AAKvE,~~cAAMA~~,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,~~QAAQP,+BAAAA~~,EAAkBK,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOR,iCAAAA,EAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n const state = useRadio_unstable(props, ref);\n\n useRadioStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;qCACtB,kCAAkC;AAKvE,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQP,2BAAAA,EAAkBK,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOR,iCAAAA,EAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\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 },\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","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","components"],"mappings":"~~;;;;+BAgBaQ~~;;;;;;;iEAhBU,QAAQ;4BACT,wBAAwB;gCACyB,4BAA4B;mCAChD,mCAAmC;8BACvD,0BAA0B;AAYlD,0BAA0B,CAACC,OAAmBC;IACnD,MAAMC,YAAQL,qDAAAA;IAEd,MAAM,EACJM,OAAOD,MAAMC,IAAI,EACjBC,UAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,EAC7EC,iBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,EAClGG,gBAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,EACzEC,WAAWT,MAAMS,QAAQ,EACzBC,WAAWV,MAAMU,QAAQ,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,EAC/DY,QAAQ,EACT,GAAGd;IAEJ,MAAMe,~~kBAActB~~,~~yCAAAA~~,EAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAOtB,oBAAAA,CAAKuB,MAAM,CAACnB,MAAMkB,IAAI,EAAE;QACnCE,cAAc;YACZnB,~~KAAKH~~,~~gCAAAA~~;YACL,GAAGiB,YAAYG,IAAI;QACrB;QACAG,aAAa;IACf;IACA,MAAMC,QAAQ1B,oBAAAA,CAAKuB,MAAM,CAACnB,MAAMsB,KAAK,EAAE;QACrCF,cAAc;YACZnB;YACAsB,MAAM;YACNC,~~IAAI7B~~,~~yBAAAA~~,EAAM,UAAUoB,YAAYU,OAAO,CAACD,EAAE;YAC1CrB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYU,OAAO;QACxB;QACAJ,aAAa;IACf;IACAC,MAAMR,QAAQ,OAAGpB,8BAAAA,EAAe4B,MAAMR,QAAQ,EAAEY,CAAAA,KAAMZ,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWY,IAAI;YAAErB,OAAOqB,GAAGC,aAAa,CAACtB,KAAK;QAAC;IACrG,MAAMuB,QAAQhC,oBAAAA,CAAKiC,QAAQ,CAAC7B,MAAM4B,KAAK,EAAE;QACvCR,cAAc;YAAEU,SAASR,MAAME,EAAE;YAAEb,UAAUW,MAAMX,QAAQ;QAAC;QAC5DU,aAAa7B,iBAAAA;IACf;IACA,MAAMuC,YAAYnC,oBAAAA,CAAKuB,MAAM,CAACnB,MAAM+B,SAAS,EAAE;QAC7CX,cAAc;YAAE,eAAe;QAAK;QACpCC,aAAa;IACf;IACA,OAAO;QACLZ;QACAuB,YAAY;YAAEd,MAAM;YAAQI,OAAO;YAASM,OAAOpC,iBAAAA;YAAOuC,WAAW;QAAM;QAC3Eb;QACAI;QACAM;QACAG;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/Radio/useRadio.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\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 },\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","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","components"],"mappings":"AAAA;;;;;+BAkBaQ;;;;;;;iEAhBU,QAAQ;4BACT,wBAAwB;gCACyB,4BAA4B;mCAChD,mCAAmC;8BACvD,0BAA0B;AAYlD,0BAA0B,CAACC,OAAmBC;IACnD,MAAMC,YAAQL,qDAAAA;IAEd,MAAM,EACJM,OAAOD,MAAMC,IAAI,EACjBC,UAAUF,MAAMG,KAAK,KAAKC,YAAYJ,MAAMG,KAAK,KAAKL,MAAMK,KAAK,GAAGC,SAAS,EAC7EC,iBAAiBL,MAAMM,YAAY,KAAKF,YAAYJ,MAAMM,YAAY,KAAKR,MAAMK,KAAK,GAAGC,SAAS,EAClGG,gBAAgBP,MAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO,EACzEC,WAAWT,MAAMS,QAAQ,EACzBC,WAAWV,MAAMU,QAAQ,EACzB,oBAAoBC,kBAAkBX,KAAK,CAAC,mBAAmB,EAC/DY,QAAQ,EACT,GAAGd;IAEJ,MAAMe,cAActB,6CAAAA,EAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,OAAOtB,oBAAAA,CAAKuB,MAAM,CAACnB,MAAMkB,IAAI,EAAE;QACnCE,cAAc;YACZnB,SAAKH,4BAAAA;YACL,GAAGiB,YAAYG,IAAI;QACrB;QACAG,aAAa;IACf;IACA,MAAMC,QAAQ1B,oBAAAA,CAAKuB,MAAM,CAACnB,MAAMsB,KAAK,EAAE;QACrCF,cAAc;YACZnB;YACAsB,MAAM;YACNC,QAAI7B,qBAAAA,EAAM,UAAUoB,YAAYU,OAAO,CAACD,EAAE;YAC1CrB;YACAC;YACAG;YACAI;YACAC;YACA,oBAAoBC;YACpB,GAAGE,YAAYU,OAAO;QACxB;QACAJ,aAAa;IACf;IACAC,MAAMR,QAAQ,OAAGpB,8BAAAA,EAAe4B,MAAMR,QAAQ,EAAEY,CAAAA,KAAMZ,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWY,IAAI;YAAErB,OAAOqB,GAAGC,aAAa,CAACtB,KAAK;QAAC;IACrG,MAAMuB,QAAQhC,oBAAAA,CAAKiC,QAAQ,CAAC7B,MAAM4B,KAAK,EAAE;QACvCR,cAAc;YAAEU,SAASR,MAAME,EAAE;YAAEb,UAAUW,MAAMX,QAAQ;QAAC;QAC5DU,aAAa7B,iBAAAA;IACf;IACA,MAAMuC,YAAYnC,oBAAAA,CAAKuB,MAAM,CAACnB,MAAM+B,SAAS,EAAE;QAC7CX,cAAc;YAAE,eAAe;QAAK;QACpCC,aAAa;IACf;IACA,OAAO;QACLZ;QACAuB,YAAY;YAAEd,MAAM;YAAQI,OAAO;YAASM,OAAOpC,iBAAAA;YAAOuC,WAAW;QAAM;QAC3Eb;QACAI;QACAM;QACAG;IACF;AACF,EAAE"}

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

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

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

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

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

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

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

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

package/lib-commonjs/components/RadioGroup/RadioGroup.js CHANGED Viewed

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

package/lib-commonjs/components/RadioGroup/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"~~;;;;+BAYaM;;;;;;;iEAZU~~,QAAQ;kCAGW,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;4CACjC,4CAA4C;qCAC3C,kCAAkC;AAKvE,~~mBAAMA~~,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;IAC5C,MAAME,oBAAgBP,sDAAAA,EAA2BM;QAEjDP,uDAAAA,EAA6BO;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOT,2CAAAA,EAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useRadioGroup_unstable(props, ref);\n const contextValues = useRadioGroupContextValues(state);\n\n useRadioGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCAGW,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;4CACjC,4CAA4C;qCAC3C,kCAAkC;AAKvE,MAAMM,aAAAA,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;IAC5C,MAAME,oBAAgBP,sDAAAA,EAA2BM;QAEjDP,uDAAAA,EAA6BO;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOT,2CAAAA,EAA0BS,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('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","getIntrinsicElementProps","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":"~~;;;;+BAcaO~~;;;;;;;iEAdU,QAAQ;4BACe,wBAAwB;gCACiB,4BAA4B;AAY5G,+BAA+B,CAACC,OAAwBC;IAC7D,+CAA+C;IAC/CD,YAAQP,yCAAAA,EAA8BO;IAEtC,MAAME,~~oBAAgBL~~,~~qBAAAA~~,EAAM;IAE5B,MAAM,EAAEM,OAAOD,aAAa,EAAEE,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,SAAS,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGT;IAEzG,OAAO;QACLO;QACAJ;QACAC;QACAC;QACAC;QACAG;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM;YACJV;YACAW,MAAM;YACN,GAAGd,oBAAAA,CAAKe,MAAM,KAACnB,wCAAAA,EAAyB,OAAOM,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,GAAG;gBAClGc,aAAa;YACf,EAAE;YACFN,cAAUZ,gCAAAA,EAAiBmB,CAAAA;gBACzB,IACEP,gBACAb,6BAAAA,EAAcoB,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;YACF;QACF;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('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","getIntrinsicElementProps","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;;;;;+BAgBaO;;;;;;;iEAdU,QAAQ;4BACe,wBAAwB;gCACiB,4BAA4B;AAY5G,+BAA+B,CAACC,OAAwBC;IAC7D,+CAA+C;IAC/CD,YAAQP,yCAAAA,EAA8BO;IAEtC,MAAME,gBAAgBL,yBAAAA,EAAM;IAE5B,MAAM,EAAEM,OAAOD,aAAa,EAAEE,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,SAAS,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGT;IAEzG,OAAO;QACLO;QACAJ;QACAC;QACAC;QACAC;QACAG;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM;YACJV;YACAW,MAAM;YACN,GAAGd,oBAAAA,CAAKe,MAAM,KAACnB,wCAAAA,EAAyB,OAAOM,OAAO,oBAAoB,GAAG;gBAAC;gBAAY;aAAO,GAAG;gBAClGc,aAAa;YACf,EAAE;YACFN,cAAUZ,gCAAAA,EAAiBmB,CAAAA;gBACzB,IACEP,gBACAb,6BAAAA,EAAcoB,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;YACF;QACF;IACF;AACF,EAAE"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n root: 'fui-RadioGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n vertical: {\n flexDirection: 'column'\n }\n});\n/*\n Apply styling to the RadioGroup slots based on the state\n */ export const useRadioGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"~~;;;;;;;;;;;IACaE~~,oBAAoB;;;gCAcY;eAA5BQ;;;uBAfwB,gBAAgB;AAClD,6BAA6B;IAChCP,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1BO,KAAK,CAACR,IAAI,CAACU,SAAS,OAAGZ,mBAAY,EAACC,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useRadioGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const radioGroupClassNames = {\n root: 'fui-RadioGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n vertical: {\n flexDirection: 'column'\n }\n});\n/*\n Apply styling to the RadioGroup slots based on the state\n */ export const useRadioGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,oBAAoB;;;gCAcY;eAA5BQ;;;uBAfwB,gBAAgB;AAClD,6BAA6B;IAChCP,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1BO,KAAK,CAACR,IAAI,CAACU,SAAS,OAAGZ,mBAAY,EAACC,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACG,MAAM,KAAK,UAAU,IAAIF,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}

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

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

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

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

package/lib-commonjs/contexts/RadioGroupContext.js CHANGED Viewed

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

package/lib-commonjs/contexts/RadioGroupContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/RadioGroupContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/*\n RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n /\nexport const RadioGroupContext = React.createContext<RadioGroupContextValue \| undefined>(undefined);\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\n/\n Get the value of the RadioGroupContext.\n /\nexport const useRadioGroupContextValue_unstable = (): RadioGroupContextValue =>\n React.useContext(RadioGroupContext) \|\| radioGroupContextDefaultValue;\n\n/\n @deprecated Use useRadioGroupContextValue_unstable instead.\n * RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.\n */\nexport const useRadioGroupContext_unstable = <T>(selector: (ctx: RadioGroupContextValue) => T): T =>\n selector(useRadioGroupContextValue_unstable());\n"],"names":["React","RadioGroupContext","createContext","undefined","radioGroupContextDefaultValue","RadioGroupProvider","Provider","useRadioGroupContextValue_unstable","useContext","useRadioGroupContext_unstable","selector"],"mappings":"~~;;;;;;;;;;;IAOaC,iBAAAA~~;;;sBAIAI;;;sCAKAE;;;iCAOAE;;;;;iEAvBU,QAAQ;AAOxB,~~wCAA0BT~~,OAAME,aAAa,CAAqCC,WAAW;AAEpG,MAAMC,gCAAwD,CAAC;AAExD,MAAMC,qBAAqBJ,kBAAkBK,QAAQ,CAAC;AAKtD,MAAMC,qCAAqC,IAChDP,OAAMQ,UAAU,CAACP,sBAAsBG,8BAA8B;AAMhE,MAAMK,gCAAgC,CAAIC,WAC/CA,SAASH,sCAAsC"}
1	+ {"version":3,"sources":["../src/contexts/RadioGroupContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/*\n RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n /\nexport const RadioGroupContext = React.createContext<RadioGroupContextValue \| undefined>(undefined);\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\n/\n Get the value of the RadioGroupContext.\n /\nexport const useRadioGroupContextValue_unstable = (): RadioGroupContextValue =>\n React.useContext(RadioGroupContext) \|\| radioGroupContextDefaultValue;\n\n/\n @deprecated Use useRadioGroupContextValue_unstable instead.\n * RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.\n */\nexport const useRadioGroupContext_unstable = <T>(selector: (ctx: RadioGroupContextValue) => T): T =>\n selector(useRadioGroupContextValue_unstable());\n"],"names":["React","RadioGroupContext","createContext","undefined","radioGroupContextDefaultValue","RadioGroupProvider","Provider","useRadioGroupContextValue_unstable","useContext","useRadioGroupContext_unstable","selector"],"mappings":"AAAA;;;;;;;;;;;;qBASaC;;;sBAIAI;;;sCAKAE;;;iCAOAE;;;;;iEAvBU,QAAQ;AAOxB,MAAMR,kCAAoBD,OAAME,aAAa,CAAqCC,WAAW;AAEpG,MAAMC,gCAAwD,CAAC;AAExD,MAAMC,qBAAqBJ,kBAAkBK,QAAQ,CAAC;AAKtD,MAAMC,qCAAqC,IAChDP,OAAMQ,UAAU,CAACP,sBAAsBG,8BAA8B;AAMhE,MAAMK,gCAAgC,CAAIC,WAC/CA,SAASH,sCAAsC"}

package/lib-commonjs/contexts/useRadioGroupContextValues.js CHANGED Viewed

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

package/lib-commonjs/contexts/useRadioGroupContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/useRadioGroupContextValues.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n const { name, value, defaultValue, disabled, layout, required } = state;\n const ariaDescribedBy = state.root['aria-describedby'];\n\n const radioGroup = React.useMemo<RadioGroupContextValue>(\n () => ({\n name,\n value,\n defaultValue,\n disabled,\n layout,\n required,\n 'aria-describedby': ariaDescribedBy,\n }),\n [name, value, defaultValue, disabled, layout, required, ariaDescribedBy],\n );\n\n return { radioGroup };\n};\n"],"names":["React","useRadioGroupContextValues","state","name","value","defaultValue","disabled","layout","required","ariaDescribedBy","root","radioGroup","useMemo"],"mappings":"~~;;;;+BAIaC;;;;;;;iEAJU~~,QAAQ;AAIxB,~~mCAAmC~~,CAACC;IACzC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAClE,MAAMO,kBAAkBP,MAAMQ,IAAI,CAAC,mBAAmB;IAEtD,MAAMC,aAAaX,OAAMY,OAAO,CAC9B,IAAO,CAAA;YACLT;YACAC;YACAC;YACAC;YACAC;YACAC;YACA,oBAAoBC;SACtB,CAAA,EACA;QAACN;QAAMC;QAAOC;QAAcC;QAAUC;QAAQC;QAAUC;KAAgB;IAG1E,OAAO;QAAEE;IAAW;AACtB,EAAE"}
1	+ {"version":3,"sources":["../src/contexts/useRadioGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n const { name, value, defaultValue, disabled, layout, required } = state;\n const ariaDescribedBy = state.root['aria-describedby'];\n\n const radioGroup = React.useMemo<RadioGroupContextValue>(\n () => ({\n name,\n value,\n defaultValue,\n disabled,\n layout,\n required,\n 'aria-describedby': ariaDescribedBy,\n }),\n [name, value, defaultValue, disabled, layout, required, ariaDescribedBy],\n );\n\n return { radioGroup };\n};\n"],"names":["React","useRadioGroupContextValues","state","name","value","defaultValue","disabled","layout","required","ariaDescribedBy","root","radioGroup","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,MAAMC,6BAA6B,CAACC;IACzC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAClE,MAAMO,kBAAkBP,MAAMQ,IAAI,CAAC,mBAAmB;IAEtD,MAAMC,aAAaX,OAAMY,OAAO,CAC9B,IAAO,CAAA;YACLT;YACAC;YACAC;YACAC;YACAC;YACAC;YACA,oBAAoBC;SACtB,CAAA,EACA;QAACN;QAAMC;QAAOC;QAAcC;QAAUC;QAAQC;QAAUC;KAAgB;IAG1E,OAAO;QAAEE;IAAW;AACtB,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.5.5",
+  "version": "9.5.6",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,13 +18,13 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.4.5",
-    "@fluentui/react-jsx-runtime": "^9.2.0",
-    "@fluentui/react-label": "^9.3.5",
-    "@fluentui/react-shared-contexts": "^9.25.1",
-    "@fluentui/react-tabster": "^9.26.5",
+    "@fluentui/react-field": "^9.4.6",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
+    "@fluentui/react-label": "^9.3.6",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-tabster": "^9.26.6",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.1",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },