@telefonica/mistica 16.2.0 → 16.3.1

package/dist/table.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Table", {
     enumerable: true,
     get: function() {
-        return Oe;
+        return Ee;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -14,6 +14,7 @@ const _dom = require("./utils/dom.js");
 const _tablecssmistica = require("./table.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _text = /*#__PURE__*/ _interop_require_wildcard(require("./text.js"));
+const _textprops = require("./text-props.js");
 const _boxed = require("./boxed.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
@@ -147,30 +148,30 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const P = {
+const $ = {
     default: "8px",
     boxed: "16px"
-}, Z = "1px", ke = (a)=>a.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, a), {
-        "aria-label": a.label,
+}, q = "1px", ve = (o)=>o.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, o), {
+        "aria-label": o.label,
         small: !0,
         type: "neutral",
         backgroundType: "transparent",
         bleedY: !0
-    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _object_spread_props(_object_spread({}, a), {
-        checkedProps: _object_spread_props(_object_spread({}, a.checkedProps), {
-            "aria-label": a.checkedProps.label,
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _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__*/ _react.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__*/ _react.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",
@@ -186,16 +187,16 @@ 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__ */ (0, _jsxruntime.jsxs)("table", {
+        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__ */ (0, _jsxruntime.jsxs)("table", {
         className: (0, _classnames.default)(_tablecssmistica.table, {
-            [_tablecssmistica.boxed]: b,
+            [_tablecssmistica.boxed]: h,
             [_tablecssmistica.collapsedRowsInMobile]: r,
-            [_tablecssmistica.fullWidth]: u,
-            [_tablecssmistica.hiddenHeadersInDesktop]: Q,
-            [_tablecssmistica.hiddenHeadersInMobile]: B || r
+            [_tablecssmistica.fullWidth]: b,
+            [_tablecssmistica.hiddenHeadersInDesktop]: U,
+            [_tablecssmistica.hiddenHeadersInMobile]: P || r
         }),
         "aria-label": S["aria-label"],
         "aria-labelledby": S["aria-labelledby"],
@@ -209,28 +210,28 @@ const P = {
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     wordBreak: !1,
                     children: [
-                        m.map((l, o)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("th", {
+                        m.map((l, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("th", {
                                 scope: "col",
-                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[z(o)], _tablecssmistica.verticalAlign[C], {
-                                    [_tablecssmistica.rowFirstItem]: o === 0,
-                                    [_tablecssmistica.rowLastItem]: o === m.length - 1 && !y
+                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[B(a)], _tablecssmistica.verticalAlign[C], {
+                                    [_tablecssmistica.rowFirstItem]: a === 0,
+                                    [_tablecssmistica.rowLastItem]: 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__ */ (0, _jsxruntime.jsx)(_tableactionsheader.TableActionsHeader, {})
+                            }, a)),
+                        g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_tableactionsheader.TableActionsHeader, {})
                     ]
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("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__ */ (0, _jsxruntime.jsx)(_inline.default, {
                         space: 16,
-                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(ke, _object_spread({}, d), t) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
+                        children: i.map((d, t)=>"Icon" in d || "checkedProps" in d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(ve, _object_spread({}, d), t) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Fragment, {
                                 children: d
                             }, t))
                     }), I = i.length ? `calc(${_iconbuttoncssmistica.iconContainerSize.small} * ${i.length} + 16px * ${i.length - 1})` : "0px";
@@ -240,12 +241,12 @@ const P = {
                         },
                         children: [
                             n.map((d, t)=>{
-                                const U = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
+                                const V = s === n.length - 1 ? t === n.length - 2 || n.length === 1 : t === n.length - 1;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsxs)(t === s ? "th" : "td", {
                                     className: (0, _classnames.default)(_tablecssmistica.verticalAlign[C], {
                                         [_tablecssmistica.rowFirstItem]: t === 0,
-                                        [_tablecssmistica.rowLastItem]: t === n.length - 1 && !y,
-                                        [_tablecssmistica.rowLastCollapsedItem]: U && r,
+                                        [_tablecssmistica.rowLastItem]: t === n.length - 1 && !g,
+                                        [_tablecssmistica.rowLastCollapsedItem]: V && r,
                                         [_tablecssmistica.collapsedRowHeaderItem]: t === s && r
                                     }),
                                     style: {
@@ -254,7 +255,7 @@ 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__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _tablecssmistica.mobileCellHeading,
                                             "aria-hidden": !0,
@@ -265,19 +266,19 @@ const P = {
                                             })
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.default, _object_spread_props(_object_spread({
-                                            desktopSize: _text.textProps.text2.desktopSize,
-                                            desktopLineHeight: _text.textProps.text2.desktopLineHeight
+                                            desktopSize: _textprops.text2.desktopSize,
+                                            desktopLineHeight: _textprops.text2.desktopLineHeight
                                         }, t === s && r ? {
-                                            mobileSize: _text.textProps.text4.mobileSize,
-                                            mobileLineHeight: _text.textProps.text4.mobileLineHeight
+                                            mobileSize: _textprops.text4.mobileSize,
+                                            mobileLineHeight: _textprops.text4.mobileLineHeight
                                         } : {
-                                            mobileSize: _text.textProps.text2.mobileSize,
-                                            mobileLineHeight: _text.textProps.text2.mobileLineHeight
+                                            mobileSize: _textprops.text2.mobileSize,
+                                            mobileLineHeight: _textprops.text2.mobileLineHeight
                                         }), {
                                             as: "div",
                                             wordBreak: !1,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[z(t)], {
+                                                className: (0, _classnames.default)(_tablecssmistica.cellTextAlign[B(t)], {
                                                     [_tablecssmistica.collapsedRowTitle]: t === s && r
                                                 }),
                                                 children: d
@@ -295,21 +296,21 @@ const P = {
                                     width: `calc(${I} + 12px)`
                                 },
                                 children: w
-                            }) : y && /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
+                            }) : g && /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
                                 className: _tablecssmistica.actionsTableCell
                             }),
                             process.env.NODE_ENV !== "test" && r && i.length > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
                                 className: _tablecssmistica.topActions,
                                 style: {
                                     position: "absolute",
-                                    top: `calc(${b ? P.boxed : P.default} - ${Z} + (${_iconbuttoncssmistica.iconContainerSize.small} - ${_iconbuttoncssmistica.iconSize.small}) / 2)`,
-                                    right: b ? `calc(${P.boxed} - ${Z})` : 0,
+                                    top: `calc(${h ? $.boxed : $.default} - ${q} + (${_iconbuttoncssmistica.iconContainerSize.small} - ${_iconbuttoncssmistica.iconSize.small}) / 2)`,
+                                    right: h ? `calc(${$.boxed} - ${q})` : 0,
                                     width: I
                                 },
                                 children: w
                             })
                         ]
-                    }, o);
+                    }, a);
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("tr", {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("td", {
                         colSpan: m.length,
@@ -335,31 +336,31 @@ const P = {
             className: (0, _classnames.default)(_tablecssmistica.scrollContainer, {
                 [_tablecssmistica.scrollOverResponsiveLayout]: l,
                 [_tablecssmistica.collapsedRowsInMobile]: r,
-                [_tablecssmistica.fullWidth]: u
+                [_tablecssmistica.fullWidth]: b
             }),
             style: (0, _css.applyCssVars)({
                 [_tablecssmistica.vars.maxHeight]: typeof v == "number" ? `${v}px` : v !== null && v !== void 0 ? v : "auto"
             })
         };
     };
-    return b ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
+    return h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
         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__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, O()), {
             children: D
         }))
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        ref: $
-    }, (0, _dom.getPrefixedDataAttributes)(a, "Table"), O(K)), {
+        ref: z
+    }, (0, _dom.getPrefixedDataAttributes)(o, "Table"), O(Q)), {
         children: D
     }));
 });

package/dist/tag.css-mistica.js

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";

package/dist/tag.js

@@ -78,10 +78,10 @@ function _object_spread_props(target, source) {
     return target;
 }
 const { colors: t } = _skincontractcssmistica.vars, C = (param)=>{
-    let { Icon: e, children: o, dataAttributes: c, type: m = "promo", badge: i } = param;
-    const { textPresets: d } = (0, _hooks.useTheme)(), l = (0, _themevariantcontext.useThemeVariant)(), a = i === !0 ? void 0 : i || 0;
+    let { Icon: e, children: o, dataAttributes: g, type: c = "promo", badge: i } = param;
+    const { textPresets: m } = (0, _hooks.useTheme)(), d = (0, _themevariantcontext.useThemeVariant)(), a = i === !0 ? void 0 : i || 0;
     if (!o) return null;
-    const u = {
+    const l = {
         // [textColor, backgroundColor]
         promo: [
             t.tagTextPromo,
@@ -94,7 +94,7 @@ const { colors: t } = _skincontractcssmistica.vars, 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,
@@ -108,13 +108,13 @@ const { colors: t } = _skincontractcssmistica.vars, C = (param)=>{
             t.tagTextError,
             t.tagBackgroundError
         ]
-    }, [n, p] = u[m];
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Tag")), {
+    }, [n, u] = l[c];
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(g, "Tag")), {
         className: (0, _classnames.default)(_tagcssmistica.tag),
         style: {
             paddingLeft: e ? 8 : 12,
             paddingRight: a !== 0 ? 8 : 12,
-            background: p
+            background: u
         },
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -132,12 +132,11 @@ const { colors: t } = _skincontractcssmistica.vars, C = (param)=>{
                         color: n,
                         size: 14,
                         lineHeight: 20,
-                        weight: d.indicator.weight,
+                        weight: m.indicator.weight,
                         truncate: !0,
                         children: o
                     }),
-                    a !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingLeft: 4,
+                    a !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _tagcssmistica.badge,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
                             value: a

package/dist/text-props.d.ts

@@ -0,0 +1,60 @@
+export declare const text1: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text2: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text3: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text4: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text5: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text6: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text7: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text8: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text9: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};
+export declare const text10: {
+    mobileSize: number;
+    mobileLineHeight: string;
+    desktopSize: number;
+    desktopLineHeight: string;
+};

package/dist/text-props.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    text1: function() {
+        return e;
+    },
+    text10: function() {
+        return d;
+    },
+    text2: function() {
+        return i;
+    },
+    text3: function() {
+        return t;
+    },
+    text4: function() {
+        return o;
+    },
+    text5: function() {
+        return p;
+    },
+    text6: function() {
+        return x;
+    },
+    text7: function() {
+        return n;
+    },
+    text8: function() {
+        return s;
+    },
+    text9: function() {
+        return b;
+    }
+});
+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"
+};

package/dist/text.d.ts

@@ -58,68 +58,6 @@ interface RestrictedWeightTextProps<T> extends TextPresetProps {
 }
 type RegularMediumProps = ExclusifyUnion<RegularProps | MediumProps | RestrictedWeightTextProps<'regular' | 'medium'>>;
 type LightRegularMediumProps = ExclusifyUnion<LightProps | RegularProps | MediumProps | RestrictedWeightTextProps<'light' | 'regular' | 'medium'>>;
-export declare const textProps: {
-    text1: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text2: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text3: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text4: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text5: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text6: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text7: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text8: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text9: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-    text10: {
-        mobileSize: number;
-        mobileLineHeight: string;
-        desktopSize: number;
-        desktopLineHeight: string;
-    };
-};
 export declare const Text10: ({ dataAttributes, forceMobileSizes, ...props }: TextPresetProps) => JSX.Element;
 export declare const Text9: ({ dataAttributes, forceMobileSizes, ...props }: TextPresetProps) => JSX.Element;
 export declare const Text8: ({ dataAttributes, forceMobileSizes, ...props }: TextPresetProps) => JSX.Element;