@telefonica/mistica 14.41.0 → 14.42.1

package/dist/phone-number-field.js

@@ -138,8 +138,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const P = (r, s)=>(0, _libphonenumber.formatAsYouType)(s.replace(/[^\d+*#]/g, ""), r), $ = (r)=>!!r.match(/^\+\d+$/), j = (_param)=>{
-    var { inputRef: r, value: s, defaultValue: m, onChange: i, prefix: t, e164: b } = _param, p = _object_without_properties(_param, [
+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, [
         "inputRef",
         "value",
         "defaultValue",
@@ -147,38 +147,38 @@ const P = (r, s)=>(0, _libphonenumber.formatAsYouType)(s.replace(/[^\d+*#]/g, ""
         "prefix",
         "e164"
     ]);
-    const [f, d] = _react.useState(m !== null && m !== void 0 ? m : ""), l = _react.useRef(null), { i18n: g } = (0, _hooks.useTheme)(), c = g.phoneNumberFormattingRegionCode, n = typeof s < "u", h = n ? s : f, y = _react.useCallback((o)=>{
-        n || d(o), l.current && (i == null || i((0, _dom.createChangeEvent)(l.current, o)));
+    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)));
     }, [
-        n,
-        i
-    ]), C = _react.useCallback(// otherwise the cursor position is incorrectly positioned
+        u,
+        s
+    ]), F = _react.useCallback(// otherwise the cursor position is incorrectly positioned
     // also note the "@" is replaced back to "-" in `replace` param in `useRifm`
-    (o)=>{
-        let e = "";
-        if (t && $(t)) {
-            const F = t + o;
-            e = P(c, F), e.startsWith(t) ? e = e.slice(t.length).trim() : e = P(c, o);
-        } else e = P(c, o);
-        return e.replace(/-/g, "@");
+    (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);
+        return t.replace(/-/g, "@");
     }, [
-        c,
-        t
-    ]), u = (0, _rifm.useRifm)({
-        format: C,
-        value: h,
-        onChange: y,
+        i,
+        o
+    ]), m = (0, _rifm.useRifm)({
+        format: F,
+        value: a,
+        onChange: P,
         accept: /[\d\-+#*]+/g,
-        replace: (o)=>o.replace(/@/g, "-")
+        replace: (e)=>e.replace(/@/g, "-")
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, p), {
-        value: u.value,
-        onChange: u.onChange,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, d), {
+        value: m.value,
+        onChange: m.onChange,
         type: "tel",
         ref: (0, _common.combineRefs)(r, l)
     }));
 }, I = (_param)=>{
-    var { disabled: r, error: s, helperText: m, name: i, optional: t, validate: b, onChange: p, onChangeValue: f, onBlur: d, value: l, defaultValue: g, e164: c } = _param, n = _object_without_properties(_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, [
         "disabled",
         "error",
         "helperText",
@@ -190,37 +190,41 @@ const P = (r, s)=>(0, _libphonenumber.formatAsYouType)(s.replace(/[^\d+*#]/g, ""
         "onBlur",
         "value",
         "defaultValue",
-        "e164"
+        "e164",
+        "dataAttributes"
     ]);
-    const { i18n: h } = (0, _hooks.useTheme)(), C = (0, _formcontext.useFieldProps)({
-        name: i,
+    const { i18n: P } = (0, _hooks.useTheme)(), m = (0, _formcontext.useFieldProps)({
+        name: s,
         value: l,
-        defaultValue: g,
-        processValue: (u)=>{
-            if (c) try {
-                var _n_prefix;
-                const o = ((_n_prefix = n.prefix) !== null && _n_prefix !== void 0 ? _n_prefix : "").replace(/[^\d]/g, "");
-                let e = (0, _libphonenumber.getRegionCodeForCountryCode)(o);
-                return (!e || e === "ZZ") && (e = h.phoneNumberFormattingRegionCode), (0, _libphonenumber.formatToE164)((0, _libphonenumber.parse)(u, e));
+        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));
             } catch (e) {
                 return "";
             }
-            else return u.replace(/[^\d]/g, "");
+            else return e.replace(/[^\d]/g, "");
         },
-        helperText: m,
-        optional: t,
-        error: s,
+        helperText: f,
+        optional: o,
+        error: n,
         disabled: r,
-        onBlur: d,
-        validate: b,
-        onChange: p,
-        onChangeValue: f
+        onBlur: h,
+        validate: y,
+        onChange: d,
+        onChangeValue: g
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, n, C), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, a, m), {
         type: "phone",
         inputProps: {
-            prefix: n.prefix
+            prefix: a.prefix
         },
-        inputComponent: j
+        inputComponent: j,
+        dataAttributes: _object_spread({
+            "component-name": "PhoneNumberField"
+        }, u)
     }));
 }, J = I;

package/dist/pin-field.css-mistica.js

@@ -10,28 +10,34 @@ function _export(target, all) {
 }
 _export(exports, {
     disabled: function() {
-        return f;
+        return r;
     },
     field: function() {
+        return f;
+    },
+    fieldContainer: function() {
         return y;
     },
     focusedField: function() {
-        return r;
+        return i;
     },
     input: function() {
-        return i;
+        return p;
     },
     passwordDot: function() {
         return o;
     },
     passwordInput: function() {
-        return p;
+        return a;
+    },
+    pinInputLineHeight: function() {
+        return c;
     },
     readOnlyField: function() {
-        return a;
+        return e;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./pin-field.css.ts.vanilla.css-mistica.js");
-var f = "_3pc6ro0", y = "_1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nfhh _1y2v1nfhx _1y2v1nf37", r = "_3pc6ro2 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nfhh _1y2v1nfhx _1y2v1nf37", i = "_3pc6ro4", o = "_3pc6ro7", p = "_1y2v1nf33", a = "_1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nfhh _1y2v1nfhx _1y2v1nf4y";
+var r = "_3pc6ro1", f = "_3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37", y = "_3pc6ro0", i = "_3pc6ro4 _3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37", p = "_3pc6ro6", o = "_3pc6ro9", a = "_1y2v1nf33", c = "1.000rem", e = "_3pc6ro5 _3pc6ro3 _1y2v1nfjj _1y2v1nfiz _1y2v1nfgi _1y2v1nfj8 _1y2v1nfgc _1y2v1nf37";

package/dist/pin-field.css.d.ts

@@ -1,3 +1,5 @@
+export declare const pinInputLineHeight: string;
+export declare const fieldContainer: string;
 export declare const disabled: string;
 export declare const field: string;
 export declare const focusedField: string;

package/dist/pin-field.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 type OtpFieldProps = {
     length?: number;
     /**
@@ -20,6 +21,7 @@ type OtpFieldProps = {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    dataAttributes?: DataAttributes;
 };
-declare const PinField: ({ length, hideCode, readSms, disabled, readOnly, name, value, defaultValue, helperText, error, onChangeValue, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: OtpFieldProps) => React.ReactElement;
+declare const PinField: ({ length, hideCode, readSms, disabled, readOnly, name, value, defaultValue, helperText, error, onChangeValue, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, dataAttributes, }: OtpFieldProps) => React.ReactElement;
 export default PinField;

package/dist/pin-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return pe;
+        return de;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -96,32 +96,56 @@ function _object_spread(target) {
     }
     return target;
 }
-let P = !1;
-const Y = (param)=>{
-    let { length: a = 6, hideCode: c = !1, readSms: d, disabled: h, readOnly: y, value: w, defaultValue: b, onChange: n, inputRef: R } = param;
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+let T = !1;
+const x = (param)=>{
+    let { length: l = 6, hideCode: f = !1, readSms: d, disabled: g, readOnly: y, value: F, defaultValue: b, onChange: u, inputRef: A } = param;
     var _ref;
-    const { texts: T } = (0, _hooks.useTheme)(), [k, A] = _react.useState((_ref = b == null ? void 0 : b.slice(0, a)) !== null && _ref !== void 0 ? _ref : ""), [F, v] = _react.useState(void 0), l = _react.useRef(Array.from({
-        length: a
-    }, ()=>null)).current, f = typeof w < "u", r = f ? w : k, u = _react.useCallback((s)=>{
-        if (s === r) return;
-        f || A(s);
-        const e = l[0];
-        e && (n == null || n((0, _dom.createChangeEvent)(_object_spread({}, e), s)));
+    const { texts: C } = (0, _hooks.useTheme)(), [R, S] = _react.useState((_ref = b == null ? void 0 : b.slice(0, l)) !== null && _ref !== void 0 ? _ref : ""), [w, I] = _react.useState(void 0), a = _react.useRef(Array.from({
+        length: l
+    }, ()=>null)).current, i = typeof F < "u", t = i ? F : R, c = _react.useCallback((s)=>{
+        if (s === t) return;
+        i || S(s);
+        const e = a[0];
+        e && (u == null || u((0, _dom.createChangeEvent)(_object_spread({}, e), s)));
     }, [
-        r,
-        l,
-        f,
-        n
+        t,
+        a,
+        i,
+        u
     ]);
     _react.useEffect(()=>{
-        u(r.slice(0, a));
+        c(t.slice(0, l));
     }, [
-        a,
-        r,
-        u
+        l,
+        t,
+        c
     ]), _react.useEffect(()=>{
-        if (d && "OTPCredential" in window && !P) {
-            P = !0;
+        if (d && "OTPCredential" in window && !T) {
+            T = !0;
             const s = new AbortController();
             return navigator.credentials.get({
                 // @ts-expect-error: otp is not in the types yet
@@ -133,94 +157,101 @@ const Y = (param)=>{
                 signal: s.signal
             }).then((e)=>{
                 if (e) {
-                    const t = e.code.slice(0, a);
-                    u(t);
+                    const r = e.code.slice(0, l);
+                    c(r);
                 }
             }).catch(()=>{}).finally(()=>{
-                P = !1;
+                T = !1;
             }), ()=>{
-                P = !1, s.abort();
+                T = !1, s.abort();
             };
         }
     }, [
-        u,
-        a,
+        c,
+        l,
         d
     ]);
-    const N = (s)=>(e)=>{
-            var C;
-            const t = e.target.value;
-            if (t === "") return;
-            const o = r[s];
-            let p = t;
-            !o || o === t ? p = t : o === t[0] ? p = t.slice(1) : o === t[t.length - 1] && (p = t.slice(0, -1));
-            let I = s, g = r;
+    const H = (s)=>(e)=>{
+            var k;
+            const r = e.target.value;
+            if (r === "") return;
+            const o = t[s];
+            let p = r;
+            !o || o === r ? p = r : o === r[0] ? p = r.slice(1) : o === r[r.length - 1] && (p = r.slice(0, -1));
+            let v = s, P = t;
             if (p.length >= 2) {
-                const S = p.slice(0, a - s);
-                g = r.slice(0, s) + S, I = Math.min(s + S.length, a - 1);
-            } else g = r.slice(0, s) + p + r.slice(s + 1), I = s + 1;
-            g !== r && ((0, _reactdom.flushSync)(()=>{
-                u(g);
-            }), I !== s && I <= a - 1 && ((C = l[I]) == null || C.focus()));
+                const V = p.slice(0, l - s);
+                P = t.slice(0, s) + V, v = Math.min(s + V.length, l - 1);
+            } else P = t.slice(0, s) + p + t.slice(s + 1), v = s + 1;
+            P !== t && ((0, _reactdom.flushSync)(()=>{
+                c(P);
+            }), v !== s && v <= l - 1 && ((k = a[v]) == null || k.focus()));
         };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
         space: 8,
         children: Array.from({
-            length: a
+            length: l
         }).map((s, e)=>/* @__PURE__ */ {
-            var _r_e;
+            var _t_e;
             return (0, _jsxruntime.jsxs)("div", {
-                className: y ? _pinfieldcssmistica.readOnlyField : e === F ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
+                className: y ? _pinfieldcssmistica.readOnlyField : e === w ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_integerfield.IntegerInput, {
-                        "aria-label": T.pinFieldInputLabel.replace("1$s", String(e + 1)).replace("2$s", String(a)),
-                        type: c ? "password" : "text",
-                        tabIndex: e > r.length ? -1 : void 0,
+                        "aria-label": C.pinFieldInputLabel.replace("1$s", String(e + 1)).replace("2$s", String(l)),
+                        type: f ? "password" : "text",
+                        tabIndex: e > t.length ? -1 : void 0,
                         required: !0,
                         onFocus: ()=>{
                             var o;
-                            const t = r.length === a ? -1 : r.length;
-                            t >= 0 && t < e ? (o = l[t]) == null || o.focus() : v(e);
+                            const r = t.length === l ? -1 : t.length;
+                            r >= 0 && r < e ? (o = a[r]) == null || o.focus() : I(e);
                         },
                         onBlur: ()=>{
-                            v(void 0);
+                            I(void 0);
                         },
-                        inputRef: (t)=>{
-                            l[e] = t, e === 0 && R(t);
+                        inputRef: (r)=>{
+                            a[e] = r, e === 0 && A(r);
                         },
-                        className: (0, _classnames.default)(_textfieldbasecssmistica.input, _textfieldbasecssmistica.inputWithoutLabel, _pinfieldcssmistica.input, {
-                            [_pinfieldcssmistica.passwordInput]: c
+                        className: (0, _classnames.default)(_textfieldbasecssmistica.input, _pinfieldcssmistica.input, {
+                            [_pinfieldcssmistica.passwordInput]: f
                         }),
-                        disabled: h,
+                        style: {
+                            marginTop: `calc(${_pinfieldcssmistica.pinInputLineHeight} - 1px)`,
+                            marginBottom: `calc(${_pinfieldcssmistica.pinInputLineHeight} - 1px)`,
+                            lineHeight: _pinfieldcssmistica.pinInputLineHeight,
+                            fontSize: _pinfieldcssmistica.pinInputLineHeight,
+                            height: _pinfieldcssmistica.pinInputLineHeight
+                        },
+                        disabled: g,
                         readOnly: y,
                         autoComplete: d ? "one-time-code" : void 0,
-                        value: (_r_e = r[e]) !== null && _r_e !== void 0 ? _r_e : "",
-                        onChange: N(e),
-                        onKeyDown: (t)=>{
-                            switch(t.key){
+                        value: (_t_e = t[e]) !== null && _t_e !== void 0 ? _t_e : "",
+                        onChange: H(e),
+                        onKeyDown: (r)=>{
+                            switch(r.key){
                                 case "Backspace":
                                 case "Delete":
-                                    if (t.currentTarget.value && u(r.slice(0, e) + r.slice(e + 1)), e > 0 && e >= r.length - 1) {
-                                        const o = l[e - 1];
+                                    if (r.currentTarget.value && c(t.slice(0, e) + t.slice(e + 1)), e > 0 && e >= t.length - 1) {
+                                        const o = a[e - 1];
                                         o == null || o.focus();
                                     }
                                     break;
                                 case "ArrowLeft":
                                     if (e > 0) {
-                                        const o = l[e - 1];
+                                        const o = a[e - 1];
                                         o && o.focus();
                                     }
                                     break;
                                 case "ArrowRight":
-                                    if (e < a - 1) {
-                                        const o = l[e + 1];
+                                    if (e < l - 1) {
+                                        const o = a[e + 1];
                                         o && o.focus();
                                     }
                                     break;
                             }
                         }
                     }),
-                    c && r[e] && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    f && t[e] && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         "aria-hidden": !0,
                         className: _pinfieldcssmistica.passwordDot,
                         children: "•"
@@ -229,46 +260,49 @@ const Y = (param)=>{
             }, e);
         })
     });
-}, Z = (param)=>{
-    let { length: a = 6, hideCode: c = !1, readSms: d = !c, disabled: h, readOnly: y, name: w, value: b, defaultValue: n, helperText: R, error: T, onChangeValue: k, onChange: A, "aria-label": F, "aria-labelledby": v } = param;
-    const l = (0, _formcontext.useFieldProps)({
-        name: w,
+}, ee = (param)=>{
+    let { length: l = 6, hideCode: f = !1, readSms: d = !f, disabled: g, readOnly: y, name: F, value: b, defaultValue: u, helperText: A, error: C, onChangeValue: R, onChange: S, "aria-label": w, "aria-labelledby": I, dataAttributes: a } = param;
+    const i = (0, _formcontext.useFieldProps)({
+        name: F,
         value: b,
-        defaultValue: n,
-        processValue: (r)=>r,
-        helperText: R,
+        defaultValue: u,
+        processValue: (c)=>c,
+        helperText: A,
         optional: !1,
-        error: T,
-        disabled: h,
-        onChangeValue: k,
-        onChange: A
-    }), f = (0, _hooks.useAriaId)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        error: C,
+        disabled: g,
+        onChangeValue: R,
+        onChange: S
+    }), t = (0, _hooks.useAriaId)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
         role: "group",
-        "aria-labelledby": v !== null && v !== void 0 ? v : f,
-        className: h ? _pinfieldcssmistica.disabled : void 0,
+        "aria-labelledby": I !== null && I !== void 0 ? I : t,
+        className: (0, _classnames.default)(_pinfieldcssmistica.fieldContainer, {
+            [_pinfieldcssmistica.disabled]: g
+        })
+    }, (0, _dom.getPrefixedDataAttributes)(a, "PinField")), {
         children: [
-            F && !v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+            w && !I && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    id: f,
-                    children: F
+                    id: t,
+                    children: w
                 })
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
-                inputRef: l.inputRef,
-                length: a,
-                hideCode: c,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(x, {
+                inputRef: i.inputRef,
+                length: l,
+                hideCode: f,
                 readSms: d,
-                value: l.value,
-                defaultValue: l.defaultValue,
-                disabled: l.disabled,
-                onChange: l.onChange,
+                value: i.value,
+                defaultValue: i.defaultValue,
+                disabled: i.disabled,
+                onChange: i.onChange,
                 readOnly: y
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-                error: l.error,
-                leftText: l.helperText
+                error: i.error,
+                leftText: i.helperText
             })
         ]
-    });
-}, pe = Z;
+    }));
+}, de = ee;

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

@@ -10,27 +10,30 @@ function _export(target, all) {
 }
 _export(exports, {
     backgroundVariant: function() {
-        return o;
+        return e;
+    },
+    expandedResponsiveLayoutContainerDesktop: function() {
+        return n;
     },
-    expandedResponsiveLayoutContainer: function() {
+    expandedResponsiveLayoutContainerMobile: function() {
         return r;
     },
     fullWidth: function() {
-        return e;
+        return t;
     },
     fullwidthContainer: function() {
         return v;
     },
     responsiveLayout: function() {
-        return t;
+        return i;
     },
     responsiveLayoutContainer: function() {
-        return i;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
-var o = {
+var e = {
     inverse: "_1y2v1nf3f",
     alternative: "_1y2v1nf3k"
-}, r = "_17lofg73", e = "_17lofg79 _1y2v1nfh5", v = "_17lofg74", t = "_17lofg77", i = "_17lofg72 _1y2v1nfh5";
+}, n = "_17lofg74", r = "_17lofg73", t = "_17lofg7a _1y2v1nfh5", v = "_17lofg75", i = "_17lofg78", f = "_17lofg72 _1y2v1nfh5";

package/dist/responsive-layout.css.d.ts

@@ -6,7 +6,8 @@ export declare const vars: {
     sideMargin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const responsiveLayoutContainer: string;
-export declare const expandedResponsiveLayoutContainer: string;
+export declare const expandedResponsiveLayoutContainerMobile: string;
+export declare const expandedResponsiveLayoutContainerDesktop: string;
 export declare const fullwidthContainer: string;
 export declare const backgroundVariant: {
     inverse: string;

package/dist/responsive-layout.d.ts

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

package/dist/responsive-layout.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     InternalResponsiveLayout: function() {
-        return R;
+        return b;
     },
     default: function() {
-        return k;
+        return j;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -106,29 +106,32 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const R = (param)=>{
-    let { children: a, isInverse: n = !1, variant: i, backgroundColor: o, className: r, fullWidth: s, dataAttributes: d, shouldExpandWhenNested: u = !1 } = param;
-    const m = (0, _themevariantcontext.useThemeVariant)(), e = i || n && "inverse" || void 0;
+const b = (param)=>{
+    let { children: n, isInverse: o = !1, variant: r, backgroundColor: s, className: p, fullWidth: e, dataAttributes: u, shouldExpandWhenNested: i = !1 } = param;
+    const d = (0, _themevariantcontext.useThemeVariant)(), t = r || o && "inverse" || void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-        variant: e !== null && e !== void 0 ? e : m,
+        variant: t !== null && t !== void 0 ? t : d,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            className: (0, _classnames.default)(s ? _responsivelayoutcssmistica.fullwidthContainer : _responsivelayoutcssmistica.responsiveLayoutContainer, r, e && e !== "default" && _responsivelayoutcssmistica.backgroundVariant[e], u && !s && _responsivelayoutcssmistica.expandedResponsiveLayoutContainer),
-            style: o ? {
-                background: o
+            className: (0, _classnames.default)(e ? _responsivelayoutcssmistica.fullwidthContainer : _responsivelayoutcssmistica.responsiveLayoutContainer, p, t && t !== "default" && _responsivelayoutcssmistica.backgroundVariant[t], {
+                [_responsivelayoutcssmistica.expandedResponsiveLayoutContainerMobile]: i === !0 && !e,
+                [_responsivelayoutcssmistica.expandedResponsiveLayoutContainerDesktop]: i && !e
+            }),
+            style: s ? {
+                background: s
             } : void 0
-        }, (0, _dom.getPrefixedDataAttributes)(d)), {
+        }, (0, _dom.getPrefixedDataAttributes)(u)), {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: s ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout,
-                children: a
+                className: e ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout,
+                children: n
             })
         }))
     });
-}, N = (_param)=>{
-    var { children: a } = _param, n = _object_without_properties(_param, [
+}, C = (_param)=>{
+    var { children: n } = _param, o = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(R, _object_spread_props(_object_spread({}, n), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, o), {
         shouldExpandWhenNested: !0,
-        children: a
+        children: n
     }));
-}, k = N;
+}, j = C;