@telefonica/mistica 12.9.1 → 12.10.0

package/dist/text.js

@@ -10,49 +10,51 @@ function _export(target, all) {
 }
 _export(exports, {
     Text: function() {
-        return n;
+        return r;
     },
     Text1: function() {
-        return Z;
+        return xe;
     },
     Text10: function() {
-        return U;
+        return te;
     },
     Text2: function() {
-        return Y;
+        return me;
     },
     Text3: function() {
-        return X;
+        return he;
     },
     Text4: function() {
-        return Q;
+        return le;
     },
     Text5: function() {
-        return K;
+        return se;
     },
     Text6: function() {
-        return J;
+        return oe;
     },
     Text7: function() {
-        return G;
+        return ne;
     },
     Text8: function() {
-        return F;
+        return re;
     },
     Text9: function() {
-        return V;
+        return ie;
     },
     default: function() {
-        return n;
+        return r;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
-var _jssJs = require("./jss.js");
+var _dynamic = require("@vanilla-extract/dynamic");
 var _themeVariantContextJs = require("./theme-variant-context.js");
 var _cssJs = require("./utils/css.js");
 var _domJs = require("./utils/dom.js");
 var _hooksJs = require("./hooks.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+var _textCssMisticaJs = require("./text.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -150,223 +152,144 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-var C = (0, _jssJs.createUseStyles)(function(e) {
-    var _obj;
-    var i = {
-        light: 300,
-        regular: 400,
-        medium: 500,
-        bold: 700
-    }, c = (_obj = {}, _defineProperty(_obj, e.colors.textPrimary, e.colors.textPrimaryInverse), _defineProperty(_obj, e.colors.textSecondary, e.colors.textSecondaryInverse), _defineProperty(_obj, e.colors.textLink, e.colors.textLinkInverse), _obj), s = function s(param) {
-        var t = param.truncate;
-        return t === !0 ? 1 : t || "initial";
-    };
-    return {
-        text: _defineProperty({
-            lineHeight: function lineHeight(param) {
-                var t = param.desktopLineHeight;
-                return (0, _cssJs.pxToRem)(t);
-            },
-            textTransform: function textTransform(param) {
-                var t = param.transform;
-                return t || "inherit";
-            },
-            fontSize: function fontSize(param) {
-                var t = param.desktopSize;
-                return (0, _cssJs.pxToRem)(t);
-            },
-            fontWeight: function fontWeight(param) {
-                var t = param.weight;
-                return t ? i[t] : "inherit";
-            },
-            color: function color(param) {
-                var t = param.isInverse, tmp = param.color, o = tmp === void 0 ? e.colors.textPrimary : tmp;
-                var h;
-                return t && (h = c[o]) != null ? h : o;
-            },
-            textDecoration: function textDecoration(t) {
-                var o;
-                return (o = t.decoration) != null ? o : "inherit";
-            },
-            letterSpacing: function letterSpacing(param) {
-                var t = param.letterSpacing;
-                return t;
-            },
-            overflowWrap: function overflowWrap(param) {
-                var t = param.wordBreak;
-                return t ? "anywhere" : "inherit";
-            },
-            "@supports not (overflow-wrap: anywhere)": {
-                wordBreak: function wordBreak(param) {
-                    var t = param.wordBreak;
-                    return t ? "break-word" : "inherit";
-                }
-            },
-            hyphens: function hyphens(param) {
-                var t = param.hyphens;
-                return t;
-            },
-            margin: 0
-        }, e.mq.tabletOrSmaller, {
-            lineHeight: function lineHeight(param) {
-                var t = param.mobileLineHeight;
-                return (0, _cssJs.pxToRem)(t);
-            },
-            fontSize: function fontSize(param) {
-                var t = param.mobileSize;
-                return (0, _cssJs.pxToRem)(t);
-            }
-        }),
-        truncate: {
-            "-webkit-line-clamp": s,
-            lineClamp: s,
-            wordBreak: function wordBreak(param) {
-                var t = param.truncate;
-                return t === 1 || t === !0 ? "break-all" : "break-word";
-            },
-            "@supports (overflow-wrap: anywhere)": {
-                overflowWrap: "anywhere",
-                wordBreak: function wordBreak(param) {
-                    var t = param.truncate;
-                    return t === 1 || t === !0 ? "break-all" : "normal";
-                }
-            },
-            display: "-webkit-box",
-            boxOrient: "vertical",
-            overflow: "hidden"
-        }
-    };
-}), n = function n(param) {
-    var e = param.weight, i = param.color, c = param.decoration, s = param.truncate, t = param.transform, tmp = param.wordBreak, o = tmp === void 0 ? !0 : tmp, h = param.hyphens, tmp1 = param.as, b = tmp1 === void 0 ? "span" : tmp1, x = param.children, d = param.size, tmp2 = param.mobileSize, k = tmp2 === void 0 ? d : tmp2, tmp3 = param.desktopSize, p = tmp3 === void 0 ? d : tmp3, m = param.lineHeight, tmp4 = param.mobileLineHeight, S = tmp4 === void 0 ? m : tmp4, tmp5 = param.desktopLineHeight, f = tmp5 === void 0 ? m : tmp5, z = param.letterSpacing, H = param.id, L = param.role, T = param["aria-level"], v = param.dataAttributes;
-    var y = (0, _themeVariantContextJs.useIsInverseVariant)(), g = C({
-        isInverse: y,
-        mobileSize: k,
-        desktopSize: p,
-        mobileLineHeight: S,
-        desktopLineHeight: f,
-        weight: e,
-        color: i,
-        decoration: c,
-        transform: t,
-        wordBreak: o,
-        hyphens: h,
-        letterSpacing: z,
-        truncate: s
-    });
-    if (!x && x !== 0) return null;
-    var P = (0, _classnames.default)(g.text, _defineProperty({}, g.truncate, !!s));
-    return /*#__PURE__*/ _react.createElement(b, _objectSpread({
-        className: P,
-        id: H,
-        role: L,
-        "aria-level": T
-    }, (0, _domJs.getPrefixedDataAttributes)(v)), x);
-}, u = function u(e) {
-    return e.regular && "regular" || e.medium && "medium";
-}, w = function w(e) {
-    return e.light && "light" || e.regular && "regular" || e.medium && "medium";
-}, U = function U(e) {
-    var ref = (0, _hooksJs.useTheme)(), i = ref.textPresets;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+var _obj;
+var q = {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    bold: 700
+}, F = (_obj = {}, _defineProperty(_obj, _skinContractCssMisticaJs.vars.colors.textPrimary, _skinContractCssMisticaJs.vars.colors.textPrimaryInverse), _defineProperty(_obj, _skinContractCssMisticaJs.vars.colors.textSecondary, _skinContractCssMisticaJs.vars.colors.textSecondaryInverse), _defineProperty(_obj, _skinContractCssMisticaJs.vars.colors.textLink, _skinContractCssMisticaJs.vars.colors.textLinkInverse), _obj), G = function G(e) {
+    return e === !0 ? 1 : e || "initial";
+}, r = function r(param) {
+    var e = param.weight, tmp = param.color, t = tmp === void 0 ? _skinContractCssMisticaJs.vars.colors.textPrimary : tmp, x = param.decoration, o = param.truncate, f = param.transform, tmp1 = param.wordBreak, g = tmp1 === void 0 ? !0 : tmp1, z = param.hyphens, tmp2 = param.as, w = tmp2 === void 0 ? "span" : tmp2, c = param.children, d = param.size, tmp3 = param.mobileSize, a = tmp3 === void 0 ? d : tmp3, tmp4 = param.desktopSize, u = tmp4 === void 0 ? d : tmp4, p = param.lineHeight, tmp5 = param.mobileLineHeight, S = tmp5 === void 0 ? p : tmp5, tmp6 = param.desktopLineHeight, k = tmp6 === void 0 ? p : tmp6, H = param.letterSpacing, T = param.id, v = param.role, P = param["aria-level"], y = param.dataAttributes;
+    var L;
+    var I = (0, _themeVariantContextJs.useIsInverseVariant)(), W = G(o);
+    if (!c && c !== 0) return null;
+    var _obj, _obj1;
+    var V = (0, _classnames.default)(_textCssMisticaJs.text, g ? _textCssMisticaJs.withWordBreak : _textCssMisticaJs.withoutWordBreak, (_obj = {}, _defineProperty(_obj, _textCssMisticaJs.truncateToOneLine, o === 1 || o === !0), _defineProperty(_obj, _textCssMisticaJs.truncateToMoreThanOneLine, o && o > 1), _obj)), C = (0, _dynamic.assignInlineVars)((_obj1 = {}, _defineProperty(_obj1, _textCssMisticaJs.vars.mobileSize, a ? (0, _cssJs.pxToRem)(a) : ""), _defineProperty(_obj1, _textCssMisticaJs.vars.mobileLineHeight, S ? (0, _cssJs.pxToRem)(S) : ""), _defineProperty(_obj1, _textCssMisticaJs.vars.desktopSize, u ? (0, _cssJs.pxToRem)(u) : ""), _defineProperty(_obj1, _textCssMisticaJs.vars.desktopLineHeight, k ? (0, _cssJs.pxToRem)(k) : ""), _obj1)), D = o ? (0, _dynamic.assignInlineVars)(_defineProperty({}, _textCssMisticaJs.vars.lineClamp, String(W))) : {};
+    return /*#__PURE__*/ _react.createElement(w, _objectSpreadProps(_objectSpread({
+        className: V,
+        id: T,
+        role: v,
+        "aria-level": P
+    }, (0, _domJs.getPrefixedDataAttributes)(y)), {
+        style: _objectSpreadProps(_objectSpread({}, C, D), {
+            margin: 0,
+            hyphens: z,
+            letterSpacing: H,
+            fontWeight: e ? q[e] : "inherit",
+            textTransform: f || "inherit",
+            textDecoration: x != null ? x : "inherit",
+            overflowWrap: g ? "anywhere" : "inherit",
+            color: I && (L = F[t]) != null ? L : t
+        })
+    }), c);
+}, m = function m(e) {
+    if (e.light) return "light";
+    if (e.regular) return "regular";
+    if (e.medium) return "medium";
+}, te = function te(e) {
+    var ref = (0, _hooksJs.useTheme)(), t = ref.textPresets;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 64,
         desktopLineHeight: "72px",
-        weight: i.text10.weight
+        weight: t.text10.weight
     }, e), {
         children: e.children
     }));
-}, V = function V(e) {
-    var ref = (0, _hooksJs.useTheme)(), i = ref.textPresets;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, ie = function ie(e) {
+    var ref = (0, _hooksJs.useTheme)(), t = ref.textPresets;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 56,
         desktopLineHeight: "64px",
-        weight: i.text9.weight
+        weight: t.text9.weight
     }, e), {
         children: e.children
     }));
-}, F = function F(e) {
-    var ref = (0, _hooksJs.useTheme)(), i = ref.textPresets;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, re = function re(e) {
+    var ref = (0, _hooksJs.useTheme)(), t = ref.textPresets;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 48,
         desktopLineHeight: "56px",
-        weight: i.text8.weight
+        weight: t.text8.weight
     }, e), {
         children: e.children
     }));
-}, G = function G(e) {
-    var ref = (0, _hooksJs.useTheme)(), i = ref.textPresets;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, ne = function ne(e) {
+    var ref = (0, _hooksJs.useTheme)(), t = ref.textPresets;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: i.text7.weight
+        weight: t.text7.weight
     }, e), {
         children: e.children
     }));
-}, J = function J(e) {
-    var ref = (0, _hooksJs.useTheme)(), i = ref.textPresets;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, oe = function oe(e) {
+    var ref = (0, _hooksJs.useTheme)(), t = ref.textPresets;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
         desktopLineHeight: "40px",
-        weight: i.text6.weight
+        weight: t.text6.weight
     }, e), {
         children: e.children
     }));
-}, K = function K(e) {
-    var ref = (0, _hooksJs.useTheme)(), i = ref.textPresets;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, se = function se(e) {
+    var ref = (0, _hooksJs.useTheme)(), t = ref.textPresets;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 22,
         mobileLineHeight: "24px",
         desktopSize: 28,
         desktopLineHeight: "32px",
-        weight: i.text5.weight
+        weight: t.text5.weight
     }, e), {
         children: e.children
     }));
-}, Q = function Q(e) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, le = function le(e) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 18,
         mobileLineHeight: "24px",
         desktopSize: 20,
         desktopLineHeight: "28px",
-        weight: w(e)
+        weight: m(e)
     }, e), {
         children: e.children
     }));
-}, X = function X(e) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, he = function he(e) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 16,
         desktopSize: 18,
         lineHeight: "24px",
-        weight: w(e)
+        weight: m(e)
     }, e), {
         children: e.children
     }));
-}, Y = function Y(e) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, me = function me(e) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 14,
         mobileLineHeight: "20px",
         desktopSize: 16,
         desktopLineHeight: "24px",
-        weight: u(e)
+        weight: m(e)
     }, e), {
         children: e.children
     }));
-}, Z = function Z(e) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, _objectSpreadProps(_objectSpread({
+}, xe = function xe(e) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r, _objectSpreadProps(_objectSpread({
         mobileSize: 12,
         mobileLineHeight: "16px",
         desktopSize: 14,
         desktopLineHeight: "20px",
-        weight: u(e)
+        weight: m(e)
     }, e), {
         children: e.children
     }));

package/dist/text.js.flow

@@ -20,7 +20,7 @@ export type TextPresetProps = {
 declare type TextProps = {
   ...$Exact<TextPresetProps>,
 
-  weight?: FontWeight | boolean,
+  weight?: FontWeight,
 
   /**
    * in pixels, will be converted to rem in runtime