@telefonica/mistica 15.2.0 → 15.3.0

package/dist/hero.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return or;
+        return lr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -26,6 +26,7 @@ const _dom = require("./utils/dom.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _css = require("./utils/css.js");
+const _responsivelayout = require("./responsive-layout.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -151,17 +152,18 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const C = (param)=>{
-    let { children: e, isInverse: o } = param;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-        isInverse: o,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            className: _herocssmistica.layout,
-            children: e
-        })
+const H = (param)=>{
+    let { children: o, isInverse: e, isInsideSlideShow: a } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
+        isInverse: e,
+        className: _herocssmistica.layout,
+        innerDivClassName: _herocssmistica.layout,
+        shouldExpandWhenNested: a ? "desktop" : !0,
+        backgroundColor: "transparent",
+        children: o
     });
-}, v = (param)=>{
-    let { headline: e, title: o, titleAs: i = "h1", pretitle: t, description: n, descriptionLinesMax: l, extra: s, button: p, secondaryButton: h, buttonLink: c } = param;
+}, g = (param)=>{
+    let { headline: o, title: e, titleAs: a = "h1", pretitle: s, description: l, descriptionLinesMax: n, extra: t, button: c, secondaryButton: f, buttonLink: d } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: (0, _sprinklescssmistica.sprinkles)({
             height: "100%",
@@ -175,94 +177,103 @@ const C = (param)=>{
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 16,
                         children: [
-                            e && e,
+                            o && o,
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: 8,
                                 children: [
-                                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         as: "p",
                                         regular: !0,
-                                        children: t
+                                        children: s
                                     }),
-                                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                        as: i,
-                                        children: o
+                                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                                        as: a,
+                                        children: e
                                     })
                                 ]
                             }),
-                            n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                truncate: l,
-                                children: n
+                                truncate: n,
+                                children: l
                             })
                         ]
                     }),
-                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        children: s
+                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        children: t
                     })
                 ]
             }),
-            (p || c) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (c || d) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: p,
-                    secondaryButton: h,
-                    link: c
+                    primaryButton: c,
+                    secondaryButton: f,
+                    link: d
                 })
             })
         ]
     });
-}, R = {
+}, I = {
     default: _skincontractcssmistica.vars.colors.background,
     alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
     brand: _skincontractcssmistica.vars.colors.backgroundBrand,
-    "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary
-}, Y = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
-    var { height: e, background: o = "default", media: i, desktopMediaPosition: t = "left", dataAttributes: n } = _param, l = _object_without_properties(_param, [
+    "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary,
+    none: "transparent"
+}, W = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
+    var { height: o, background: e = "default", media: a, desktopMediaPosition: s = "left", dataAttributes: l, noPaddingY: n } = _param, t = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
-        "dataAttributes"
+        "dataAttributes",
+        "noPaddingY"
     ]);
-    const { isTabletOrSmaller: p } = (0, _hooks.useScreenSize)(), h = (0, _carousel.useIsInsideSlideshowContext)(), c = o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), d = (0, _carousel.useIsInsideSlideshowContext)(), D = (0, _themevariantcontext.useIsInverseVariant)(), x = e === "none" ? D : e === "brand" || e === "brand-secondary";
+    if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: "0px"
         }),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
-        }, n))), {
-            ref: s,
+        }, l))), {
+            ref: c,
             style: _object_spread({
-                backgroundColor: R[o]
-            }, e === "100vh" ? {
+                backgroundColor: I[e]
+            }, o === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
             } : {}, (0, _css.applyCssVars)({
-                [_herocssmistica.vars.height]: e !== null && e !== void 0 ? e : "100%"
+                [_herocssmistica.vars.height]: o !== null && o !== void 0 ? o : "100%"
             })),
-            className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile),
-            children: [
-                i,
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(C, {
-                    isInverse: c,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile, {
+                [_herocssmistica.containerMinHeight]: !n
+            }),
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(H, {
+                isInverse: x,
+                isInsideSlideShow: d,
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _herocssmistica.mediaContainer,
+                        children: a
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingTop: 24,
-                        paddingBottom: h ? 48 : 24,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, _object_spread({}, l))
+                        paddingBottom: d ? 48 : n ? 0 : 24,
+                        className: _herocssmistica.layout,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, t))
                     })
-                })
-            ]
+                ]
+            })
         }))
     });
-    const H = t === "left" ? i : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const O = s === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, _object_spread({}, l))
-    }), w = t === "right" ? i : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, t))
+    }), L = s === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, _object_spread({}, l))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, t))
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: (0, _css.applyCssVars)({
@@ -270,36 +281,36 @@ const C = (param)=>{
         }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
-        }, n))), {
-            ref: s,
+        }, l))), {
+            ref: c,
             style: _object_spread({
-                backgroundColor: R[o]
-            }, e === "100vh" ? {
+                backgroundColor: I[e]
+            }, o === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
             } : {}, (0, _css.applyCssVars)({
-                [_herocssmistica.vars.height]: e !== null && e !== void 0 ? e : "100%"
+                [_herocssmistica.vars.height]: o !== null && o !== void 0 ? o : "100%"
             })),
             className: (0, _sprinklescssmistica.sprinkles)({
-                height: "100%",
-                display: "flex",
-                alignItems: "center"
+                height: "100%"
             }),
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, {
-                isInverse: c,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(H, {
+                isInverse: x,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                     template: "6+6",
                     left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingY: 56,
-                        className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
-                        children: H
+                        paddingY: n ? 0 : 56,
+                        className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
+                            [_herocssmistica.containerMinHeight]: !n
+                        }),
+                        children: O
                     }),
                     right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingY: 56,
+                        paddingY: n ? 0 : 56,
                         className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
-                        children: w
+                        children: L
                     })
                 })
             })
         }))
     });
-}), or = Y;
+}), lr = W;

package/dist/horizontal-scroll.js

@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const e = /*#__PURE__*/ _react.forwardRef((param, l)=>{
+const n = /*#__PURE__*/ _react.forwardRef((param, l)=>{
     let { children: o, noScrollbar: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_horizontalscrollcssmistica.scroll, {
@@ -67,4 +67,4 @@ const e = /*#__PURE__*/ _react.forwardRef((param, l)=>{
         ref: l,
         children: o
     });
-}), p = e;
+}), p = n;

package/dist/image.js

@@ -232,7 +232,7 @@ const X = (param)=>{
         "errorFallback"
     ]);
     var v;
-    const h = (0, _hooks.useAriaId)(), l = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : m ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [I, f] = _react.useState(!o), [H, g] = _react.useState(!1), C = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], b = A && !!(C !== 0 || i.width && i.height), N = B && !!(C !== 0 || i.width && i.height), w = _react.useCallback(()=>{
+    const h = (0, _hooks.useAriaId)(), l = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : m ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [I, f] = _react.useState(!o), [H, g] = _react.useState(!1), C = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], b = A && !!(C !== 0 || i.width && i.height), T = B && !!(C !== 0 || i.width && i.height), w = _react.useCallback(()=>{
         f(!1), l.current && (l.current.style.opacity = "1"), setTimeout(()=>{
             g(!0);
         }, _imagecssmistica.FADE_IN_DURATION_MS), n == null || n();
@@ -249,13 +249,13 @@ const X = (param)=>{
     }, [
         w
     ]);
-    const T = (0, _environment.isServerSide)() || !((v = document.getElementById(h)) != null && v.complete), _ = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    const _ = (0, _environment.isServerSide)() || !((v = document.getElementById(h)) != null && v.complete), z = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
                 suppressHydrationWarning: !0,
                 id: h,
                 style: {
-                    opacity: T && b ? 0 : 1
+                    opacity: _ && b ? 0 : 1
                 },
                 ref: (0, _common.combineRefs)(l, E),
                 src: o,
@@ -284,19 +284,21 @@ const X = (param)=>{
                 style: {
                     position: "absolute",
                     width: "100%",
-                    height: "100%"
+                    height: "100%",
+                    overflow: "hidden"
                 },
+                className: u,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletons.SkeletonAnimation, {
                     height: (_i_height = i.height) !== null && _i_height !== void 0 ? _i_height : "100%",
                     width: (_i_width = i.width) !== null && _i_width !== void 0 ? _i_width : "100%",
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
                         height: "100%",
                         width: "100%",
-                        className: u
+                        noBorderRadius: !0
                     })
                 })
             }),
-            I && N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            I && T && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
@@ -308,7 +310,7 @@ const X = (param)=>{
                     className: u
                 })
             }),
-            !I && _
+            !I && z
         ]
     });
 }), e1 = /*#__PURE__*/ _react.forwardRef((e, d)=>{

package/dist/list.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     BoxedRow: function() {
-        return pe;
+        return tt;
     },
     BoxedRowList: function() {
-        return et;
+        return nt;
     },
     Content: function() {
-        return Ce;
+        return ke;
     },
     Row: function() {
-        return _e;
+        return pe;
     },
     RowList: function() {
-        return $e;
+        return et;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -48,6 +48,7 @@ const _imagecssmistica = require("./image.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _css = require("./utils/css.js");
 const _iconbutton = require("./icon-button.js");
+const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -182,7 +183,7 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             height: "100%"
         },
         children: e
-    }) : e, Ce = (param)=>{
+    }) : e, ke = (param)=>{
     let { withChevron: e, headline: n, title: r, titleAs: c, titleLinesMax: m, subtitle: g, subtitleLinesMax: v, description: A, descriptionLinesMax: M, detail: f, asset: S, type: x = "basic", badge: E, right: V, extra: l, labelId: W, disabled: o } = param;
     const j = (0, _themevariantcontext.useIsInverseVariant)(), d = [
         n,
@@ -312,7 +313,7 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             })
         ]
     });
-}, ke = (param)=>{
+}, Ie = (param)=>{
     let { value: e, defaultValue: n, onChange: r } = param;
     const c = e !== void 0, [m, g] = _react.useState(!!n), v = ()=>{
         c || g(!m), r && r(c ? !e : !m);
@@ -324,10 +325,10 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         m,
         v
     ];
-}, Ie = (e)=>e.switch !== void 0, Pe = (e)=>e.checkbox !== void 0, Le = (e)=>e.radioValue !== void 0, Ae = (e)=>e.iconButton !== void 0, ne = /*#__PURE__*/ _react.forwardRef((e, n)=>{
-    const r = (0, _hooks.useAriaId)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { asset: m, headline: g, title: v, titleLinesMax: A, subtitle: M, subtitleLinesMax: f, description: S, descriptionLinesMax: x, detail: E, badge: V, role: l, extra: W, dataAttributes: o } = e, j = (0, _radiobutton.useRadioContext)(), i = e.disabled || e.radioValue !== void 0 && j.disabled, d = !i && !c, u = !i && c, [G, J] = ke(e.switch || e.checkbox || {}), b = (param)=>{
+}, Pe = (e)=>e.switch !== void 0, Le = (e)=>e.checkbox !== void 0, Ae = (e)=>e.radioValue !== void 0, Ee = (e)=>e.iconButton !== void 0, ne = /*#__PURE__*/ _react.forwardRef((e, n)=>{
+    const r = (0, _hooks.useAriaId)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { asset: m, headline: g, title: v, titleLinesMax: A, subtitle: M, subtitleLinesMax: f, description: S, descriptionLinesMax: x, detail: E, badge: V, role: l, extra: W, dataAttributes: o } = e, j = (0, _radiobutton.useRadioContext)(), i = e.disabled || e.radioValue !== void 0 && j.disabled, d = !i && !c, u = !i && c, [G, J] = Ie(e.switch || e.checkbox || {}), b = (param)=>{
         let { type: s, right: w, labelId: X } = param;
-        return /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce, {
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)(ke, {
             asset: m,
             headline: g,
             title: v,
@@ -356,7 +357,7 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             })
         });
     };
-    if (e.onPress && !Ie(e) && !Pe(e) && !Le(e) && !Ae(e)) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+    if (e.onPress && !Pe(e) && !Le(e) && !Ae(e) && !Ee(e)) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         ref: n,
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
             [_listcssmistica.touchableBackground]: d,
@@ -596,13 +597,16 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             type: "basic"
         })
     });
-}), _e = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
+}), pe = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
     var { dataAttributes: e, role: n = "listitem" } = _param, r = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: n,
+        className: (0, _sprinklescssmistica.sprinkles)({
+            width: "100%"
+        }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ne, _object_spread_props(_object_spread({}, r), {
             ref: c,
             dataAttributes: _object_spread({
@@ -610,7 +614,7 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             }, e)
         }))
     });
-}), $e = (param)=>{
+}), et = (param)=>{
     let { children: e, ariaLabelledby: n, role: r = "list", dataAttributes: c } = param;
     const m = _react.Children.count(e) - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
@@ -627,7 +631,7 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 ]
             }, v))
     }));
-}, pe = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}, tt = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
     var { dataAttributes: e } = _param, n = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -639,7 +643,7 @@ const ee = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         }, e),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ne, _object_spread({}, n))
     });
-}), et = (param)=>{
+}), nt = (param)=>{
     let { children: e, ariaLabelledby: n, role: r = "list", dataAttributes: c } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,

package/dist/loading-bar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return h;
+        return u;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -85,4 +85,4 @@ const l = (param)=>{
             })
         }))
     });
-}, h = l;
+}, u = l;

package/dist/loading-screen.js

@@ -232,7 +232,7 @@ const L = (param)=>{
             })
         }, c)
     });
-}, R = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+}, x = /*#__PURE__*/ _react.forwardRef((param, d)=>{
     let { isInverse: e, children: r, isLoading: t = !0, animateText: i, animateBackground: c, onClose: s, dataAttributes: a, title: l, description: u, texts: m = [
         {
             title: l,
@@ -322,7 +322,7 @@ const L = (param)=>{
             })
         ]
     });
-}), pe = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(R, _object_spread_props(_object_spread({
+}), pe = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
         ref: r
     }, e), {
         dataAttributes: _object_spread({
@@ -376,7 +376,7 @@ const L = (param)=>{
     }, d = ()=>{
         l.current && u.current && (r == null || r());
     };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(R, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
         ref: c,
         isInverse: !0
     }, i), {

package/dist/package-version.js

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

package/dist/pin-field.js

@@ -171,7 +171,7 @@ const x = (param)=>{
         l,
         d
     ]);
-    const D = (s)=>(e)=>{
+    const H = (s)=>(e)=>{
             var k;
             const r = e.target.value;
             if (r === "") return;
@@ -226,7 +226,7 @@ const x = (param)=>{
                         readOnly: y,
                         autoComplete: d ? "one-time-code" : void 0,
                         value: (_t_e = t[e]) !== null && _t_e !== void 0 ? _t_e : "",
-                        onChange: D(e),
+                        onChange: H(e),
                         onKeyDown: (r)=>{
                             switch(r.key){
                                 case "Backspace":

package/dist/progress-bar.js

@@ -144,16 +144,16 @@ const E = (param)=>{
     }));
 }, R = (param)=>{
     let { steps: r, currentStep: o = 0, color: d, dataAttributes: l, "aria-label": i, "aria-labelledby": n } = param;
-    const { texts: c } = (0, _hooks.useTheme)(), [a, p] = _react.useState(Math.ceil(o)), [s, k] = _react.useState(!1);
+    const { texts: c } = (0, _hooks.useTheme)(), [a, p] = _react.useState(Math.ceil(o)), [s, y] = _react.useState(!1);
     _react.useEffect(()=>{
         const e = Math.ceil(o);
-        a !== e && (k(e < a), p(e));
+        a !== e && (y(e < a), p(e));
     }, [
         o,
         r,
         a
     ]);
-    const y = n ? void 0 : (()=>{
+    const A = n ? void 0 : (()=>{
         const e = c.progressBarStepLabel.replace("1$s", String(a)).replace("2$s", String(r));
         return i ? `${i}, ${e.toLowerCase()}` : e;
     })();
@@ -162,7 +162,7 @@ const E = (param)=>{
         "aria-valuenow": a,
         "aria-valuemin": 0,
         "aria-valuemax": r,
-        "aria-label": y,
+        "aria-label": A,
         "aria-labelledby": n,
         className: _progressbarcssmistica.progressBarSteppedContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {

package/dist/radio-button.js

@@ -156,14 +156,14 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const D = /*#__PURE__*/ _react.createContext({
+const N = /*#__PURE__*/ _react.createContext({
     disabled: !1,
     selectedValue: null,
     focusableValue: null,
     select: ()=>{},
     selectNext: ()=>{},
     selectPrev: ()=>{}
-}), z = ()=>_react.useContext(D), J = (_param)=>{
+}), z = ()=>_react.useContext(N), J = (_param)=>{
     var { value: e, id: s, dataAttributes: C, "aria-labelledby": R } = _param, d = _object_without_properties(_param, [
         "value",
         "id",
@@ -286,7 +286,7 @@ const D = /*#__PURE__*/ _react.createContext({
         role: "radiogroup",
         "aria-labelledby": e["aria-labelledby"]
     }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "RadioGroup")), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(D.Provider, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N.Provider, {
             value: {
                 disabled: l,
                 selectedValue: p !== null && p !== void 0 ? p : C,

package/dist/responsive-layout.css-mistica.js

@@ -9,31 +9,40 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    backgroundVariant: function() {
+    MOBILE_SIDE_MARGIN: function() {
         return e;
     },
-    expandedResponsiveLayoutContainerDesktop: function() {
+    SMALL_DESKTOP_SIDE_MARGIN: function() {
+        return r;
+    },
+    TABLET_SIDE_MARGIN: function() {
         return n;
     },
+    backgroundVariant: function() {
+        return v;
+    },
+    expandedResponsiveLayoutContainerDesktop: function() {
+        return t;
+    },
     expandedResponsiveLayoutContainerMobile: function() {
-        return r;
+        return _;
     },
     fullWidth: function() {
-        return t;
+        return i;
     },
     fullwidthContainer: function() {
-        return v;
+        return f;
     },
     responsiveLayout: function() {
-        return i;
+        return l;
     },
     responsiveLayoutContainer: function() {
-        return f;
+        return p;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
-var e = {
+var e = 16, r = 40, n = 32, v = {
     inverse: "_1y2v1nf3t",
     alternative: "_1y2v1nf3y"
-}, n = "_17lofg74", r = "_17lofg73", t = "_17lofg7a _1y2v1nfhx", v = "_17lofg75", i = "_17lofg78", f = "_17lofg72 _1y2v1nfhx";
+}, t = "_17lofg74", _ = "_17lofg73", i = "_17lofg7a _1y2v1nfhx", f = "_17lofg75", l = "_17lofg78", p = "_17lofg72 _1y2v1nfhx";

package/dist/responsive-layout.d.ts

@@ -12,6 +12,7 @@ type Props = {
 };
 export declare const InternalResponsiveLayout: React.FC<Props & {
     shouldExpandWhenNested?: boolean | 'desktop';
+    innerDivClassName?: string;
 }>;
 declare const ResponsiveLayout: React.FC<Props>;
 export default ResponsiveLayout;