@telefonica/mistica 14.40.0 → 14.42.0

package/dist/hooks.js

@@ -13,7 +13,7 @@ _export(exports, {
         return q;
     },
     useBoundingRect: function() {
-        return G;
+        return j;
     },
     useDisableBodyScroll: function() {
         return A;
@@ -37,13 +37,13 @@ _export(exports, {
         return L;
     },
     useTheme: function() {
-        return v;
+        return x;
     },
     useWindowHeight: function() {
         return D;
     },
     useWindowSize: function() {
-        return w;
+        return f;
     },
     useWindowWidth: function() {
         return F;
@@ -102,59 +102,68 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const v = ()=>{
+const x = ()=>{
     const t = _react.useContext(_themecontext.default);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
 };
-let f = "", a = 0, l = 0;
+let l = "", w = 0, a = 0;
 const A = (t)=>{
     _react.useEffect(()=>{
         if (t) {
             const n = document.scrollingElement || document.documentElement, e = ()=>{
-                var s;
+                var i;
                 var _ref, _ref1;
-                if (l++, !(l > 1) && (a = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (s = document.body) == null ? void 0 : s.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (a++, !(a > 1) && (w = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, l = (_ref1 = (i = document.body) == null ? void 0 : i.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
                     const o = window.innerWidth > ((_ref2 = n == null ? void 0 : n.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-a}px;left:0px;right:0px;bottom:0px`;
+                    document.body.style.cssText = l + (l.endsWith(";") ? "" : ";") + [
+                        "overflow: hidden;",
+                        `overflow-y: ${o};`,
+                        "position: fixed;",
+                        `top: ${-w}px;`,
+                        "left: 0px;",
+                        "right: 0px;",
+                        "bottom: 0px;",
+                        "overscroll-behavior-y: contain;"
+                    ].join("");
                 }
-            }, i = ()=>{
-                l--, !(l > 0) && (document.body && (document.body.style.cssText = f), n && (n.scrollTop = a));
+            }, s = ()=>{
+                a--, !(a > 0) && (document.body && (document.body.style.cssText = l), n && (n.scrollTop = w));
             };
-            return e(), i;
+            return e(), s;
         }
         return ()=>{};
     }, [
         t
     ]);
 }, L = ()=>_react.useContext(_screensizecontext.default), M = ()=>{
-    const [t, n] = _react.useState(0), [e, i] = _react.useState(0), [s, c] = _react.useState(null), o = _react.useCallback((u)=>{
-        if (!u) {
-            n(0), i(0);
+    const [t, n] = _react.useState(0), [e, s] = _react.useState(0), [i, c] = _react.useState(null), o = _react.useCallback((d)=>{
+        if (!d) {
+            n(0), s(0);
             return;
         }
-        const { width: m, height: g } = u[0].contentRect;
-        n(m), i(g);
-    }, []), d = _react.useCallback((u)=>{
-        c(u);
+        const { width: m, height: g } = d[0].contentRect;
+        n(m), s(g);
+    }, []), u = _react.useCallback((d)=>{
+        c(d);
     }, []);
     return _react.useEffect(()=>{
-        if (!s) {
-            n(0), i(0);
+        if (!i) {
+            n(0), s(0);
             return;
         }
-        return (0, _dom.listenResize)(s, o);
+        return (0, _dom.listenResize)(i, o);
     }, [
-        s,
+        i,
         o
     ]), {
         width: t,
         height: e,
-        ref: d
+        ref: u
     };
 }, q = (t)=>{
-    const { useId: n } = v();
+    const { useId: n } = x();
     if (n) {
         const e = n();
         return t || e;
@@ -162,42 +171,42 @@ const A = (t)=>{
         const e = _react.useContext(_ariaidgettercontext.default);
         return _react.useRef(t || e()).current;
     }
-}, w = ()=>{
-    const [t, n] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, i] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [s, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, d] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800);
+}, f = ()=>{
+    const [t, n] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, s] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [i, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, u] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800);
     return _react.useEffect(()=>{
-        const u = ()=>{
-            n(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), d(window.screen.availWidth);
+        const d = ()=>{
+            n(window.innerHeight), s(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth);
         };
-        return window.addEventListener("resize", u), ()=>{
-            window.removeEventListener("resize", u);
+        return window.addEventListener("resize", d), ()=>{
+            window.removeEventListener("resize", d);
         };
     }, []), _react.useMemo(()=>({
             height: t,
             width: e,
-            screenHeight: s,
+            screenHeight: i,
             screenWidth: o
         }), [
         t,
         e,
-        s,
+        i,
         o
     ]);
 }, D = ()=>{
-    const { height: t } = w();
+    const { height: t } = f();
     return t;
 }, F = ()=>{
-    const { width: t } = w();
+    const { width: t } = f();
     return t;
 }, V = ()=>{
-    const { screenHeight: t } = w();
+    const { screenHeight: t } = f();
     return t;
 }, k = ()=>(0, _environment.isClientSide)() && window.top !== window.self, $ = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, E = (t, n, e)=>{
-    const [i, s] = _react.useState(n);
+    const [s, i] = _react.useState(n);
     return _react.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
         const c = new IntersectionObserver((o)=>{
-            s(o[0].isIntersecting);
+            i(o[0].isIntersecting);
         }, {
             root: e == null ? void 0 : e.root,
             rootMargin: e == null ? void 0 : e.rootMargin,
@@ -211,38 +220,38 @@ const A = (t)=>{
         e == null ? void 0 : e.root,
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
-    ]), i;
+    ]), s;
 }, I = (t)=>{
-    const { top: n, right: e, bottom: i, left: s, width: c, height: o, x: d, y: u } = t.getBoundingClientRect();
+    const { top: n, right: e, bottom: s, left: i, width: c, height: o, x: u, y: d } = t.getBoundingClientRect();
     return {
         top: n,
         right: e,
-        bottom: i,
-        left: s,
+        bottom: s,
+        left: i,
         width: c,
         height: o,
-        x: d,
-        y: u
+        x: u,
+        y: d
     };
-}, G = function(t) {
+}, j = function(t) {
     let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
-    const [i, s] = _react.useState(), c = E(t, !1);
+    const [s, i] = _react.useState(), c = E(t, !1);
     return _react.useEffect(()=>{
         let o;
-        const d = ()=>{
+        const u = ()=>{
             if (t.current && (c || e)) {
-                const u = I(t.current);
-                (0, _helpers.isEqual)(i, u) || s(u), n && (o = requestAnimationFrame(d));
-            } else s(void 0);
+                const d = I(t.current);
+                (0, _helpers.isEqual)(s, d) || i(d), n && (o = requestAnimationFrame(u));
+            } else i(void 0);
         };
-        return o = requestAnimationFrame(d), ()=>{
+        return o = requestAnimationFrame(u), ()=>{
             cancelAnimationFrame(o);
         };
     }, [
         t,
-        i,
+        s,
         c,
         n,
         e
-    ]), i;
+    ]), s;
 };

package/dist/horizontal-scroll.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     noScrollbar: function() {
-        return l;
+        return g;
     },
     scroll: function() {
         return m;
@@ -19,4 +19,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
-var l = "_1gl3gmv2", m = "_1gl3gmv1 _1y2v1nfgg";
+var g = "_1gl3gmv2", m = "_1gl3gmv1 _1y2v1nfgi";

package/dist/iban-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return H;
+        return O;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -137,16 +137,16 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const y = {
+const A = {
     ES: 24,
     GB: 22,
     DE: 22,
     BR: 29
-}, B = 32, k = (e, t)=>{
+}, k = 32, F = (e, t)=>{
     let n = 0;
     for(let r = 0; r < e.length; r++)n = (n * 10 + Number(e[r])) % t;
     return n;
-}, A = (e)=>/^[A-Z]{2}$/.test(e), R = (e)=>/^\d{2}$/.test(e), S = (e)=>{
+}, y = (e)=>/^[A-Z]{2}$/.test(e), R = (e)=>/^\d{2}$/.test(e), S = (e)=>{
     let t = e.substr(4) + e.substr(0, 4);
     const n = "A".charCodeAt(0);
     return t = Array.from(t).map((r)=>{
@@ -155,39 +155,39 @@ const y = {
             return String(10 + o - n);
         }
         return r;
-    }).join(""), k(t, 97) === 1;
+    }).join(""), F(t, 97) === 1;
 }, T = (e)=>{
     const t = e.substr(0, 2), n = e.substr(2, 2);
-    if (!A(t) || !R(n)) return !1;
-    const r = y[t];
+    if (!y(t) || !R(n)) return !1;
+    const r = A[t];
     return !(r && r !== e.length || !S(e));
 }, z = (e)=>{
     var n;
     const t = e.replace(/[^\dA-Za-z]/g, "");
     var _ref;
     return (_ref = (n = t.match(/.{1,4}/g)) == null ? void 0 : n.join(" ")) !== null && _ref !== void 0 ? _ref : t;
-}, F = (e)=>{
+}, M = (e)=>{
     const t = e.substr(0, 2);
-    let n = B;
-    if (t && A(t)) {
-        const o = y[t];
+    let n = k;
+    if (t && y(t)) {
+        const o = A[t];
         o && (n = o);
     }
     const r = Math.ceil(n / 4) - 1;
     return n + r;
-}, M = (_param)=>{
+}, Z = (_param)=>{
     var { inputRef: e, value: t, defaultValue: n, onChange: r } = _param, o = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange"
     ]);
-    const [a, p] = _react.useState(n !== null && n !== void 0 ? n : ""), c = _react.useRef(null), i = typeof t < "u", m = i ? t : a, d = _react.useCallback((s)=>{
+    const [u, p] = _react.useState(n !== null && n !== void 0 ? n : ""), c = _react.useRef(null), i = typeof t < "u", m = i ? t : u, d = _react.useCallback((s)=>{
         i || p(s), c.current && (r == null || r((0, _dom.createChangeEvent)(c.current, s)));
     }, [
         i,
         r
-    ]), u = (0, _rifm.useRifm)({
+    ]), a = (0, _rifm.useRifm)({
         format: z,
         value: m,
         onChange: d,
@@ -195,18 +195,18 @@ const y = {
         accept: /[\dA-Za-z]+/g
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, o), {
-        maxLength: F(u.value),
-        value: u.value,
+        maxLength: M(a.value),
+        value: a.value,
         onChange: (s)=>{
-            var f;
-            const C = s.target.value, g = u.value;
-            return C.length - g.length > 1 && ((f = s.nativeEvent) == null ? void 0 : f.inputType) === "insertText" && (s.target.value = g), u.onChange(s);
+            var h;
+            const f = s.target.value, g = a.value;
+            return f.length - g.length > 1 && ((h = s.nativeEvent) == null ? void 0 : h.inputType) === "insertText" && (s.target.value = g), a.onChange(s);
         },
         type: "text",
         ref: (0, _common.combineRefs)(e, c)
     }));
-}, Z = (_param)=>{
-    var { disabled: e, error: t, helperText: n, name: r, optional: o, validate: a, onChange: p, onChangeValue: c, onBlur: i, value: m, defaultValue: d } = _param, u = _object_without_properties(_param, [
+}, j = (_param)=>{
+    var { disabled: e, error: t, helperText: n, name: r, optional: o, validate: u, onChange: p, onChangeValue: c, onBlur: i, value: m, defaultValue: d, dataAttributes: a } = _param, s = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -217,9 +217,10 @@ const y = {
         "onChangeValue",
         "onBlur",
         "value",
-        "defaultValue"
+        "defaultValue",
+        "dataAttributes"
     ]);
-    const { texts: s } = (0, _hooks.useTheme)(), f = (0, _formcontext.useFieldProps)({
+    const { texts: f } = (0, _hooks.useTheme)(), I = (0, _formcontext.useFieldProps)({
         name: r,
         value: m,
         defaultValue: d,
@@ -229,11 +230,14 @@ const y = {
         error: t,
         disabled: e,
         onBlur: i,
-        validate: (l, v)=>l ? T(l) ? a == null ? void 0 : a(l, v) : s.formIbanError : o ? "" : s.formFieldErrorIsMandatory,
+        validate: (l, v)=>l ? T(l) ? u == null ? void 0 : u(l, v) : f.formIbanError : o ? "" : f.formFieldErrorIsMandatory,
         onChange: p,
         onChangeValue: c
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, u, f), {
-        inputComponent: M
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, s, I), {
+        inputComponent: Z,
+        dataAttributes: _object_spread({
+            "component-name": "IbanField"
+        }, a)
     }));
-}, H = Z;
+}, O = j;

package/dist/icon-button.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
-var t = "yqt1oe1 _1y2v1nfgk";
+var t = "yqt1oe1 _1y2v1nfgm";

package/dist/icons/icon-amex.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 type Props = {
     role?: string;
-    size?: number;
+    size?: number | string;
 };
 declare const IconAmex: React.FC<Props>;
 export default IconAmex;

package/dist/icons/icon-cvv-amex.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 type Props = {
     role?: string;
-    size?: number;
+    size?: number | string;
     color?: string;
 };
 declare const IconCvvAmex: React.FC<Props>;

package/dist/icons/icon-cvv-visa-mc.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 type Props = {
     role?: string;
-    size?: number;
+    size?: number | string;
     color?: string;
 };
 declare const IconCvvVisaMc: React.FC<Props>;

package/dist/icons/icon-mastercard.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 type Props = {
     role?: string;
-    size?: number;
+    size?: number | string;
 };
 declare const IconMastercard: React.FC<Props>;
 export default IconMastercard;

package/dist/icons/icon-visa.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 type Props = {
     role?: string;
-    size?: number;
+    size?: number | string;
 };
 declare const IconVisa: React.FC<Props>;
 export default IconVisa;

package/dist/image.css-mistica.js

@@ -16,14 +16,14 @@ _export(exports, {
         return a;
     },
     imageWithBorder: function() {
-        return i;
+        return t;
     },
     vars: function() {
-        return n;
+        return y;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./image.css.ts.vanilla.css-mistica.js");
-var _ = 300, a = "_17tt25r3 _1y2v1nfjn _1y2v1nfk2 _1y2v1nfgi _1y2v1nfh3 _1y2v1nfhk _1y2v1nflb _1y2v1nfiv _1y2v1nfiw _1y2v1nfj7", i = "_17tt25r1", n = {
+var _ = 300, a = "_17tt25r3 _1y2v1nfjp _1y2v1nfk4 _1y2v1nfgk _1y2v1nfh5 _1y2v1nfhm _1y2v1nfld _1y2v1nfix _1y2v1nfiy _1y2v1nfj9", t = "_17tt25r1", y = {
     mediaBorderRadius: "var(--_17tt25r0)"
 };

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export { LoadingScreen, BrandLoadingScreen } from './loading-screen';
 export { default as IconButton } from './icon-button';
 export { default as Popover } from './popover';
 export { default as FocusTrap } from './focus-trap';
-export { confirm, alert, dialog } from './dialog';
+export { confirm, alert, dialog, useDialog } from './dialog-context';
 export { default as Badge } from './badge';
 export { default as TextLink } from './text-link';
 export { default as Overlay } from './overlay';
@@ -76,7 +76,7 @@ export { default as Image } from './image';
 export { default as Chip } from './chip';
 export { default as Video } from './video';
 export type { VideoElement } from './video';
-export { Carousel, CenteredCarousel, Slideshow, PageBullets } from './carousel';
+export { Carousel, CenteredCarousel, Slideshow, PageBullets, CarouselContextProvider, useCarouselContext, CarouselContextConsummer, } 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';

package/dist/index.js

@@ -87,6 +87,12 @@ _export(exports, {
     Carousel: function() {
         return _carousel.Carousel;
     },
+    CarouselContextConsummer: function() {
+        return _carousel.CarouselContextConsummer;
+    },
+    CarouselContextProvider: function() {
+        return _carousel.CarouselContextProvider;
+    },
     CenteredCarousel: function() {
         return _carousel.CenteredCarousel;
     },
@@ -5596,7 +5602,7 @@ _export(exports, {
         return _logo.VivoLogo;
     },
     alert: function() {
-        return _dialog.alert;
+        return _dialogcontext.alert;
     },
     applyAlpha: function() {
         return _color.applyAlpha;
@@ -5605,13 +5611,13 @@ _export(exports, {
         return _blau.palette;
     },
     confirm: function() {
-        return _dialog.confirm;
+        return _dialogcontext.confirm;
     },
     createNestableContext: function() {
         return _nestablecontext.createNestableContext;
     },
     dialog: function() {
-        return _dialog.dialog;
+        return _dialogcontext.dialog;
     },
     getBlauSkin: function() {
         return _blau.getBlauSkin;
@@ -5670,6 +5676,12 @@ _export(exports, {
     useAriaId: function() {
         return _hooks.useAriaId;
     },
+    useCarouselContext: function() {
+        return _carousel.useCarouselContext;
+    },
+    useDialog: function() {
+        return _dialogcontext.useDialog;
+    },
     useDocumentVisibility: function() {
         return _documentvisibility.useDocumentVisibility;
     },
@@ -5745,7 +5757,7 @@ const _loadingscreen = require("./loading-screen.js");
 const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 const _popover = /*#__PURE__*/ _interop_require_default(require("./popover.js"));
 const _focustrap = /*#__PURE__*/ _interop_require_default(require("./focus-trap.js"));
-const _dialog = require("./dialog.js");
+const _dialogcontext = require("./dialog-context.js");
 const _badge = /*#__PURE__*/ _interop_require_default(require("./badge.js"));
 const _textlink = /*#__PURE__*/ _interop_require_default(require("./text-link.js"));
 const _overlay = /*#__PURE__*/ _interop_require_default(require("./overlay.js"));

package/dist/inline.css-mistica.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    flexInline: function() {
-        return v;
-    },
     fullWidth: function() {
+        return k;
+    },
+    inline: function() {
         return a;
     },
     marginInline: function() {
@@ -21,17 +21,20 @@ _export(exports, {
     noFullWidth: function() {
         return r;
     },
-    vars: function() {
+    stringSpace: function() {
         return b;
     },
+    vars: function() {
+        return e;
+    },
     wrap: function() {
         return f;
     }
 });
 require("./inline.css.ts.vanilla.css-mistica.js");
-var v = "kkfbnv5", a = "kkfbnv7 kkfbnv6", n = "kkfbnv4", r = "kkfbnv9 kkfbnv6", b = {
+var k = "kkfbnv6", a = "kkfbnv5", n = "kkfbnv4", r = "kkfbnv8", b = "kkfbnv9", e = {
     space: "var(--kkfbnv0)",
     spaceMobile: "var(--kkfbnv1)",
     spaceTablet: "var(--kkfbnv2)",
     spaceDesktop: "var(--kkfbnv3)"
-}, f = "kkfbnv8 kkfbnv6";
+}, f = "kkfbnv7";

package/dist/inline.css.d.ts

@@ -5,8 +5,8 @@ export declare const vars: {
     spaceDesktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const marginInline: string;
-export declare const flexInline: string;
 export declare const inline: string;
 export declare const fullWidth: string;
 export declare const wrap: string;
 export declare const noFullWidth: string;
+export declare const stringSpace: string;

package/dist/inline.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return S;
+        return P;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -126,23 +126,23 @@ const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, A = (t)=>{
     };
     return t.tablet && (e[_inlinecssmistica.vars.spaceTablet] = i(t.tablet)), e;
 }, C = (param)=>{
-    let { space: t, className: e, children: s, role: a, alignItems: m = "stretch", "aria-labelledby": f, fullWidth: p, wrap: u, dataAttributes: c } = param;
-    const d = p || typeof t == "string", { platformOverrides: l } = (0, _hooks.useTheme)(), b = typeof t == "string";
+    let { space: t, className: e, children: s, role: a, alignItems: m = "stretch", "aria-labelledby": p, fullWidth: f, wrap: c, dataAttributes: u } = param;
+    const { platformOverrides: o } = (0, _hooks.useTheme)(), d = typeof t == "string";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(e, (0, _sprinklescssmistica.sprinkles)({
+        className: (0, _classnames.default)(e, _inlinecssmistica.inline, (0, _sprinklescssmistica.sprinkles)({
             alignItems: m
-        }), u ? _inlinecssmistica.wrap : d ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, b ? _inlinecssmistica.flexInline : _inlinecssmistica.marginInline),
+        }), c ? _inlinecssmistica.wrap : f ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, d ? _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
         style: (0, _css.applyCssVars)(A(t)),
         role: a,
-        "aria-labelledby": f
-    }, (0, _dom.getPrefixedDataAttributes)(c, "Inline")), {
+        "aria-labelledby": p
+    }, (0, _dom.getPrefixedDataAttributes)(u, "Inline")), {
         children: _react.Children.map(s, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 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)(l) && !(0, _platform.isRunningAcceptanceTest)(l) ? 1 : void 0
+                    paddingBottom: (0, _platform.isIos)(o) && !(0, _platform.isRunningAcceptanceTest)(o) ? 1 : void 0
                 },
                 children: n
             }) : null)
     }));
-}, S = C;
+}, P = C;