@telefonica/mistica 16.0.0 → 16.1.0

package/dist/form.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return oe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -16,6 +16,7 @@ const _formcontext = require("./form-context.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _texttokens = require("./text-tokens.js");
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -115,118 +116,131 @@ function _object_spread_props(target, source) {
     return target;
 }
 process.env.NODE_ENV !== "test" && typeof document < "u" && !("scrollBehavior" in document.documentElement.style) && Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("scroll-behavior-polyfill"))).finally(()=>{});
-const U = (param)=>{
-    let { children: N, className: R, onSubmit: b, initialValues: k = {}, autoJump: y = !1, onValidationErrors: a, id: S } = param;
-    const f = _react.useRef(!0), [i, x] = _react.useState(k), [l, w] = _react.useState(k), [V, m] = _react.useState("filling"), [j, h] = _react.useState({}), c = _react.useRef(/* @__PURE__ */ new Map()), d = _react.useRef(null), { texts: g, t: v } = (0, _hooks.useTheme)(), M = _react.useId(), F = S || M;
+const X = (param)=>{
+    let { children: S, className: j, onSubmit: g, initialValues: E = {}, autoJump: O = !1, onValidationErrors: a, getErrorMessageForScreenReader: v, id: M } = param;
+    const f = _react.useRef(!0), [u, w] = _react.useState(E), [c, V] = _react.useState(E), [P, m] = _react.useState("filling"), [d, F] = _react.useState({}), l = _react.useRef(/* @__PURE__ */ new Map()), p = _react.useRef(null), { texts: b, t: h } = (0, _hooks.useTheme)(), T = _react.useId(), I = M || T;
     _react.useEffect(()=>(f.current = !0, ()=>{
             f.current = !1;
         }), []);
-    const P = _react.useCallback((e, param)=>{
-        let { input: r, validator: o, focusableElement: t } = param;
-        r || t ? c.current.set(e, {
-            input: r,
-            validator: o,
-            focusableElement: t
-        }) : c.current.delete(e);
-    }, []), T = _react.useCallback((param)=>{
-        let { name: e, error: r } = param;
-        return h((o)=>_object_spread_props(_object_spread({}, o), {
-                [e]: r
+    const A = _react.useCallback((e, param)=>{
+        let { input: t, validator: s, focusableElement: r, label: o } = param;
+        t || r ? l.current.set(e, {
+            input: t,
+            validator: s,
+            focusableElement: r,
+            label: o
+        }) : l.current.delete(e);
+    }, []), D = _react.useCallback((param)=>{
+        let { name: e, error: t } = param;
+        return F((s)=>_object_spread_props(_object_spread({}, s), {
+                [e]: t
             }));
-    }, []), p = _react.useCallback(()=>{
-        var o;
+    }, []), y = _react.useCallback(()=>{
+        var s;
         const e = {};
-        for (const [t, { input: s, validator: u }] of c.current)if (s) {
-            if (s.disabled) continue;
-            if (s.required && !((o = l[t]) != null && o.trim())) e[t] = g.formFieldErrorIsMandatory || v(_texttokens.formFieldErrorIsMandatory);
+        for (const [r, { input: o, validator: i }] of l.current)if (o) {
+            if (o.disabled) continue;
+            if (o.required && !((s = c[r]) != null && s.trim())) e[r] = b.formFieldErrorIsMandatory || h(_texttokens.formFieldErrorIsMandatory);
             else {
-                const C = u == null ? void 0 : u(i[t], l[t]);
-                C && (e[t] = C);
+                const R = i == null ? void 0 : i(u[r], c[r]);
+                R && (e[r] = R);
             }
         }
-        const r = Object.keys(e).map((t)=>{
-            const s = c.current.get(t);
-            return (s == null ? void 0 : s.focusableElement) || (s == null ? void 0 : s.input);
+        const t = Object.keys(e).map((r)=>{
+            const o = l.current.get(r);
+            return (o == null ? void 0 : o.focusableElement) || (o == null ? void 0 : o.input);
         }).filter(Boolean);
-        if (r.length) {
-            r.sort((t, s)=>t.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1), r[0].focus();
+        if (t.length) {
+            t.sort((r, o)=>r.compareDocumentPosition(o) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1), t[0].focus();
             try {
-                r[0].scrollIntoView({
+                t[0].scrollIntoView({
                     behavior: "smooth",
                     block: "center",
                     inline: "center"
                 });
             } catch (e) {}
         }
-        return h(e), a && Object.keys(e).length > 0 && a(e), e;
+        return F(e), a && Object.keys(e).length > 0 && a(e), e;
     }, [
         a,
-        l,
-        g,
-        i,
-        v
-    ]), D = _react.useCallback((e)=>{
+        c,
+        b,
+        u,
+        h
+    ]), B = _react.useCallback((e)=>{
         setTimeout(()=>{
-            var r;
-            if (y && d.current) {
-                const o = Array.from(d.current.querySelectorAll("input, select")), t = (r = c.current.get(e)) == null ? void 0 : r.input, s = o.indexOf(t);
-                if (s >= 0) {
-                    const u = o[s + 1];
-                    u ? u.focus() : t == null || t.blur();
+            var t;
+            if (O && p.current) {
+                const s = Array.from(p.current.querySelectorAll("input, select")), r = (t = l.current.get(e)) == null ? void 0 : t.input, o = s.indexOf(r);
+                if (o >= 0) {
+                    const i = s[o + 1];
+                    i ? i.focus() : r == null || r.blur();
                 }
             }
         }, 100);
     }, [
-        y
-    ]), I = (e)=>[
-            ...c.current.keys()
-        ].reduce((r, o)=>{
-            var t, s;
-            return (s = (t = c.current.get(o)) == null ? void 0 : t.input) != null && s.disabled ? r : _object_spread_props(_object_spread({}, r), {
-                [o]: e[o]
+        O
+    ]), x = (e)=>[
+            ...l.current.keys()
+        ].reduce((t, s)=>{
+            var r, o;
+            return (o = (r = l.current.get(s)) == null ? void 0 : r.input) != null && o.disabled ? t : _object_spread_props(_object_spread({}, t), {
+                [s]: e[s]
             });
-        }, {}), O = _react.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(p()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(b(I(i), I(l))).finally(()=>{
+        }, {}), C = _react.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(y()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(g(x(u), x(c))).finally(()=>{
             f.current && m("filling");
         })), [
-        b,
-        l,
-        p,
-        i
-    ]), _ = _react.useCallback((param)=>{
-        let { name: e, value: r } = param;
-        x((o)=>_object_spread_props(_object_spread({}, o), {
-                [e]: r
+        g,
+        c,
+        y,
+        u
+    ]), L = _react.useCallback((param)=>{
+        let { name: e, value: t } = param;
+        w((s)=>_object_spread_props(_object_spread({}, s), {
+                [e]: t
             }));
-    }, []), q = _react.useCallback((param)=>{
-        let { name: e, value: r } = param;
-        w((o)=>_object_spread_props(_object_spread({}, o), {
-                [e]: r
+    }, []), W = _react.useCallback((param)=>{
+        let { name: e, value: t } = param;
+        V((s)=>_object_spread_props(_object_spread({}, s), {
+                [e]: t
             }));
-    }, []);
+    }, []), N = Object.entries(d).map((param)=>{
+        let [e, t] = param;
+        var s;
+        return t && ((s = l.current.get(e)) == null ? void 0 : s.label);
+    }).filter(Boolean), _ = N.length > 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_formcontext.FormContext.Provider, {
         value: {
-            formStatus: V,
-            values: i,
-            setValue: _,
-            rawValues: l,
-            setRawValue: q,
-            formErrors: j,
-            setFormError: T,
-            register: P,
-            jumpToNext: D,
-            validate: p,
-            submit: O,
-            formId: F
+            formStatus: P,
+            values: u,
+            setValue: L,
+            rawValues: c,
+            setRawValue: W,
+            formErrors: d,
+            setFormError: D,
+            register: A,
+            jumpToNext: B,
+            validate: y,
+            submit: C,
+            formId: I
         },
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("form", {
-            id: F,
-            onSubmit: O,
-            ref: d,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("form", {
+            id: I,
+            onSubmit: C,
+            ref: p,
             className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
                 width: "100%"
-            }), R),
+            }), j),
             noValidate: !0,
-            children: N
+            children: [
+                _ ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                        role: "alert",
+                        children: v ? v(d) : `${b.formErrorsAlertMessage || h(_texttokens.formErrorsAlertMessage)} ${N.join(", ")}`
+                    })
+                }) : null,
+                S
+            ]
         })
     });
-}, Y = U;
+}, oe = X;

package/dist/iban-field.d.ts

@@ -5,5 +5,5 @@ export interface IbanFieldProps extends CommonFormFieldProps {
     prefix?: string;
     getSuggestions?: (value: string) => Array<string>;
 }
-declare const IbanField: ({ disabled, error, helperText, name, optional, validate: customValidate, onChange, onChangeValue, onBlur, value, defaultValue, dataAttributes, ...rest }: IbanFieldProps) => JSX.Element;
+declare const IbanField: ({ disabled, error, helperText, name, label, optional, validate: customValidate, onChange, onChangeValue, onBlur, value, defaultValue, dataAttributes, ...rest }: IbanFieldProps) => JSX.Element;
 export default IbanField;

package/dist/iban-field.js

@@ -138,16 +138,16 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const I = {
+const A = {
     ES: 24,
     GB: 22,
     DE: 22,
     BR: 29
-}, M = 32, R = (t, e)=>{
+}, R = 32, S = (t, e)=>{
     let n = 0;
     for(let r = 0; r < t.length; r++)n = (n * 10 + Number(t[r])) % e;
     return n;
-}, y = (t)=>/^[A-Z]{2}$/.test(t), S = (t)=>/^\d{2}$/.test(t), T = (t)=>{
+}, v = (t)=>/^[A-Z]{2}$/.test(t), T = (t)=>/^\d{2}$/.test(t), z = (t)=>{
     let e = t.substr(4) + t.substr(0, 4);
     const n = "A".charCodeAt(0);
     return e = Array.from(e).map((r)=>{
@@ -156,12 +156,12 @@ const I = {
             return String(10 + s - n);
         }
         return r;
-    }).join(""), R(e, 97) === 1;
-}, z = (t)=>{
+    }).join(""), S(e, 97) === 1;
+}, F = (t)=>{
     const e = t.substr(0, 2), n = t.substr(2, 2);
-    if (!y(e) || !S(n)) return !1;
-    const r = I[e];
-    return !(r && r !== t.length || !T(t));
+    if (!v(e) || !T(n)) return !1;
+    const r = A[e];
+    return !(r && r !== t.length || !z(t));
 }, Z = (t)=>{
     var n;
     const e = t.replace(/[^\dA-Za-z]/g, "");
@@ -169,9 +169,9 @@ const I = {
     return (_ref = (n = e.match(/.{1,4}/g)) == null ? void 0 : n.join(" ")) !== null && _ref !== void 0 ? _ref : e;
 }, j = (t)=>{
     const e = t.substr(0, 2);
-    let n = M;
-    if (e && y(e)) {
-        const s = I[e];
+    let n = R;
+    if (e && v(e)) {
+        const s = A[e];
         s && (n = s);
     }
     const r = Math.ceil(n / 4) - 1;
@@ -183,8 +183,8 @@ const I = {
         "defaultValue",
         "onChange"
     ]);
-    const [u, p] = _react.useState(n !== null && n !== void 0 ? n : ""), c = _react.useRef(null), i = typeof e < "u", d = i ? e : u, g = _react.useCallback((o)=>{
-        i || p(o), c.current && (r == null || r((0, _dom.createChangeEvent)(c.current, o)));
+    const [m, u] = _react.useState(n !== null && n !== void 0 ? n : ""), c = _react.useRef(null), i = typeof e < "u", d = i ? e : m, g = _react.useCallback((o)=>{
+        i || u(o), c.current && (r == null || r((0, _dom.createChangeEvent)(c.current, o)));
     }, [
         i,
         r
@@ -199,19 +199,20 @@ const I = {
         maxLength: j(a.value),
         value: a.value,
         onChange: (o)=>{
-            var h;
-            const m = o.target.value, l = a.value;
-            return m.length - l.length > 1 && ((h = o.nativeEvent) == null ? void 0 : h.inputType) === "insertText" && (o.target.value = l), a.onChange(o);
+            var f;
+            const h = o.target.value, l = a.value;
+            return h.length - l.length > 1 && ((f = o.nativeEvent) == null ? void 0 : f.inputType) === "insertText" && (o.target.value = l), a.onChange(o);
         },
         type: "text",
         ref: (0, _common.combineRefs)(t, c)
     }));
-}, P = (_param)=>{
-    var { disabled: t, error: e, helperText: n, name: r, optional: s, validate: u, onChange: p, onChangeValue: c, onBlur: i, value: d, defaultValue: g, dataAttributes: a } = _param, o = _object_without_properties(_param, [
+}, M = (_param)=>{
+    var { disabled: t, error: e, helperText: n, name: r, label: s, optional: m, validate: u, onChange: c, onChangeValue: i, onBlur: d, value: g, defaultValue: a, dataAttributes: o } = _param, h = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -221,24 +222,25 @@ const I = {
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: m, t: l } = (0, _hooks.useTheme)(), A = (0, _formcontext.useFieldProps)({
+    const { texts: l, t: f } = (0, _hooks.useTheme)(), I = (0, _formcontext.useFieldProps)({
         name: r,
-        value: d,
-        defaultValue: g,
-        processValue: (f)=>f.replace(/[^\dA-Za-z]/g, ""),
+        label: s,
+        value: g,
+        defaultValue: a,
+        processValue: (p)=>p.replace(/[^\dA-Za-z]/g, ""),
         helperText: n,
-        optional: s,
+        optional: m,
         error: e,
         disabled: t,
-        onBlur: i,
-        validate: (f, v)=>f ? z(f) ? u == null ? void 0 : u(f, v) : m.formIbanError || l(_texttokens.formIbanError) : s ? "" : m.formFieldErrorIsMandatory || l(_texttokens.formFieldErrorIsMandatory),
-        onChange: p,
-        onChangeValue: c
+        onBlur: d,
+        validate: (p, y)=>F(p !== null && p !== void 0 ? p : "") ? u == null ? void 0 : u(p, y) : l.formIbanError || f(_texttokens.formIbanError),
+        onChange: c,
+        onChangeValue: i
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, o, A), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, h, I), {
         inputComponent: D,
         dataAttributes: _object_spread({
             "component-name": "IbanField"
-        }, a)
+        }, o)
     }));
-}, J = P;
+}, J = M;

package/dist/index.d.ts

@@ -56,9 +56,11 @@ export { default as HorizontalScroll } from './horizontal-scroll';
 export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { ProgressBar, ProgressBarStepped } from './progress-bar';
+export { Rating, InfoRating } from './rating';
 export { VerticalMosaic, HorizontalMosaic } from './mosaic';
 export { Timer, TextTimer } from './timer';
 export { MediaCard, DataCard, SnapCard, DisplayDataCard, DisplayMediaCard, PosterCard, NakedCard, SmallNakedCard, CardActionSpinner, CardActionIconButton, } from './card';
+export { default as StackingGroup } from './stacking-group';
 export { default as Hero } from './hero';
 export { default as CoverHero } from './cover-hero';
 export { Table } from './table';
@@ -78,10 +80,17 @@ export { default as Video } from './video';
 export type { VideoElement } from './video';
 export { Carousel, CenteredCarousel, Slideshow, PageBullets, CarouselContextProvider, useCarouselContext, CarouselContextConsumer, } from './carousel';
 export { Grid, GridItem } from './grid';
-export { default as Sheet, ActionsSheet, InfoSheet, ActionsListSheet, RadioListSheet, SheetBody, } from './sheet';
 export { default as SheetRoot, showSheet } from './sheet-root';
-export type { NativeSheetImplementation } from './sheet-root';
-export { default as StackingGroup } from './stacking-group';
+export type { NativeSheetImplementation } from './sheet-types';
+export { default as Sheet, SheetBody } from './sheet-common';
+/** @deprecated use showSheet. It is easier to use and uses the app native implementation if available */
+export { default as ActionsSheet } from './sheet-actions';
+/** @deprecated use showSheet. It is easier to use and uses the app native implementation if available */
+export { default as InfoSheet } from './sheet-info';
+/** @deprecated use showSheet. It is easier to use and uses the app native implementation if available */
+export { default as ActionsListSheet } from './sheet-actions-list';
+/** @deprecated use showSheet. It is easier to use and uses the app native implementation if available */
+export { default as RadioListSheet } from './sheet-radio-list';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';

package/dist/index.js

@@ -16,10 +16,10 @@ _export(exports, {
         return _accordion.AccordionItem;
     },
     ActionsListSheet: function() {
-        return _sheet.ActionsListSheet;
+        return _sheetactionslist.default;
     },
     ActionsSheet: function() {
-        return _sheet.ActionsSheet;
+        return _sheetactions.default;
     },
     Avatar: function() {
         return _avatar.default;
@@ -5487,8 +5487,11 @@ _export(exports, {
     InfoFeedbackScreen: function() {
         return _feedback.InfoFeedbackScreen;
     },
+    InfoRating: function() {
+        return _rating.InfoRating;
+    },
     InfoSheet: function() {
-        return _sheet.InfoSheet;
+        return _sheetinfo.default;
     },
     Inline: function() {
         return _inline.default;
@@ -5611,7 +5614,10 @@ _export(exports, {
         return _radiobutton.RadioGroup;
     },
     RadioListSheet: function() {
-        return _sheet.RadioListSheet;
+        return _sheetradiolist.default;
+    },
+    Rating: function() {
+        return _rating.Rating;
     },
     ResponsiveLayout: function() {
         return _responsivelayout.default;
@@ -5632,10 +5638,10 @@ _export(exports, {
         return _select.default;
     },
     Sheet: function() {
-        return _sheet.default;
+        return _sheetcommon.default;
     },
     SheetBody: function() {
-        return _sheet.SheetBody;
+        return _sheetcommon.SheetBody;
     },
     SheetRoot: function() {
         return _sheetroot.default;
@@ -6002,9 +6008,11 @@ const _horizontalscroll = /*#__PURE__*/ _interop_require_default(require("./hori
 const _highlightedcard = /*#__PURE__*/ _interop_require_default(require("./highlighted-card.js"));
 const _stepper = /*#__PURE__*/ _interop_require_default(require("./stepper.js"));
 const _progressbar = require("./progress-bar.js");
+const _rating = require("./rating.js");
 const _mosaic = require("./mosaic.js");
 const _timer = require("./timer.js");
 const _card = require("./card.js");
+const _stackinggroup = /*#__PURE__*/ _interop_require_default(require("./stacking-group.js"));
 const _hero = /*#__PURE__*/ _interop_require_default(require("./hero.js"));
 const _coverhero = /*#__PURE__*/ _interop_require_default(require("./cover-hero.js"));
 const _table = require("./table.js");
@@ -6023,9 +6031,12 @@ const _chip = /*#__PURE__*/ _interop_require_default(require("./chip.js"));
 const _video = /*#__PURE__*/ _interop_require_default(require("./video.js"));
 const _carousel = require("./carousel.js");
 const _grid = require("./grid.js");
-const _sheet = /*#__PURE__*/ _interop_require_wildcard(require("./sheet.js"));
 const _sheetroot = /*#__PURE__*/ _interop_require_wildcard(require("./sheet-root.js"));
-const _stackinggroup = /*#__PURE__*/ _interop_require_default(require("./stacking-group.js"));
+const _sheetcommon = /*#__PURE__*/ _interop_require_wildcard(require("./sheet-common.js"));
+const _sheetactions = /*#__PURE__*/ _interop_require_default(require("./sheet-actions.js"));
+const _sheetinfo = /*#__PURE__*/ _interop_require_default(require("./sheet-info.js"));
+const _sheetactionslist = /*#__PURE__*/ _interop_require_default(require("./sheet-actions-list.js"));
+const _sheetradiolist = /*#__PURE__*/ _interop_require_default(require("./sheet-radio-list.js"));
 const _form = /*#__PURE__*/ _interop_require_default(require("./form.js"));
 const _select = /*#__PURE__*/ _interop_require_default(require("./select.js"));
 const _textfield = /*#__PURE__*/ _interop_require_default(require("./text-field.js"));

package/dist/inline.d.ts

@@ -8,10 +8,11 @@ type Props = {
     children: React.ReactNode;
     className?: string;
     role?: string;
+    'aria-label'?: string;
     'aria-labelledby'?: string;
     fullWidth?: boolean;
     dataAttributes?: DataAttributes;
     wrap?: boolean;
 };
-declare const Inline: ({ space, className, children, role, alignItems, "aria-labelledby": ariaLabelledBy, fullWidth, wrap, dataAttributes, }: Props) => JSX.Element;
+declare const Inline: ({ space, className, children, role, alignItems, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, fullWidth, wrap, dataAttributes, }: Props) => JSX.Element;
 export default Inline;

package/dist/inline.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return q;
+        return z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -116,7 +116,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, D = (t)=>{
+const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, R = (t)=>{
     if (typeof t == "number" || typeof t == "string") return {
         [_inlinecssmistica.vars.space]: i(t)
     };
@@ -125,25 +125,26 @@ const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, D = (t)=>{
         [_inlinecssmistica.vars.spaceDesktop]: i(t.desktop)
     };
     return t.tablet && (e[_inlinecssmistica.vars.spaceTablet] = i(t.tablet)), e;
-}, R = (param)=>{
-    let { space: t, className: e, children: m, role: o, alignItems: p = "stretch", "aria-labelledby": f, fullWidth: c, wrap: l, dataAttributes: d } = param;
-    const { platformOverrides: s } = (0, _hooks.useTheme)(), u = typeof t == "string";
+}, j = (param)=>{
+    let { space: t, className: e, children: p, role: l, alignItems: f = "stretch", "aria-label": o, "aria-labelledby": c, fullWidth: d, wrap: s, dataAttributes: u } = param;
+    const { platformOverrides: a } = (0, _hooks.useTheme)(), b = typeof t == "string";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(e, _inlinecssmistica.inline, (0, _sprinklescssmistica.sprinkles)({
-            alignItems: p
-        }), l ? _inlinecssmistica.wrap : c ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, u ? l ? _inlinecssmistica.stringSpaceWithWrap : _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
-        style: (0, _css.applyCssVars)(D(t)),
-        role: o,
-        "aria-labelledby": f
-    }, (0, _dom.getPrefixedDataAttributes)(d, "Inline")), {
-        children: _react.Children.map(m, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                role: o === "list" ? "listitem" : void 0,
+            alignItems: f
+        }), s ? _inlinecssmistica.wrap : d ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, b ? s ? _inlinecssmistica.stringSpaceWithWrap : _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
+        style: (0, _css.applyCssVars)(R(t)),
+        role: l,
+        "aria-label": o,
+        "aria-labelledby": o ? void 0 : c
+    }, (0, _dom.getPrefixedDataAttributes)(u, "Inline")), {
+        children: _react.Children.map(p, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                role: l === "list" ? "listitem" : void 0,
                 style: {
                     // Hack to fix https://jira.tid.es/browse/WEB-1683
                     // In iOS the inline component sometimes cuts the last line of the content
-                    paddingBottom: (0, _platform.isIos)(s) && !(0, _platform.isRunningAcceptanceTest)(s) ? 1 : void 0
+                    paddingBottom: (0, _platform.isIos)(a) && !(0, _platform.isRunningAcceptanceTest)(a) ? 1 : void 0
                 },
                 children: n
             }) : null)
     }));
-}, q = R;
+}, z = j;

package/dist/integer-field.d.ts

@@ -8,5 +8,5 @@ export declare const IntegerInput: ({ inputRef, value, defaultValue, type, ...re
 export interface IntegerFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
 }
-declare const IntegerField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue, onBlur, value, defaultValue, dataAttributes, ...rest }: IntegerFieldProps) => JSX.Element;
+declare const IntegerField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, dataAttributes, ...rest }: IntegerFieldProps) => JSX.Element;
 export default IntegerField;