@telefonica/mistica 16.72.0 → 17.1.0

package/dist-es/select.css-mistica.js

@@ -1,20 +1,20 @@
 /* empty css                                     */ /* empty css                                       */ /* empty css                                           */ /* empty css                                  */ var f = {
-    top: "var(--v16_72_1sqpivv0)",
-    left: "var(--v16_72_1sqpivv1)",
-    transformOrigin: "var(--v16_72_1sqpivv2)",
-    minWidth: "var(--v16_72_1sqpivv3)",
-    maxHeight: "var(--v16_72_1sqpivv4)"
-}, s = "v16_72_1sqpivv6 v16_72_1sqpivv5 v16_72_1y2v1nffx v16_72_1y2v1nfh6 v16_72_1y2v1nfif v16_72_1y2v1nfjo v16_72_1y2v1nfq0 v16_72_1y2v1nfsv v16_72_1y2v1nf83", p = {
-    show: "v16_72_1sqpivv7",
-    hide: "v16_72_1sqpivv8"
+    top: "var(--v17_1_1sqpivv0)",
+    left: "var(--v17_1_1sqpivv1)",
+    transformOrigin: "var(--v17_1_1sqpivv2)",
+    minWidth: "var(--v17_1_1sqpivv3)",
+    maxHeight: "var(--v17_1_1sqpivv4)"
+}, s = "v17_1_1sqpivv6 v17_1_1sqpivv5 v17_1_1y2v1nfh3 v17_1_1y2v1nfic v17_1_1y2v1nfjl v17_1_1y2v1nfku v17_1_1y2v1nfr6 v17_1_1y2v1nfu1 v17_1_1y2v1nf8x", p = {
+    show: "v17_1_1sqpivv7",
+    hide: "v17_1_1sqpivv8"
 }, y = {
-    default: "v16_72_1sqpivvd v16_72_1sqpivvc v16_72_1sqpivvb v16_72_1y2v1nfpy v16_72_1y2v1nft6",
-    fullWidth: "v16_72_1sqpivve v16_72_1sqpivvc v16_72_1sqpivvb v16_72_1y2v1nfpy v16_72_1y2v1nft6"
-}, q = {
-    default: "v16_72_1sqpivvh v16_72_1sqpivvg v16_72_1sqpivvf v16_72_1y2v1nffx v16_72_1y2v1nfh6 v16_72_1y2v1nfsm v16_72_1y2v1nft7 v16_72_1y2v1nf4x v16_72_1y2v1nffw v16_72_1y2v1nfqr v16_72_1y2v1nfsv",
-    disabled: "v16_72_1sqpivvi v16_72_1sqpivvg v16_72_1sqpivvf v16_72_1y2v1nffx v16_72_1y2v1nfh6 v16_72_1y2v1nfsm v16_72_1y2v1nft7 v16_72_1y2v1nf4x v16_72_1y2v1nffw v16_72_1y2v1nfqr v16_72_1y2v1nfsv"
-}, t = {
-    default: "v16_72_1sqpivvl v16_72_1sqpivvk v16_72_1sqpivvj v16_72_1y2v1nfpz v16_72_1y2v1nft7 v16_72_1y2v1nfsj v16_72_1y2v1nf4x",
-    disabled: "v16_72_1sqpivvm v16_72_1sqpivvk v16_72_1sqpivvj v16_72_1y2v1nfpz v16_72_1y2v1nft7 v16_72_1y2v1nfsj v16_72_1y2v1nf4x"
-}, a = "v16_72_1sqpivvo v16_72_1sqpivvn v16_72_1y2v1nfpz", r = "v16_72_1sqpivvp", e = "v16_72_1sqpivvr v16_72_1sqpivvq v16_72_1y2v1nfio v16_72_1y2v1nfjx v16_72_1y2v1nfg6 v16_72_1y2v1nfhf v16_72_1y2v1nf4x v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nft6", o = "v16_72_1sqpivvs v16_72_1y2v1nf7z";
-export { a as arrowDown, r as iconContainer, e as menuItem, o as menuItemSelected, p as optionsAnimationsVariants, s as optionsContainer, y as selectContainerVariants, t as selectTextVariants, q as selectVariants, f as vars };
+    default: "v17_1_1sqpivvd v17_1_1sqpivvc v17_1_1sqpivvb v17_1_1y2v1nfr4 v17_1_1y2v1nfuc",
+    fullWidth: "v17_1_1sqpivve v17_1_1sqpivvc v17_1_1sqpivvb v17_1_1y2v1nfr4 v17_1_1y2v1nfuc"
+}, r = {
+    default: "v17_1_1sqpivvh v17_1_1sqpivvg v17_1_1sqpivvf v17_1_1y2v1nfh3 v17_1_1y2v1nfic v17_1_1y2v1nfts v17_1_1y2v1nfud v17_1_1y2v1nf5i v17_1_1y2v1nfh2 v17_1_1y2v1nfrx v17_1_1y2v1nfu1",
+    disabled: "v17_1_1sqpivvi v17_1_1sqpivvg v17_1_1sqpivvf v17_1_1y2v1nfh3 v17_1_1y2v1nfic v17_1_1y2v1nfts v17_1_1y2v1nfud v17_1_1y2v1nf5i v17_1_1y2v1nfh2 v17_1_1y2v1nfrx v17_1_1y2v1nfu1"
+}, a = {
+    default: "v17_1_1sqpivvl v17_1_1sqpivvk v17_1_1sqpivvj v17_1_1y2v1nfr5 v17_1_1y2v1nfud v17_1_1y2v1nftp v17_1_1y2v1nf5i",
+    disabled: "v17_1_1sqpivvm v17_1_1sqpivvk v17_1_1sqpivvj v17_1_1y2v1nfr5 v17_1_1y2v1nfud v17_1_1y2v1nftp v17_1_1y2v1nf5i"
+}, t = "v17_1_1sqpivvo v17_1_1sqpivvn v17_1_1y2v1nfr5", q = "v17_1_1sqpivvp", e = "v17_1_1sqpivvr v17_1_1sqpivvq v17_1_1y2v1nfju v17_1_1y2v1nfl3 v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nf5i v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nfuc", o = "v17_1_1sqpivvs v17_1_1y2v1nf8k";
+export { t as arrowDown, q as iconContainer, e as menuItem, o as menuItemSelected, p as optionsAnimationsVariants, s as optionsContainer, y as selectContainerVariants, a as selectTextVariants, r as selectVariants, f as vars };

package/dist-es/sheet-action-row.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                            */ var n = "v16_72_4k81wx1 v16_72_4k81wx0 v16_72_1y2v1nfgc v16_72_1y2v1nfhl v16_72_1y2v1nfiu v16_72_1y2v1nfk3 v16_72_1y2v1nfq4 v16_72_1y2v1nfsh v16_72_1y2v1nfqj";
+/* empty css                                     */ /* empty css                                            */ var n = "v17_1_4k81wx1 v17_1_4k81wx0 v17_1_1y2v1nfhi v17_1_1y2v1nfir v17_1_1y2v1nfk0 v17_1_1y2v1nfl9 v17_1_1y2v1nfra v17_1_1y2v1nftn v17_1_1y2v1nfrp";
 export { n as sheetActionRow };

package/dist-es/sheet-common.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                        */ var f = 400, n = "v16_72_pidemf4 v16_72_pidemf3 v16_72_1y2v1nfq0 v16_72_1y2v1nfts v16_72_1y2v1nfu7 v16_72_1y2v1nfum", e = "v16_72_pidemf6 v16_72_pidemf5 v16_72_1y2v1nf7y", y = "v16_72_pidemf7", i = "v16_72_pidemf9 v16_72_pidemf8 v16_72_1y2v1nfgl v16_72_1y2v1nfq4 v16_72_1y2v1nfqa", d = "v16_72_pidemfa v16_72_1y2v1nftc v16_72_1y2v1nfqq v16_72_1y2v1nfq4 v16_72_1y2v1nfqa", r = "v16_72_pidemfc v16_72_pidemfb v16_72_1y2v1nfg6 v16_72_1y2v1nfhf v16_72_1y2v1nfpz v16_72_1y2v1nftd v16_72_1y2v1nfrl v16_72_1y2v1nfqr v16_72_1y2v1nfq4 v16_72_1y2v1nfqd", p = "v16_72_pidemfe v16_72_pidemfd v16_72_1y2v1nfq3", m = "v16_72_pidemff v16_72_1y2v1nfbk v16_72_1y2v1nfr0 v16_72_1y2v1nfrb v16_72_1y2v1nfsp", t = "v16_72_pidemfi v16_72_pidemfh v16_72_1y2v1nfq0 v16_72_1y2v1nf8e v16_72_1y2v1nftd v16_72_1y2v1nfts v16_72_1y2v1nfu7 v16_72_1y2v1nfum", a = "v16_72_pidemfj", o = "v16_72_pidemfl v16_72_pidemfk v16_72_1y2v1nfpz", q = "v16_72_pidemfn v16_72_pidemfm v16_72_1y2v1nfq2 v16_72_1y2v1nftd v16_72_1y2v1nf7y", s = "v16_72_pidemfp v16_72_pidemfo v16_72_1y2v1nfq2 v16_72_1y2v1nfum v16_72_1y2v1nf7y", l = "v16_72_pidemfq";
-export { e as Sheet, n as SheetContainer, i as SheetContent, l as bodyContent, d as children, a as closingOverlay, y as closingSheet, o as dismissButton, m as handleBar, p as handleContainer, t as overlay, r as sheetTopDraggingArea, s as stickyButtons, q as stickyTitle, f as transitionDuration };
+/* empty css                                     */ /* empty css                                        */ var f = 400, n = "v17_1_pidemf4 v17_1_pidemf3 v17_1_1y2v1nfr6 v17_1_1y2v1nfuy v17_1_1y2v1nfvd v17_1_1y2v1nfvs", e = "v17_1_pidemf6 v17_1_pidemf5 v17_1_1y2v1nf8j", r = "v17_1_pidemf7", y = "v17_1_pidemf9 v17_1_pidemf8 v17_1_1y2v1nfhr v17_1_1y2v1nfra v17_1_1y2v1nfrg", i = "v17_1_pidemfa v17_1_1y2v1nfui v17_1_1y2v1nfrw v17_1_1y2v1nfra v17_1_1y2v1nfrg", d = "v17_1_pidemfc v17_1_pidemfb v17_1_1y2v1nfhc v17_1_1y2v1nfil v17_1_1y2v1nfr5 v17_1_1y2v1nfuj v17_1_1y2v1nfsr v17_1_1y2v1nfrx v17_1_1y2v1nfra v17_1_1y2v1nfrj", a = "v17_1_pidemfe v17_1_pidemfd v17_1_1y2v1nfr9", p = "v17_1_pidemff v17_1_1y2v1nfcq v17_1_1y2v1nfs6 v17_1_1y2v1nfsh v17_1_1y2v1nftv", m = "v17_1_pidemfi v17_1_pidemfh v17_1_1y2v1nfr6 v17_1_1y2v1nf98 v17_1_1y2v1nfuj v17_1_1y2v1nfuy v17_1_1y2v1nfvd v17_1_1y2v1nfvs", t = "v17_1_pidemfj", o = "v17_1_pidemfl v17_1_pidemfk v17_1_1y2v1nfr5", s = "v17_1_pidemfn v17_1_pidemfm v17_1_1y2v1nfr8 v17_1_1y2v1nfuj v17_1_1y2v1nf8j", h = "v17_1_pidemfp v17_1_pidemfo v17_1_1y2v1nfr8 v17_1_1y2v1nfvs v17_1_1y2v1nf8j", l = "v17_1_pidemfq";
+export { e as Sheet, n as SheetContainer, y as SheetContent, l as bodyContent, i as children, t as closingOverlay, r as closingSheet, o as dismissButton, p as handleBar, a as handleContainer, m as overlay, d as sheetTopDraggingArea, h as stickyButtons, s as stickyTitle, f as transitionDuration };

package/dist-es/sheet-common.js

@@ -78,69 +78,69 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as e, jsxs as h, Fragment as C } from "react/jsx-runtime";
-import y from "classnames";
+import { jsx as e, jsxs as p, Fragment as C } from "react/jsx-runtime";
+import R from "classnames";
 import * as t from "react";
-import { transitionDuration as L, overlay as A, closingOverlay as M, Sheet as P, SheetContent as Y, sheetTopDraggingArea as O, children as _, handleContainer as F, handleBar as j, dismissButton as G, SheetContainer as H, closingSheet as V, stickyTitle as z, bodyContent as W, stickyButtons as X } from "./sheet-common.css-mistica.js";
+import { transitionDuration as L, overlay as A, closingOverlay as M, Sheet as P, SheetContent as Y, sheetTopDraggingArea as O, children as F, handleContainer as _, handleBar as j, dismissButton as H, SheetContainer as V, closingSheet as z, stickyTitle as G, bodyContent as W, stickyButtons as X } from "./sheet-common.css-mistica.js";
 import $ from "./focus-trap.js";
-import { useTheme as q, useScreenSize as w, useDisableBodyScroll as J, useIsWithinIFrame as K, useIsInViewport as D } from "./hooks.js";
-import { useSetModalStateEffect as Q } from "./modal-context-provider.js";
-import { Portal as U } from "./portal.js";
-import { Text5 as Z, Text3 as ee, Text2 as b } from "./text.js";
-import { vars as B } from "./skins/skin-contract.css-mistica.js";
-import I from "./stack.js";
+import { useTheme as w, useScreenSize as x, useDisableBodyScroll as q, useIsWithinIFrame as J, useIsInViewport as b } from "./hooks.js";
+import { useSetModalStateEffect as K } from "./modal-context-provider.js";
+import { Portal as Q } from "./portal.js";
+import { Text5 as U, Text3 as Z, Text2 as D } from "./text.js";
+import B from "./stack.js";
 import T from "./box.js";
-import N from "./divider.js";
-import { getPrefixedDataAttributes as te, getScrollableParentElement as ne } from "./utils/dom.js";
-import re from "./generated/mistica-icons/icon-close-regular.js";
-import { IconButton as oe } from "./icon-button.js";
-import se from "./button-layout.js";
-import { safeAreaInsetBottom as ie } from "./utils/css.js";
-import { TABLET_SIDE_MARGIN as ae, MOBILE_SIDE_MARGIN as ce } from "./responsive-layout.css-mistica.js";
-import { modalClose as le } from "./text-tokens.js";
-const de = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.touches[0].clientY : r.clientY, ue = (param)=>{
+import I from "./divider.js";
+import { getPrefixedDataAttributes as ee, getScrollableParentElement as te } from "./utils/dom.js";
+import ne from "./generated/mistica-icons/icon-close-regular.js";
+import { IconButton as re } from "./icon-button.js";
+import oe from "./button-layout.js";
+import { safeAreaInsetBottom as se } from "./utils/css.js";
+import { TABLET_SIDE_MARGIN as ie } from "./responsive-layout.css-mistica.js";
+import { modalClose as ae } from "./text-tokens.js";
+import { vars as N } from "./skins/skin-contract.css-mistica.js";
+const ce = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.touches[0].clientY : r.clientY, le = (param)=>{
     let { closeModal: r } = param;
-    const [o, s] = t.useState(0), d = t.useRef(!1), f = t.useRef(0), g = t.useRef(0), u = t.useRef(0), n = t.useRef(0), { isDesktopOrBigger: i } = w(), c = t.useCallback((l)=>{
-        d.current = !0, f.current = 0, g.current = Date.now(), u.current = k(l);
-    }, []), p = t.useCallback(()=>{
-        d.current = !1, s(0);
+    const [o, i] = t.useState(0), d = t.useRef(!1), f = t.useRef(0), h = t.useRef(0), u = t.useRef(0), n = t.useRef(0), { isDesktopOrBigger: c } = x(), m = t.useCallback((s)=>{
+        d.current = !0, f.current = 0, h.current = Date.now(), u.current = k(s);
+    }, []), g = t.useCallback(()=>{
+        d.current = !1, i(0);
     }, []);
     return t.useEffect(()=>{
-        if (i) return;
-        const l = (a)=>{
+        if (c) return;
+        const s = (l)=>{
             if (d.current) {
                 if (f.current < 3) {
                     f.current++;
                     return;
                 }
-                n.current = k(a), s(n.current - u.current);
+                n.current = k(l), i(n.current - u.current);
             }
-        }, m = ()=>{
+        }, a = ()=>{
             if (!d.current) return;
-            const a = Date.now() - g.current, v = n.current - u.current, S = v / a;
-            d.current = !1, s(0), v > 50 && (n.current > window.innerHeight * 0.75 || S > 0.5) && r();
+            const l = Date.now() - h.current, S = n.current - u.current, E = S / l;
+            d.current = !1, i(0), S > 50 && (n.current > window.innerHeight * 0.75 || E > 0.5) && r();
         };
-        return document.addEventListener("touchmove", l), document.addEventListener("touchend", m), document.addEventListener("mousemove", l), document.addEventListener("mouseup", m), ()=>{
-            document.removeEventListener("touchmove", l), document.removeEventListener("touchend", m), document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", m);
+        return document.addEventListener("touchmove", s), document.addEventListener("touchend", a), document.addEventListener("mousemove", s), document.addEventListener("mouseup", a), ()=>{
+            document.removeEventListener("touchmove", s), document.removeEventListener("touchend", a), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", a);
         };
     }, [
         r,
-        i
-    ]), i ? {} : {
-        onTouchStart: c,
-        onMouseDown: c,
+        c
+    ]), c ? {} : {
+        onTouchStart: m,
+        onMouseDown: m,
         style: o ? {
             transform: `translateY(${o}px)`,
             transition: "none"
         } : void 0,
-        onScroll: p,
+        onScroll: g,
         overlayStyle: o ? {
             // decrease opacity when dragging down the sheet
             opacity: 0.25 + 1 - o / (window.innerHeight - u.current),
             transition: "none"
         } : void 0
     };
-}, me = {
+}, de = {
     closed: {
         open: "opening"
     },
@@ -154,79 +154,79 @@ const de = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.
     closing: {
         transitionEnd: "closed"
     }
-}, fe = (r, o)=>me[r][o] || r, Ae = /*#__PURE__*/ t.forwardRef((param, d)=>{
-    let { onClose: r, children: o, dataAttributes: s } = param;
-    const { texts: f, t: g } = q(), { isTabletOrSmaller: u } = w(), [n, i] = t.useReducer(fe, "closed"), c = t.useRef(!1), p = t.useId(), l = K(), m = t.useCallback((E)=>{
-        E.target === E.currentTarget && i("transitionEnd");
-    }, []), a = ()=>{
-        n === "open" && i("close");
+}, ue = (r, o)=>de[r][o] || r, Ce = /*#__PURE__*/ t.forwardRef((param, d)=>{
+    let { onClose: r, children: o, dataAttributes: i } = param;
+    const { texts: f, t: h } = w(), { isTabletOrSmaller: u } = x(), [n, c] = t.useReducer(ue, "closed"), m = t.useRef(!1), g = t.useId(), s = J(), a = t.useCallback((v)=>{
+        v.target === v.currentTarget && c("transitionEnd");
+    }, []), l = ()=>{
+        n === "open" && c("close");
     };
     t.useEffect(()=>{
         if (n === "opening" || n === "closing") {
-            const E = setTimeout(()=>{
-                i("transitionEnd");
-            }, de);
-            return ()=>clearTimeout(E);
+            const v = setTimeout(()=>{
+                c("transitionEnd");
+            }, ce);
+            return ()=>clearTimeout(v);
         }
     }, [
         n
     ]), t.useEffect(()=>{
-        n === "closed" ? c.current ? r === null || r === void 0 ? void 0 : r() : i("open") : c.current = !0;
+        n === "closed" ? m.current ? r === null || r === void 0 ? void 0 : r() : c("open") : m.current = !0;
     }, [
         n,
         r
     ]);
-    const _ue = ue({
-        closeModal: a
-    }), { onScroll: v, overlayStyle: S } = _ue, x = _object_without_properties(_ue, [
+    const _le = le({
+        closeModal: l
+    }), { onScroll: S, overlayStyle: E } = _le, y = _object_without_properties(_le, [
         "onScroll",
         "overlayStyle"
     ]);
-    return Q(), J(n !== "closed"), n === "closed" ? null : /* @__PURE__ */ e(U, {
-        children: /* @__PURE__ */ h($, {
-            disabled: l,
+    return K(), q(n !== "closed"), n === "closed" ? null : /* @__PURE__ */ e(Q, {
+        children: /* @__PURE__ */ p($, {
+            disabled: s,
             children: [
                 /* @__PURE__ */ e("div", {
-                    className: y(A, {
+                    className: R(A, {
                         [M]: n === "closing"
                     }),
-                    style: S,
-                    onClick: a
+                    style: E,
+                    onClick: l
                 }),
                 /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-                    className: y(H, {
-                        [V]: n === "closing"
+                    className: R(V, {
+                        [z]: n === "closing"
                     }),
-                    onTransitionEnd: m,
-                    onAnimationEnd: m
-                }, x, te(_object_spread({
+                    onTransitionEnd: a,
+                    onAnimationEnd: a
+                }, y, ee(_object_spread({
                     testid: "Sheet"
-                }, s))), {
+                }, i))), {
                     ref: d,
                     children: /* @__PURE__ */ e("div", {
                         className: P,
-                        children: /* @__PURE__ */ h("div", {
+                        children: /* @__PURE__ */ p("div", {
                             className: Y,
                             children: [
                                 /* @__PURE__ */ e("div", {
                                     className: O
                                 }),
-                                /* @__PURE__ */ h("section", {
+                                /* @__PURE__ */ p("section", {
                                     role: "dialog",
                                     "aria-modal": "true",
-                                    "aria-labelledby": p,
-                                    onScroll: v,
-                                    className: _,
+                                    "aria-labelledby": g,
+                                    onScroll: S,
+                                    className: F,
                                     style: {
-                                        paddingBottom: ie
+                                        paddingBottom: se
                                     },
                                     children: [
                                         typeof o == "function" ? o({
-                                            closeModal: a,
-                                            modalTitleId: p
+                                            closeModal: l,
+                                            modalTitleId: g
                                         }) : o,
                                         /* @__PURE__ */ e("div", {
-                                            className: F,
+                                            className: _,
                                             children: /* @__PURE__ */ e("div", {
                                                 className: j
                                             })
@@ -234,12 +234,12 @@ const de = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.
                                     ]
                                 }),
                                 /* @__PURE__ */ e("div", {
-                                    className: G,
-                                    children: /* @__PURE__ */ e(oe, {
+                                    className: H,
+                                    children: /* @__PURE__ */ e(re, {
                                         small: u,
-                                        onPress: a,
-                                        "aria-label": f.modalClose || g(le),
-                                        Icon: re
+                                        onPress: l,
+                                        "aria-label": f.modalClose || h(ae),
+                                        Icon: ne
                                     })
                                 })
                             ]
@@ -249,30 +249,30 @@ const de = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.
             ]
         })
     });
-}), R = {
-    mobile: ce,
-    tablet: ae,
-    desktop: 40
-}, Me = (param)=>{
-    let { title: r, subtitle: o, description: s, modalTitleId: d, button: f, secondaryButton: g, link: u, children: n } = param;
-    const i = t.useRef(null), c = t.useRef(null), p = t.useRef(null);
+}), Le = (param)=>{
+    let { title: r, subtitle: o, description: i, modalTitleId: d, button: f, secondaryButton: h, link: u, children: n } = param;
+    const { spacing: c } = w(), m = {
+        mobile: c.responsiveLayoutMargin.mobile,
+        tablet: ie,
+        desktop: 40
+    }, g = t.useRef(null), s = t.useRef(null), a = t.useRef(null);
     t.useEffect(()=>{
-        c.current && (p.current = ne(c.current));
+        s.current && (a.current = te(s.current));
     }, []);
-    const l = !D(i, !0, {
-        root: p.current
-    }), m = !D(c, !0, {
+    const l = !b(g, !0, {
+        root: a.current
+    }), S = !b(s, !0, {
         rootMargin: "1px",
         // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
-        root: p.current
-    }), a = !!f || !!g || !!u;
-    return /* @__PURE__ */ h(C, {
+        root: a.current
+    }), E = !!f || !!h || !!u;
+    return /* @__PURE__ */ p(C, {
         children: [
             /* @__PURE__ */ e("div", {
-                ref: i
+                ref: g
             }),
-            /* @__PURE__ */ h("div", {
-                className: z,
+            /* @__PURE__ */ p("div", {
+                className: G,
                 children: [
                     r ? /* @__PURE__ */ e(T, {
                         paddingBottom: 8,
@@ -280,8 +280,8 @@ const de = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.
                             mobile: 0,
                             desktop: 40
                         },
-                        paddingX: R,
-                        children: /* @__PURE__ */ e(Z, {
+                        paddingX: m,
+                        children: /* @__PURE__ */ e(U, {
                             as: "h2",
                             id: d,
                             truncate: !0,
@@ -293,47 +293,47 @@ const de = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.
                             desktop: 40
                         }
                     }),
-                    l && /* @__PURE__ */ e(N, {})
+                    l && /* @__PURE__ */ e(I, {})
                 ]
             }),
             /* @__PURE__ */ e("div", {
                 className: W,
                 children: /* @__PURE__ */ e(T, {
-                    paddingBottom: a ? 0 : {
+                    paddingBottom: E ? 0 : {
                         desktop: 40,
                         mobile: 0
                     },
-                    paddingX: R,
-                    children: /* @__PURE__ */ h(I, {
+                    paddingX: m,
+                    children: /* @__PURE__ */ p(B, {
                         space: 8,
                         children: [
-                            o || s ? /* @__PURE__ */ h(I, {
+                            o || i ? /* @__PURE__ */ p(B, {
                                 space: {
                                     mobile: 8,
                                     desktop: 16
                                 },
                                 children: [
-                                    o && /* @__PURE__ */ e(ee, {
+                                    o && /* @__PURE__ */ e(Z, {
                                         as: "p",
                                         regular: !0,
                                         children: o
                                     }),
-                                    s && (Array.isArray(s) ? /* @__PURE__ */ e(b, {
+                                    i && (Array.isArray(i) ? /* @__PURE__ */ e(D, {
                                         as: "div",
                                         regular: !0,
-                                        color: B.colors.textSecondary,
-                                        children: s.map((v, S)=>/* @__PURE__ */ e("p", {
+                                        color: N.colors.textSecondary,
+                                        children: i.map((y, v)=>/* @__PURE__ */ e("p", {
                                                 style: {
                                                     margin: 0,
-                                                    marginBottom: S < s.length - 1 ? "1em" : void 0
+                                                    marginBottom: v < i.length - 1 ? "1em" : void 0
                                                 },
-                                                children: v
-                                            }, S))
-                                    }) : /* @__PURE__ */ e(b, {
+                                                children: y
+                                            }, v))
+                                    }) : /* @__PURE__ */ e(D, {
                                         as: "p",
                                         regular: !0,
-                                        color: B.colors.textSecondary,
-                                        children: s
+                                        color: N.colors.textSecondary,
+                                        children: i
                                     }))
                                 ]
                             }) : null,
@@ -342,29 +342,29 @@ const de = process.env.NODE_ENV === "test" ? 0 : L, k = (r)=>"touches" in r ? r.
                     })
                 })
             }),
-            a && /* @__PURE__ */ h("div", {
+            E && /* @__PURE__ */ p("div", {
                 className: X,
                 children: [
-                    m && /* @__PURE__ */ e(N, {}),
+                    S && /* @__PURE__ */ e(I, {}),
                     /* @__PURE__ */ e(T, {
                         paddingY: {
                             mobile: 16,
                             desktop: 40
                         },
-                        paddingX: R,
-                        children: /* @__PURE__ */ e(se, {
+                        paddingX: m,
+                        children: /* @__PURE__ */ e(oe, {
                             align: "full-width",
                             link: u,
                             primaryButton: f,
-                            secondaryButton: g
+                            secondaryButton: h
                         })
                     })
                 ]
             }),
             /* @__PURE__ */ e("div", {
-                ref: c
+                ref: s
             })
         ]
     });
 };
-export { Me as SheetBody, Ae as default };
+export { Le as SheetBody, Ce as default };

package/dist-es/sheet-info.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                      */ var n = "v16_72_12pggsm0 v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfrg", f = "v16_72_12pggsm1 v16_72_1y2v1nfr8 v16_72_1y2v1nfq4", r = "v16_72_12pggsm2 v16_72_1y2v1nfgc v16_72_1y2v1nfhl v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfsh";
-export { n as infoItemIcon, f as infoItemIconContainer, r as itemContainer };
+/* empty css                                     */ /* empty css                                      */ var n = "v17_1_12pggsm0 v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nfsm", r = "v17_1_12pggsm1 v17_1_1y2v1nfse v17_1_1y2v1nfra", f = "v17_1_12pggsm2 v17_1_1y2v1nfhi v17_1_1y2v1nfir v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nftn";
+export { n as infoItemIcon, r as infoItemIconContainer, f as itemContainer };

package/dist-es/skeletons.css-mistica.js

@@ -1,8 +1,8 @@
 /* empty css                                     */ /* empty css                                     */ var o = {
-    default: "v16_72_zopolw5 v16_72_zopolw0 v16_72_1y2v1nf8f",
-    alternative: "v16_72_zopolw6 v16_72_zopolw1 v16_72_1y2v1nf8f",
-    brand: "v16_72_zopolw7 v16_72_zopolw2 v16_72_1y2v1nf8i",
-    negative: "v16_72_zopolw8 v16_72_zopolw3 v16_72_1y2v1nf8h",
-    media: "v16_72_zopolw9 v16_72_zopolw4 v16_72_1y2v1nf8h"
-}, l = "v16_72_zopolwc v16_72_zopolwb v16_72_1y2v1nfq6", n = "v16_72_zopolwd v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfqd", p = "v16_72_zopolwe v16_72_1y2v1nfqm v16_72_1y2v1nfqo", w = "v16_72_zopolwg v16_72_zopolwf v16_72_1y2v1nfqn";
-export { l as animation, o as background, p as circle, w as line, n as row };
+    default: "v17_1_zopolw5 v17_1_zopolw0 v17_1_1y2v1nf99",
+    alternative: "v17_1_zopolw6 v17_1_zopolw1 v17_1_1y2v1nf99",
+    brand: "v17_1_zopolw7 v17_1_zopolw2 v17_1_1y2v1nf9c",
+    negative: "v17_1_zopolw8 v17_1_zopolw3 v17_1_1y2v1nf9b",
+    media: "v17_1_zopolw9 v17_1_zopolw4 v17_1_1y2v1nf9b"
+}, l = "v17_1_zopolwc v17_1_zopolwb v17_1_1y2v1nfrc", p = "v17_1_zopolwd v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nfrj", r = "v17_1_zopolwe v17_1_1y2v1nfrs v17_1_1y2v1nfru", n = "v17_1_zopolwg v17_1_zopolwf v17_1_1y2v1nfrt";
+export { l as animation, o as background, r as circle, n as line, p as row };

package/dist-es/skins/blau.js

@@ -45,6 +45,15 @@ const e = {
         colors: {
             background: e.white,
             backgroundAlternative: e.blauBluePrimary20,
+            backgroundSelected: r(e.blauBluePrimary, 0.08),
+            backgroundSelectedHover: r(e.blauBluePrimary, 0.12),
+            backgroundSelectedPressed: r(e.blauBluePrimary, 0.16),
+            backgroundSelectedBrand: r(e.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: r(e.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: r(e.darkModeBlack, 0.32),
+            backgroundSelectedNegative: r(e.white, 0.2),
+            backgroundSelectedNegativeHover: r(e.white, 0.28),
+            backgroundSelectedNegativePressed: r(e.white, 0.35),
             backgroundBrand: e.blauBluePrimary,
             backgroundNegative: e.blauBlueSecondary,
             backgroundBrandSecondary: e.blauBluePrimary,
@@ -104,6 +113,13 @@ const e = {
             buttonLinkBackgroundNegativePressed: r(e.white, 0.15),
             buttonLinkBackgroundBrandPressed: r(e.white, 0.15),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.15),
+            buttonLinkNeutralBackgroundPressed: e.grey1,
+            buttonLinkNeutralBackgroundBrand: e.white,
+            buttonLinkNeutralBackgroundBrandPressed: e.grey1,
+            buttonLinkNeutralBackgroundNegative: e.white,
+            buttonLinkNeutralBackgroundNegativePressed: e.grey1,
+            buttonLinkNeutralBackgroundMedia: e.white,
+            buttonLinkNeutralBackgroundMediaPressed: e.grey1,
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: e.white,
@@ -167,6 +183,11 @@ const e = {
             textLinkDanger: e.blauRed,
             textLinkDangerMedia: e.blauRed,
             textLinkSnackbar: e.blauPurple30,
+            textLinkNeutral: e.grey6,
+            textLinkNeutralBrand: e.grey6,
+            textLinkNeutralNegative: e.grey6,
+            textLinkNeutralAlternative: e.grey6,
+            textLinkNeutralMedia: e.grey6,
             textActivated: e.blauBlueSecondary,
             textBrand: e.blauBlueSecondary,
             inputBorder: e.grey4,
@@ -331,6 +352,15 @@ const e = {
         darkModeColors: {
             background: e.darkModeBlack,
             backgroundAlternative: e.darkModeBlack,
+            backgroundSelected: r(e.blauBluePrimary, 0.18),
+            backgroundSelectedHover: r(e.blauBluePrimary, 0.25),
+            backgroundSelectedPressed: r(e.blauBluePrimary, 0.33),
+            backgroundSelectedBrand: r(e.blauBluePrimary, 0.18),
+            backgroundSelectedBrandHover: r(e.blauBluePrimary, 0.25),
+            backgroundSelectedBrandPressed: r(e.blauBluePrimary, 0.33),
+            backgroundSelectedNegative: r(e.blauBluePrimary, 0.18),
+            backgroundSelectedNegativeHover: r(e.blauBluePrimary, 0.25),
+            backgroundSelectedNegativePressed: r(e.blauBluePrimary, 0.33),
             backgroundBrand: e.darkModeBlack,
             backgroundNegative: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
@@ -390,6 +420,13 @@ const e = {
             buttonLinkBackgroundNegativePressed: r(e.blauPurple, 0.3),
             buttonLinkBackgroundBrandPressed: r(e.blauPurple, 0.3),
             buttonLinkBackgroundMediaPressed: r(e.white, 0.15),
+            buttonLinkNeutralBackgroundPressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: r(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: r(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: r(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: r(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: e.blauBlueSecondary,
@@ -453,6 +490,11 @@ const e = {
             textLinkDanger: e.blauRed40,
             textLinkDangerMedia: e.blauRed,
             textLinkSnackbar: e.blauPurple30,
+            textLinkNeutral: e.grey2,
+            textLinkNeutralBrand: e.grey2,
+            textLinkNeutralNegative: e.grey2,
+            textLinkNeutralAlternative: e.grey2,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blauBluePrimary,
             textBrand: e.blauBluePrimary,
             inputBorder: e.darkModeGrey5,
@@ -965,6 +1007,15 @@ const e = {
             successFeedback: "default",
             brandLoadingScreen: "default"
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: !0,
+                brand: !0,
+                negative: !0,
+                alternative: !0,
+                media: !0
+            }
+        },
         spacing: {
             buttonDefaultPadding: {
                 left: {
@@ -1079,6 +1130,20 @@ const e = {
                     mobile: 16,
                     desktop: 40
                 }
+            },
+            responsiveLayoutMargin: {
+                mobile: 16,
+                desktop: 48
+            },
+            boxedDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
             }
         }
     });