@popsure/dirty-swan 0.57.8 → 0.57.9

package/dist/cjs/lib/components/input/checkbox/index.d.ts

@@ -16,5 +16,6 @@ export interface CheckboxProps<ValueType extends string> {
         label?: string;
         option?: string;
     };
+    fieldLegend?: string;
 }
-export declare const Checkbox: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, }: CheckboxProps<ValueType> & {}) => JSX.Element;
+export declare const Checkbox: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, fieldLegend, }: CheckboxProps<ValueType> & {}) => JSX.Element;

package/dist/cjs/lib/components/input/checkbox/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { CheckboxProps } from '.';
 declare const story: {
     title: string;
-    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, }: CheckboxProps<ValueType>) => JSX.Element;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, fieldLegend, }: CheckboxProps<ValueType>) => JSX.Element;
     argTypes: {
         options: {
             description: string;
@@ -9,6 +9,9 @@ declare const story: {
         value: {
             description: string;
         };
+        fieldLegend: {
+            description: string;
+        };
         onChange: {
             description: string;
             action: boolean;
@@ -46,6 +49,7 @@ declare const story: {
                 description: string;
             };
         };
+        fieldLegend: string;
         wide: boolean;
         bordered: boolean;
         inlineLayout: boolean;
@@ -59,12 +63,12 @@ declare const story: {
     };
 };
 export declare const CheckboxStory: {
-    ({ onChange, options, wide, bordered, classNames, inlineLayout, }: CheckboxProps<string>): JSX.Element;
+    ({ onChange, options, wide, bordered, classNames, inlineLayout, fieldLegend, }: CheckboxProps<string>): JSX.Element;
     storyName: string;
 };
-export declare const CheckboxWithCustomWrapperStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomOptionStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomLabelStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithInlineLayout: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomLabel: ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomWrapperStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomOptionStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabelStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithInlineLayout: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabel: ({ onChange, wide, classNames, inlineLayout, }: CheckboxProps<string>) => JSX.Element;
 export default story;

package/dist/cjs/lib/components/input/radio/index.d.ts

@@ -19,5 +19,7 @@ export interface RadioProps<ValueType extends string> {
     };
     bordered?: boolean;
     disabled?: boolean;
+    fieldLegend?: string;
+    groupName?: string;
 }
-export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, }: RadioProps<ValueType>) => JSX.Element;
+export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, fieldLegend, groupName, }: RadioProps<ValueType>) => JSX.Element;

package/dist/cjs/lib/components/input/radio/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { RadioProps } from '.';
 declare const story: {
     title: string;
-    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, }: RadioProps<ValueType>) => JSX.Element;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, fieldLegend, groupName, }: RadioProps<ValueType>) => JSX.Element;
     argTypes: {
         options: {
             description: string;
@@ -9,6 +9,12 @@ declare const story: {
         value: {
             description: string;
         };
+        fieldLegend: {
+            description: string;
+        };
+        groupName: {
+            description: string;
+        };
         onChange: {
             description: string;
             action: boolean;
@@ -50,6 +56,8 @@ declare const story: {
                 description: string;
             };
         };
+        fieldLegend: string;
+        groupName: string;
         value: string;
         wide: boolean;
         classNames: {
@@ -64,7 +72,7 @@ declare const story: {
     };
 };
 export declare const RadioStory: {
-    ({ onChange, options, wide, classNames, inlineLayout, bordered, disabled, }: RadioProps<string>): JSX.Element;
+    ({ onChange, options, wide, classNames, inlineLayout, bordered, disabled, fieldLegend, groupName, }: RadioProps<string>): JSX.Element;
     storyName: string;
 };
 export declare const RadioWithCustomWrapperStyles: ({ onChange, }: RadioProps<string>) => JSX.Element;

package/dist/esm/components/chip/index.js

@@ -6,13 +6,13 @@ import '../icon/IconWrapper/IconWrapper.js';
 import '../../tslib.es6-a39f91fc.js';
 import '../../index-6ea95111.js';
 
-var css_248z = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
+var css_248z = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n.style-module_chip-button-container__3gSRY:focus-visible {\n  outline: 2px solid var(--ds-primary-500);\n  border-radius: 2px;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
 var styles = {"chip":"style-module_chip__3LMgV","appearInAnimation":"style-module_appearInAnimation__33Ebn","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e"};
 styleInject(css_248z);
 
 var Chip = (function (_a) {
     var className = _a.className, value = _a.value, onRemove = _a.onRemove;
-    return (jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles['chip']), children: [value.leftIcon && (jsx("img", { className: "mr8 ".concat(styles['chip-image']), src: value.leftIcon, alt: value.value })), jsx("div", { className: "mr8", children: value.value }), jsx("button", { className: "c-pointer ".concat(styles['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, children: jsx(XIcon, { className: styles['chip-remove-button'] }) })] }));
+    return (jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles['chip']), children: [value.leftIcon && (jsx("img", { className: "mr8 ".concat(styles['chip-image']), src: value.leftIcon, alt: value.value })), jsx("div", { className: "mr8", children: value.value }), jsx("button", { className: "c-pointer ".concat(styles['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, "aria-label": "Remove ".concat(value.value, " option"), children: jsx(XIcon, { className: styles['chip-remove-button'] }) })] }));
 });
 
 export default Chip;

package/dist/esm/components/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/chip/index.tsx"],"sourcesContent":["import { Option } from '../../models/autoSuggestInput';\nimport { XIcon } from '../icon/icons';\n\nimport styles from './style.module.scss';\n\nexport interface ChipProps {\n  value: Option;\n  onRemove: (value: Option) => void;\n  className?: string;\n}\n\nexport default ({\n  className,\n  value,\n  onRemove,\n}: ChipProps) => (\n  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>\n    {value.leftIcon && (\n      <img\n        className={`mr8 ${styles['chip-image']}`}\n        src={value.leftIcon}\n        alt={value.value}\n      />\n    )}\n    <div className=\"mr8\">{value.value}</div>\n    <button\n      className={`c-pointer ${styles['chip-button-container']}`}\n      type=\"button\"\n      onClick={() => onRemove(value)}\n    >\n      <XIcon className={styles['chip-remove-button']} />\n    </button>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AAWA,YAAe,UAAC,EAIJ;QAHV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA;IACO,QACfA,cAAK,SAAS,EAAE,6BAAsB,SAAS,cAAI,MAAM,CAAC,MAAM,CAAC,CAAE,aAChE,KAAK,CAAC,QAAQ,KACbC,aACE,SAAS,EAAE,cAAO,MAAM,CAAC,YAAY,CAAC,CAAE,EACxC,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,GAAG,EAAE,KAAK,CAAC,KAAK,GAChB,CACH,EACDA,aAAK,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAO,EACxCA,gBACE,SAAS,EAAE,oBAAa,MAAM,CAAC,uBAAuB,CAAC,CAAE,EACzD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,GAAA,YAE9BA,IAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,GAAI,GAC3C,IACL;AAjBS,CAkBhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/chip/index.tsx"],"sourcesContent":["import { Option } from '../../models/autoSuggestInput';\nimport { XIcon } from '../icon/icons';\n\nimport styles from './style.module.scss';\n\nexport interface ChipProps {\n  value: Option;\n  onRemove: (value: Option) => void;\n  className?: string;\n}\n\nexport default ({\n  className,\n  value,\n  onRemove,\n}: ChipProps) => (\n  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>\n    {value.leftIcon && (\n      <img\n        className={`mr8 ${styles['chip-image']}`}\n        src={value.leftIcon}\n        alt={value.value}\n      />\n    )}\n    <div className=\"mr8\">{value.value}</div>\n    <button\n      className={`c-pointer ${styles['chip-button-container']}`}\n      type=\"button\"\n      onClick={() => onRemove(value)}\n      aria-label={`Remove ${value.value} option`}\n    >\n      <XIcon className={styles['chip-remove-button']} />\n    </button>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AAWA,YAAe,UAAC,EAIJ;QAHV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA;IACO,QACfA,cAAK,SAAS,EAAE,6BAAsB,SAAS,cAAI,MAAM,CAAC,MAAM,CAAC,CAAE,aAChE,KAAK,CAAC,QAAQ,KACbC,aACE,SAAS,EAAE,cAAO,MAAM,CAAC,YAAY,CAAC,CAAE,EACxC,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,GAAG,EAAE,KAAK,CAAC,KAAK,GAChB,CACH,EACDA,aAAK,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAO,EACxCA,gBACE,SAAS,EAAE,oBAAa,MAAM,CAAC,uBAAuB,CAAC,CAAE,EACzD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,GAAA,gBAClB,iBAAU,KAAK,CAAC,KAAK,YAAS,YAE1CA,IAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,GAAI,GAC3C,IACL;AAlBS,CAmBhB;;;;"}

package/dist/esm/components/input/checkbox/index.js

@@ -1,15 +1,15 @@
 import { _ as __spreadArray } from '../../../tslib.es6-a39f91fc.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../../index-6ea95111.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
+var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n  border: 0;\n  margin: 0;\n  min-width: 0;\n  padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
 var styles = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b"};
 styleInject(css_248z);
 
 var Checkbox = function (_a) {
     var _b;
-    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames;
+    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames, _g = _a.fieldLegend, fieldLegend = _g === void 0 ? 'Select one or more options' : _g;
     var hasNoneValue = Object.keys(options).includes('NONE');
     var handleOnChange = function (newValue) {
         if (value === null || value === void 0 ? void 0 : value.includes(newValue)) {
@@ -34,23 +34,23 @@ var Checkbox = function (_a) {
     var isCheckboxLabelObject = function (label) {
         return label.title !== undefined;
     };
-    return (jsx("div", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
+    return (jsxs("fieldset", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
             _b[styles.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
             _b['fd-column'] = !inlineLayout,
-            _b)), children: entries.map(function (_a) {
-            var currentValue = _a[0], label = _a[1];
-            var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
-            var customIcon = label === null || label === void 0 ? void 0 : label.icon;
-            return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-checkbox', {
-                            'p-checkbox--no-icon': customIcon,
-                        }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
-                            'p-label--bordered': bordered,
-                            'jc-center': customIcon,
-                            'fd-column': customIcon,
-                        }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsx("legend", { className: "sr-only", children: fieldLegend }), entries.map(function (_a) {
+                var currentValue = _a[0], label = _a[1];
+                var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
+                var customIcon = label === null || label === void 0 ? void 0 : label.icon;
+                return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-checkbox', {
+                                'p-checkbox--no-icon': customIcon,
+                            }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
+                                'p-label--bordered': bordered,
+                                'jc-center': customIcon,
+                                'fd-column': customIcon,
+                            }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 
 export { Checkbox };

package/dist/esm/components/input/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  return (\n    <div\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAwBa,QAAQ,GAAG,UAA2B,EAQnB;;QAP9B,OAAO,aAAA,EACP,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACH,aAAa,gBAAA;IAEzB,IAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAE3D,IAAM,cAAc,GAAG,UAAC,QAAmB;QACzC,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAC7B,IAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CACzC,UAAC,aAAa,IAAK,OAAA,aAAa,KAAK,QAAQ,GAAA,CAC9C,CAAC;YAEF,QAAQ,CAAC,sBAAsB,CAAC,CAAC;YACjC,OAAO;SACR;QAED,IAAI,YAAY,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;YACrB,OAAO;SACR;QAED,IAAI,YAAY,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvC,IAAM,WAAS,GAAG,KAAK;kDACf,KAAK,CAAC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,KAAK,MAAM,GAAA,CAAC,UAAE,QAAQ,YAC/C,CAAC,QAAQ,CAAC,CAAC;YACf,QAAQ,CAAC,WAAS,CAAC,CAAC;YACpB,OAAO;SACR;QAED,IAAM,SAAS,GAAG,KAAK,mCAAO,KAAK,UAAE,QAAQ,YAAI,CAAC,QAAQ,CAAC,CAAC;QAC5D,QAAQ,CAAC,SAAS,CAAC,CAAC;KACrB,CAAC;IAEF,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAGnC,CAAC;IAEJ,IAAM,qBAAqB,GAAG,UAC5B,KAA0C;QAE1C,OAAQ,KAAiC,CAAC,KAAK,KAAK,SAAS,CAAC;KAC/D,CAAC;IAEF,QACEA,aACE,SAAS,EAAE,UAAU,CACnB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,EACxB,MAAM,CAAC,SAAS,EAChB,aAAa;YAEX,GAAC,MAAM,CAAC,MAAM,IAAG,CAAC,IAAI;YACtB,YAAQ,GAAE,YAAY;YACtB,YAAQ,GAAE,YAAY;YACtB,eAAW,GAAE,CAAC,YAAY;gBAE7B,YAEA,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqB;gBAApB,YAAY,QAAA,EAAE,KAAK,QAAA;YAChC,IAAM,OAAO,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;YAC9C,IAAM,UAAU,GAAI,KAAiC,aAAjC,KAAK,uBAAL,KAAK,CAA8B,IAAI,CAAC;YAE5D,QACEC,cAAK,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,aACnCD,eACE,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE;4BAClC,qBAAqB,EAAE,UAAU;yBAClC,CAAC,EACF,EAAE,EAAE,YAAY,EAChB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,cAAM,OAAA,cAAc,CAAC,YAAY,CAAC,GAAA,EAC5C,OAAO,EAAE,OAAO,iBACH,yBAAkB,YAAY,CAAE,GAC7C,EAEFC,gBACE,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,UAAU,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,cAAc,EAAE;4BAC1D,mBAAmB,EAAE,QAAQ;4BAC7B,WAAW,EAAE,UAAU;4BACvB,WAAW,EAAE,UAAU;yBACxB,CAAC,aACO,mBAAY,YAAY,CAAE,iBACtB,mBAAY,YAAY,CAAE,aAEtC,UAAU,IAAID,aAAK,SAAS,EAAC,KAAK,YAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,GAAO,EAEhE,qBAAqB,CAAC,KAAK,CAAC,IAC3BC,yBACED,WAAG,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAK,EACpCA,cAAM,SAAS,EAAC,oCAAoC,YACjD,KAAK,CAAC,WAAW,GACb,IACH,KAEN,KAAK,CACN,IACK,KAnCkC,YAAY,CAoClD,EACN;SACH,CAAC,GACE,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n  fieldLegend = 'Select one or more options',\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  return (\n    <fieldset\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      <legend className=\"sr-only\">{fieldLegend}</legend>\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </fieldset>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/input/checkbox/index.stories.js

@@ -16,16 +16,19 @@ var story = {
         value: {
             description: 'Current checked values.',
         },
+        fieldLegend: {
+            description: 'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',
+        },
         onChange: {
             description: 'Function called everytime a value changes.',
             action: true,
             table: {
-                category: "Callbacks",
+                category: 'Callbacks',
             },
         },
         wide: {
             description: 'Property that defines if options should fill 100% of available horizontal space',
-            defaultValue: false
+            defaultValue: false,
         },
         bordered: {
             control: 'boolean',
@@ -42,37 +45,38 @@ var story = {
         options: {
             CAT: {
                 title: 'Cat',
-                description: 'At least 1'
+                description: 'At least 1',
             },
             DOG: {
                 title: 'Dog',
-                description: 'At least 2'
+                description: 'At least 2',
             },
             NONE: {
                 title: 'None',
-                description: 'No pets'
-            }
+                description: 'No pets',
+            },
         },
+        fieldLegend: 'Owned pets',
         wide: false,
         bordered: true,
         inlineLayout: false,
         classNames: {
             container: '',
             label: '',
-            option: ''
+            option: '',
         },
         value: [],
-        className: ''
-    }
+        className: '',
+    },
 };
 var CheckboxStory = function (_a) {
-    var onChange = _a.onChange, options = _a.options, wide = _a.wide, bordered = _a.bordered, classNames = _a.classNames, inlineLayout = _a.inlineLayout;
+    var onChange = _a.onChange, options = _a.options, wide = _a.wide, bordered = _a.bordered, classNames = _a.classNames, inlineLayout = _a.inlineLayout, fieldLegend = _a.fieldLegend;
     var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
     var handleOnChange = function (newValue) {
         setCheckedValues(newValue);
         onChange(newValue);
     };
-    return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, bordered: bordered, classNames: classNames, inlineLayout: inlineLayout }));
+    return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, bordered: bordered, classNames: classNames, inlineLayout: inlineLayout, fieldLegend: fieldLegend }));
 };
 var CheckboxWithCustomWrapperStyles = function (_a) {
     var onChange = _a.onChange;
@@ -85,7 +89,7 @@ var CheckboxWithCustomWrapperStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT1: 'Cat',
             DOG1: 'Dog',
-        }, classNames: { container: "p32 bg-primary-300 br24 bs-lg" } }));
+        }, classNames: { container: 'p32 bg-primary-300 br24 bs-lg' } }));
 };
 var CheckboxWithCustomOptionStyles = function (_a) {
     var onChange = _a.onChange;
@@ -98,7 +102,7 @@ var CheckboxWithCustomOptionStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT2: 'Cat',
             DOG2: 'Dog',
-        }, classNames: { option: "mb32 p24 bg-green-100 br12 bs-lg" } }));
+        }, classNames: { option: 'mb32 p24 bg-green-100 br12 bs-lg' } }));
 };
 var CheckboxWithCustomLabelStyles = function (_a) {
     var onChange = _a.onChange;
@@ -111,7 +115,7 @@ var CheckboxWithCustomLabelStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT3: 'Cat',
             DOG3: 'Dog',
-        }, classNames: { label: "bg-grey-900 tc-white" } }));
+        }, classNames: { label: 'bg-grey-900 tc-white' } }));
 };
 var CheckboxWithInlineLayout = function (_a) {
     var onChange = _a.onChange;
@@ -128,7 +132,7 @@ var CheckboxWithInlineLayout = function (_a) {
             RABBIT: 'Rabbit',
             RAT: 'Rat',
             ANOTHER: 'Other',
-        }, classNames: { option: "w30" }, inlineLayout: true, wide: true }));
+        }, classNames: { option: 'w30' }, inlineLayout: true, wide: true }));
 };
 var CheckboxWithCustomLabel = function (_a) {
     var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
@@ -140,18 +144,18 @@ var CheckboxWithCustomLabel = function (_a) {
     };
     return (jsx(Checkbox, { options: {
             BIGDOG: {
-                icon: function () { return jsx("img", { src: images.bigDog, alt: '' }); },
+                icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
                 title: 'Dog',
             },
             FISH: {
-                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: '' }); },
+                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
                 title: 'Fish',
             },
             OTHER: {
-                icon: function () { return jsx("img", { src: images.brokenGlass, alt: '' }); },
+                icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
                 title: 'Other',
-            }
-        }, onChange: handleOnChange, value: checkedValues, classNames: { option: "w30" }, inlineLayout: true }));
+            },
+        }, onChange: handleOnChange, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
 };
 CheckboxStory.storyName = 'Checkbox';
 

package/dist/esm/components/input/checkbox/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description: 'Object that contains the possible options for rendering in the input.',\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n    wide: {\n      description: 'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false\n    },\n    bordered: {\n      control: 'boolean',\n      description: 'Property that defines if checkbox should show the border around each label',\n    },\n    inlineLayout: {\n      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n    },\n    className: {\n      description: 'ClassNames for custom styling',\n    },\n  },\n  args: {\n    options: {\n      CAT:{\n        title: 'Cat',\n        description: 'At least 1'\n      },\n      DOG:{\n        title: 'Dog',\n        description: 'At least 2'\n      },\n      NONE:{\n        title: 'None',\n        description: 'No pets'\n      }\n    },\n    wide: false,\n    bordered: true,\n    inlineLayout: false,\n    classNames: {\n      container: '',\n      label: '',\n      option: ''\n    },\n    value: [],\n    className: ''\n  }\n};\n\nexport const CheckboxStory = ({ \n  onChange,\n  options,\n  wide,\n  bordered,\n  classNames,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      wide={wide}\n      options={options} \n      onChange={handleOnChange}\n      value={checkedValues}\n      bordered={bordered}\n      classNames={classNames}\n      inlineLayout={inlineLayout}\n    />\n  );\n}\n\nexport const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }} \n      classNames={{ container: \"p32 bg-primary-300 br24 bs-lg\" }}\n    />\n  );\n}\n\nexport const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }} \n      classNames={{ option: \"mb32 p24 bg-green-100 br12 bs-lg\" }}\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }} \n      classNames={{ label: \"bg-grey-900 tc-white\" }}\n    />\n  );\n}\n\nexport const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }} \n      classNames={{ option: \"w30\" }}\n      inlineLayout\n      wide\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt='' />,\n          title: 'Dog',\n        },\n        FISH:{\n          icon: () => <img src={images.brokenAquarium} alt='' />,\n          title: 'Fish',\n        },\n        OTHER:{\n          icon: () => <img src={images.brokenGlass} alt='' />,\n          title: 'Other',\n        }\n      }} \n      onChange={handleOnChange}\n      value={checkedValues}\n      classNames={{ option: \"w30\" }}\n      inlineLayout\n    />\n  );\n}\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description:\n        'Object that contains the possible options for rendering in the input.',\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    fieldLegend: {\n      description:\n        'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    wide: {\n      description:\n        'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false,\n    },\n    bordered: {\n      control: 'boolean',\n      description:\n        'Property that defines if checkbox should show the border around each label',\n    },\n    inlineLayout: {\n      description:\n        'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n    },\n    className: {\n      description: 'ClassNames for custom styling',\n    },\n  },\n  args: {\n    options: {\n      CAT: {\n        title: 'Cat',\n        description: 'At least 1',\n      },\n      DOG: {\n        title: 'Dog',\n        description: 'At least 2',\n      },\n      NONE: {\n        title: 'None',\n        description: 'No pets',\n      },\n    },\n    fieldLegend: 'Owned pets',\n    wide: false,\n    bordered: true,\n    inlineLayout: false,\n    classNames: {\n      container: '',\n      label: '',\n      option: '',\n    },\n    value: [],\n    className: '',\n  },\n};\n\nexport const CheckboxStory = ({\n  onChange,\n  options,\n  wide,\n  bordered,\n  classNames,\n  inlineLayout,\n  fieldLegend,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      wide={wide}\n      options={options}\n      onChange={handleOnChange}\n      value={checkedValues}\n      bordered={bordered}\n      classNames={classNames}\n      inlineLayout={inlineLayout}\n      fieldLegend={fieldLegend}\n    />\n  );\n};\n\nexport const CheckboxWithCustomWrapperStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }}\n      classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}\n    />\n  );\n};\n\nexport const CheckboxWithCustomOptionStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }}\n      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n    />\n  );\n};\n\nexport const CheckboxWithCustomLabelStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }}\n      classNames={{ label: 'bg-grey-900 tc-white' }}\n    />\n  );\n};\n\nexport const CheckboxWithInlineLayout = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }}\n      classNames={{ option: 'w30' }}\n      inlineLayout\n      wide\n    />\n  );\n};\n\nexport const CheckboxWithCustomLabel = ({\n  onChange,\n  wide,\n  classNames,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt=\"\" />,\n          title: 'Dog',\n        },\n        FISH: {\n          icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n          title: 'Fish',\n        },\n        OTHER: {\n          icon: () => <img src={images.brokenGlass} alt=\"\" />,\n          title: 'Other',\n        },\n      }}\n      onChange={handleOnChange}\n      value={checkedValues}\n      classNames={{ option: 'w30' }}\n      inlineLayout\n    />\n  );\n};\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/radio/index.js

@@ -1,38 +1,40 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../../index-6ea95111.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { g as generateId } from '../../../index-69a46657.js';
 
-var css_248z = ".styles-module_container__3M-sc {\n  max-width: 100%;\n}\n\n.styles-module_narrow__3VUzp {\n  max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n  max-width: 736px;\n}";
+var css_248z = ".styles-module_container__3M-sc {\n  max-width: 100%;\n  border: 0;\n  margin: 0;\n  min-width: 0;\n  padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__3VUzp {\n  max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n  max-width: 736px;\n}";
 var styles = {"container":"styles-module_container__3M-sc","narrow":"styles-module_narrow__3VUzp","wide":"styles-module_wide__3nLhz"};
 styleInject(css_248z);
 
 var Radio = function (_a) {
     var _b;
-    var options = _a.options, value = _a.value, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.inlineIcon, inlineIcon = _e === void 0 ? false : _e, classNamesObj = _a.classNames, _f = _a.bordered, bordered = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
+    var options = _a.options, value = _a.value, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.inlineIcon, inlineIcon = _e === void 0 ? false : _e, classNamesObj = _a.classNames, _f = _a.bordered, bordered = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.fieldLegend, fieldLegend = _h === void 0 ? 'Select an option' : _h, groupName = _a.groupName;
     var entries = Object.entries(options);
-    return (jsx("div", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
+    var name = groupName !== null && groupName !== void 0 ? groupName : generateId();
+    return (jsxs("fieldset", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
             _b[styles.wide] = wide,
             _b[styles.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
             _b['fd-column'] = !inlineLayout,
-            _b)), children: entries.map(function (_a) {
-            var currentValue = _a[0], label = _a[1];
-            var checked = value === currentValue;
-            var customIcon = label === null || label === void 0 ? void 0 : label.icon;
-            var hideIcon = label === null || label === void 0 ? void 0 : label.hideBox;
-            var isRadioLabelObject = function (label) {
-                return label.title !== undefined;
-            };
-            return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-radio', {
-                            'p-radio--no-icon': customIcon || hideIcon,
-                            'p-radio--centered': !label,
-                        }), id: currentValue, type: "radio", value: currentValue, onChange: function () { return onChange(currentValue); }, checked: checked, "data-testid": "radio-input-".concat(currentValue), disabled: disabled }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label', {
-                            'jc-center': customIcon && !inlineIcon,
-                            'fd-column': customIcon && !inlineIcon,
-                            'p-label--bordered': bordered,
-                        }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsx("div", { className: classNames('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsx("legend", { className: "sr-only", children: fieldLegend }), entries.map(function (_a) {
+                var currentValue = _a[0], label = _a[1];
+                var checked = value === currentValue;
+                var customIcon = label === null || label === void 0 ? void 0 : label.icon;
+                var hideIcon = label === null || label === void 0 ? void 0 : label.hideBox;
+                var isRadioLabelObject = function (label) {
+                    return label.title !== undefined;
+                };
+                return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-radio', {
+                                'p-radio--no-icon': customIcon || hideIcon,
+                                'p-radio--centered': !label,
+                            }), id: currentValue, type: "radio", value: currentValue, onChange: function () { return onChange(currentValue); }, checked: checked, "data-testid": "radio-input-".concat(currentValue), disabled: disabled, name: name }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label', {
+                                'jc-center': customIcon && !inlineIcon,
+                                'fd-column': customIcon && !inlineIcon,
+                                'p-label--bordered': bordered,
+                            }), "data-cy": "radio-".concat(currentValue), "data-testid": "radio-".concat(currentValue), children: [customIcon && (jsx("div", { className: classNames('d-inline-flex ai-center jc-center', inlineIcon ? 'mr8' : 'mt8'), children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) })), isRadioLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 
 export { Radio };

package/dist/esm/components/input/radio/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface RadioWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n  hideBox?: boolean;\n}\n\nexport interface RadioProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | RadioWithDescription>;\n  value?: ValueType;\n  onChange: (value: ValueType) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  inlineIcon?: boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  bordered?: boolean;\n  disabled?: boolean;\n}\n\nexport const Radio = <ValueType extends string>({\n  options,\n  value,\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  inlineIcon = false,\n  classNames: classNamesObj,\n  bordered = true,\n  disabled = false,\n}: RadioProps<ValueType>) => {\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | RadioWithDescription\n  ][];\n\n  return (\n    <div\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.wide]: wide,\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      {entries.map(([currentValue, label]) => {\n        const checked = value === currentValue;\n        const customIcon = (label as RadioWithDescription)?.icon;\n        const hideIcon = (label as RadioWithDescription)?.hideBox;\n\n        const isRadioLabelObject = (\n          label: ReactNode | RadioWithDescription\n        ): label is RadioWithDescription => {\n          return (label as RadioWithDescription).title !== undefined;\n        };\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-radio', {\n                'p-radio--no-icon': customIcon || hideIcon,\n                'p-radio--centered': !label,\n              })}\n              id={currentValue}\n              type=\"radio\"\n              value={currentValue}\n              onChange={() => onChange(currentValue)}\n              checked={checked}\n              data-testid={`radio-input-${currentValue}`}\n              disabled={disabled}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label', {\n                'jc-center': customIcon && !inlineIcon,\n                'fd-column': customIcon && !inlineIcon,\n                'p-label--bordered': bordered,\n              })}\n              data-cy={`radio-${currentValue}`}\n              data-testid={`radio-${currentValue}`}\n            >\n              {customIcon && (\n                <div\n                  className={classNames(\n                    'd-inline-flex ai-center jc-center',\n                    inlineIcon ? 'mr8' : 'mt8'\n                  )}\n                >\n                  {customIcon?.(checked)}\n                </div>\n              )}\n\n              {isRadioLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;IA2Ba,KAAK,GAAG,UAA2B,EAUxB;;QATtB,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EACN,aAAa,gBAAA,EACzB,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IAEhB,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAGnC,CAAC;IAEJ,QACEA,aACE,SAAS,EAAE,UAAU,CACnB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,EACxB,MAAM,CAAC,SAAS,EAChB,aAAa;YAEX,GAAC,MAAM,CAAC,IAAI,IAAG,IAAI;YACnB,GAAC,MAAM,CAAC,MAAM,IAAG,CAAC,IAAI;YACtB,YAAQ,GAAE,YAAY;YACtB,YAAQ,GAAE,YAAY;YACtB,eAAW,GAAE,CAAC,YAAY;gBAE7B,YAEA,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqB;gBAApB,YAAY,QAAA,EAAE,KAAK,QAAA;YAChC,IAAM,OAAO,GAAG,KAAK,KAAK,YAAY,CAAC;YACvC,IAAM,UAAU,GAAI,KAA8B,aAA9B,KAAK,uBAAL,KAAK,CAA2B,IAAI,CAAC;YACzD,IAAM,QAAQ,GAAI,KAA8B,aAA9B,KAAK,uBAAL,KAAK,CAA2B,OAAO,CAAC;YAE1D,IAAM,kBAAkB,GAAG,UACzB,KAAuC;gBAEvC,OAAQ,KAA8B,CAAC,KAAK,KAAK,SAAS,CAAC;aAC5D,CAAC;YAEF,QACEC,cAAK,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,aACnCD,eACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;4BAC/B,kBAAkB,EAAE,UAAU,IAAI,QAAQ;4BAC1C,mBAAmB,EAAE,CAAC,KAAK;yBAC5B,CAAC,EACF,EAAE,EAAE,YAAY,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,cAAM,OAAA,QAAQ,CAAC,YAAY,CAAC,GAAA,EACtC,OAAO,EAAE,OAAO,iBACH,sBAAe,YAAY,CAAE,EAC1C,QAAQ,EAAE,QAAQ,GAClB,EAEFC,gBACE,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,UAAU,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,SAAS,EAAE;4BACrD,WAAW,EAAE,UAAU,IAAI,CAAC,UAAU;4BACtC,WAAW,EAAE,UAAU,IAAI,CAAC,UAAU;4BACtC,mBAAmB,EAAE,QAAQ;yBAC9B,CAAC,aACO,gBAAS,YAAY,CAAE,iBACnB,gBAAS,YAAY,CAAE,aAEnC,UAAU,KACTD,aACE,SAAS,EAAE,UAAU,CACnB,mCAAmC,EACnC,UAAU,GAAG,KAAK,GAAG,KAAK,CAC3B,YAEA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,GAClB,CACP,EAEA,kBAAkB,CAAC,KAAK,CAAC,IACxBC,yBACED,WAAG,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAK,EACpCA,cAAM,SAAS,EAAC,oCAAoC,YACjD,KAAK,CAAC,WAAW,GACb,IACH,KAEN,KAAK,CACN,IACK,KA9CkC,YAAY,CA+ClD,EACN;SACH,CAAC,GACE,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nimport generateId from '../../../util/generateId';\nexport interface RadioWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n  hideBox?: boolean;\n}\n\nexport interface RadioProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | RadioWithDescription>;\n  value?: ValueType;\n  onChange: (value: ValueType) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  inlineIcon?: boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  bordered?: boolean;\n  disabled?: boolean;\n  fieldLegend?: string;\n  groupName?: string;\n}\n\nexport const Radio = <ValueType extends string>({\n  options,\n  value,\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  inlineIcon = false,\n  classNames: classNamesObj,\n  bordered = true,\n  disabled = false,\n  fieldLegend = 'Select an option',\n  groupName,\n}: RadioProps<ValueType>) => {\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | RadioWithDescription\n  ][];\n\n  const name = groupName ?? generateId();\n\n  return (\n    <fieldset\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.wide]: wide,\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      <legend className=\"sr-only\">{fieldLegend}</legend>\n      {entries.map(([currentValue, label]) => {\n        const checked = value === currentValue;\n        const customIcon = (label as RadioWithDescription)?.icon;\n        const hideIcon = (label as RadioWithDescription)?.hideBox;\n\n        const isRadioLabelObject = (\n          label: ReactNode | RadioWithDescription\n        ): label is RadioWithDescription => {\n          return (label as RadioWithDescription).title !== undefined;\n        };\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-radio', {\n                'p-radio--no-icon': customIcon || hideIcon,\n                'p-radio--centered': !label,\n              })}\n              id={currentValue}\n              type=\"radio\"\n              value={currentValue}\n              onChange={() => onChange(currentValue)}\n              checked={checked}\n              data-testid={`radio-input-${currentValue}`}\n              disabled={disabled}\n              name={name}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label', {\n                'jc-center': customIcon && !inlineIcon,\n                'fd-column': customIcon && !inlineIcon,\n                'p-label--bordered': bordered,\n              })}\n              data-cy={`radio-${currentValue}`}\n              data-testid={`radio-${currentValue}`}\n            >\n              {customIcon && (\n                <div\n                  className={classNames(\n                    'd-inline-flex ai-center jc-center',\n                    inlineIcon ? 'mr8' : 'mt8'\n                  )}\n                >\n                  {customIcon?.(checked)}\n                </div>\n              )}\n\n              {isRadioLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </fieldset>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/input/radio/index.stories.js

@@ -4,6 +4,7 @@ import { Radio } from './index.js';
 import { a as images } from '../../../index-29e6f39e.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
+import '../../../index-69a46657.js';
 
 var story = {
     title: 'JSX/Inputs/Radio',
@@ -15,6 +16,12 @@ var story = {
         value: {
             description: 'Current checked values.',
         },
+        fieldLegend: {
+            description: 'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',
+        },
+        groupName: {
+            description: 'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',
+        },
         onChange: {
             description: 'Function called everytime a value changes.',
             action: true,
@@ -56,6 +63,8 @@ var story = {
                 description: 'No pets',
             },
         },
+        fieldLegend: 'Owned pets',
+        groupName: 'Pets',
         value: '',
         wide: false,
         classNames: {
@@ -67,16 +76,16 @@ var story = {
         inlineLayout: false,
         inlineIcon: false,
         disabled: false,
-    }
+    },
 };
 var RadioStory = function (_a) {
-    var onChange = _a.onChange, options = _a.options, wide = _a.wide, classNames = _a.classNames, inlineLayout = _a.inlineLayout, bordered = _a.bordered, disabled = _a.disabled;
+    var onChange = _a.onChange, options = _a.options, wide = _a.wide, classNames = _a.classNames, inlineLayout = _a.inlineLayout, bordered = _a.bordered, disabled = _a.disabled, fieldLegend = _a.fieldLegend, groupName = _a.groupName;
     var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
     var handleOnChange = function (newValue) {
         setCheckedValues(newValue);
         onChange(newValue);
     };
-    return (jsx(Radio, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, classNames: classNames, inlineLayout: inlineLayout, bordered: bordered, disabled: disabled }));
+    return (jsx(Radio, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, classNames: classNames, inlineLayout: inlineLayout, bordered: bordered, disabled: disabled, fieldLegend: fieldLegend, groupName: groupName }));
 };
 var RadioWithCustomWrapperStyles = function (_a) {
     var onChange = _a.onChange;