@telefonica/mistica 12.9.1 → 12.10.0

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

@@ -0,0 +1,5 @@
+import "./inline.css.ts.vanilla.js";
+var v = "kkfbnv2 kkfbnv1", r = "kkfbnv3 kkfbnv1", a = {
+    space: "var(--kkfbnv0)"
+};
+export { v as fullWidth, r as noFullWidth, a as vars };

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

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

package/dist-es/inline.js

@@ -50,65 +50,40 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import * as p from "react";
-import { createUseStyles as c } from "./jss.js";
-import f from "classnames";
-import { getPrefixedDataAttributes as u } from "./utils/dom.js";
-import { jsx as i } from "./_virtual/jsx-runtime.js";
-var y = c(function() {
-    return {
-        inline: {
-            display: function(e) {
-                return e.fullWidth ? "flex" : "inline-flex";
-            },
-            flexDirection: "row",
-            "@supports (display: grid)": {
-                display: function(e) {
-                    return e.fullWidth ? "grid" : "inline-grid";
-                },
-                gridAutoFlow: "column"
-            },
-            alignItems: function(param) {
-                var e = param.alignItems;
-                return e;
-            },
-            justifyContent: function(e) {
-                switch(e.space){
-                    case "between":
-                    case "around":
-                    case "evenly":
-                        return "space-".concat(e.space);
-                    default:
-                        return "initial";
-                }
-            },
-            "& > div:not(:empty) ~ div:not(:empty)": {
-                marginLeft: function(e) {
-                    return typeof e.space == "number" ? e.space : void 0;
-                }
-            },
-            "& > div:empty": {
-                display: "none"
-            }
-        }
-    };
-}), x = function(param) {
-    var e = param.space, l = param.className, n = param.children, r = param.role, tmp = param.alignItems, s = tmp === void 0 ? "stretch" : tmp, a = param["aria-labelledby"], o = param.fullWidth, d = param.dataAttributes;
-    var m = y({
-        space: e,
-        alignItems: s,
-        fullWidth: o || typeof e == "string"
-    });
-    return /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
-        className: f(l, m.inline),
-        role: r,
+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 { 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({
+            alignItems: s
+        }), f ? b : h),
+        style: _objectSpreadProps(_objectSpread({}, p(_defineProperty({}, g.space, typeof t == "number" ? "".concat(t, "px") : ""))), {
+            justifyContent: v(t)
+        }),
+        role: l,
         "aria-labelledby": a
-    }, u(d)), {
-        children: p.Children.map(n, function(t) {
-            return !!t || t === 0 ? /* @__PURE__ */ i("div", {
-                children: t
+    }, y(m)), {
+        children: u.Children.map(n, function(e) {
+            return !!e || e === 0 ? /* @__PURE__ */ r("div", {
+                children: e
             }) : null;
         })
     }));
 };
-export { x as default };
+export { I as default };

package/dist-es/list.js

@@ -99,10 +99,10 @@ function _unsupportedIterableToArray(o, minLen) {
 import * as y from "react";
 import l from "classnames";
 import { createUseStyles as q } from "./jss.js";
-import R from "./touchable.js";
+import P from "./touchable.js";
 import { Text1 as z, Text3 as J, Text2 as G } from "./text.js";
-import u from "./box.js";
-import P from "./stack.js";
+import m from "./box.js";
+import L from "./stack.js";
 import W from "./badge.js";
 import { useAriaId as K, useTheme as Q } from "./hooks.js";
 import { useIsInverseVariant as O } from "./theme-variant-context.js";
@@ -217,45 +217,45 @@ var U = q(function(param) {
         children: e
     }) : e;
 }, oe = function(param) {
-    var e = param.withChevron, n = param.headline, r = param.title, c = param.titleLinesMax, d = param.subtitle, v = param.subtitleLinesMax, s = param.description, N = param.descriptionLinesMax, b = param.asset, tmp = param.type, I = tmp === void 0 ? "basic" : tmp, L = param.badge, B = param.right, A = param.extra, f = param.labelId, g = param.disabled;
+    var e = param.withChevron, n = param.headline, r = param.title, c = param.titleLinesMax, d = param.subtitle, v = param.subtitleLinesMax, s = param.description, R = param.descriptionLinesMax, w = param.asset, tmp = param.type, N = tmp === void 0 ? "basic" : tmp, I = param.badge, B = param.right, S = param.extra, f = param.labelId, g = param.disabled;
     var h = O(), i = U({
         isInverse: h
-    }), ref = Q(), o = ref.colors, w = [
+    }), ref = Q(), o = ref.colors, b = [
         n,
         r,
         d,
         s,
-        A
-    ].filter(Boolean).length === 1, S = function() {
-        return L ? /* @__PURE__ */ t(u, {
+        S
+    ].filter(Boolean).length === 1, A = function() {
+        return I ? /* @__PURE__ */ t(m, {
             paddingLeft: 16,
             children: /* @__PURE__ */ t("div", {
                 className: l(i.center, i.badge, _defineProperty({}, i.disabled, g)),
-                children: L === !0 ? /* @__PURE__ */ t(W, {}) : /* @__PURE__ */ t(W, {
-                    value: L
+                children: I === !0 ? /* @__PURE__ */ t(W, {}) : /* @__PURE__ */ t(W, {
+                    value: I
                 })
             })
         }) : null;
     };
     var _obj;
-    return /* @__PURE__ */ k(u, {
+    return /* @__PURE__ */ k(m, {
         paddingY: 16,
         className: i.content,
         children: [
-            b && /* @__PURE__ */ t(u, {
+            w && /* @__PURE__ */ t(m, {
                 paddingRight: 16,
-                className: l((_obj = {}, _defineProperty(_obj, i.center, w), _defineProperty(_obj, i.disabled, g), _obj)),
+                className: l((_obj = {}, _defineProperty(_obj, i.center, b), _defineProperty(_obj, i.disabled, g), _obj)),
                 children: /* @__PURE__ */ t("div", {
                     className: i.asset,
-                    children: b
+                    children: w
                 })
             }),
             /* @__PURE__ */ t("div", {
                 className: l(i.rowBody, _defineProperty({}, i.disabled, g)),
                 style: {
-                    justifyContent: w ? "center" : "flex-start"
+                    justifyContent: b ? "center" : "flex-start"
                 },
-                children: /* @__PURE__ */ k(P, {
+                children: /* @__PURE__ */ k(L, {
                     space: 4,
                     children: [
                         n && /* @__PURE__ */ t(z, {
@@ -263,7 +263,7 @@ var U = q(function(param) {
                             color: o.textPrimary,
                             children: n
                         }),
-                        /* @__PURE__ */ k(P, {
+                        /* @__PURE__ */ k(L, {
                             space: 2,
                             children: [
                                 /* @__PURE__ */ t(J, {
@@ -282,17 +282,17 @@ var U = q(function(param) {
                                 s && /* @__PURE__ */ t(G, {
                                     regular: !0,
                                     color: o.textSecondary,
-                                    truncate: N,
+                                    truncate: R,
                                     children: s
                                 }),
-                                A
+                                S
                             ]
                         })
                     ]
                 })
             }),
-            S(),
-            I === "chevron" && /* @__PURE__ */ t(u, {
+            A(),
+            N === "chevron" && /* @__PURE__ */ t(m, {
                 paddingLeft: 16,
                 className: l(i.center, _defineProperty({}, i.disabled, g)),
                 children: /* @__PURE__ */ t(H, {
@@ -300,17 +300,17 @@ var U = q(function(param) {
                     direction: "right"
                 })
             }),
-            I === "control" && /* @__PURE__ */ t("div", {
+            N === "control" && /* @__PURE__ */ t("div", {
                 className: i.right,
-                children: F(B, w)
+                children: F(B, b)
             }),
-            I === "custom" && /* @__PURE__ */ k(ie, {
+            N === "custom" && /* @__PURE__ */ k(ie, {
                 children: [
                     /* @__PURE__ */ t("div", {
                         className: l(i.right, _defineProperty({}, i.disabled, g)),
-                        children: F(B, w)
+                        children: F(B, b)
                     }),
-                    e && /* @__PURE__ */ t(u, {
+                    e && /* @__PURE__ */ t(m, {
                         paddingLeft: 4,
                         className: l(i.center, _defineProperty({}, i.disabled, g)),
                         children: /* @__PURE__ */ t(H, {
@@ -334,41 +334,47 @@ var U = q(function(param) {
         d,
         s
     ];
+}, ce = function(e) {
+    return "switch" in e;
+}, le = function(e) {
+    return "checkbox" in e;
+}, de = function(e) {
+    return "radioValue" in e;
 }, Y = /*#__PURE__*/ y.forwardRef(function(e, n) {
-    var r = K(), c = O(), d = e.asset, v = e.headline, s = e.title, N = e.titleLinesMax, b = e.subtitle, I = e.subtitleLinesMax, L = e.description, B = e.descriptionLinesMax, A = e.badge, f = e.role, g = e.extra, h = e.dataAttributes, i = p(), o = e.disabled || e.radioValue !== void 0 && i.disabled, a = U({
+    var r = K(), c = O(), d = e.asset, v = e.headline, s = e.title, R = e.titleLinesMax, w = e.subtitle, N = e.subtitleLinesMax, I = e.description, B = e.descriptionLinesMax, S = e.badge, f = e.role, g = e.extra, h = e.dataAttributes, i = p(), o = e.disabled || e.radioValue !== void 0 && i.disabled, a = U({
         isInverse: c,
         disabled: o
-    }), ref = _slicedToArray(ae(e.switch || e.checkbox || {}), 2), w = ref[0], S = ref[1], C = function(param) {
-        var m = param.type, x = param.right, T = param.labelId;
+    }), ref = _slicedToArray(ae(e.switch || e.checkbox || {}), 2), b = ref[0], A = ref[1], C = function(param) {
+        var u = param.type, x = param.right, T = param.labelId;
         return /* @__PURE__ */ t(oe, {
             asset: d,
             headline: v,
             title: s,
-            subtitle: b,
-            description: L,
-            badge: A,
-            titleLinesMax: N,
-            subtitleLinesMax: I,
+            subtitle: w,
+            description: I,
+            badge: S,
+            titleLinesMax: R,
+            subtitleLinesMax: N,
             descriptionLinesMax: B,
-            type: m,
+            type: u,
             right: x,
             extra: g,
             labelId: T,
             disabled: o,
             withChevron: !!e.onPress || !!e.href || !!e.to
         });
-    }, D = function(m) {
+    }, D = function(u) {
         var x = "chevron";
-        return m.right === null && (x = "basic"), m.right && (x = "custom"), /* @__PURE__ */ t(u, {
+        return u.right === null && (x = "basic"), u.right && (x = "custom"), /* @__PURE__ */ t(m, {
             paddingX: 16,
             ref: n,
             children: C({
                 type: x,
-                right: m.right
+                right: u.right
             })
         });
     };
-    if (e.onPress && e.switch === void 0 && e.radioValue === void 0 && e.checkbox === void 0) return /* @__PURE__ */ t(R, {
+    if (e.onPress && !ce(e) && !le(e) && !de(e)) return /* @__PURE__ */ t(P, {
         ref: n,
         className: l(a.rowContent, a.hover),
         trackingEvent: e.trackingEvent,
@@ -378,7 +384,7 @@ var U = q(function(param) {
         disabled: o,
         children: D(e)
     });
-    if (e.to) return /* @__PURE__ */ t(R, {
+    if (e.to) return /* @__PURE__ */ t(P, {
         className: l(a.rowContent, a.hover),
         trackingEvent: e.trackingEvent,
         to: e.to,
@@ -388,7 +394,7 @@ var U = q(function(param) {
         disabled: o,
         children: D(e)
     });
-    if (e.href) return /* @__PURE__ */ t(R, {
+    if (e.href) return /* @__PURE__ */ t(P, {
         className: l(a.rowContent, a.hover),
         trackingEvent: e.trackingEvent,
         href: e.href,
@@ -398,13 +404,13 @@ var U = q(function(param) {
         disabled: o,
         children: D(e)
     });
-    var E = function(m) {
+    var E = function(u) {
         var T, j, M, X;
         var x = (X = (M = (T = e.switch) == null ? void 0 : T.name) != null ? M : (j = e.checkbox) == null ? void 0 : j.name) != null ? X : r;
         return e.onPress ? /* @__PURE__ */ k("div", {
             className: a.dualActionContainer,
             children: [
-                /* @__PURE__ */ t(R, {
+                /* @__PURE__ */ t(P, {
                     disabled: o,
                     onPress: e.onPress,
                     role: f,
@@ -414,15 +420,15 @@ var U = q(function(param) {
                         labelId: r
                     })
                 }),
-                /* @__PURE__ */ t(R, {
+                /* @__PURE__ */ t(P, {
                     disabled: o,
                     className: a.dualActionRight,
-                    onPress: S,
+                    onPress: A,
                     dataAttributes: h,
-                    children: /* @__PURE__ */ t(m, {
+                    children: /* @__PURE__ */ t(u, {
                         disabled: o,
                         name: x,
-                        checked: w,
+                        checked: b,
                         "aria-labelledby": r,
                         render: function(param) {
                             var V = param.controlElement;
@@ -433,22 +439,22 @@ var U = q(function(param) {
             ]
         }) : /* @__PURE__ */ t("div", {
             className: l(a.rowContent, a.hover),
-            children: /* @__PURE__ */ t(m, {
+            children: /* @__PURE__ */ t(u, {
                 disabled: o,
                 dataAttributes: h,
                 name: x,
-                checked: w,
-                onChange: S,
+                checked: b,
+                onChange: A,
                 render: function(param) {
                     var V = param.controlElement, $ = param.labelId;
-                    return /* @__PURE__ */ t(u, {
+                    return /* @__PURE__ */ t(m, {
                         paddingX: 16,
                         role: f,
                         children: C({
                             labelId: $,
                             type: "control",
                             right: function() {
-                                return /* @__PURE__ */ t(P, {
+                                return /* @__PURE__ */ t(L, {
                                     space: "around",
                                     children: V
                                 });
@@ -468,23 +474,23 @@ var U = q(function(param) {
             value: e.radioValue,
             "aria-labelledby": r,
             render: function(param) {
-                var m = param.controlElement;
-                return /* @__PURE__ */ t(u, {
+                var u = param.controlElement;
+                return /* @__PURE__ */ t(m, {
                     paddingX: 16,
                     children: C({
                         labelId: r,
                         type: "control",
                         right: function() {
-                            return /* @__PURE__ */ t(P, {
+                            return /* @__PURE__ */ t(L, {
                                 space: "around",
-                                children: m
+                                children: u
                             });
                         }
                     })
                 });
             }
         })
-    }) : /* @__PURE__ */ t(u, {
+    }) : /* @__PURE__ */ t(m, {
         paddingX: 16,
         className: l(a.rowContent, a.hover, a.hoverDisabled),
         role: f,
@@ -495,38 +501,38 @@ var U = q(function(param) {
             type: "basic"
         })
     });
-}), Ie = /*#__PURE__*/ y.forwardRef(function(e, n) {
+}), Le = /*#__PURE__*/ y.forwardRef(function(e, n) {
     return /* @__PURE__ */ t(Y, _objectSpreadProps(_objectSpread({}, e), {
         ref: n
     }));
-}), Le = function(param) {
+}), Be = function(param) {
     var e = param.children, n = param.ariaLabelledby, r = param.role, c = param.dataAttributes, d = param.noLastDivider;
     var v = y.Children.count(e) - 1, s = !d;
     return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
         role: r,
         "aria-labelledby": n
     }, re(c)), {
-        children: y.Children.toArray(e).filter(Boolean).map(function(N, b) {
+        children: y.Children.toArray(e).filter(Boolean).map(function(R, w) {
             return /* @__PURE__ */ k(y.Fragment, {
                 children: [
-                    N,
-                    (b < v || s) && /* @__PURE__ */ t(u, {
+                    R,
+                    (w < v || s) && /* @__PURE__ */ t(m, {
                         paddingX: 16,
                         children: /* @__PURE__ */ t(ne, {})
                     })
                 ]
-            }, b);
+            }, w);
         })
     }));
-}, Re = /*#__PURE__*/ y.forwardRef(function(e, n) {
+}, Se = /*#__PURE__*/ y.forwardRef(function(e, n) {
     return /* @__PURE__ */ t(te, {
         isInverse: e.isInverse,
         ref: n,
         children: /* @__PURE__ */ t(Y, _objectSpread({}, e))
     });
-}), Pe = function(param) {
+}), Ae = function(param) {
     var e = param.children, n = param.ariaLabelledby, r = param.role, c = param.dataAttributes;
-    return /* @__PURE__ */ t(P, {
+    return /* @__PURE__ */ t(L, {
         space: 16,
         role: r,
         "aria-labelledby": n,
@@ -534,4 +540,4 @@ var U = q(function(param) {
         children: e
     });
 };
-export { Re as BoxedRow, Pe as BoxedRowList, Ie as Row, Le as RowList };
+export { Se as BoxedRow, Ae as BoxedRowList, Le as Row, Be as RowList };

package/dist-es/maybe-dismissable.js

@@ -1,22 +1,23 @@
-import * as o from "react";
+import * as r from "react";
 import { createUseStyles as d } from "./jss.js";
-import u from "./generated/mistica-icons/icon-close-regular.js";
-import { useTheme as p } from "./hooks.js";
-import b from "./icon-button.js";
-import { useIsInverseVariant as f } from "./theme-variant-context.js";
+import p from "./generated/mistica-icons/icon-close-regular.js";
+import { useTheme as u } from "./hooks.js";
+import f from "./icon-button.js";
+import { useIsInverseVariant as b } from "./theme-variant-context.js";
 import { applyAlpha as h } from "./utils/color.js";
-import { jsx as e, Fragment as x, jsxs as g } from "./_virtual/jsx-runtime.js";
-var a = /*#__PURE__*/ o.createContext(!1), D = function() {
-    return o.useContext(a);
-}, C = d(function(s) {
+import { vars as o } from "./skins/skin-contract.css-mistica.js";
+import { jsx as e, Fragment as x, jsxs as C } from "./_virtual/jsx-runtime.js";
+var a = /*#__PURE__*/ r.createContext(!1), N = function() {
+    return r.useContext(a);
+}, g = d(function() {
     return {
         dismissableContainer: {
             position: "relative",
             display: "flex",
             flexShrink: 0,
             width: function(param) {
-                var t = param.width;
-                return t || "100%";
+                var s = param.width;
+                return s || "100%";
             }
         },
         dismissableButton: {
@@ -38,26 +39,26 @@ var a = /*#__PURE__*/ o.createContext(!1), D = function() {
             height: 24,
             margin: "0 0 8px 8px",
             borderRadius: "50%",
-            backgroundColor: h(s.colors.background, 0.7)
+            backgroundColor: h(o.rawColors.background, 0.7)
         }
     };
-}), N = function(param) {
-    var s = param.children, t = param.width, r = param.onClose, l = param["aria-label"];
-    var n = f(), i = C({
-        isInverse: n,
-        width: t
-    }), ref = p(), m = ref.colors, c = ref.texts;
-    return r ? /* @__PURE__ */ g("section", {
-        className: i.dismissableContainer,
-        "aria-label": l,
+}), R = function(param) {
+    var s = param.children, l = param.width, i = param.onClose, n = param["aria-label"];
+    var m = b(), t = g({
+        isInverse: m,
+        width: l
+    }), ref = u(), c = ref.texts;
+    return i ? /* @__PURE__ */ C("section", {
+        className: t.dismissableContainer,
+        "aria-label": n,
         children: [
             /* @__PURE__ */ e(a.Provider, {
                 value: !0,
                 children: s
             }),
-            /* @__PURE__ */ e(b, {
-                className: i.dismissableButton,
-                onPress: r,
+            /* @__PURE__ */ e(f, {
+                className: t.dismissableButton,
+                onPress: i,
                 "aria-label": c.closeButtonLabel,
                 style: {
                     display: "flex",
@@ -65,9 +66,9 @@ var a = /*#__PURE__*/ o.createContext(!1), D = function() {
                     height: 48
                 },
                 children: /* @__PURE__ */ e("div", {
-                    className: i.dismissableCircleContainer,
-                    children: /* @__PURE__ */ e(u, {
-                        color: m.neutralHigh
+                    className: t.dismissableCircleContainer,
+                    children: /* @__PURE__ */ e(p, {
+                        color: o.colors.neutralHigh
                     })
                 })
             })
@@ -76,4 +77,4 @@ var a = /*#__PURE__*/ o.createContext(!1), D = function() {
         children: s
     });
 };
-export { N as default, D as useIsDismissable };
+export { R as default, N as useIsDismissable };