@telefonica/mistica 16.2.0 → 16.3.1

package/dist-es/table.js

@@ -77,44 +77,45 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import * as x from "react";
-import { getPrefixedDataAttributes as V } from "./utils/dom.js";
-import { table as X, boxed as W, collapsedRowsInMobile as E, fullWidth as M, hiddenHeadersInDesktop as ee, hiddenHeadersInMobile as te, cellTextAlign as _, verticalAlign as N, rowFirstItem as L, rowLastItem as R, rowLastCollapsedItem as H, collapsedRowHeaderItem as le, mobileCellHeading as re, collapsedRowTitle as ae, actionsTableCell as Y, topActions as oe, scrollContainer as se, scrollOverResponsiveLayout as ne, vars as ie } from "./table.css-mistica.js";
-import { vars as j } from "./skins/skin-contract.css-mistica.js";
-import ce, { Text1 as F, textProps as h, Text2 as me } from "./text.js";
-import { InternalBoxed as pe } from "./boxed.js";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import * as E from "react";
+import { getPrefixedDataAttributes as X } from "./utils/dom.js";
+import { table as W, boxed as ee, collapsedRowsInMobile as M, fullWidth as _, hiddenHeadersInDesktop as te, hiddenHeadersInMobile as le, cellTextAlign as H, verticalAlign as N, rowFirstItem as L, rowLastItem as R, rowLastCollapsedItem as Y, collapsedRowHeaderItem as re, mobileCellHeading as oe, collapsedRowTitle as ae, actionsTableCell as j, topActions as se, scrollContainer as ne, scrollOverResponsiveLayout as ie, vars as ce } from "./table.css-mistica.js";
+import { vars as F } from "./skins/skin-contract.css-mistica.js";
+import me, { Text1 as x, Text2 as pe } from "./text.js";
+import { text2 as f, text4 as G } from "./text-props.js";
+import { InternalBoxed as de } from "./boxed.js";
 import c from "classnames";
-import de from "./box.js";
-import { applyCssVars as he } from "./utils/css.js";
-import be from "./inline.js";
-import { IconButton as ue, ToggleIconButton as ge } from "./icon-button.js";
-import { iconContainerSize as G, iconSize as ye } from "./icon-button.css-mistica.js";
-import { TableActionsHeader as fe } from "./table-actions-header.js";
-const P = {
+import he from "./box.js";
+import { applyCssVars as be } from "./utils/css.js";
+import ue from "./inline.js";
+import { IconButton as ge, ToggleIconButton as ye } from "./icon-button.js";
+import { iconContainerSize as Z, iconSize as fe } from "./icon-button.css-mistica.js";
+import { TableActionsHeader as ke } from "./table-actions-header.js";
+const $ = {
     default: "8px",
     boxed: "16px"
-}, Z = "1px", ke = (a)=>a.Icon ? /* @__PURE__ */ e(ue, _object_spread_props(_object_spread({}, a), {
-        "aria-label": a.label,
+}, q = "1px", ve = (o)=>o.Icon ? /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, o), {
+        "aria-label": o.label,
         small: !0,
         type: "neutral",
         backgroundType: "transparent",
         bleedY: !0
-    })) : /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({}, a), {
-        checkedProps: _object_spread_props(_object_spread({}, a.checkedProps), {
-            "aria-label": a.checkedProps.label,
+    })) : /* @__PURE__ */ e(ye, _object_spread_props(_object_spread({}, o), {
+        checkedProps: _object_spread_props(_object_spread({}, o.checkedProps), {
+            "aria-label": o.checkedProps.label,
             type: "brand",
             backgroundType: "solid"
         }),
-        uncheckedProps: _object_spread_props(_object_spread({}, a.uncheckedProps), {
-            "aria-label": a.uncheckedProps.label,
+        uncheckedProps: _object_spread_props(_object_spread({}, o.uncheckedProps), {
+            "aria-label": o.uncheckedProps.label,
             type: "neutral",
             backgroundType: "transparent"
         }),
         small: !0,
         bleedY: !0
-    })), q = "left", Oe = /*#__PURE__*/ x.forwardRef((_param, $)=>{
-    var { dataAttributes: a, heading: m = [], content: k = [], boxed: b, responsive: J, fullWidth: u = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = q, rowVerticalAlign: C = "middle", columnWidth: p, hideHeaders: g, scrollOverResponsiveLayout: K, rowHeaderIndex: s } = _param, S = _object_without_properties(_param, [
+    })), J = "left", Ee = /*#__PURE__*/ E.forwardRef((_param, z)=>{
+    var { dataAttributes: o, heading: m = [], content: k = [], boxed: h, responsive: K, fullWidth: b = !0, maxHeight: v, emptyCase: A, columnTextAlign: T = J, rowVerticalAlign: C = "middle", columnWidth: p, hideHeaders: u, scrollOverResponsiveLayout: Q, rowHeaderIndex: s } = _param, S = _object_without_properties(_param, [
         "dataAttributes",
         "heading",
         "content",
@@ -130,68 +131,68 @@ const P = {
         "scrollOverResponsiveLayout",
         "rowHeaderIndex"
     ]);
-    const z = (l)=>{
+    const B = (l)=>{
         var _T_l;
-        return Array.isArray(T) ? (_T_l = T[l]) !== null && _T_l !== void 0 ? _T_l : q : T;
-    }, r = J === "collapse-rows", B = g === !0 || g === "mobile", Q = g === !0 || g === "desktop", y = k.some((l)=>!Array.isArray(l) && l.actions.length > 0), D = /* @__PURE__ */ f("table", {
-        className: c(X, {
-            [W]: b,
-            [E]: r,
-            [M]: u,
-            [ee]: Q,
-            [te]: B || r
+        return Array.isArray(T) ? (_T_l = T[l]) !== null && _T_l !== void 0 ? _T_l : J : T;
+    }, r = K === "collapse-rows", P = u === !0 || u === "mobile", U = u === !0 || u === "desktop", g = k.some((l)=>!Array.isArray(l) && l.actions.length > 0), D = /* @__PURE__ */ y("table", {
+        className: c(W, {
+            [ee]: h,
+            [M]: r,
+            [_]: b,
+            [te]: U,
+            [le]: P || r
         }),
         "aria-label": S["aria-label"],
         "aria-labelledby": S["aria-labelledby"],
         "aria-describedby": S["aria-describedby"],
         children: [
             m.length > 0 && /* @__PURE__ */ e("thead", {
-                children: /* @__PURE__ */ f(F, {
+                children: /* @__PURE__ */ y(x, {
                     as: "tr",
                     medium: !0,
                     transform: "uppercase",
-                    color: j.colors.textSecondary,
+                    color: F.colors.textSecondary,
                     wordBreak: !1,
                     children: [
-                        m.map((l, o)=>/* @__PURE__ */ e("th", {
+                        m.map((l, a)=>/* @__PURE__ */ e("th", {
                                 scope: "col",
-                                className: c(_[z(o)], N[C], {
-                                    [L]: o === 0,
-                                    [R]: o === m.length - 1 && !y
+                                className: c(H[B(a)], N[C], {
+                                    [L]: a === 0,
+                                    [R]: a === m.length - 1 && !g
                                 }),
                                 style: {
-                                    minWidth: p == null ? void 0 : p[o],
-                                    width: p == null ? void 0 : p[o]
+                                    minWidth: p == null ? void 0 : p[a],
+                                    width: p == null ? void 0 : p[a]
                                 },
                                 children: l
-                            }, o)),
-                        y && /* @__PURE__ */ e(fe, {})
+                            }, a)),
+                        g && /* @__PURE__ */ e(ke, {})
                     ]
                 })
             }),
             /* @__PURE__ */ e("tbody", {
-                children: k.length > 0 ? k.map((l, o)=>{
+                children: k.length > 0 ? k.map((l, a)=>{
                     var _l_actions;
-                    const n = Array.isArray(l) ? l : l.cells, i = Array.isArray(l) ? [] : (_l_actions = l.actions) !== null && _l_actions !== void 0 ? _l_actions : [], w = /* @__PURE__ */ e(be, {
+                    const n = Array.isArray(l) ? l : l.cells, i = Array.isArray(l) ? [] : (_l_actions = l.actions) !== null && _l_actions !== void 0 ? _l_actions : [], w = /* @__PURE__ */ e(ue, {
                         space: 16,
-                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ke, _object_spread({}, d), t) : /* @__PURE__ */ e(x.Fragment, {
+                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ e(ve, _object_spread({}, d), t) : /* @__PURE__ */ e(E.Fragment, {
                                 children: d
                             }, t))
-                    }), I = i.length ? `calc(${G.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
+                    }), I = i.length ? `calc(${Z.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
                     return(// Add position relative because in collapse-rows mode, actions are positioned absolutely in the row
-                    /* @__PURE__ */ f("tr", {
+                    /* @__PURE__ */ y("tr", {
                         style: {
                             position: "relative"
                         },
                         children: [
                             n.map((d, t)=>{
-                                const U = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
-                                return /* @__PURE__ */ f(t === s ? "th" : "td", {
+                                const V = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
+                                return /* @__PURE__ */ y(t === s ? "th" : "td", {
                                     className: c(N[C], {
                                         [L]: t === 0,
-                                        [R]: t === n.length - 1 && !y,
-                                        [H]: U && r,
-                                        [le]: t === s && r
+                                        [R]: t === n.length - 1 && !g,
+                                        [Y]: V && r,
+                                        [re]: t === s && r
                                     }),
                                     style: {
                                         // add space between top actions and content
@@ -199,30 +200,30 @@ const P = {
                                     },
                                     scope: t === s ? "row" : void 0,
                                     children: [
-                                        t !== s && r && m[t] && !B && // this is aria-hidden because screen readers already read the column heading from the th
+                                        t !== s && r && m[t] && !P && // this is aria-hidden because screen readers already read the column heading from the th
                                         /* @__PURE__ */ e("div", {
-                                            className: re,
+                                            className: oe,
                                             "aria-hidden": !0,
-                                            children: /* @__PURE__ */ e(F, {
+                                            children: /* @__PURE__ */ e(x, {
                                                 medium: !0,
-                                                color: j.colors.textSecondary,
+                                                color: F.colors.textSecondary,
                                                 children: m[t]
                                             })
                                         }),
-                                        /* @__PURE__ */ e(ce, _object_spread_props(_object_spread({
-                                            desktopSize: h.text2.desktopSize,
-                                            desktopLineHeight: h.text2.desktopLineHeight
+                                        /* @__PURE__ */ e(me, _object_spread_props(_object_spread({
+                                            desktopSize: f.desktopSize,
+                                            desktopLineHeight: f.desktopLineHeight
                                         }, t === s && r ? {
-                                            mobileSize: h.text4.mobileSize,
-                                            mobileLineHeight: h.text4.mobileLineHeight
+                                            mobileSize: G.mobileSize,
+                                            mobileLineHeight: G.mobileLineHeight
                                         } : {
-                                            mobileSize: h.text2.mobileSize,
-                                            mobileLineHeight: h.text2.mobileLineHeight
+                                            mobileSize: f.mobileSize,
+                                            mobileLineHeight: f.mobileLineHeight
                                         }), {
                                             as: "div",
                                             wordBreak: !1,
                                             children: /* @__PURE__ */ e("div", {
-                                                className: c(_[z(t)], {
+                                                className: c(H[B(t)], {
                                                     [ae]: t === s && r
                                                 }),
                                                 children: d
@@ -232,7 +233,7 @@ const P = {
                                 }, t);
                             }),
                             i.length > 0 ? /* @__PURE__ */ e("td", {
-                                className: c(N[C], Y, R, {
+                                className: c(N[C], j, R, {
                                     [L]: n.length === 0
                                 }),
                                 align: "right",
@@ -240,30 +241,30 @@ const P = {
                                     width: `calc(${I} + 12px)`
                                 },
                                 children: w
-                            }) : y && /* @__PURE__ */ e("td", {
-                                className: Y
+                            }) : g && /* @__PURE__ */ e("td", {
+                                className: j
                             }),
                             process.env.NODE_ENV !== "test" && r && i.length > 0 && /* @__PURE__ */ e("td", {
-                                className: oe,
+                                className: se,
                                 style: {
                                     position: "absolute",
-                                    top: `calc(${b ? P.boxed : P.default} - ${Z} + (${G.small} - ${ye.small}) / 2)`,
-                                    right: b ? `calc(${P.boxed} - ${Z})` : 0,
+                                    top: `calc(${h ? $.boxed : $.default} - ${q} + (${Z.small} - ${fe.small}) / 2)`,
+                                    right: h ? `calc(${$.boxed} - ${q})` : 0,
                                     width: I
                                 },
                                 children: w
                             })
                         ]
-                    }, o));
+                    }, a));
                 }) : /* @__PURE__ */ e("tr", {
                     children: /* @__PURE__ */ e("td", {
                         colSpan: m.length,
                         className: c({
-                            [H]: r
+                            [Y]: r
                         }),
-                        children: typeof A == "string" ? /* @__PURE__ */ e(de, {
+                        children: typeof A == "string" ? /* @__PURE__ */ e(he, {
                             paddingY: 56,
-                            children: /* @__PURE__ */ e(me, {
+                            children: /* @__PURE__ */ e(pe, {
                                 regular: !0,
                                 textAlign: "center",
                                 as: "div",
@@ -277,35 +278,35 @@ const P = {
     }), O = function() {
         let l = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
         return {
-            className: c(se, {
-                [ne]: l,
-                [E]: r,
-                [M]: u
+            className: c(ne, {
+                [ie]: l,
+                [M]: r,
+                [_]: b
             }),
-            style: he({
-                [ie.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
+            style: be({
+                [ce.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
             })
         };
     };
-    return b ? /* @__PURE__ */ e(pe, {
+    return h ? /* @__PURE__ */ e(de, {
         desktopOnly: r,
         width: "fit-content",
         maxWidth: "100%",
         minWidth: {
-            desktop: u ? "100%" : "auto",
-            mobile: r || u ? "100%" : "auto"
+            desktop: b ? "100%" : "auto",
+            mobile: r || b ? "100%" : "auto"
         },
-        ref: $,
+        ref: z,
         dataAttributes: _object_spread({
             "component-name": "Table"
-        }, a),
+        }, o),
         children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, O()), {
             children: D
         }))
     }) : /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-        ref: $
-    }, V(a, "Table"), O(K)), {
+        ref: z
+    }, X(o, "Table"), O(Q)), {
         children: D
     }));
 });
-export { Oe as Table };
+export { Ee as Table };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tag.css.ts.vanilla.css-mistica.js";
-var y = "_1y2v1nfhl", _ = "_1y2v1nfhm", f = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
+var y = "_1y2v1nfhl _1y2v1nfa1", _ = "_1y2v1nfhm", f = "_1wy08671 _1y2v1nf7j _1y2v1nf8s _1y2v1nfhl _1y2v1nfhp _1y2v1nfhz _1y2v1nfht _1y2v1nfjg";
 export { y as badge, _ as icon, f as tag };

package/dist-es/tag.js

@@ -52,21 +52,21 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import g from "./box.js";
+import p from "./box.js";
 import { Text as f } from "./text.js";
 import { useThemeVariant as T, ThemeVariant as x } from "./theme-variant-context.js";
-import { pxToRem as h } from "./utils/css.js";
-import { getPrefixedDataAttributes as v } from "./utils/dom.js";
+import { pxToRem as v } from "./utils/css.js";
+import { getPrefixedDataAttributes as h } from "./utils/dom.js";
 import { tag as k, icon as B, badge as b } from "./tag.css-mistica.js";
 import { vars as w } from "./skins/skin-contract.css-mistica.js";
 import A from "classnames";
 import { useTheme as P } from "./hooks.js";
 import V from "./badge.js";
 const { colors: t } = w, C = (param)=>{
-    let { Icon: e, children: o, dataAttributes: c, type: m = "promo", badge: i } = param;
-    const { textPresets: d } = P(), l = T(), a = i === !0 ? void 0 : i || 0;
+    let { Icon: e, children: o, dataAttributes: g, type: c = "promo", badge: i } = param;
+    const { textPresets: m } = P(), d = T(), a = i === !0 ? void 0 : i || 0;
     if (!o) return null;
-    const u = {
+    const l = {
         // [textColor, backgroundColor]
         promo: [
             t.tagTextPromo,
@@ -79,7 +79,7 @@ const { colors: t } = w, C = (param)=>{
         inactive: [
             t.tagTextInactive,
             // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
-            l === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
+            d === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
         ],
         success: [
             t.tagTextSuccess,
@@ -93,20 +93,20 @@ const { colors: t } = w, C = (param)=>{
             t.tagTextError,
             t.tagBackgroundError
         ]
-    }, [n, p] = u[m];
-    return /* @__PURE__ */ s("span", _object_spread_props(_object_spread({}, v(c, "Tag")), {
+    }, [n, u] = l[c];
+    return /* @__PURE__ */ s("span", _object_spread_props(_object_spread({}, h(g, "Tag")), {
         className: A(k),
         style: {
             paddingLeft: e ? 8 : 12,
             paddingRight: a !== 0 ? 8 : 12,
-            background: p
+            background: u
         },
         children: [
-            e && /* @__PURE__ */ r(g, {
+            e && /* @__PURE__ */ r(p, {
                 paddingRight: 4,
                 children: /* @__PURE__ */ r(e, {
                     color: n,
-                    size: h(16),
+                    size: v(16),
                     className: B
                 })
             }),
@@ -117,12 +117,11 @@ const { colors: t } = w, C = (param)=>{
                         color: n,
                         size: 14,
                         lineHeight: 20,
-                        weight: d.indicator.weight,
+                        weight: m.indicator.weight,
                         truncate: !0,
                         children: o
                     }),
-                    a !== 0 && /* @__PURE__ */ r(g, {
-                        paddingLeft: 4,
+                    a !== 0 && /* @__PURE__ */ r("div", {
                         className: b,
                         children: /* @__PURE__ */ r(V, {
                             value: a

package/dist-es/text-props.js

@@ -0,0 +1,52 @@
+const e = {
+    mobileSize: 12,
+    mobileLineHeight: "16px",
+    desktopSize: 14,
+    desktopLineHeight: "20px"
+}, i = {
+    mobileSize: 14,
+    mobileLineHeight: "20px",
+    desktopSize: 16,
+    desktopLineHeight: "24px"
+}, t = {
+    mobileSize: 16,
+    mobileLineHeight: "24px",
+    desktopSize: 18,
+    desktopLineHeight: "24px"
+}, o = {
+    mobileSize: 18,
+    mobileLineHeight: "24px",
+    desktopSize: 20,
+    desktopLineHeight: "28px"
+}, p = {
+    mobileSize: 20,
+    mobileLineHeight: "24px",
+    desktopSize: 28,
+    desktopLineHeight: "32px"
+}, x = {
+    mobileSize: 24,
+    mobileLineHeight: "32px",
+    desktopSize: 32,
+    desktopLineHeight: "40px"
+}, n = {
+    mobileSize: 28,
+    mobileLineHeight: "32px",
+    desktopSize: 40,
+    desktopLineHeight: "48px"
+}, s = {
+    mobileSize: 32,
+    mobileLineHeight: "40px",
+    desktopSize: 48,
+    desktopLineHeight: "56px"
+}, b = {
+    mobileSize: 40,
+    mobileLineHeight: "48px",
+    desktopSize: 56,
+    desktopLineHeight: "64px"
+}, d = {
+    mobileSize: 48,
+    mobileLineHeight: "56px",
+    desktopSize: 64,
+    desktopLineHeight: "72px"
+};
+export { e as text1, d as text10, i as text2, t as text3, o as text4, p as text5, x as text6, n as text7, s as text8, b as text9 };