@telefonica/mistica 14.48.0 → 15.0.0

package/dist/slider.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Ne;
+        return De;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -122,28 +122,26 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Ce = 48, Ve = 20, pe = 28, Pe = (r, t, c)=>t >= c ? 0 : (r - t) / (c - t), B = (r, t, c, l, a)=>{
-    const s = (m)=>{
-        if (m === void 0) return t;
-        const $ = r ? t + (c - t) * m : m;
-        return Math.max(t, Math.min(c, $));
+const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t), I = (n, t, o, a, g)=>{
+    const v = (i)=>{
+        if (i === void 0) return t;
+        const B = n ? t + (o - t) * i : i;
+        return Math.max(t, Math.min(o, B));
     };
-    if (t >= c) return t;
-    const b = s(a), P = t + Math.floor((b - t) / l) * l, R = t + Math.ceil((b - t) / l) * l;
-    return R <= c && R - b <= b - P ? R : P;
-}, D = (r, t, c)=>{
-    if (!c) return t;
-    if (t === void 0) return r;
-    let l = 0;
-    return c.forEach((a, s)=>{
-        c && Math.abs(a - t) <= Math.abs(c[l] - t) && (l = s);
-    }), l;
-}, Se = /*#__PURE__*/ _react.forwardRef((_param, Z)=>{
-    var { values: r, step: t = 1, steps: c, getStepArrayIndex: l, min: a = 0, max: s = 100, "aria-label": b, "aria-labelledby": P, id: R, dataAttributes: m, tooltip: $ } = _param, f = _object_without_properties(_param, [
+    if (t >= o) return t;
+    const h = v(g), P = t + Math.floor((h - t) / a) * a, R = t + Math.ceil((h - t) / a) * a;
+    return R <= o && R - h <= h - P ? R : P;
+}, w = (n, t, o)=>{
+    if (!o) return t;
+    if (t === void 0) return n;
+    let a = 0;
+    return o.forEach((g, v)=>{
+        o && Math.abs(g - t) <= Math.abs(o[a] - t) && (a = v);
+    }), a;
+}, Pe = /*#__PURE__*/ _react.forwardRef((_param, B)=>{
+    var { values: n, step: t = 1, min: o = 0, max: a = 100, "aria-label": g, "aria-labelledby": v, id: h, dataAttributes: P, tooltip: R } = _param, i = _object_without_properties(_param, [
         "values",
         "step",
-        "steps",
-        "getStepArrayIndex",
         "min",
         "max",
         "aria-label",
@@ -152,142 +150,142 @@ const Ce = 48, Ve = 20, pe = 28, Pe = (r, t, c)=>t >= c ? 0 : (r - t) / (c - t),
         "dataAttributes",
         "tooltip"
     ]);
-    r && (r.length === 0 ? r = void 0 : s = r.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
-    const { defaultValue: z, value: H, onChange: N, focusableRef: q, disabled: U, name: G } = (0, _formcontext.useControlProps)({
-        name: f.name,
-        value: f.value !== void 0 ? B(!1, a, s, t, D(a, f.value, r)) : void 0,
-        defaultValue: f.defaultValue !== void 0 ? B(!1, a, s, t, D(a, f.defaultValue, r)) : void 0,
-        onChange: f.onChangeValue,
-        disabled: f.disabled
-    }), [J, K] = _react.useState(H !== null && H !== void 0 ? H : B(!1, a, s, t, D(a, z, r))), d = H !== null && H !== void 0 ? H : J, y = _react.useRef(d), S = _react.useCallback((e, o)=>{
-        const n = B(o, a, s, t, e);
-        y.current !== n && (N(r ? r[n] : n), K(n), y.current = n);
+    n && (n.length === 0 ? n = void 0 : a = n.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
+    const { defaultValue: Z, value: D, onChange: H, focusableRef: x, disabled: N, name: z } = (0, _formcontext.useControlProps)({
+        name: i.name,
+        value: i.value !== void 0 ? I(!1, o, a, t, w(o, i.value, n)) : void 0,
+        defaultValue: i.defaultValue !== void 0 ? I(!1, o, a, t, w(o, i.defaultValue, n)) : void 0,
+        onChange: i.onChangeValue,
+        disabled: i.disabled
+    }), [q, G] = _react.useState(D !== null && D !== void 0 ? D : I(!1, o, a, t, w(o, Z, n))), u = D !== null && D !== void 0 ? D : q, $ = _react.useRef(u), T = _react.useCallback((e, r)=>{
+        const c = I(r, o, a, t, e);
+        $.current !== c && (H(n ? n[c] : c), G(c), $.current = c);
     }, [
+        o,
         a,
-        s,
         t,
-        r,
-        N
+        n,
+        H
     ]);
     _react.useEffect(()=>{
-        S(y.current, !1);
+        T($.current, !1);
     }, [
-        S
+        T
     ]);
-    const _ = _react.useRef(null), C = _react.useRef(null), F = _react.useRef(null), Q = _react.useRef(null), [T, E] = _react.useState(!1), [A, L] = _react.useState(!1), [W, O] = _react.useState(!1), { isIos: I } = (0, _hooks.useTheme)(), k = (e, o, n)=>{
-        const g = e == null ? void 0 : e.getBoundingClientRect();
-        return !!g && g.left <= o && o <= g.right && g.top <= n && n <= g.bottom;
-    }, u = (0, _environment.isTouchableDevice)(), V = I ? pe : Ve, h = u ? Ce : V, M = (e)=>{
-        const o = _.current;
-        if (o) {
-            const n = o.getBoundingClientRect().left + V / 2, g = o.getBoundingClientRect().right - V / 2;
-            S((e - n) / (g - n), !0);
+    const U = _react.useRef(null), m = _react.useRef(null), _ = _react.useRef(null), J = _react.useRef(null), [p, E] = _react.useState(!1), [y, F] = _react.useState(!1), [K, L] = _react.useState(!1), { isIos: S } = (0, _hooks.useTheme)(), A = (e, r, c)=>{
+        const d = e == null ? void 0 : e.getBoundingClientRect();
+        return !!d && d.left <= r && r <= d.right && d.top <= c && c <= d.bottom;
+    }, l = (0, _environment.isTouchableDevice)(), C = S ? Ce : me, f = l ? Re : C, M = (e)=>{
+        const r = U.current;
+        if (r) {
+            const c = r.getBoundingClientRect().left + C / 2, d = r.getBoundingClientRect().right - C / 2;
+            T((e - c) / (d - c), !0);
         }
-    }, ee = (e)=>{
+    }, Q = (e)=>{
         (0, _dom.cancelEvent)(e), M(e.clientX);
-    }, te = (e)=>{
-        const o = C.current;
-        o && (o.onpointermove = ee, o.setPointerCapture(e.pointerId));
-    }, oe = (e)=>{
-        const o = C.current;
-        o && (o.onpointermove = null, o.releasePointerCapture(e.pointerId));
-    }, w = `calc(${Pe(d, a, s)} * (100% - ${V}px) - ${(h - V) / 2}px)`, X = `calc(${w} + ${h / 2}px)`, Y = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(I ? _slidercssmistica.iosThumb : _slidercssmistica.defaultThumb, {
-            [_slidercssmistica.thumbHover]: !I && A && !T,
-            [_slidercssmistica.thumbActive]: !I && T
+    }, W = (e)=>{
+        const r = m.current;
+        r && (r.onpointermove = Q, r.setPointerCapture(e.pointerId));
+    }, ee = (e)=>{
+        const r = m.current;
+        r && (r.onpointermove = null, r.releasePointerCapture(e.pointerId));
+    }, k = `calc(${Ve(u, o, a)} * (100% - ${C}px) - ${(f - C) / 2}px)`, O = `calc(${k} + ${f / 2}px)`, X = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(S ? _slidercssmistica.iosThumb : _slidercssmistica.defaultThumb, {
+            [_slidercssmistica.thumbHover]: !S && y && !p,
+            [_slidercssmistica.thumbActive]: !S && p
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingY: 8,
         dataAttributes: _object_spread({
             "component-name": "Slider"
-        }, m),
+        }, P),
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: (0, _classnames.default)(_slidercssmistica.container, {
-                [_slidercssmistica.disabled]: U
+                [_slidercssmistica.disabled]: N
             }),
             style: {
-                height: h
+                height: f
             },
-            ref: F,
+            ref: _,
             onPointerDown: (e)=>{
-                const o = e.clientX, n = e.clientY;
-                !u && k(F.current, o, n) ? (k(C.current, o, n) || M(o), E(!0), te(e)) : (0, _dom.cancelEvent)(e);
+                const r = e.clientX, c = e.clientY;
+                !l && A(_.current, r, c) ? (A(m.current, r, c) || M(r), E(!0), W(e)) : (0, _dom.cancelEvent)(e);
             },
             onPointerUp: (e)=>{
-                u || (E(!1), oe(e));
+                l || (E(!1), ee(e));
             },
             onTouchStart: (e)=>{
-                if ((0, _dom.cancelEvent)(e), u) {
-                    const o = e.nativeEvent.touches[0].clientX, n = e.nativeEvent.touches[0].clientY;
-                    k(C.current, o, n) || M(o), E(!0);
+                if ((0, _dom.cancelEvent)(e), l) {
+                    const r = e.nativeEvent.touches[0].clientX, c = e.nativeEvent.touches[0].clientY;
+                    A(m.current, r, c) || M(r), E(!0);
                 }
             },
             onTouchEnd: (e)=>{
-                (0, _dom.cancelEvent)(e), u && E(!1);
+                (0, _dom.cancelEvent)(e), l && E(!1);
             },
             onTouchMove: (e)=>{
-                (0, _dom.cancelEvent)(e), u && M(e.nativeEvent.touches[0].clientX);
+                (0, _dom.cancelEvent)(e), l && M(e.nativeEvent.touches[0].clientX);
             },
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _slidercssmistica.track,
-                    ref: _,
+                    ref: U,
                     style: {
-                        background: `linear-gradient(to right, ${_skincontractcssmistica.vars.colors.controlActivated} ${X}, ${_skincontractcssmistica.vars.colors.barTrack} ${X}`
+                        background: `linear-gradient(to right, ${_skincontractcssmistica.vars.colors.controlActivated} ${O}, ${_skincontractcssmistica.vars.colors.barTrack} ${O}`
                     }
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _slidercssmistica.thumbContainer,
-                    ref: C,
+                    ref: m,
                     style: {
-                        cursor: T ? "grabbing" : A ? "grab" : "auto",
-                        left: w,
-                        width: h,
-                        height: h
+                        cursor: p ? "grabbing" : y ? "grab" : "auto",
+                        left: k,
+                        width: f,
+                        height: f
                     },
                     onPointerEnter: ()=>{
-                        u || L(!0);
+                        l || F(!0);
                     },
                     onPointerLeave: ()=>{
-                        u || L(!1);
+                        l || F(!1);
                     },
-                    children: $ ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
-                        target: Y,
-                        open: T || W || A ? !0 : void 0,
-                        description: String(r ? r[d] : d),
+                    children: R ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
+                        target: X,
+                        open: p || K || y ? !0 : void 0,
+                        description: String(n ? n[u] : u),
                         centerContent: !0,
                         delay: !1
-                    }) : Y
+                    }) : X
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("input", {
                     type: "range",
-                    min: a,
-                    max: s,
-                    ref: (0, _common.combineRefs)(Z, Q, q),
+                    min: o,
+                    max: a,
+                    ref: (0, _common.combineRefs)(B, J, x),
                     step: t,
-                    "aria-label": b,
-                    "aria-labelledby": P,
-                    id: R,
+                    "aria-label": g,
+                    "aria-labelledby": v,
+                    id: h,
                     className: _slidercssmistica.input,
-                    "aria-valuetext": String(r ? r[d] : d),
+                    "aria-valuetext": String(n ? n[u] : u),
                     style: {
-                        left: w,
-                        width: h,
-                        height: h
+                        left: k,
+                        width: f,
+                        height: f
                     },
-                    name: G,
-                    value: d,
-                    disabled: U,
-                    onChange: (e)=>S(+e.target.value, !1),
+                    name: z,
+                    value: u,
+                    disabled: N,
+                    onChange: (e)=>T(+e.target.value, !1),
                     onFocus: ()=>{
-                        O(!0);
+                        L(!0);
                     },
                     onBlur: ()=>{
-                        O(!1);
+                        L(!1);
                     }
                 })
             ]
         })
     });
-}), Ne = Se;
+}), De = Pe;

package/dist/tag.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return F;
+        return I;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -78,54 +78,49 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const { colors: r } = _skincontractcssmistica.vars, V = (param)=>{
-    let { Icon: o, children: n, dataAttributes: d, type: u = "promo", badge: a } = param;
-    const { textPresets: h } = (0, _hooks.useTheme)(), m = (0, _themevariantcontext.useThemeVariant)(), i = m === "inverse", t = a === !0 ? void 0 : a || 0;
-    if (!n) return null;
-    const f = {
-        // [textColor, inverseTextColor, backgroundColor]
+const { colors: t } = _skincontractcssmistica.vars, P = (param)=>{
+    let { Icon: e, children: i, dataAttributes: m, type: l = "promo", badge: n } = param;
+    const { textPresets: d } = (0, _hooks.useTheme)(), p = (0, _themevariantcontext.useThemeVariant)(), o = n === !0 ? void 0 : n || 0;
+    if (!i) return null;
+    const u = {
+        // [textColor, backgroundColor]
         promo: [
-            r.promoHigh,
-            r.promoHighInverse,
-            r.promoLow
+            t.tagTextPromo,
+            t.tagBackgroundPromo
         ],
         active: [
-            r.brand,
-            r.brand,
-            r.brandLow
+            t.tagTextActive,
+            t.tagBackgroundActive
         ],
         inactive: [
-            r.neutralMedium,
-            r.neutralMediumInverse,
-            m === "alternative" ? r.neutralLowAlternative : r.neutralLow
+            t.tagTextInactive,
+            // TODO: remove logic for alternative variant (https://jira.tid.es/browse/WEB-1803)
+            p === "alternative" ? t.neutralLowAlternative : t.tagBackgroundInactive
         ],
         success: [
-            r.successHigh,
-            r.successHighInverse,
-            r.successLow
+            t.tagTextSuccess,
+            t.tagBackgroundSuccess
         ],
         warning: [
-            r.warningHigh,
-            r.warningHighInverse,
-            r.warningLow
+            t.tagTextWarning,
+            t.tagBackgroundWarning
         ],
         error: [
-            r.errorHigh,
-            r.errorHighInverse,
-            r.errorLow
+            t.tagTextError,
+            t.tagBackgroundError
         ]
-    }, [l, c, v] = f[u];
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(d, "Tag")), {
+    }, [s, f] = u[l];
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(m, "Tag")), {
         className: (0, _classnames.default)(_tagcssmistica.tag, (0, _sprinklescssmistica.sprinkles)({
-            paddingLeft: o ? 8 : 12,
-            paddingRight: t !== 0 ? 8 : 12,
-            background: i ? r.inverse : v
+            paddingLeft: e ? 8 : 12,
+            paddingRight: o !== 0 ? 8 : 12,
+            background: f
         })),
         children: [
-            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 4,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(o, {
-                    color: i ? c : l,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(e, {
+                    color: s,
                     size: (0, _css.pxToRem)(16),
                     className: (0, _sprinklescssmistica.sprinkles)({
                         display: "block"
@@ -136,24 +131,24 @@ const { colors: r } = _skincontractcssmistica.vars, V = (param)=>{
                 isInverse: !1,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                        color: i ? c : l,
+                        color: s,
                         size: 14,
                         lineHeight: 20,
-                        weight: h.indicator.weight,
+                        weight: d.indicator.weight,
                         truncate: !0,
-                        children: n
+                        children: i
                     }),
-                    t !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    o !== 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: 4,
                         className: (0, _sprinklescssmistica.sprinkles)({
                             display: "inline-flex"
                         }),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
-                            value: t
+                            value: o
                         })
                     })
                 ]
             })
         ]
     }));
-}, F = V;
+}, I = P;

package/dist/tooltip.d.ts

@@ -13,22 +13,6 @@ type Props = {
     dataAttributes?: DataAttributes;
     centerContent?: boolean;
     open?: boolean;
-    /**
-     * @deprecated This field is deprecated.
-     */
-    targetLabel?: string;
-    /**
-     * @deprecated This field is deprecated.
-     */
-    targetStyle?: React.CSSProperties;
-    /**
-     * @deprecated This field is deprecated.
-     */
-    unstable_offsetX?: number | string;
-    /**
-     * @deprecated This field is deprecated, use centerContent instead.
-     */
-    textCenter?: boolean;
 };
 type BaseTooltipProps = {
     content?: React.ReactNode;