@telefonica/mistica 14.26.1 → 14.28.0

package/dist/generated/mistica-icons/icon-videogames-regular.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return g;
+        return p;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _hooks = require("../../hooks.js");
 const _themevariantcontext = require("../../theme-variant-context.js");
 const _skincontractcssmistica = require("../../skins/skin-contract.css-mistica.js");
 function _define_property(obj, key, value) {
@@ -90,21 +91,45 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const i = (_param)=>{
-    var { color: o , size: c = 24  } = _param, r = _object_without_properties(_param, [
+const n = (_param)=>{
+    var { color: o , size: l = 24  } = _param, h = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const e = (0, _themevariantcontext.useIsInverseVariant)(), s = o !== null && o !== void 0 ? o : e ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
-        width: c,
-        height: c,
+    const r = (0, _themevariantcontext.useIsInverseVariant)(), a = o !== null && o !== void 0 ? o : r ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: t  } = (0, _hooks.useTheme)();
+    return t.match(/^o2/i) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", _object_spread_props(_object_spread({
+        width: l,
+        height: l,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, r), {
+    }, h), {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                fill: a,
+                d: "M8.824 10.039H8.47v-.353c0-.235-.157-.392-.393-.392-.235 0-.392.157-.392.392v.353h-.392c-.235 0-.392.157-.392.392 0 .235.157.392.392.392h.392v.353c0 .236.157.392.392.392.236 0 .393-.156.393-.392v-.353h.353c.235 0 .392-.157.392-.392 0-.235-.157-.392-.392-.392z"
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                fill: a,
+                d: "M5.412 10.431a2.67 2.67 0 012.666-2.667c1.451 0 2.628 1.216 2.667 2.667a2.645 2.645 0 01-2.667 2.667 2.67 2.67 0 01-2.666-2.667zm1.176 0c0 .824.667 1.49 1.49 1.49.785 0 1.49-.666 1.49-1.49a1.49 1.49 0 10-2.98 0zm8.549-.392c-.235 0-.392.157-.392.392 0 .235.157.392.392.392h1.569c.235 0 .392-.157.392-.392 0-.235-.157-.392-.392-.392h-1.569z"
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                fill: a,
+                d: "M13.255 10.431a2.67 2.67 0 012.666-2.667c1.451 0 2.628 1.216 2.667 2.667a2.645 2.645 0 01-2.667 2.667 2.67 2.67 0 01-2.666-2.667zm1.176 0c0 .824.667 1.49 1.49 1.49.785 0 1.49-.666 1.49-1.49a1.49 1.49 0 10-2.98 0zM11.608 9.02h.784c.314 0 .588.274.588.588a.603.603 0 01-.588.588h-.784a.603.603 0 01-.588-.588c0-.314.274-.589.588-.589z"
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                fill: a,
+                d: "M18.118 5.96l3.53 3.883c.234.274.352.588.352.941v5.53c0 1.176-.98 2.156-2.157 2.156h-.902a2.165 2.165 0 01-1.53-.627l-3.607-3.608c-.02 0-.05-.01-.079-.02-.029-.01-.058-.02-.078-.02h-3.294c-.079 0-.118 0-.157.04l-3.608 3.608a2.165 2.165 0 01-1.53.627h-.901A2.176 2.176 0 012 16.313v-5.529c0-.353.118-.706.353-.941l3.53-3.883a1.424 1.424 0 011.019-.43h2.353c.392 0 .706.117.98.391l1.098 1.098c.02 0 .05.01.079.02.03.01.059.02.078.02h.941c.079 0 .118 0 .157-.04l1.098-1.098c.275-.235.628-.392.98-.392h2.432c.392 0 .745.157 1.02.431zm1.725 11.334a.97.97 0 00.98-.98v-5.53c0-.04 0-.078-.039-.118l-3.53-3.882a.297.297 0 00-.156-.078h-2.353c-.078 0-.117 0-.157.039L13.49 7.843c-.274.235-.627.392-.98.392h-.941c-.393 0-.706-.118-.98-.392L9.49 6.745a.303.303 0 01-.078-.02.313.313 0 00-.079-.02H6.902c-.078 0-.118.04-.157.079l-3.53 3.882c-.039.04-.039.079-.039.118v5.53c0 .549.432.98.98.98h.903c.274 0 .51-.079.706-.275l3.608-3.607c.274-.236.627-.393.98-.393h3.294c.392 0 .706.118.98.393l3.608 3.607c.196.157.432.275.706.275h.902z"
+            })
+        ]
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+        width: l,
+        height: l,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, h), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-            fill: s,
+            fill: a,
             d: "M19.953 8.313a42.75 42.75 0 01-.303-.71 9.26 9.26 0 00-.088-.209 2.269 2.269 0 00-.052-.109.73.73 0 01-.015-.03l-.059-.11a3.059 3.059 0 00-.546-.731c-.68-.647-1.645-.975-2.866-.975-.501 0-.947.067-1.361.18-.244.064-.784.302-.796.307 0 0-.414.233-.546.32a2.377 2.377 0 01-2.653 0c-.131-.087-.546-.32-.546-.32-.008-.005-.549-.243-.792-.308a5.234 5.234 0 00-1.362-.179c-1.218 0-2.185.328-2.863.975a3.08 3.08 0 00-.549.73l-.056.11a.732.732 0 01-.015.032c-.011.022-.027.053-.052.108-.033.07-.069.157-.109.253a26.883 26.883 0 01-.293.686c-.68 1.567-1.912 4.404-1.878 6.921.008.415.163 1.238.286 1.636.246.793.812 1.302 1.437 1.507.255.081.6.14.848.16.023.002.05.002.079.002.353 0 .95-.145 1.26-.285.19-.084.457-.23.77-.496.161-.137.244-.239.46-.504l.12-.149c.064-.08.126-.16.188-.241a4.74 4.74 0 01.476-.563c.583-.554 1.32-.95 2.197-1.193.56-.16 1.14-.235 1.722-.235.583 0 1.165.078 1.723.235.877.244 1.616.642 2.196 1.193.17.164.315.351.459.54.068.088.136.178.208.264l.084.105c.241.299.326.404.495.548.314.266.594.412.785.496.336.151.991.283 1.325.283.249 0 .593-.079.848-.16.625-.204 1.194-.714 1.437-1.507.124-.398.278-1.221.283-1.636.035-2.528-1.205-5.378-1.886-6.94zm.424 8.224c-.154.499-.504.661-.652.706a2.104 2.104 0 01-.46.098 3.23 3.23 0 01-.818-.174 1.836 1.836 0 01-.484-.305c-.073-.067-.104-.098-.331-.378l-.092-.115-.174-.224a5.46 5.46 0 00-.594-.692c-.72-.686-1.633-1.188-2.717-1.49a7.716 7.716 0 00-4.118 0c-1.08.302-1.997.804-2.717 1.49a5.348 5.348 0 00-.56.652l-.03.04-.088.113-.086.114-.096.117c-.227.28-.255.311-.33.376-.16.134-.314.235-.47.305a3.025 3.025 0 01-.735.18 2.924 2.924 0 01-.554-.104c-.146-.048-.496-.21-.65-.709-.104-.328-.227-1.034-.23-1.297-.03-2.26 1.144-4.968 1.778-6.429l.004-.008.011-.027c.091-.208.174-.397.24-.558l.023-.056.034-.08c.03-.075.059-.142.084-.198l.028-.058.056-.113c.106-.19.213-.33.316-.43.44-.418 1.115-.634 2.006-.634.353 0 .692.048 1.04.137.094.028.391.152.557.222l.04.023c.108.061.287.163.369.217a3.598 3.598 0 002.022.617c.726 0 1.423-.213 2.022-.617.087-.058.306-.182.407-.238a6.76 6.76 0 01.557-.22 3.967 3.967 0 011.04-.138c.89 0 1.565.213 2.008.633.103.1.204.238.316.431l.04.073.019.04.025.055.06.14.044.104.036.09a25.933 25.933 0 00.252.585l.004.008c.634 1.461 1.809 4.17 1.778 6.43-.003.262-.129.965-.23 1.296zM16.052 8.45c.252 0 .448.065.586.193.142.135.215.334.215.594 0 .258-.073.457-.215.591-.138.13-.334.194-.586.194-.252 0-.448-.065-.585-.194-.143-.134-.213-.33-.213-.59 0-.261.073-.46.213-.595.134-.128.33-.193.585-.193zm-1.619 1.569c.252 0 .448.064.586.196.143.134.215.333.215.594 0 .257-.072.456-.215.59-.138.13-.334.194-.586.194-.252 0-.448-.064-.585-.193-.14-.135-.216-.33-.216-.591 0-.26.073-.46.216-.594.137-.132.333-.196.585-.196zm2.205 1.762c-.138-.13-.334-.194-.586-.194-.255 0-.45.065-.585.194-.14.134-.213.333-.213.593 0 .261.07.457.213.592.137.128.333.193.585.193.252 0 .448-.065.586-.193.142-.135.215-.334.215-.591 0-.261-.073-.46-.215-.594zm1.03-1.762c.253 0 .449.064.586.196.143.134.216.333.216.594 0 .257-.073.456-.216.59-.137.13-.333.194-.585.194-.255 0-.449-.064-.586-.193-.14-.135-.213-.33-.213-.591 0-.26.073-.46.213-.594.137-.132.333-.196.586-.196zm-7.56-.087c-.185-.177-.46-.263-.818-.263h-.089a.923.923 0 00.008-.107c0-.364-.1-.644-.291-.826-.185-.177-.46-.266-.818-.266-.359 0-.633.092-.815.266-.196.182-.292.46-.292.826 0 .059.006.11.012.16h-.02a1.275 1.275 0 00-.146-.011c-.358 0-.633.092-.815.266-.19.18-.288.456-.288.823 0 .367.098.647.285.824.185.176.46.266.818.266.086 0 .12-.002.157-.005h.011a1.579 1.579 0 00-.016.156c0 .367.095.644.285.82.182.18.46.267.818.267.356 0 .63-.087.818-.263.193-.182.291-.457.291-.821a.846.846 0 00-.022-.177l-.003-.022h.112c.356 0 .633-.09.818-.266.194-.182.291-.457.291-.82 0-.365-.097-.64-.29-.827z"
         })
     }));
-}, g = i;
+}, p = n;

package/dist/menu.js

@@ -144,15 +144,15 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
     const f = D(r).indexOf(d);
     return f < 0 ? null : f;
 }, je = (param)=>{
-    let { label: r , Icon: d , destructive: f , disabled: m , onPress: E , controlType: o , checked: p  } = param;
-    const { focusedItem: s , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = ke(), c = _react.useRef(null), h = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, u = Ne(M, x), l = ()=>o === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
+    let { label: r , Icon: d , destructive: f , disabled: u , onPress: E , controlType: s , checked: p  } = param;
+    const { focusedItem: n , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = ke(), c = _react.useRef(null), h = f ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, m = Ne(M, x), l = ()=>s === "checkbox" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_checkbox.default, {
             ref: c,
             name: r,
             checked: p,
             onChange: ()=>{
-                k && u !== null && (E(u), i());
+                k && m !== null && (E(m), i());
             },
-            disabled: m,
+            disabled: u,
             role: "menuitemcheckbox",
             render: (param)=>/* @__PURE__ */ {
                 let { controlElement: N  } = param;
@@ -191,9 +191,9 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
             ref: c,
             onPress: ()=>{
-                k && u !== null && (E(u), i());
+                k && m !== null && (E(m), i());
             },
-            disabled: m,
+            disabled: u,
             role: "menuitem",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 8,
@@ -219,11 +219,11 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_menucssmistica.menuItem, {
-            [_menucssmistica.menuItemEnabled]: !m,
-            [_menucssmistica.menuItemDisabled]: m,
-            [_menucssmistica.menuItemHovered]: !m && u !== null && s === u
+            [_menucssmistica.menuItemEnabled]: !u,
+            [_menucssmistica.menuItemDisabled]: u,
+            [_menucssmistica.menuItemHovered]: !u && m !== null && n === m
         }),
-        onMouseMove: ()=>v(m ? null : u),
+        onMouseMove: ()=>v(u ? null : m),
         onMouseLeave: ()=>v(null),
         children: l()
     });
@@ -240,45 +240,45 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
 }, V = 12, J = 8, qe = (param)=>{
-    let { renderTarget: r , renderMenu: d , width: f , position: m = "left" , dataAttributes: E  } = param;
-    const [o, p] = _react.useState(!1), [s, v] = _react.useState(null), [i, k] = _react.useState(null), [c, h] = _react.useState(null), [x, M] = _react.useState(!1), u = _react.useRef(null), [l, N] = _react.useState(null), R = (0, _hooks.useWindowSize)();
+    let { renderTarget: r , renderMenu: d , width: f , position: u = "left" , dataAttributes: E  } = param;
+    const [s, p] = _react.useState(!1), [n, v] = _react.useState(null), [i, k] = _react.useState(null), [c, h] = _react.useState(null), [x, M] = _react.useState(!1), m = _react.useRef(null), [l, N] = _react.useState(null), R = (0, _hooks.useWindowSize)();
     _react.useEffect(()=>{
-        const a = s == null ? void 0 : s.getBoundingClientRect();
-        if (!i || !a || !o) return;
-        const { top: t , right: O , left: g , bottom: F  } = a, T = i.scrollHeight, b = m === "left" ? g : void 0, A = m === "right" ? R.width - O : void 0, L = t - J, $ = F + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
+        const a = n == null ? void 0 : n.getBoundingClientRect();
+        if (!i || !a || !s) return;
+        const { top: t , right: O , left: g , bottom: A  } = a, T = i.scrollHeight, I = u === "left" ? g : void 0, F = u === "right" ? R.width - O : void 0, L = t - J, $ = A + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
         N(te ? {
-            left: b,
-            right: A,
+            left: I,
+            right: F,
             top: `${$}px`,
             bottom: "auto",
             maxHeight: B ? void 0 : H,
             transformOrigin: "center top"
         } : {
-            left: b,
-            right: A,
+            left: I,
+            right: F,
             top: "auto",
             bottom: `${R.height - L}px`,
             maxHeight: z ? void 0 : P,
             transformOrigin: "center bottom"
         });
     }, [
-        m,
-        o,
-        i,
+        u,
         s,
+        i,
+        n,
         f,
         R
     ]);
     const Z = _react.useMemo(()=>({
             ref: v,
             onPress: ()=>{
-                p(!o);
+                p(!s);
             }
         }), [
         v,
-        o
+        s
     ]), ee = {
-        ref: (0, _common.combineRefs)(k, u),
+        ref: (0, _common.combineRefs)(k, m),
         className: _menucssmistica.menuContainer,
         close: ()=>p(!1)
     }, w = _react.useCallback(()=>{
@@ -291,24 +291,24 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
         const t = D(i);
         a && t.reverse();
         const O = c === null ? -1 : a ? t.length - 1 - c : c;
-        let g = t.findIndex((b, A)=>!b.getAttribute("aria-disabled") && A > O);
-        g === -1 && (g = t.findIndex((b)=>!b.getAttribute("aria-disabled")));
-        const F = a && g !== -1 ? t.length - 1 - g : g;
-        h(F < 0 ? null : F), (T = t[g]) == null || T.focus();
+        let g = t.findIndex((I, F)=>!I.getAttribute("aria-disabled") && F > O);
+        g === -1 && (g = t.findIndex((I)=>!I.getAttribute("aria-disabled")));
+        const A = a && g !== -1 ? t.length - 1 - g : g;
+        h(A < 0 ? null : A), (T = t[g]) == null || T.focus();
     }, [
         c,
         i
     ]);
     return _react.useEffect(()=>{
-        o ? x && i && (w(), M(!1)) : h(null);
+        s ? x && i && (w(), M(!1)) : h(null);
     }, [
-        o,
+        s,
         w,
         x,
         i
     ]), _react.useEffect(()=>{
         const a = (t)=>{
-            if (o) switch(t.keyCode){
+            if (s) switch(t.keyCode){
                 case _keycodes.RIGHT:
                 case _keycodes.DOWN:
                     (0, _dom.cancelEvent)(t), _();
@@ -334,7 +334,7 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
                     M(!0);
                     break;
                 case _keycodes.DOWN:
-                    s === document.activeElement && (M(!0), p(!0));
+                    n === document.activeElement && (M(!0), p(!0));
                     break;
             }
         };
@@ -342,24 +342,24 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
             document.removeEventListener("keydown", a, !1);
         };
     }), _react.useEffect(()=>{
-        s == null || s.setAttribute("aria-expanded", String(o));
+        n == null || n.setAttribute("aria-haspopup", "menu"), n == null || n.setAttribute("aria-expanded", String(s));
     }, [
-        s,
-        o
+        n,
+        s
     ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(E, "Menu")), {
         children: [
             r(_object_spread_props(_object_spread({}, Z), {
-                isMenuOpen: o
+                isMenuOpen: s
             })),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                    in: o,
-                    nodeRef: u,
+                    in: s,
+                    nodeRef: m,
                     timeout: Ee,
                     classNames: _menucssmistica.menuTransitionClasses,
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    onExit: ()=>s == null ? void 0 : s.focus(),
+                    onExit: ()=>n == null ? void 0 : n.focus(),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                         onPress: (a)=>{
                             (0, _dom.cancelEvent)(a), p(!1);
@@ -382,7 +382,7 @@ const Ee = 120, Q = /*#__PURE__*/ _react.createContext({
                             role: "menu",
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q.Provider, {
                                 value: {
-                                    isMenuOpen: o,
+                                    isMenuOpen: s,
                                     focusedItem: c,
                                     setFocusedItem: h,
                                     closeMenu: ()=>p(!1)

package/dist/package-version.js

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

package/dist/phone-number-field.js

@@ -165,7 +165,7 @@ const P = (r, s)=>(0, _libphonenumber.formatAsYouType)(s.replace(/[^\d+*#]/g, ""
         format: C,
         value: h,
         onChange: y,
-        accept: /[\d\-()+#*]+/g,
+        accept: /[\d\-+#*]+/g,
         replace: (o)=>o.replace(/@/g, "-")
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, p), {

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

@@ -10,21 +10,30 @@ function _export(target, all) {
 }
 _export(exports, {
     backgroundVariant: function() {
+        return o;
+    },
+    expandedResponsiveLayout: function() {
         return n;
     },
-    container: function() {
-        return t;
+    expandedResponsiveLayoutContainer: function() {
+        return r;
     },
     fullWidth: function() {
+        return t;
+    },
+    fullwidthContainer: function() {
         return v;
     },
     responsiveLayout: function() {
-        return e;
+        return i;
+    },
+    responsiveLayoutContainer: function() {
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
-var n = {
+var o = {
     inverse: "_1y2v1nf39",
     alternative: "_1y2v1nf3e"
-}, t = "_1y2v1nfbt", v = "_17lofg76 _1y2v1nfbt", e = "_17lofg74";
+}, n = "_17lofg78", r = "_17lofg73", t = "_17lofg7a _1y2v1nfbt", v = "_17lofg74", i = "_17lofg77", f = "_17lofg72 _1y2v1nfbt";

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

@@ -5,10 +5,13 @@ export declare const LARGE_DESKTOP_MAX_WIDTH = 1224;
 export declare const vars: {
     sideMargin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
-export declare const container: string;
+export declare const responsiveLayoutContainer: string;
+export declare const expandedResponsiveLayoutContainer: string;
+export declare const fullwidthContainer: string;
 export declare const backgroundVariant: {
     inverse: string;
     alternative: string;
 };
 export declare const responsiveLayout: string;
+export declare const expandedResponsiveLayout: string;
 export declare const fullWidth: string;

package/dist/responsive-layout.d.ts

@@ -10,5 +10,8 @@ type Props = {
     backgroundColor?: string;
     dataAttributes?: DataAttributes;
 };
+export declare const InternalResponsiveLayout: React.FC<Props & {
+    shouldExpandWhenNested?: boolean;
+}>;
 declare const ResponsiveLayout: React.FC<Props>;
 export default ResponsiveLayout;

package/dist/responsive-layout.js

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return R;
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InternalResponsiveLayout: function() {
+        return b;
+    },
+    default: function() {
+        return w;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -70,21 +78,56 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const y = (param)=>{
-    let { children: i , isInverse: r = !1 , variant: s , backgroundColor: a , className: o , fullWidth: n , dataAttributes: m  } = param;
-    const d = (0, _themevariantcontext.useThemeVariant)(), t = s || r && "inverse" || void 0;
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const b = (param)=>{
+    let { children: n , isInverse: o = !1 , variant: d , backgroundColor: s , className: m , fullWidth: e , dataAttributes: p , shouldExpandWhenNested: i = !1  } = param;
+    const u = (0, _themevariantcontext.useThemeVariant)(), a = d || o && "inverse" || void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-        variant: t !== null && t !== void 0 ? t : d,
+        variant: a !== null && a !== void 0 ? a : u,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-            className: (0, _classnames.default)(_responsivelayoutcssmistica.container, o, t && t !== "default" && _responsivelayoutcssmistica.backgroundVariant[t]),
-            style: a ? {
-                background: a
+            className: (0, _classnames.default)(e ? _responsivelayoutcssmistica.fullwidthContainer : _responsivelayoutcssmistica.responsiveLayoutContainer, m, a && a !== "default" && _responsivelayoutcssmistica.backgroundVariant[a], i && !e && _responsivelayoutcssmistica.expandedResponsiveLayoutContainer),
+            style: s ? {
+                background: s
             } : void 0
-        }, (0, _dom.getPrefixedDataAttributes)(m)), {
+        }, (0, _dom.getPrefixedDataAttributes)(p)), {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: n ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout,
-                children: i
+                className: (0, _classnames.default)(e ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout, i && !e && _responsivelayoutcssmistica.expandedResponsiveLayout),
+                children: n
             })
         }))
     });
-}, R = y;
+}, g = (_param)=>/* @__PURE__ */ {
+    var { children: n  } = _param, o = _object_without_properties(_param, [
+        "children"
+    ]);
+    return (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, o), {
+        shouldExpandWhenNested: !0,
+        children: n
+    }));
+}, w = g;

package/dist/sheet.css-mistica.js

@@ -25,10 +25,10 @@ _export(exports, {
         return c;
     },
     closingOverlay: function() {
-        return a;
+        return l;
     },
     closingSheet: function() {
-        return l;
+        return a;
     },
     handle: function() {
         return r;
@@ -37,10 +37,10 @@ _export(exports, {
         return t;
     },
     infoItemIcon: function() {
-        return b;
+        return o;
     },
     modalCloseButton: function() {
-        return o;
+        return b;
     },
     modalCloseButtonIcon: function() {
         return i;
@@ -52,10 +52,10 @@ _export(exports, {
         return d;
     },
     stickyButtons: function() {
-        return s;
+        return h;
     },
     stickyTitle: function() {
-        return h;
+        return s;
     },
     transitionDuration: function() {
         return C;
@@ -63,4 +63,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./sheet.css.ts.vanilla.css-mistica.js");
-var y = "cylz3v5 _1y2v1nf30", f = "cylz3v3 _1y2v1nfb2 _1y2v1nfer _1y2v1nff6 _1y2v1nffl", _ = "cylz3v8 _1y2v1nf6n _1y2v1nfb6 _1y2v1nfbc", e = "cylz3vn", c = "_1y2v1nfeb _1y2v1nfbs _1y2v1nfb6 _1y2v1nfbc", a = "cylz3vk", l = "cylz3v6", r = "_1y2v1nf44 _1y2v1nfc2 _1y2v1nfcd _1y2v1nfdq", t = "cylz3vb _1y2v1nf68 _1y2v1nf7h _1y2v1nfb1 _1y2v1nfec _1y2v1nfcn _1y2v1nfbt _1y2v1nfb6 _1y2v1nfbf", b = "_1y2v1nfb6 _1y2v1nfbl _1y2v1nfci", o = "cylz3ve _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb1 _1y2v1nfec _1y2v1nff6", i = "cylz3vg _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp", z = "cylz3vj _1y2v1nfb2 _1y2v1nf3b _1y2v1nfec _1y2v1nfer _1y2v1nff6 _1y2v1nffl", d = "cylz3vp _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb6 _1y2v1nfdj _1y2v1nfbl", s = "_1y2v1nfb4 _1y2v1nffl _1y2v1nf30", h = "_1y2v1nfb4 _1y2v1nfec _1y2v1nf30", C = 400;
+var y = "cylz3v6 _1y2v1nf30", f = "cylz3v4 _1y2v1nfb2 _1y2v1nfer _1y2v1nff6 _1y2v1nffl", _ = "cylz3v9 _1y2v1nf6n _1y2v1nfb6 _1y2v1nfbc", e = "cylz3vo", c = "_1y2v1nfeb _1y2v1nfbs _1y2v1nfb6 _1y2v1nfbc", l = "cylz3vl", a = "cylz3v7", r = "_1y2v1nf44 _1y2v1nfc2 _1y2v1nfcd _1y2v1nfdq", t = "cylz3vc _1y2v1nf68 _1y2v1nf7h _1y2v1nfb1 _1y2v1nfec _1y2v1nfcn _1y2v1nfbt _1y2v1nfb6 _1y2v1nfbf", o = "_1y2v1nfb6 _1y2v1nfbl _1y2v1nfci", b = "cylz3vf _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb1 _1y2v1nfec _1y2v1nff6", i = "cylz3vh _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp", z = "cylz3vk _1y2v1nfb2 _1y2v1nf3b _1y2v1nfec _1y2v1nfer _1y2v1nff6 _1y2v1nffl", d = "cylz3vq _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb6 _1y2v1nfdj _1y2v1nfbl", h = "_1y2v1nfb4 _1y2v1nffl _1y2v1nf30", s = "_1y2v1nfb4 _1y2v1nfec _1y2v1nf30", C = 400;

package/dist/sheet.css.d.ts

@@ -1,3 +1,6 @@
+export declare const vars: {
+    insideSheetDialog: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
 export declare const transitionDuration: number;
 export declare const SheetContainer: string;
 export declare const Sheet: string;

package/dist/sheet.js

@@ -40,7 +40,6 @@ const _text = require("./text.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _radiobutton = require("./radio-button.js");
 const _list = require("./list.js");
-const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
 const _negativebox = /*#__PURE__*/ _interop_require_default(require("./negative-box.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
@@ -54,6 +53,7 @@ const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./gene
 const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 const _buttonlayout = /*#__PURE__*/ _interop_require_default(require("./button-layout.js"));
 const _image = /*#__PURE__*/ _interop_require_default(require("./image.js"));
+const _responsivelayout = require("./responsive-layout.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -369,7 +369,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                             mobile: 0,
                             desktop: 40
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
                                 as: "h2",
                                 id: f,
@@ -393,7 +393,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                         desktop: 40,
                         mobile: 0
                     },
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 8,
                             children: [
@@ -442,7 +442,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                             mobile: 16,
                             desktop: 40
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_buttonlayout.default, {
                                 align: "full-width",
                                 link: s,

package/dist/touchable.d.ts

@@ -14,6 +14,7 @@ interface CommonProps {
     'aria-checked'?: 'true' | 'false' | boolean;
     'aria-controls'?: string;
     'aria-expanded'?: 'true' | 'false' | boolean;
+    'aria-haspopup'?: 'true' | 'false' | 'menu' | 'dialog' | boolean;
     'aria-hidden'?: 'true' | 'false' | boolean;
     'aria-selected'?: 'true' | 'false' | boolean;
     'aria-labelledby'?: string;

package/dist/touchable.js

@@ -126,8 +126,8 @@ const L = function(e) {
     t ? window.open(e, "_blank") : d ? window.open(e, "_top") : document.location.href = e;
 }, T = /*#__PURE__*/ _react.forwardRef((e, t)=>{
     const { texts: d , analytics: v , platformOverrides: N , Link: P , useHrefDecorator: E  } = (0, _hooks.useTheme)(), C = E(), f = _react.useRef(!1);
-    let i = [];
-    e.trackingEvent && (Array.isArray(e.trackingEvent) ? i = e.trackingEvent : i = [
+    let l = [];
+    e.trackingEvent && (Array.isArray(e.trackingEvent) ? l = e.trackingEvent : l = [
         e.trackingEvent
     ]);
     var _e_to_pathname;
@@ -140,28 +140,29 @@ const L = function(e) {
         "aria-disabled": e.disabled ? !0 : void 0,
         "aria-controls": e["aria-controls"],
         "aria-expanded": e["aria-expanded"],
+        "aria-haspopup": e["aria-haspopup"],
         "aria-hidden": e["aria-hidden"],
         "aria-selected": e["aria-selected"],
         "aria-live": e["aria-live"],
         tabIndex: e.tabIndex
-    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", r = !!e.href && !!e.newTab, m = !r && !!e.href && !!e.loadOnTop, b = (a)=>{
+    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = e.type ? e.type : "button", r = !!e.href && !!e.newTab, m = !r && !!e.href && !!e.loadOnTop, s = (a)=>{
         e.stopPropagation && a.stopPropagation();
     }, h = (a)=>{
         e.onPress && e.onPress(a);
-    }, k = ()=>e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "", y = ()=>Promise.all(i.map((a)=>v.logEvent(a))), g = (a)=>{
+    }, k = ()=>e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "", y = ()=>Promise.all(l.map((a)=>v.logEvent(a))), g = (a)=>{
         f.current || (f.current = !0, y().finally(()=>{
             f.current = !1, a();
         }));
     }, x = (a)=>{
-        if (b(a), !i.length) {
+        if (s(a), !l.length) {
             h(a);
             return;
         }
         g(()=>h(a));
     }, R = (a)=>{
-        b(a), i.length && (a.preventDefault(), g(()=>L(k(), r, m)));
+        s(a), l.length && (a.preventDefault(), g(()=>L(k(), r, m)));
     }, D = (a)=>{
-        b(a), y();
+        s(a), y();
     }, w = (a)=>{
         (a.keyCode === _keycodes.ENTER || a.keyCode === _keycodes.SPACE) && (a.preventDefault(), a.currentTarget.click());
     };

package/dist-es/button-fixed-footer-layout.js

@@ -2,10 +2,10 @@ import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import p from "./fixed-footer-layout.js";
 import c from "./button-layout.js";
 import { useScreenSize as x } from "./hooks.js";
-import F from "./responsive-layout.js";
+import { InternalResponsiveLayout as F } from "./responsive-layout.js";
 import h from "./box.js";
 const B = (param)=>{
-    let { isFooterVisible: i = !0 , button: t , secondaryButton: r , link: s , children: n , desktopButtonAlign: a = "left" , footerBgColor: l , containerBgColor: m , onChangeFooterHeight: u  } = param;
+    let { isFooterVisible: i = !0 , button: t , secondaryButton: r , link: n , children: s , desktopButtonAlign: a = "left" , footerBgColor: l , containerBgColor: m , onChangeFooterHeight: u  } = param;
     const { isTabletOrSmaller: e , isTablet: f  } = x();
     return /* @__PURE__ */ o(p, {
         onChangeFooterHeight: u,
@@ -17,7 +17,7 @@ const B = (param)=>{
                 paddingY: f ? 32 : e ? 16 : 0,
                 children: /* @__PURE__ */ d(c, {
                     align: e ? "full-width" : a,
-                    link: s,
+                    link: n,
                     children: [
                         t,
                         r
@@ -25,7 +25,7 @@ const B = (param)=>{
                 })
             })
         }),
-        children: n
+        children: s
     });
 }, v = B;
 export { v as default };