@telefonica/mistica 12.10.0 → 12.11.1

package/dist-es/generated/mistica-icons/icon-world-device-light.js

@@ -77,32 +77,32 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import { useTheme as r } from "../../hooks.js";
-import { useIsInverseVariant as n } from "../../theme-variant-context.js";
-import { jsxs as o, jsx as h } from "../../_virtual/jsx-runtime.js";
-var f = function(_param) {
-    var c = _param.color, tmp = _param.size, e = tmp === void 0 ? 24 : tmp, l = _param.children, s = _objectWithoutProperties(_param, [
+import { useIsInverseVariant as i } from "../../theme-variant-context.js";
+import { vars as r } from "../../skins/skin-contract.css-mistica.js";
+import { jsxs as n, jsx as s } from "../../_virtual/jsx-runtime.js";
+var d = function(_param) {
+    var c = _param.color, tmp = _param.size, a = tmp === void 0 ? 24 : tmp, o = _param.children, t = _objectWithoutProperties(_param, [
         "color",
         "size",
         "children"
     ]);
-    var ref = r(), a = ref.colors, i = n(), t = c != null ? c : i ? a.inverse : a.neutralHigh;
-    return /* @__PURE__ */ o("svg", _objectSpreadProps(_objectSpread({
-        width: e,
-        height: e,
+    var h = i(), e = c != null ? c : h ? r.colors.inverse : r.colors.neutralHigh;
+    return /* @__PURE__ */ n("svg", _objectSpreadProps(_objectSpread({
+        width: a,
+        height: a,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, s), {
+    }, t), {
         children: [
-            /* @__PURE__ */ h("path", {
+            /* @__PURE__ */ s("path", {
                 d: "M14.518 21.643a.714.714 0 110-1.429.714.714 0 010 1.429z",
-                fill: t
+                fill: e
             }),
-            /* @__PURE__ */ h("path", {
+            /* @__PURE__ */ s("path", {
                 d: "M19.875 2c1 0 1.786.786 1.75 1.786v6.071c0 1-.786 1.786-1.786 1.786h-2.5c-.821 0-1.5-.572-1.714-1.322-.214-.071-.393-.071-.536 0-.571.286-.964.965-1 1.679 0 .429.072 1.25.965 1.821 1.535 1.036 1.5 1.965 1.428 2.822-.036.678-.071 1.357.679 2.178a8.195 8.195 0 002.357-5.75c0-.214.143-.357.357-.357s.357.143.357.357c0 2.858-1.321 5.465-3.571 7.215a.507.507 0 01-.215.071.325.325 0 01-.285-.143.384.384 0 01.071-.5c.143-.107.286-.25.429-.357-.965-1.071-.893-1.964-.857-2.714.071-.822.107-1.393-1.108-2.179A2.608 2.608 0 0113.411 12c.035-1 .607-1.893 1.393-2.286.25-.143.5-.143.785-.107v-3.5a8.18 8.18 0 00-4.285-1.214c-.5 0-.965.071-1.429.143.429.821 1.107 2.321.786 3.25-.25.75-1.215 2.107-3.072 2-.178-.036-.357 0-.464 0 .214.107.607.25 1.286.464 0 0 1 .25 1.607 1.357a1.271 1.271 0 001.643.536c.321-.179.714-.143 1.035.036.322.178.572.535.608.892.107.822-.072 2.393-1.536 3.072-.607.286-.714.607-.822 1.071-.107.393-.214.822-.642 1.215-.215.214-.536.321-.858.321a2 2 0 01-.607-.107c-1-.322-2.25-1.464-2.643-3.179a5.356 5.356 0 01-.142-1.321c0-.393-.322-1.857-.893-2.286-.143-.107-.286-.143-.465-.071-.607.214-.928.107-1.535-.25a9.436 9.436 0 00-.072 1.035 8.215 8.215 0 008.215 8.215c.357 0 .75-.036 1.142-.072.179 0 .358.143.393.322a.419.419 0 01-.321.393c-.393.035-.822.071-1.214.071-4.929 0-8.929-4-8.929-8.929 0-4.928 4-8.928 8.929-8.928 1.5 0 2.964.393 4.285 1.107V3.786c0-1 .786-1.786 1.786-1.786h2.5zM9.982 8c.214-.607-.321-1.893-.821-2.821a8.204 8.204 0 00-5.857 6.107c.714.428.857.428 1.214.321.393-.107.786-.071 1.107.179.857.643 1.179 2.464 1.179 2.857 0 .428.035.786.107 1.143.285 1.393 1.321 2.357 2.143 2.643.178.035.571.142.785-.072.25-.25.357-.536.429-.857.143-.5.286-1.107 1.214-1.536 1.357-.643 1.143-2.285 1.143-2.357-.036-.143-.107-.286-.25-.357a.383.383 0 00-.393-.036c-.964.429-2.071.072-2.571-.821-.429-.786-1.179-1-1.179-1-1.571-.5-2.071-.822-2.036-1.286.036-.571.929-.643 1.429-.607A2.353 2.353 0 009.982 8zm7.393-5.286c-.607 0-1.071.465-1.071 1.072h4.642c0-.607-.464-1.072-1.071-1.072h-2.5zM16.304 4.5v4.643h4.642V4.5h-4.642zm3.571 6.429c.607 0 1.071-.465 1.071-1.072h-4.642c0 .607.464 1.072 1.071 1.072h2.5z",
-                fill: t
+                fill: e
             })
         ]
     }));
 };
-export { f as default };
+export { d as default };

package/dist-es/generated/mistica-icons/icon-world-device-regular.js

@@ -77,19 +77,19 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import { useTheme as n } from "../../hooks.js";
 import { useIsInverseVariant as s } from "../../theme-variant-context.js";
+import { vars as r } from "../../skins/skin-contract.css-mistica.js";
 import { jsx as a } from "../../_virtual/jsx-runtime.js";
-var d = function(_param) {
-    var e = _param.color, tmp = _param.size, c = tmp === void 0 ? 24 : tmp, o = _param.children, h = _objectWithoutProperties(_param, [
+var m = function(_param) {
+    var c = _param.color, tmp = _param.size, e = tmp === void 0 ? 24 : tmp, n = _param.children, h = _objectWithoutProperties(_param, [
         "color",
         "size",
         "children"
     ]);
-    var ref = n(), r = ref.colors, t = s(), i = e != null ? e : t ? r.inverse : r.neutralHigh;
+    var t = s(), i = c != null ? c : t ? r.colors.inverse : r.colors.neutralHigh;
     return /* @__PURE__ */ a("svg", _objectSpreadProps(_objectSpread({
-        width: c,
-        height: c,
+        width: e,
+        height: e,
         viewBox: "0 0 24 24",
         role: "presentation"
     }, h), {
@@ -99,4 +99,4 @@ var d = function(_param) {
         })
     }));
 };
-export { d as default };
+export { m as default };

package/dist-es/grid-layout.css-mistica.js

@@ -1,6 +1,6 @@
 import "./grid-layout.css.ts.vanilla.js";
-var r = "_379jdb1", v = "_379jdb3", d = {
-    colSpan: "var(--_379jdb2)",
-    verticalSpace: "var(--_379jdb0)"
+var r = "_379jdb2", d = "_379jdb1", v = "_379jdb0", o = "_379jdb4", e = "_379jdb6", p = {
+    colSpan: "var(--_379jdb5)",
+    verticalSpace: "var(--_379jdb3)"
 };
-export { r as grid, v as span, d as vars };
+export { r as desktopLargeColumn, d as desktopMediumColumn, v as desktopSmallColumn, o as grid, e as span, p as vars };

package/dist-es/grid-layout.js

@@ -51,116 +51,109 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 import { assignInlineVars as v } from "@vanilla-extract/dynamic";
-import { useScreenSize as h } from "./hooks.js";
-import t from "./container-type-context.js";
-import { getPrefixedDataAttributes as s } from "./utils/dom.js";
-import { grid as f, vars as m, span as P } from "./grid-layout.css-mistica.js";
-import { jsxs as c, jsx as e } from "./_virtual/jsx-runtime.js";
-var A = function(i) {
-    var r = s(i.dataAttributes), ref = h(), u = ref.isMobile, o = ref.isTablet, d = function(a) {
-        return u ? "mobile-column" : o ? "tablet-column" : a;
-    }, l = function(a) {
+import { getPrefixedDataAttributes as m } from "./utils/dom.js";
+import { grid as h, vars as c, span as u, desktopLargeColumn as f, desktopMediumColumn as o, desktopSmallColumn as s } from "./grid-layout.css-mistica.js";
+import g from "classnames";
+import l from "./desktop-container-type-context.js";
+import { jsx as e, jsxs as a } from "./_virtual/jsx-runtime.js";
+var b = function(i) {
+    var r = m(i.dataAttributes), d = function(n) {
+        var _obj;
         return {
-            className: P,
-            style: v(_defineProperty({}, m.colSpan, String(a)))
+            className: g(u, (_obj = {}, _defineProperty(_obj, f, n >= 10), _defineProperty(_obj, o, n > 5 && n < 10), _defineProperty(_obj, s, n <= 5), _obj)),
+            style: v(_defineProperty({}, c.colSpan, String(n)))
         };
-    }, n = {
-        className: f,
-        style: v(_defineProperty({}, m.verticalSpace, i.verticalSpace ? "".concat(i.verticalSpace, "px") : ""))
+    }, t = {
+        className: h,
+        style: v(_defineProperty({}, c.verticalSpace, i.verticalSpace ? "".concat(i.verticalSpace, "px") : ""))
     };
-    return i.template === "6+6" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
-        children: [
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-medium-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+    return i.template === "6+6" ? /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, t, r), {
+        children: /* @__PURE__ */ a(l.Provider, {
+            value: "medium",
+            children: [
+                /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(6)), {
                     children: i.left
-                }))
-            }),
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-medium-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+                })),
+                /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(6)), {
                     children: i.right
                 }))
-            })
-        ]
-    })) : i.template === "8+4" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
+            ]
+        })
+    })) : i.template === "8+4" ? /* @__PURE__ */ a("div", _objectSpreadProps(_objectSpread({}, t, r), {
         children: [
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-medium-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(8)), {
+            /* @__PURE__ */ e(l.Provider, {
+                value: "medium",
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(8)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-small-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+            /* @__PURE__ */ e(l.Provider, {
+                value: "small",
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(4)), {
                     children: i.right
                 }))
             })
         ]
-    })) : i.template === "4+6" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
+    })) : i.template === "4+6" ? /* @__PURE__ */ a("div", _objectSpreadProps(_objectSpread({}, t, r), {
         children: [
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-small-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+            /* @__PURE__ */ e(l.Provider, {
+                value: "small",
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(4)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-medium-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(6)), {
+            /* @__PURE__ */ e("div", _objectSpread({}, d(1))),
+            /* @__PURE__ */ e(l.Provider, {
+                value: "medium",
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(6)), {
                     children: i.right
                 }))
             }),
-            /* @__PURE__ */ e("div", _objectSpread({}, l(1)))
+            /* @__PURE__ */ e("div", _objectSpread({}, d(1)))
         ]
-    })) : i.template === "5+4" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
-        children: [
-            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-small-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(5)), {
+    })) : i.template === "5+4" ? /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, t, r), {
+        children: /* @__PURE__ */ a(l.Provider, {
+            value: "small",
+            children: [
+                /* @__PURE__ */ e("div", _objectSpread({}, d(1))),
+                /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(5)), {
                     children: i.left
-                }))
-            }),
-            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-small-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(4)), {
+                })),
+                /* @__PURE__ */ e("div", _objectSpread({}, d(1))),
+                /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(4)), {
                     children: i.right
-                }))
-            }),
-            /* @__PURE__ */ e("div", _objectSpread({}, l(1)))
-        ]
-    })) : i.template === "3+9" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
+                })),
+                /* @__PURE__ */ e("div", _objectSpread({}, d(1)))
+            ]
+        })
+    })) : i.template === "3+9" ? /* @__PURE__ */ a("div", _objectSpreadProps(_objectSpread({}, t, r), {
         children: [
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-small-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(3)), {
+            /* @__PURE__ */ e(l.Provider, {
+                value: "small",
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(3)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-medium-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(9)), {
+            /* @__PURE__ */ e(l.Provider, {
+                value: "medium",
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(9)), {
                     children: i.right
                 }))
             })
         ]
-    })) : i.template === "10" ? /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, n, r), {
+    })) : i.template === "10" ? /* @__PURE__ */ a("div", _objectSpreadProps(_objectSpread({}, t, r), {
         children: [
-            /* @__PURE__ */ e("div", _objectSpread({}, l(1))),
-            /* @__PURE__ */ e(t.Provider, {
-                value: d("desktop-wide-column"),
-                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, l(10)), {
+            /* @__PURE__ */ e("div", _objectSpread({}, d(1))),
+            /* @__PURE__ */ e(l.Provider, {
+                value: "large",
+                children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, d(10)), {
                     children: i.children
                 }))
             }),
-            /* @__PURE__ */ e("div", _objectSpread({}, l(1)))
+            /* @__PURE__ */ e("div", _objectSpread({}, d(1)))
         ]
-    })) : /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, n, r), {
+    })) : /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({}, t, r), {
         children: i.children
     }));
 };
-export { A as default };
+export { b as default };

package/dist-es/highlighted-card.css-mistica.js

@@ -0,0 +1,7 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./highlighted-card.css.ts.vanilla.js";
+var y = "wrb8722 _1y2v1nf7b _1y2v1nf7g _1y2v1nf7n _1y2v1nf7t", f = "wrb8725 _1y2v1nf7b", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nf7b _1y2v1nf7h _1y2v1nf7p _1y2v1nf84 _1y2v1nf8i _1y2v1nf8v",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf7b _1y2v1nf7h _1y2v1nf7p _1y2v1nf84 _1y2v1nf8i _1y2v1nf8v"
+}, r = "_1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7b _1y2v1nf7t _1y2v1nfb9 _1y2v1nf9i _1y2v1nf74";
+export { y as container, f as imageContent, _ as textContainerVariant, r as touchableContainer };

package/dist-es/highlighted-card.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var a = "";
+export { a as default };

package/dist-es/highlighted-card.js

@@ -77,96 +77,47 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import { createUseStyles as f } from "./jss.js";
-import { useIsInverseVariant as b } from "./theme-variant-context.js";
-import x from "./box.js";
-import l from "./touchable.js";
-import { useTheme as v } from "./hooks.js";
-import { Text4 as w, Text2 as C } from "./text.js";
-import { Boxed as k } from "./boxed.js";
-import y, { useIsDismissable as T } from "./maybe-dismissable.js";
-import { jsx as i, jsxs as s, Fragment as I } from "./_virtual/jsx-runtime.js";
-var S = f(function(e) {
-    var _obj;
-    return {
-        container: {
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            width: function(param) {
-                var t = param.width;
-                return t || "100%";
-            },
-            flexShrink: 0,
-            alignSelf: "stretch"
-        },
-        imageContent: {
-            display: "flex",
-            width: 100,
-            minWidth: 100,
-            height: "inherit"
-        },
-        textContainer: (_obj = {
-            paddingLeft: 16,
-            paddingTop: 24,
-            paddingBottom: 24,
-            paddingRight: function(param) {
-                var t = param.hasImage;
-                return t ? 8 : 56;
-            }
-        }, _defineProperty(_obj, e.mq.desktopOrBigger, {
-            paddingLeft: 24,
-            paddingTop: 32,
-            paddingBottom: 32,
-            paddingRight: function(param) {
-                var t = param.hasImage;
-                return t ? 24 : 56;
-            }
-        }), _defineProperty(_obj, "display", "flex"), _defineProperty(_obj, "flexDirection", "column"), _defineProperty(_obj, "alignItems", "flex-start"), _obj),
-        touchableContainer: {
-            display: "flex",
-            flexShrink: 0,
-            width: function(param) {
-                var t = param.width;
-                return t || "100%";
-            }
-        }
-    };
-}), E = function(e) {
+import { useIsInverseVariant as g } from "./theme-variant-context.js";
+import f from "./box.js";
+import { BaseTouchable as o } from "./touchable.js";
+import { Text4 as b, Text2 as v } from "./text.js";
+import { Boxed as x } from "./boxed.js";
+import w, { useIsDismissable as k } from "./maybe-dismissable.js";
+import { container as I, textContainerVariant as C, imageContent as E, touchableContainer as c } from "./highlighted-card.css-mistica.js";
+import { vars as N } from "./skins/skin-contract.css-mistica.js";
+import { jsx as t, jsxs as s, Fragment as P } from "./_virtual/jsx-runtime.js";
+var T = function(e) {
     var m;
-    var t = e.title, r = e.description, o = e.imageUrl, c = e.imageFit, g = b(), d = (m = e.isInverse) != null ? m : g, n = S({
-        isInverse: d,
-        hasImage: !!o,
-        width: e.width
-    }), u = v(), h = T(), a = /* @__PURE__ */ s(k, {
-        isInverse: d,
-        className: n.container,
+    var i = e.title, r = e.description, a = e.imageUrl, l = e.imageFit, u = g(), h = (m = e.isInverse) != null ? m : u, d = k(), n = /* @__PURE__ */ s(x, {
+        isInverse: h,
+        className: I,
         dataAttributes: e.dataAttributes,
+        width: e.width ? "".concat(e.width, "px") : "100%",
         children: [
             /* @__PURE__ */ s("div", {
-                role: h ? void 0 : "region",
-                className: n.textContainer,
-                "aria-label": h ? void 0 : e["aria-label"],
+                role: d ? void 0 : "region",
+                className: C[a ? "withImage" : "withoutImage"],
+                "aria-label": d ? void 0 : e["aria-label"],
                 children: [
-                    /* @__PURE__ */ i(w, {
+                    /* @__PURE__ */ t(b, {
                         as: "h1",
                         regular: !0,
                         truncate: e.titleLinesMax,
-                        children: t
+                        children: i
                     }),
-                    /* @__PURE__ */ i(x, {
+                    /* @__PURE__ */ t(f, {
                         paddingTop: 8,
-                        children: /* @__PURE__ */ i(C, {
+                        children: /* @__PURE__ */ t(v, {
                             regular: !0,
-                            color: u.colors.textSecondary,
+                            color: N.colors.textSecondary,
                             truncate: e.descriptionLinesMax,
                             as: "p",
                             children: r
                         })
                     }),
-                    e.button && /* @__PURE__ */ s(I, {
+                    e.button && /* @__PURE__ */ s(P, {
                         children: [
-                            /* @__PURE__ */ i("div", {
+                            /* @__PURE__ */ t("div", {
                                 style: {
                                     minHeight: 16,
                                     flexGrow: 1
@@ -177,46 +128,46 @@ var S = f(function(e) {
                     })
                 ]
             }),
-            o && /* @__PURE__ */ i("div", {
-                className: n.imageContent,
+            a && /* @__PURE__ */ t("div", {
+                className: E,
                 style: {
-                    background: "url(".concat(o, ") no-repeat"),
-                    backgroundSize: c === "fit" ? "contain" : "cover",
-                    backgroundPosition: c === "fit" ? "bottom right" : "center right"
+                    background: "url(".concat(a, ") no-repeat"),
+                    backgroundSize: l === "fit" ? "contain" : "cover",
+                    backgroundPosition: l === "fit" ? "bottom right" : "center ".concat(l === "fill-center" ? "center" : "right")
                 }
             })
         ]
     });
-    return e.button ? a : e.onPress ? /* @__PURE__ */ i(l, {
+    return e.button ? n : e.onPress ? /* @__PURE__ */ t(o, {
         onPress: e.onPress,
         trackingEvent: e.trackingEvent,
-        className: n.touchableContainer,
-        children: a
-    }) : e.to ? /* @__PURE__ */ i(l, {
+        className: c,
+        children: n
+    }) : e.to ? /* @__PURE__ */ t(o, {
         to: e.to,
         trackingEvent: e.trackingEvent,
         fullPageOnWebView: e.fullPageOnWebView,
-        className: n.touchableContainer,
-        children: a
-    }) : e.href ? /* @__PURE__ */ i(l, {
+        className: c,
+        children: n
+    }) : e.href ? /* @__PURE__ */ t(o, {
         trackingEvent: e.trackingEvent,
         href: e.href,
         newTab: e.newTab,
-        className: n.touchableContainer,
-        children: a
-    }) : a;
-}, A = function(_param) {
-    var e = _param["aria-label"], t = _objectWithoutProperties(_param, [
+        className: c,
+        children: n
+    }) : n;
+}, F = function(_param) {
+    var e = _param["aria-label"], i = _objectWithoutProperties(_param, [
         "aria-label"
     ]);
-    var r = e != null ? e : t.title;
-    return /* @__PURE__ */ i(y, {
-        onClose: t.onClose,
+    var r = e != null ? e : i.title;
+    return /* @__PURE__ */ t(w, {
+        onClose: i.onClose,
         "aria-label": r,
-        width: t.width,
-        children: /* @__PURE__ */ i(E, _objectSpreadProps(_objectSpread({}, t), {
+        width: i.width,
+        children: /* @__PURE__ */ t(T, _objectSpreadProps(_objectSpread({}, i), {
             "aria-label": r
         }))
     });
 };
-export { A as default };
+export { F as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./image.css.ts.vanilla.js";
-var f = 300, n = "_17tt25r1 _1y2v1nfbg _1y2v1nfbu _1y2v1nf7d _1y2v1nf9h _1y2v1nf9x _1y2v1nfd0 _1y2v1nfb4 _1y2v1nfb5";
-export { f as FADE_IN_DURATION_MS, n as image };
+var y = 300, f = "_17tt25r1 _1y2v1nfbj _1y2v1nfbx _1y2v1nf7d _1y2v1nf9i _1y2v1nf9y _1y2v1nfd3 _1y2v1nfb6 _1y2v1nfb7";
+export { y as FADE_IN_DURATION_MS, f as image };

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

@@ -1,5 +1,9 @@
 import "./inline.css.ts.vanilla.js";
-var v = "kkfbnv2 kkfbnv1", r = "kkfbnv3 kkfbnv1", a = {
+var v = "kkfbnv2 kkfbnv1", n = {
+    between: "kkfbnv4",
+    around: "kkfbnv5",
+    evenly: "kkfbnv6"
+}, a = "kkfbnv3 kkfbnv1", f = {
     space: "var(--kkfbnv0)"
 };
-export { v as fullWidth, r as noFullWidth, a as vars };
+export { v as fullWidth, n as justifyVariants, a as noFullWidth, f as vars };

package/dist-es/inline.js

@@ -50,40 +50,29 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import * as u from "react";
-import d from "classnames";
-import { assignInlineVars as p } from "@vanilla-extract/dynamic";
-import { sprinkles as c } from "./sprinkles.css-mistica.js";
+import * as p from "react";
+import u from "classnames";
+import { assignInlineVars as d } from "@vanilla-extract/dynamic";
+import { sprinkles as b } from "./sprinkles.css-mistica.js";
 import { getPrefixedDataAttributes as y } from "./utils/dom.js";
-import { fullWidth as b, noFullWidth as h, vars as g } from "./inline.css-mistica.js";
-import { jsx as r } from "./_virtual/jsx-runtime.js";
-var v = function(t) {
-    switch(t){
-        case "between":
-        case "around":
-        case "evenly":
-            return "space-".concat(t);
-        default:
-            return "initial";
-    }
-}, I = function(param) {
-    var t = param.space, i = param.className, n = param.children, l = param.role, tmp = param.alignItems, s = tmp === void 0 ? "stretch" : tmp, a = param["aria-labelledby"], o = param.fullWidth, m = param.dataAttributes;
-    var f = o || typeof t == "string";
-    return /* @__PURE__ */ r("div", _objectSpreadProps(_objectSpread({
-        className: d(i, c({
+import { fullWidth as h, noFullWidth as x, justifyVariants as W, vars as c } from "./inline.css-mistica.js";
+import { jsx as i } from "./_virtual/jsx-runtime.js";
+var k = function(param) {
+    var r = param.space, e = param.className, l = param.children, o = param.role, tmp = param.alignItems, s = tmp === void 0 ? "stretch" : tmp, a = param["aria-labelledby"], m = param.fullWidth, n = param.dataAttributes;
+    var f = m || typeof r == "string";
+    return /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
+        className: u(e, b({
             alignItems: s
-        }), f ? b : h),
-        style: _objectSpreadProps(_objectSpread({}, p(_defineProperty({}, g.space, typeof t == "number" ? "".concat(t, "px") : ""))), {
-            justifyContent: v(t)
-        }),
-        role: l,
+        }), f ? h : x, typeof r != "number" && W[r]),
+        style: _objectSpread({}, d(_defineProperty({}, c.space, typeof r == "number" ? "".concat(r, "px") : ""))),
+        role: o,
         "aria-labelledby": a
-    }, y(m)), {
-        children: u.Children.map(n, function(e) {
-            return !!e || e === 0 ? /* @__PURE__ */ r("div", {
-                children: e
+    }, y(n)), {
+        children: p.Children.map(l, function(t) {
+            return !!t || t === 0 ? /* @__PURE__ */ i("div", {
+                children: t
             }) : null;
         })
     }));
 };
-export { I as default };
+export { k as default };

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

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./list.css.ts.vanilla.js";
+var _ = "_1y2v1nf7b _1y2v1nf7t _1y2v1nf7v", y = "_1y2v1nf7k _1y2v1nfaj _1y2v1nf9y _1y2v1nf7t", f = "_1y2v1nf7b _1y2v1nf7q", r = "_1y2v1nf7b _1y2v1nf9i _1y2v1nfb4", a = "_2buj9g0", t = "_1y2v1nf7b _1y2v1nf7g", b = "_1y2v1nf8v _1y2v1nf99 _1y2v1nf7w", o = "_2buj9gg _1y2v1nf8v _1y2v1nf99 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7v _1y2v1nf9j", e = "_2buj9g1", i = "_1y2v1nfbg", g = "_2buj9gb", d = "_1y2v1nf7b _1y2v1nf7h _1y2v1nf7x", u = "_1y2v1nf9i";
+export { _ as asset, y as badge, f as center, r as content, a as disabled, t as dualActionContainer, b as dualActionLeft, o as dualActionRight, e as hoverBackground, i as pointer, g as right, d as rowBody, u as rowContent };

package/dist-es/list.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var s = "";
+export { s as default };