@telefonica/mistica 16.0.0 → 16.1.0

package/dist/integer-field.js

@@ -11,17 +11,15 @@ function _export(target, all) {
 }
 _export(exports, {
     IntegerInput: function() {
-        return y;
+        return x;
     },
     default: function() {
-        return $;
+        return b;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _formcontext = require("./form-context.js");
-const _hooks = require("./hooks.js");
 const _textfieldbase = require("./text-field-base.js");
-const _texttokens = require("./text-tokens.js");
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -101,31 +99,32 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const y = (_param)=>{
-    var { inputRef: i, value: r, defaultValue: n, type: u = "text" } = _param, o = _object_without_properties(_param, [
+const x = (_param)=>{
+    var { inputRef: o, value: n, defaultValue: r, type: u = "text" } = _param, i = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "type"
     ]);
-    const t = (e)=>String(e !== null && e !== void 0 ? e : "").replace(/[^\d]/g, "");
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, o), {
+    const e = (t)=>String(t !== null && t !== void 0 ? t : "").replace(/[^\d]/g, "");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, i), {
         inputMode: "numeric",
         pattern: "[0-9]*",
-        onInput: (e)=>{
-            e.currentTarget.value = t(e.currentTarget.value);
+        onInput: (t)=>{
+            t.currentTarget.value = e(t.currentTarget.value);
         },
-        ref: i,
+        ref: o,
         type: u,
-        value: r === void 0 ? void 0 : t(r),
-        defaultValue: n === void 0 ? void 0 : t(n)
+        value: n === void 0 ? void 0 : e(n),
+        defaultValue: r === void 0 ? void 0 : e(r)
     }));
-}, A = (_param)=>{
-    var { disabled: i, error: r, helperText: n, name: u, optional: o, validate: t, onChange: d, onChangeValue: e, onBlur: a, value: c, defaultValue: p, dataAttributes: l } = _param, f = _object_without_properties(_param, [
+}, T = (_param)=>{
+    var { disabled: o, error: n, helperText: r, name: u, label: i, optional: e, validate: s, onChange: t, onChangeValue: a, onBlur: d, value: c, defaultValue: l, dataAttributes: m } = _param, g = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -135,24 +134,25 @@ const y = (_param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: g, t: I } = (0, _hooks.useTheme)(), F = (0, _formcontext.useFieldProps)({
+    const I = (0, _formcontext.useFieldProps)({
         name: u,
+        label: i,
         value: c,
-        defaultValue: p,
-        processValue: (s)=>s.trim(),
-        helperText: n,
-        optional: o,
-        error: r,
-        disabled: i,
-        onBlur: a,
-        validate: (s, x)=>s ? t == null ? void 0 : t(s, x) : o ? "" : g.formFieldErrorIsMandatory || I(_texttokens.formFieldErrorIsMandatory),
-        onChange: d,
-        onChangeValue: e
+        defaultValue: l,
+        processValue: (f)=>f.trim(),
+        helperText: r,
+        optional: e,
+        error: n,
+        disabled: o,
+        onBlur: d,
+        validate: s,
+        onChange: t,
+        onChangeValue: a
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, f, F), {
-        inputComponent: y,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, g, I), {
+        inputComponent: x,
         dataAttributes: _object_spread({
             "component-name": "IntegerField"
-        }, l)
+        }, m)
     }));
-}, $ = A;
+}, b = T;

package/dist/month-field.d.ts

@@ -5,5 +5,5 @@ export interface DateFieldProps extends CommonFormFieldProps {
     min?: Date;
     max?: Date;
 }
-declare const DateField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
+declare const DateField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue: onChangeValueProp, onBlur, value, defaultValue, min, max, dataAttributes, ...rest }: DateFieldProps) => JSX.Element;
 export default DateField;

package/dist/month-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Z;
+        return _;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -146,12 +146,13 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), L = (_param)=>{
-    var { disabled: h, error: g, helperText: D, name: F, optional: f, validate: n, onChange: R, onChangeValue: s, onBlur: S, value: y, defaultValue: O, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
+const L = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), V = (_param)=>{
+    var { disabled: h, error: g, helperText: D, name: F, label: R, optional: f, validate: n, onChange: S, onChangeValue: s, onBlur: y, value: O, defaultValue: k, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -163,18 +164,19 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "max",
         "dataAttributes"
     ]);
-    const k = (t)=>t, I = _react.useMemo(()=>(0, _dom.isInputTypeSupported)("month"), []), { texts: M, t: T } = (0, _hooks.useTheme)(), m = (t)=>!(o && t && t < (0, _time.getLocalYearMonthString)(o) || i && t && t > (0, _time.getLocalYearMonthString)(i)), p = (0, _formcontext.useFieldProps)({
+    const I = (t)=>t, M = _react.useMemo(()=>(0, _dom.isInputTypeSupported)("month"), []), { texts: T, t: z } = (0, _hooks.useTheme)(), m = (t)=>!(o && t && t < (0, _time.getLocalYearMonthString)(o) || i && t && t > (0, _time.getLocalYearMonthString)(i)), p = (0, _formcontext.useFieldProps)({
         name: F,
-        value: y,
-        defaultValue: O,
-        processValue: k,
+        label: R,
+        value: O,
+        defaultValue: k,
+        processValue: I,
         helperText: D,
         optional: f,
         error: g,
         disabled: h,
-        onBlur: S,
-        validate: (t, a)=>m(t) ? n == null ? void 0 : n(t, a) : M.formDateOutOfRangeError || T(_texttokens.formDateOutOfRangeError),
-        onChange: R,
+        onBlur: y,
+        validate: (t, a)=>m(t) ? n == null ? void 0 : n(t, a) : T.formDateOutOfRangeError || z(_texttokens.formDateOutOfRangeError),
+        onChange: S,
         onChangeValue: (t, a)=>{
             m(t) && (s == null || s(t, a));
         }
@@ -192,9 +194,9 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
             "component-name": "MonthField"
         }, d)
     }));
-    return I || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+    return M || (0, _environment.isServerSide)() ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
         fallback: l,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, _object_spread_props(_object_spread({}, u, p), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(L, _object_spread_props(_object_spread({}, u, p), {
             optional: f,
             isValidDate: (t)=>m((0, _time.getLocalYearMonthString)(t.toDate())),
             mode: "year-month",
@@ -203,4 +205,4 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
             }, d)
         }))
     });
-}, Z = L;
+}, _ = V;

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "16.0.0";
+const o = "16.1.0";

package/dist/password-field.d.ts

@@ -3,5 +3,5 @@ import type { CommonFormFieldProps } from './text-field-base';
 export interface PasswordFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
 }
-declare const PasswordField: ({ disabled, error, helperText, name, optional, validate, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: PasswordFieldProps) => JSX.Element;
+declare const PasswordField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: PasswordFieldProps) => JSX.Element;
 export default PasswordField;

package/dist/password-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return J;
+        return K;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -142,7 +142,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = (param)=>{
+const C = (param)=>{
     let { isVisible: n, setVisibility: c, focus: a } = param;
     const { texts: t, t: s } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
@@ -159,12 +159,13 @@ const B = (param)=>{
             c(l), a();
         }
     });
-}, C = (_param)=>{
-    var { disabled: n, error: c, helperText: a, name: t, optional: s, validate: l, onChange: m, onChangeValue: p, onBlur: b, value: P, autoComplete: w = "current-password", defaultValue: R, dataAttributes: y } = _param, F = _object_without_properties(_param, [
+}, O = (_param)=>{
+    var { disabled: n, error: c, helperText: a, name: t, label: s, optional: l, validate: m, onChange: p, onChangeValue: b, onBlur: P, value: w, autoComplete: R = "current-password", defaultValue: y, dataAttributes: F } = _param, I = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -175,18 +176,18 @@ const B = (param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const [u, I] = _react.useState(!1), o = _react.useRef(0), r = _react.useRef(null), V = (e)=>e, g = ()=>{
+    const [u, V] = _react.useState(!1), o = _react.useRef(0), r = _react.useRef(null), g = (e)=>e, h = ()=>{
         const e = r.current;
         e && (e.selectionStart !== null && (o.current = e.selectionStart), e.focus());
     };
     _react.useEffect(()=>{
         const e = r.current;
         if (e) {
-            const h = requestAnimationFrame(()=>{
+            const x = requestAnimationFrame(()=>{
                 e.selectionStart = o.current, e.selectionEnd = o.current;
             });
             return ()=>{
-                cancelAnimationFrame(h);
+                cancelAnimationFrame(x);
             };
         }
     }, [
@@ -196,31 +197,32 @@ const B = (param)=>{
     ]);
     const f = (0, _formcontext.useFieldProps)({
         name: t,
-        value: P,
-        defaultValue: R,
-        processValue: V,
+        label: s,
+        value: w,
+        defaultValue: y,
+        processValue: g,
         helperText: a,
-        optional: s,
+        optional: l,
         error: c,
         disabled: n,
-        onBlur: b,
-        validate: l,
-        onChange: m,
-        onChangeValue: p
+        onBlur: P,
+        validate: m,
+        onChange: p,
+        onChangeValue: b
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, F, f), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, I, f), {
         type: u ? "text" : "password",
         inputRef: (e)=>{
             f.inputRef(e), r.current = e;
         },
-        autoComplete: w,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
-            focus: g,
+        autoComplete: R,
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, {
+            focus: h,
             isVisible: u,
-            setVisibility: I
+            setVisibility: V
         }),
         dataAttributes: _object_spread({
             "component-name": "PasswordField"
-        }, y)
+        }, F)
     }));
-}, J = C;
+}, K = O;

package/dist/phone-number-field.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import type { CommonFormFieldProps } from './text-field-base';
+import type { RegionCode } from './utils/region-code';
+type NumberFormatter = (number: string, regionCode: RegionCode) => string;
 export interface PhoneNumberFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
     prefix?: string;
     getSuggestions?: (value: string) => Array<string>;
     e164?: boolean;
+    format?: NumberFormatter;
 }
-declare const PhoneNumberField: ({ disabled, error, helperText, name, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, e164, dataAttributes, ...rest }: PhoneNumberFieldProps) => JSX.Element;
+declare const PhoneNumberField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, dataAttributes, format, e164, ...rest }: PhoneNumberFieldProps) => JSX.Element;
 export default PhoneNumberField;

package/dist/phone-number-field.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return J;
+        return z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _rifm = require("rifm");
-const _libphonenumber = require("@telefonica/libphonenumber");
 const _formcontext = require("./form-context.js");
 const _textfieldbase = require("./text-field-base.js");
 const _hooks = require("./hooks.js");
@@ -138,51 +137,79 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const b = (r, n)=>(0, _libphonenumber.formatAsYouType)(n.replace(/[^\d+*#]/g, ""), r), $ = (r)=>!!r.match(/^\+\d+$/), j = (_param)=>{
-    var { inputRef: r, value: n, defaultValue: f, onChange: s, prefix: o, e164: y } = _param, d = _object_without_properties(_param, [
+let f;
+const D = (o)=>o, I = (o, c)=>f.formatAsYouType(o.replace(/[^\d+*#]/g, ""), c), Z = (o)=>!!o.match(/^\+\d+$/), $ = (_param)=>{
+    var { inputRef: o, value: c, defaultValue: R, onChange: m, prefix: s, e164: E, format: l } = _param, y = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
         "prefix",
-        "e164"
+        "e164",
+        "format"
     ]);
-    const [g, h] = _react.useState(f !== null && f !== void 0 ? f : ""), l = _react.useRef(null), { i18n: C } = (0, _hooks.useTheme)(), i = C.phoneNumberFormattingRegionCode, u = typeof n < "u", a = u ? n : g, P = _react.useCallback((e)=>{
-        u || h(e), l.current && (s == null || s((0, _dom.createChangeEvent)(l.current, e)));
+    const [N, P] = _react.useState(R !== null && R !== void 0 ? R : ""), p = _react.useRef(null), { i18n: V } = (0, _hooks.useTheme)(), i = _react.useRef(l || D), [d, b] = _react.useState(!1), u = V.phoneNumberFormattingRegionCode, h = typeof c < "u", x = h ? c : N, a = _react.useRef(m);
+    _react.useEffect(()=>{
+        a.current = m;
     }, [
-        u,
-        s
-    ]), F = _react.useCallback(// otherwise the cursor position is incorrectly positioned
+        m
+    ]), _react.useEffect(()=>{
+        l ? i.current = l : Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@telefonica/libphonenumber"))).then((e)=>{
+            f = e, i.current = I, b(!0);
+        });
+    }, [
+        l
+    ]);
+    const g = _react.useCallback((e)=>{
+        var t;
+        h || P(e), p.current && ((t = a.current) == null || t.call(a, (0, _dom.createChangeEvent)(p.current, e)));
+    }, [
+        h
+    ]), C = _react.useCallback(// otherwise the cursor position is incorrectly positioned
     // also note the "@" is replaced back to "-" in `replace` param in `useRifm`
     (e)=>{
         let t = "";
-        if (o && $(o)) {
-            const c = o + e;
-            t = b(i, c), t.startsWith(o) ? t = t.slice(o.length).trim() : t = b(i, e);
-        } else t = b(i, e);
+        if (s && Z(s)) {
+            const v = s + e;
+            t = i.current(v, u), t.startsWith(s) ? t = t.slice(s.length).trim() : t = i.current(e, u);
+        } else t = i.current(e, u);
         return t.replace(/-/g, "@");
     }, [
-        i,
-        o
-    ]), m = (0, _rifm.useRifm)({
-        format: F,
-        value: a,
-        onChange: P,
+        u,
+        s
+    ]), r = (0, _rifm.useRifm)({
+        format: C,
+        value: x,
+        // Instead of calling `handleChangeValue` here, we call it in `useEffect` below.
+        // When the formatter changes (libphonenumber is lazy loaded), rifm should call `onChange`
+        // with the new formatted value but it doesn't, so we need to call it manually.
+        onChange: ()=>{},
         accept: /[\d\-+#*]+/g,
         replace: (e)=>e.replace(/@/g, "-")
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, d), {
-        value: m.value,
-        onChange: m.onChange,
+    return _react.useEffect(()=>{
+        g(r.value);
+    }, [
+        r.value,
+        g
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, y), {
+        value: r.value,
+        onChange: r.onChange,
         type: "tel",
-        ref: (0, _common.combineRefs)(r, l)
+        ref: (0, _common.combineRefs)(o, p),
+        "data-using-libphonenumber": d
     }));
-}, I = (_param)=>{
-    var { disabled: r, error: n, helperText: f, name: s, optional: o, validate: y, onChange: d, onChangeValue: g, onBlur: h, value: l, defaultValue: C, e164: i, dataAttributes: u } = _param, a = _object_without_properties(_param, [
+}, j = (_param)=>{
+    var { disabled: o, error: c, helperText: R, name: m, label: s, optional: E, validate: l, onChange: y, onChangeValue: N, onBlur: P, value: p, defaultValue: V, dataAttributes: i, /**
+   * By default this component will use google's libphonenumber library to format numbers.
+   * The component will load libphonenumber on demand, so it won't impact the initial load time.
+   * You can opt-out of using libphonenumber by providing a custom formatter.
+   */ format: d, /** enabling e164 is incompatible with custom formatters because this requires libphonenumber  */ e164: b } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -190,41 +217,46 @@ const b = (r, n)=>(0, _libphonenumber.formatAsYouType)(n.replace(/[^\d+*#]/g, ""
         "onBlur",
         "value",
         "defaultValue",
-        "e164",
-        "dataAttributes"
+        "dataAttributes",
+        "format",
+        "e164"
     ]);
-    const { i18n: P } = (0, _hooks.useTheme)(), m = (0, _formcontext.useFieldProps)({
-        name: s,
-        value: l,
-        defaultValue: C,
-        processValue: (e)=>{
-            if (i) try {
-                var _a_prefix;
-                const t = ((_a_prefix = a.prefix) !== null && _a_prefix !== void 0 ? _a_prefix : "").replace(/[^\d]/g, "");
-                let c = (0, _libphonenumber.getRegionCodeForCountryCode)(t);
-                return (!c || c === "ZZ") && (c = P.phoneNumberFormattingRegionCode), (0, _libphonenumber.formatToE164)((0, _libphonenumber.parse)(e, c));
+    const { i18n: h } = (0, _hooks.useTheme)();
+    process.env.NODE_ENV !== "production" && b && d && console.error("[PhoneNumberField] enabling e164 is incompatible with custom formatters");
+    const a = (0, _formcontext.useFieldProps)({
+        name: m,
+        label: s,
+        value: p,
+        defaultValue: V,
+        processValue: (g)=>{
+            if (b && f && !d) try {
+                var _u_prefix;
+                const C = ((_u_prefix = u.prefix) !== null && _u_prefix !== void 0 ? _u_prefix : "").replace(/[^\d]/g, "");
+                let r = f.getRegionCodeForCountryCode(C);
+                return (!r || r === "ZZ") && (r = h.phoneNumberFormattingRegionCode), f.formatToE164(f.parse(g, r));
             } catch (e) {
                 return "";
             }
-            else return e.replace(/[^\d]/g, "");
+            else return g.replace(/[^\d]/g, "");
         },
-        helperText: f,
-        optional: o,
-        error: n,
-        disabled: r,
-        onBlur: h,
-        validate: y,
-        onChange: d,
-        onChangeValue: g
+        helperText: R,
+        optional: E,
+        error: c,
+        disabled: o,
+        onBlur: P,
+        validate: l,
+        onChange: y,
+        onChangeValue: N
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, a, m), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, a), {
         type: "phone",
         inputProps: {
-            prefix: a.prefix
+            prefix: u.prefix,
+            format: d
         },
-        inputComponent: j,
+        inputComponent: $,
         dataAttributes: _object_spread({
             "component-name": "PhoneNumberField"
-        }, u)
+        }, i)
     }));
-}, J = I;
+}, z = j;

package/dist/pin-field.js

@@ -123,13 +123,13 @@ function _object_spread_props(target, source) {
 }
 let C = !1;
 const ee = (param)=>{
-    let { length: i = 6, hideCode: n = !1, readSms: d, disabled: h, readOnly: g, value: y, defaultValue: b, onChange: f, inputRef: R } = param;
+    let { length: i = 6, hideCode: n = !1, readSms: d, disabled: g, readOnly: y, value: F, defaultValue: b, onChange: f, inputRef: R } = param;
     var _ref;
-    const { texts: S, t: k } = (0, _hooks.useTheme)(), [A, F] = _react.useState((_ref = b == null ? void 0 : b.slice(0, i)) !== null && _ref !== void 0 ? _ref : ""), [w, P] = _react.useState(void 0), l = _react.useRef(Array.from({
+    const { texts: S, t: k } = (0, _hooks.useTheme)(), [A, I] = _react.useState((_ref = b == null ? void 0 : b.slice(0, i)) !== null && _ref !== void 0 ? _ref : ""), [w, P] = _react.useState(void 0), l = _react.useRef(Array.from({
         length: i
-    }, ()=>null)).current, u = typeof y < "u", r = u ? y : A, p = _react.useCallback((s)=>{
+    }, ()=>null)).current, u = typeof F < "u", r = u ? F : A, p = _react.useCallback((s)=>{
         if (s === r) return;
-        u || F(s);
+        u || I(s);
         const e = l[0];
         e && (f == null || f((0, _dom.createChangeEvent)(_object_spread({}, e), s)));
     }, [
@@ -172,21 +172,21 @@ const ee = (param)=>{
         i,
         d
     ]);
-    const L = (s)=>(e)=>{
+    const N = (s)=>(e)=>{
             var V;
             const t = e.target.value;
             if (t === "") return;
             const o = r[s];
             let m = t;
             !o || o === t ? m = t : o === t[0] ? m = t.slice(1) : o === t[t.length - 1] && (m = t.slice(0, -1));
-            let I = s, T = r;
+            let v = s, T = r;
             if (m.length >= 2) {
                 const $ = m.slice(0, i - s);
-                T = r.slice(0, s) + $, I = Math.min(s + $.length, i - 1);
-            } else T = r.slice(0, s) + m + r.slice(s + 1), I = s + 1;
+                T = r.slice(0, s) + $, v = Math.min(s + $.length, i - 1);
+            } else T = r.slice(0, s) + m + r.slice(s + 1), v = s + 1;
             T !== r && ((0, _reactdom.flushSync)(()=>{
                 p(T);
-            }), I !== s && I <= i - 1 && ((V = l[I]) == null || V.focus()));
+            }), v !== s && v <= i - 1 && ((V = l[v]) == null || V.focus()));
         };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
         space: 8,
@@ -195,7 +195,7 @@ const ee = (param)=>{
         }).map((s, e)=>/* @__PURE__ */ {
             var _r_e;
             return (0, _jsxruntime.jsxs)("div", {
-                className: g ? _pinfieldcssmistica.readOnlyField : e === w ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
+                className: y ? _pinfieldcssmistica.readOnlyField : e === w ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_integerfield.IntegerInput, {
                         "aria-label": (S.pinFieldInputLabel || k(_texttokens.pinFieldInputLabel)).replace("1$s", String(e + 1)).replace("2$s", String(i)),
@@ -223,11 +223,11 @@ const ee = (param)=>{
                             fontSize: _pinfieldcssmistica.pinInputLineHeight,
                             height: _pinfieldcssmistica.pinInputLineHeight
                         },
-                        disabled: h,
-                        readOnly: g,
+                        disabled: g,
+                        readOnly: y,
                         autoComplete: d ? "one-time-code" : void 0,
                         value: (_r_e = r[e]) !== null && _r_e !== void 0 ? _r_e : "",
-                        onChange: L(e),
+                        onChange: N(e),
                         onKeyDown: (t)=>{
                             switch(t.key){
                                 case "Backspace":
@@ -262,16 +262,17 @@ const ee = (param)=>{
         })
     });
 }, te = (param)=>{
-    let { length: i = 6, hideCode: n = !1, readSms: d = !n, disabled: h, readOnly: g, name: y, value: b, defaultValue: f, helperText: R, error: S, onChangeValue: k, onChange: A, "aria-label": F, "aria-labelledby": w, dataAttributes: P } = param;
+    let { length: i = 6, hideCode: n = !1, readSms: d = !n, disabled: g, readOnly: y, name: F, value: b, defaultValue: f, helperText: R, error: S, onChangeValue: k, onChange: A, "aria-label": I, "aria-labelledby": w, dataAttributes: P } = param;
     const l = (0, _formcontext.useFieldProps)({
-        name: y,
+        name: F,
+        label: I !== null && I !== void 0 ? I : "",
         value: b,
         defaultValue: f,
         processValue: (r)=>r,
         helperText: R,
         optional: !1,
         error: S,
-        disabled: h,
+        disabled: g,
         onChangeValue: k,
         onChange: A
     }), u = _react.useId();
@@ -279,14 +280,14 @@ const ee = (param)=>{
         role: "group",
         "aria-labelledby": w !== null && w !== void 0 ? w : u,
         className: (0, _classnames.default)(_pinfieldcssmistica.fieldContainer, {
-            [_pinfieldcssmistica.disabled]: h
+            [_pinfieldcssmistica.disabled]: g
         })
     }, (0, _dom.getPrefixedDataAttributes)(P, "PinField")), {
         children: [
-            F && !w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+            I && !w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     id: u,
-                    children: F
+                    children: I
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
@@ -298,7 +299,7 @@ const ee = (param)=>{
                 defaultValue: l.defaultValue,
                 disabled: l.disabled,
                 onChange: l.onChange,
-                readOnly: g
+                readOnly: y
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
                 error: l.error,

package/dist/radio-button.d.ts

@@ -36,6 +36,7 @@ declare const RadioButton: ({ value, id, dataAttributes, "aria-labelledby": aria
 type RadioGroupProps = {
     name: string;
     disabled?: boolean;
+    'aria-label'?: string;
     'aria-labelledby'?: string;
     children: React.ReactNode;
     value?: string;