@popsure/dirty-swan 0.63.0 → 0.63.1

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

@@ -1,10 +1,11 @@
-import { b as __rest, a as __assign } from '../../../tslib.es6-a39f91fc.js';
+import { c as __rest, b as __assign } from '../../../tslib.es6-CVlKGIvp.js';
 import { jsx } from 'react/jsx-runtime';
 import { Input } from '../index.js';
 import 'react';
-import '../../../index-6ea95111.js';
-import '../../../index-69a46657.js';
-import '../../../style-inject.es-1f59c1d0.js';
+import '../../../index-DLQEsiym.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
+import '../../../index-CNcEE5dn.js';
+import '../../../style-inject.es-tgCJW-Cu.js';
 
 var IBAN_CHAR_LIMIT = 4;
 var formatIban = function (iban) {
@@ -29,5 +30,5 @@ var IbanInput = function (_a) {
     return (jsx(Input, __assign({ value: formatIban(value), onChange: function (e) { return onChange === null || onChange === void 0 ? void 0 : onChange(formatIban(e.target.value)); } }, props)));
 };
 
-export default IbanInput;
+export { IbanInput as default };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/iban/formatIban/index.ts","../../../../../../src/lib/components/input/iban/index.tsx"],"sourcesContent":["const IBAN_CHAR_LIMIT = 4;\n\nexport const formatIban = (iban?: string): string => {\n  if (iban) {\n    const cleanIban = iban\n      .replace(/\\s\\s+/g, ' ')\n      .replace(/[^0-9a-zA-Z]/gi, '')\n      .toUpperCase();\n\n    const values: string[] = [];\n\n    cleanIban.split('').forEach((char, idx) => {\n      if (idx % IBAN_CHAR_LIMIT === 0) {\n        values.push(cleanIban.substring(idx, idx + IBAN_CHAR_LIMIT));\n      }\n    });\n\n    return values.join(' ');\n  }\n\n  return '';\n};\n","import { Input, InputProps } from '..';\n\nimport { formatIban } from './formatIban';\n\nconst IbanInput = ({\n  value,\n  onChange,\n  ...props\n}: {\n  value?: string;\n  onChange: (value: string) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => (\n  <Input\n    value={formatIban(value)}\n    onChange={(e) => onChange?.(formatIban(e.target.value))}\n    {...props}\n  />\n);\n\nexport default IbanInput;\n"],"names":["_jsx"],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,CAAC;AAEnB,IAAM,UAAU,GAAG,UAAC,IAAa;IACtC,IAAI,IAAI,EAAE;QACR,IAAM,WAAS,GAAG,IAAI;aACnB,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC;aACtB,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC;aAC7B,WAAW,EAAE,CAAC;QAEjB,IAAM,QAAM,GAAa,EAAE,CAAC;QAE5B,WAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,GAAG;YACpC,IAAI,GAAG,GAAG,eAAe,KAAK,CAAC,EAAE;gBAC/B,QAAM,CAAC,IAAI,CAAC,WAAS,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,eAAe,CAAC,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;QAEH,OAAO,QAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;;ICjBK,SAAS,GAAG,UAAC,EAO+B;IANhD,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,KAAK,cAHS,qBAIlB,CADS;IAI6C,QACrDA,IAAC,KAAK,aACJ,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EACxB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAA,IACnD,KAAK,EACT,EACH;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/iban/formatIban/index.ts","../../../../../../src/lib/components/input/iban/index.tsx"],"sourcesContent":["const IBAN_CHAR_LIMIT = 4;\n\nexport const formatIban = (iban?: string): string => {\n  if (iban) {\n    const cleanIban = iban\n      .replace(/\\s\\s+/g, ' ')\n      .replace(/[^0-9a-zA-Z]/gi, '')\n      .toUpperCase();\n\n    const values: string[] = [];\n\n    cleanIban.split('').forEach((char, idx) => {\n      if (idx % IBAN_CHAR_LIMIT === 0) {\n        values.push(cleanIban.substring(idx, idx + IBAN_CHAR_LIMIT));\n      }\n    });\n\n    return values.join(' ');\n  }\n\n  return '';\n};\n","import { Input, InputProps } from '..';\n\nimport { formatIban } from './formatIban';\n\nconst IbanInput = ({\n  value,\n  onChange,\n  ...props\n}: {\n  value?: string;\n  onChange: (value: string) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => (\n  <Input\n    value={formatIban(value)}\n    onChange={(e) => onChange?.(formatIban(e.target.value))}\n    {...props}\n  />\n);\n\nexport default IbanInput;\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC;AAElB,IAAM,UAAU,GAAG,UAAC,IAAa,EAAA;IACtC,IAAI,IAAI,EAAE;QACR,IAAM,WAAS,GAAG;AACf,aAAA,OAAO,CAAC,QAAQ,EAAE,GAAG;AACrB,aAAA,OAAO,CAAC,gBAAgB,EAAE,EAAE;AAC5B,aAAA,WAAW,EAAE;QAEhB,IAAM,QAAM,GAAa,EAAE;QAE3B,WAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,GAAG,EAAA;AACpC,YAAA,IAAI,GAAG,GAAG,eAAe,KAAK,CAAC,EAAE;AAC/B,gBAAA,QAAM,CAAC,IAAI,CAAC,WAAS,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,eAAe,CAAC,CAAC;YAC9D;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,QAAM,CAAC,IAAI,CAAC,GAAG,CAAC;IACzB;AAEA,IAAA,OAAO,EAAE;AACX,CAAC;;ACjBD,IAAM,SAAS,GAAG,UAAC,EAO+B,EAAA;IANhD,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,KAAK,GAAA,MAAA,CAAA,EAAA,EAHS,CAAA,OAAA,EAAA,UAAA,CAIlB,CADS;AAI6C,IAAA,QACrDA,GAAA,CAAC,KAAK,EAAA,QAAA,CAAA,EACJ,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EACxB,QAAQ,EAAE,UAAC,CAAC,EAAA,EAAK,OAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,CAAtC,CAAsC,IACnD,KAAK,CAAA,CACT;;;;;"}

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

@@ -1,27 +1,30 @@
-import { b as __rest, a as __assign } from '../../tslib.es6-a39f91fc.js';
+import { c as __rest, b as __assign } from '../../tslib.es6-CVlKGIvp.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import require$$0__default, { useState } from 'react';
-import { c as classNames } from '../../index-6ea95111.js';
-import { g as generateId } from '../../index-69a46657.js';
-import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+import React__default, { useState } from 'react';
+import { c as classNames } from '../../index-DLQEsiym.js';
+import { g as generateId } from '../../index-CNcEE5dn.js';
+import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 
-var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-grey-500);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-grey-600);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-grey-500);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-grey-600);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
-var styles = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
+var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-neutral-600);\n  transition: top 0.3s, color 0.3s;\n}\n.style-module_prefix--with-value__2QiEA {\n  color: var(--ds-neutral-900);\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-neutral-700);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-neutral-900);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\ninput:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-neutral-900);\n}\ninput:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-neutral-600);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-neutral-700);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
+var styles = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-value":"style-module_prefix--with-value__2QiEA","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
 styleInject(css_248z);
 
-var Input = require$$0__default.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g;
-    var className = _a.className, placeholder = _a.placeholder, label = _a.label, id = _a.id, prefix = _a.prefix, error = _a.error, disabled = _a.disabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, _j = _a.labelInsideInput, labelInsideInput = _j === void 0 ? false : _j, props = __rest(_a, ["className", "placeholder", "label", "id", "prefix", "error", "disabled", "hideLabel", "labelInsideInput"]);
+var Input = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var className = _a.className, placeholder = _a.placeholder, label = _a.label, id = _a.id, prefix = _a.prefix, error = _a.error, disabled = _a.disabled, _j = _a.hideLabel, hideLabel = _j === void 0 ? false : _j, _k = _a.labelInsideInput, labelInsideInput = _k === void 0 ? false : _k, props = __rest(_a, ["className", "placeholder", "label", "id", "prefix", "error", "disabled", "hideLabel", "labelInsideInput"]);
     var uniqueId = useState(id !== null && id !== void 0 ? id : generateId())[0];
     return (jsxs("div", { className: "".concat(styles.container, " ").concat(className !== null && className !== void 0 ? className : ''), children: [label && !labelInsideInput && (jsx("label", { htmlFor: uniqueId, className: classNames('p-p', styles.label, (_b = {},
                     _b[styles['label--with-error']] = error,
                     _b['sr-only'] = hideLabel,
-                    _b)), children: label })), jsxs("div", { style: { position: 'relative' }, children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', (!label || labelInsideInput) && placeholder && placeholder.length > 0
+                    _b)), children: label })), jsxs("div", { style: { position: 'relative' }, children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', (!label || labelInsideInput) &&
+                            placeholder &&
+                            placeholder.length > 0
                             ? styles.input
                             : styles['input--no-placeholder'], (_c = {},
                             _c[styles['input--with-prefix']] = prefix,
                             _c[styles['input--with-inside-label']] = labelInsideInput,
-                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
+                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? "".concat(uniqueId, "-error") : undefined }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e), (_f = {}, _f[styles['prefix--with-value']] = props.value, _f)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_g = {}, _g[styles['placeholder--with-prefix']] = prefix, _g), (_h = {}, _h[styles['placeholder--with-error']] = error, _h)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { id: "".concat(uniqueId, "-error"), className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
 });
 
 export { Input };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n  error?: string | boolean;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n  labelInsideInput?: boolean;\n};\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      labelInsideInput = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && !labelInsideInput && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              (!label || labelInsideInput) && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              {\n                [styles['input--with-prefix']]: prefix, \n                [styles['input--with-inside-label']]: labelInsideInput\n              }\n            )}\n            placeholder={label || labelInsideInput ? placeholder : ' '}\n            disabled={disabled}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {(!label || labelInsideInput) && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {labelInsideInput ? label : placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,mBAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB,KAAK,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BACjE,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,IACd,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WAAG,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YACvD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n    error?: string | boolean;\n    prefix?: string;\n    label?: string;\n    id?: string;\n    hideLabel?: boolean;\n    labelInsideInput?: boolean;\n  };\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      labelInsideInput = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && !labelInsideInput && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              (!label || labelInsideInput) &&\n                placeholder &&\n                placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              {\n                [styles['input--with-prefix']]: prefix,\n                [styles['input--with-inside-label']]: labelInsideInput,\n              }\n            )}\n            placeholder={label || labelInsideInput ? placeholder : ' '}\n            disabled={disabled}\n            aria-invalid={!!error}\n            aria-errormessage={error ? `${uniqueId}-error` : undefined}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled },\n                { [styles['prefix--with-value']]: props.value }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {(!label || labelInsideInput) && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {labelInsideInput ? label : placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p\n            id={`${uniqueId}-error`}\n            className={`p-p--small tc-red-500 w100 ${styles.error}`}\n          >\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":"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"}

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

@@ -1,26 +1,28 @@
-import { a as __assign } from '../../tslib.es6-a39f91fc.js';
+import { b as __assign } from '../../tslib.es6-CVlKGIvp.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Input } from './index.js';
-import { s as sharedConfig } from '../../config-4b5ffe4f.js';
-import '../../index-6ea95111.js';
-import '../../index-69a46657.js';
-import '../../style-inject.es-1f59c1d0.js';
+import { s as sharedConfig } from '../../config-PagIydiG.js';
+import '../../index-DLQEsiym.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
+import '../../index-CNcEE5dn.js';
+import '../../style-inject.es-tgCJW-Cu.js';
 
 var story = __assign(__assign({ title: 'JSX/Inputs/Input', component: Input }, sharedConfig), { parameters: {
-        componentSubtitle: 'The default input component is used to gather informations from the user.'
+        componentSubtitle: 'The default input component is used to gather informations from the user.',
     } });
-var InputStory = function (_a) {
-    var onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder, value = _a.value, label = _a.label, hideLabel = _a.hideLabel, labelInsideInput = _a.labelInsideInput, prefix = _a.prefix, error = _a.error;
-    var _b = useState(value), newValue = _b[0], setValue = _b[1];
-    var handleOnChange = function (event) {
-        setValue(event.target.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    };
-    return (jsx(Input, { onChange: handleOnChange, value: newValue, className: className, placeholder: placeholder, label: label, hideLabel: hideLabel, labelInsideInput: labelInsideInput, prefix: prefix, error: error }));
+var InputStory = {
+    render: function (_a) {
+        var onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder, value = _a.value, label = _a.label, hideLabel = _a.hideLabel, labelInsideInput = _a.labelInsideInput, prefix = _a.prefix, error = _a.error, disabled = _a.disabled;
+        var _b = useState(value), newValue = _b[0], setValue = _b[1];
+        var handleOnChange = function (event) {
+            setValue(event.target.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        };
+        return (jsx(Input, { onChange: handleOnChange, value: newValue, className: className, placeholder: placeholder, label: label, hideLabel: hideLabel, labelInsideInput: labelInsideInput, prefix: prefix, error: error, disabled: disabled }));
+    },
+    name: 'Input',
 };
-InputStory.storyName = 'Input';
 
-export default story;
-export { InputStory };
+export { InputStory, story as default };
 //# sourceMappingURL=input.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.stories.js","sources":["../../../../../src/lib/components/input/input.stories.tsx"],"sourcesContent":["\nimport { ChangeEvent, useState } from 'react';\nimport { Input, InputProps } from '.';\nimport sharedConfig from './stories/config';\n\nconst story = {\n  title: 'JSX/Inputs/Input',\n  component: Input,\n  ...sharedConfig,\n  parameters: {\n    componentSubtitle: 'The default input component is used to gather informations from the user.'\n  }\n};\n\nexport const InputStory = ({ \n  onChange,\n  className,\n  placeholder,\n  value,\n  label,\n  hideLabel,\n  labelInsideInput,\n  prefix,\n  error\n}: InputProps) => {\n  const [newValue, setValue] = useState(value);\n\n  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n    onChange?.(event);\n  }\n\n  return (\n    <Input \n      onChange={handleOnChange}\n      value={newValue}\n      className={className}\n      placeholder={placeholder}\n      label={label}\n      hideLabel={hideLabel}\n      labelInsideInput={labelInsideInput}\n      prefix={prefix}\n      error={error}\n    />\n  );\n};\n\nInputStory.storyName = 'Input';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;IAKM,KAAK,uBACT,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,KAAK,IACb,YAAY,KACf,UAAU,EAAE;QACV,iBAAiB,EAAE,2EAA2E;KAC/F,IACD;IAEW,UAAU,GAAG,UAAC,EAUd;QATX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,MAAM,YAAA,EACN,KAAK,WAAA;IAEC,IAAA,KAAuB,QAAQ,CAAC,KAAK,CAAC,EAArC,QAAQ,QAAA,EAAE,QAAQ,QAAmB,CAAC;IAE7C,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC5B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;KACnB,CAAA;IAED,QACEA,IAAC,KAAK,IACJ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,GACZ,EACF;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}
+{"version":3,"file":"input.stories.js","sources":["../../../../../src/lib/components/input/input.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { Input, InputProps } from '.';\nimport sharedConfig from './stories/config';\n\nconst story = {\n  title: 'JSX/Inputs/Input',\n  component: Input,\n  ...sharedConfig,\n  parameters: {\n    componentSubtitle:\n      'The default input component is used to gather informations from the user.',\n  },\n};\n\nexport const InputStory = {\n  render: ({\n    onChange,\n    className,\n    placeholder,\n    value,\n    label,\n    hideLabel,\n    labelInsideInput,\n    prefix,\n    error,\n    disabled,\n  }: InputProps) => {\n    const [newValue, setValue] = useState(value);\n\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n      setValue(event.target.value);\n      onChange?.(event);\n    };\n\n    return (\n      <Input\n        onChange={handleOnChange}\n        value={newValue}\n        className={className}\n        placeholder={placeholder}\n        label={label}\n        hideLabel={hideLabel}\n        labelInsideInput={labelInsideInput}\n        prefix={prefix}\n        error={error}\n        disabled={disabled}\n      />\n    );\n  },\n\n  name: 'Input',\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAIA,IAAM,KAAK,GAAA,QAAA,CAAA,QAAA,CAAA,EACT,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,KAAK,EAAA,EACb,YAAY,CAAA,EAAA,EACf,UAAU,EAAE;AACV,QAAA,iBAAiB,EACf,2EAA2E;AAC9E,KAAA,EAAA;AAGI,IAAM,UAAU,GAAG;IACxB,MAAM,EAAE,UAAC,EAWI,EAAA;YAVX,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA;QAEF,IAAA,EAAA,GAAuB,QAAQ,CAAC,KAAK,CAAC,EAArC,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAmB;QAE5C,IAAM,cAAc,GAAG,UAAC,KAAoC,EAAA;AAC1D,YAAA,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAC5B,YAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;AACnB,QAAA,CAAC;QAED,QACEA,IAAC,KAAK,EAAA,EACJ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAAA,CAClB;IAEN,CAAC;AAED,IAAA,IAAI,EAAE,OAAO;;;;;"}

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

@@ -1,6 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { c as classNames } from '../../../index-6ea95111.js';
-import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as classNames } from '../../../index-DLQEsiym.js';
+import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
+import { g as generateId } from '../../../index-CNcEE5dn.js';
+import '../../../_commonjsHelpers-BFTU3MAI.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 styles = {"container":"styles-module_container__3M-sc","narrow":"styles-module_narrow__3VUzp","wide":"styles-module_wide__3nLhz"};
@@ -8,31 +10,32 @@ 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-neutral-700", 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-neutral-700\">\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

@@ -1,9 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Radio } from './index.js';
-import { a as images } from '../../../index-29e6f39e.js';
-import '../../../index-6ea95111.js';
-import '../../../style-inject.es-1f59c1d0.js';
+import { i as images } from '../../../index-C4hs4X-e.js';
+import '../../../index-DLQEsiym.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
+import '../../../style-inject.es-tgCJW-Cu.js';
+import '../../../index-CNcEE5dn.js';
 
 var story = {
     title: 'JSX/Inputs/Radio',
@@ -15,6 +17,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 +64,8 @@ var story = {
                 description: 'No pets',
             },
         },
+        fieldLegend: 'Owned pets',
+        groupName: 'Pets',
         value: '',
         wide: false,
         classNames: {
@@ -67,125 +77,139 @@ 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 _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 }));
+var RadioStory = {
+    render: function (_a) {
+        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, fieldLegend: fieldLegend, groupName: groupName }));
+    },
+    name: 'Radio',
 };
-var RadioWithCustomWrapperStyles = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT1: 'Cat',
-            DOG1: 'Dog',
-        }, classNames: { container: 'p32 bg-primary-300 br24 bs-lg' } }));
+var RadioWithCustomWrapperStyles = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT1: 'Cat',
+                DOG1: 'Dog',
+            }, classNames: { container: 'p32 bg-purple-500 br24 bs-lg' } }));
+    },
 };
-var RadioWithCustomOptionStyles = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT2: 'Cat',
-            DOG2: 'Dog',
-        }, classNames: { option: 'mb32 p24 bg-green-100 br12 bs-lg' } }));
+var RadioWithCustomOptionStyles = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT2: 'Cat',
+                DOG2: 'Dog',
+            }, classNames: { option: 'mb32 p24 bg-green-100 br12 bs-lg' } }));
+    },
 };
-var RadioWithCustomLabelStyles = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT3: 'Cat',
-            DOG3: 'Dog',
-        }, classNames: { label: 'bg-grey-900 tc-white' } }));
+var RadioWithCustomLabelStyles = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT3: 'Cat',
+                DOG3: 'Dog',
+            }, classNames: { label: 'bg-neutral-900 tc-white' } }));
+    },
 };
-var RadioWithInlineLayout = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT4: 'Cat',
-            DOG4: 'Dog',
-            FISHER: 'Fish',
-            RABBIT: 'Rabbit',
-            RAT: 'Rat',
-            ANOTHER: 'Other',
-        }, classNames: { option: 'w30' }, inlineLayout: true, wide: true }));
+var RadioWithInlineLayout = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Radio, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT4: 'Cat',
+                DOG4: 'Dog',
+                FISHER: 'Fish',
+                RABBIT: 'Rabbit',
+                RAT: 'Rat',
+                ANOTHER: 'Other',
+            }, classNames: { option: 'w30' }, inlineLayout: true, wide: true }));
+    },
 };
-var RadioWithCustomLabel = function (_a) {
-    var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
-    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Radio, { options: {
-            BIGDOG: {
-                icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
-                title: 'Dog',
-            },
-            FISH: {
-                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
-                title: 'Fish',
-            },
-            OTHER: {
-                icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
-                title: 'Other',
-            },
-        }, onChange: handleOnChange, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
+var RadioWithCustomLabel = {
+    render: function (_a) {
+        var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
+        var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Radio, { options: {
+                BIGDOG: {
+                    icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
+                    title: 'Dog',
+                },
+                FISH: {
+                    icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
+                    title: 'Fish',
+                },
+                OTHER: {
+                    icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
+                    title: 'Other',
+                },
+            }, onChange: handleOnChange, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
+    },
 };
-var RadioWithCustomLabelInline = function (_a) {
-    var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
-    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Radio, { options: {
-            BIGDOG: {
-                icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
-                title: 'Dog',
-            },
-            FISH: {
-                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
-                title: 'Fish',
-            },
-            OTHER: {
-                icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
-                title: 'Other',
-            },
-        }, onChange: handleOnChange, inlineIcon: true, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
+var RadioWithCustomLabelInline = {
+    render: function (_a) {
+        var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
+        var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Radio, { options: {
+                BIGDOG: {
+                    icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
+                    title: 'Dog',
+                },
+                FISH: {
+                    icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
+                    title: 'Fish',
+                },
+                OTHER: {
+                    icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
+                    title: 'Other',
+                },
+            }, onChange: handleOnChange, inlineIcon: true, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
+    },
 };
-RadioStory.storyName = 'Radio';
-var RadioIconOnly = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Radio, { options: { NOTHING: '' }, onChange: handleOnChange, classNames: { label: 'jc-start' }, value: checkedValues, bordered: false }));
+var RadioIconOnly = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState(), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Radio, { options: { NOTHING: '' }, onChange: handleOnChange, classNames: { label: 'jc-start' }, value: checkedValues, bordered: false }));
+    },
 };
-RadioStory.storyName = 'Radio';
 
-export default story;
-export { RadioIconOnly, RadioStory, RadioWithCustomLabel, RadioWithCustomLabelInline, RadioWithCustomLabelStyles, RadioWithCustomOptionStyles, RadioWithCustomWrapperStyles, RadioWithInlineLayout };
+export { RadioIconOnly, RadioStory, RadioWithCustomLabel, RadioWithCustomLabelInline, RadioWithCustomLabelStyles, RadioWithCustomOptionStyles, RadioWithCustomWrapperStyles, RadioWithInlineLayout, story as default };
 //# sourceMappingURL=index.stories.js.map