@telefonica/mistica 16.5.0 → 16.6.0

package/dist/meter.js

@@ -0,0 +1,400 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return Zt;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _cubicbezier = /*#__PURE__*/ _interop_require_default(require("cubic-bezier"));
+const _dom = require("./utils/dom.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+const _hooks = require("./hooks.js");
+const _texttokens = require("./text-tokens.js");
+const _platform = require("./utils/platform.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const A = 100, J = A / 2, ft = A / 2, Q = 6, wt = 2, gt = 200, tt = 1e3, Nt = 1e3 / 60 / tt / 4, Ct = 100, D = 1e-4, R = "linear", Ot = "angular", r = "circular", pt = [
+    _skincontractcssmistica.vars.colors.controlActivated,
+    _skincontractcssmistica.vars.colors.warning,
+    _skincontractcssmistica.vars.colors.success,
+    _skincontractcssmistica.vars.colors.highlight,
+    _skincontractcssmistica.vars.colors.promo
+], Ft = [
+    _skincontractcssmistica.vars.colors.controlActivatedInverse,
+    _skincontractcssmistica.vars.colors.warning,
+    _skincontractcssmistica.vars.colors.success,
+    _skincontractcssmistica.vars.colors.highlight,
+    _skincontractcssmistica.vars.colors.promo
+], Ut = (0, _cubicbezier.default)(0.75, 0, 0.27, 1, Nt), W = (t, n, $)=>Math.min(Math.max(t, n), $), kt = (t, n, $, M)=>{
+    var O;
+    const s = [];
+    let b = 0, S = 0;
+    for(let h = 0; h < t.length; h++){
+        b += t[h], S += n[h];
+        const G = gt * (M ? h : t.length - 1 - h), V = W(($ - G) / tt, 0, 1), Z = W(Ut(V), 0, 1), X = ((O = s.at(-1)) == null ? void 0 : O.end) || 0, u = W(b + (S - b) * Z, 0, 1 - D);
+        s.push({
+            start: X,
+            end: u
+        });
+    }
+    return s;
+}, C = (param)=>{
+    let { x1: t, y1: n, x2: $, y2: M, radius: s, clockwise: b = 1, largeArchFlag: S = 0 } = param;
+    return s ? `M ${t} ${n} A ${s} ${s} 0 ${+S} ${+b} ${$} ${M}` : `M ${t} ${n} L ${$} ${M}`;
+}, Dt = (param)=>{
+    let { type: t = Ot, width: n = "100%", colors: $, values: M, reverse: s = !1, dataAttributes: b, "aria-hidden": S = !1, "aria-label": O, "aria-labelledby": h } = param;
+    const { borderRadii: G, t: V } = (0, _hooks.useTheme)(), { ref: Z, width: X } = (0, _hooks.useElementDimensions)(), u = parseInt(G.bar) !== 0, et = (0, _themevariantcontext.useThemeVariant)(), q = et === "media", rt = et === "inverse", nt = $ || (rt || q ? Ft : pt), [p, ot] = _react.useState(typeof n == "number" ? n : 0), z = p === 0 ? 1 : A / p, at = u ? Q / 2 : 0, Y = at * z, i = Q * z, c = t === R ? 0 : J - i / 2, T = wt * z, H = _react.useId(), st = `marker-current-${H}`, it = `marker-start-${H}`, ct = `mask-last-segment-${H}`, lt = `mask-bar-track-${H}`, dt = _react.useMemo(()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches !== !0 && !(0, _platform.isRunningAcceptanceTest)(), []), L = t === R ? A - Y * 2 : t === r ? Math.PI * 2 : Math.PI, l = t === R ? T / A : T / c / L, xt = t === R ? Q : t === r ? p : p / 2 + at, K = t === R ? i : t === r ? A : J + Y, At = q ? _skincontractcssmistica.vars.colors.inverse : rt ? _skincontractcssmistica.vars.colors.barTrackInverse : _skincontractcssmistica.vars.colors.barTrack, f = _react.useMemo(()=>M.map((e)=>e / Ct), [
+        M
+    ]), P = _react.useRef(Array.from({
+        length: f.length
+    }, ()=>s ? 1 : 0)), [_, $t] = _react.useState(()=>f.map(()=>({
+                start: 0,
+                end: 0
+            })));
+    let v = -1, B = -1;
+    for(let e = 0; e < _.length; e++)_[e].end - _[e].start > D && (v < 0 && (v = e), B = e);
+    const d = _.at(-1);
+    _react.useEffect(()=>{
+        ot(typeof n == "number" ? n : X);
+    }, [
+        n,
+        X
+    ]), _react.useEffect(()=>{
+        let e;
+        const I = performance.now(), w = I + tt + gt * (f.length - 1);
+        let N = [];
+        const U = ()=>{
+            const x = performance.now();
+            N = kt(P.current, f, x - I, s), dt && x < w ? e = requestAnimationFrame(U) : (N = kt(P.current, f, w - I, s), P.current = f), $t(N);
+        };
+        return U(), ()=>{
+            cancelAnimationFrame(e), P.current = N.map((x)=>x.end - x.start);
+        };
+    }, [
+        c,
+        f,
+        t,
+        s,
+        dt
+    ]);
+    const k = _react.useCallback((e)=>t === R ? Y + L * e : J - c * Math.cos(e * L), [
+        Y,
+        L,
+        c,
+        t
+    ]), g = _react.useCallback((e)=>t === R ? i / 2 : ft - c * Math.sin(e * L), [
+        L,
+        c,
+        i,
+        t
+    ]), F = (e)=>nt[e % nt.length], mt = Math.round(((d == null ? void 0 : d.end) || 0) * 100), ht = V(_texttokens.meterTotalLabel, f.length, mt) + " " + f.map((e, I)=>`${V(_texttokens.meterSectionLabel, I + 1, Math.round(e * 100))}`).join(". ");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        ref: Z,
+        style: {
+            width: n
+        },
+        role: "meter",
+        "aria-label": O || (h ? void 0 : ht),
+        "aria-labelledby": h,
+        "aria-valuenow": mt,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-live": "polite",
+        "aria-valuetext": ht,
+        "aria-hidden": S
+    }, (0, _dom.getPrefixedDataAttributes)(b, "Meter")), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
+            viewBox: `0 0 ${A} ${K}`,
+            style: {
+                width: p,
+                height: xt,
+                display: "block",
+                transform: `rotate(${t === r ? "90deg" : 0})`
+            },
+            "aria-hidden": "true",
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)("defs", {
+                    children: [
+                        u && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)("marker", {
+                                    id: st,
+                                    viewBox: "0 0 10 10",
+                                    markerWidth: 1,
+                                    markerHeight: 1,
+                                    orient: "auto",
+                                    refX: 5,
+                                    refY: 5,
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                            x: 4,
+                                            y: 0,
+                                            width: 2,
+                                            height: 10,
+                                            fill: F(B)
+                                        }),
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                            d: C({
+                                                x1: 5,
+                                                y1: 0,
+                                                x2: 5,
+                                                y2: 10,
+                                                radius: 5
+                                            }),
+                                            fill: F(B)
+                                        })
+                                    ]
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)("marker", {
+                                    id: it,
+                                    viewBox: "0 0 10 10",
+                                    markerWidth: 1,
+                                    markerHeight: 1,
+                                    orient: "auto",
+                                    refX: 5,
+                                    refY: 5,
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                            x: 4,
+                                            y: 0,
+                                            width: 2,
+                                            height: 10,
+                                            fill: F(v)
+                                        }),
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                            d: C({
+                                                x1: 5,
+                                                y1: 0,
+                                                x2: 5,
+                                                y2: 10,
+                                                radius: 5,
+                                                clockwise: 0
+                                            }),
+                                            fill: F(v)
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsxs)("mask", {
+                            id: lt,
+                            maskUnits: "userSpaceOnUse",
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                    x: 0,
+                                    y: 0,
+                                    width: A,
+                                    height: K,
+                                    fill: "white"
+                                }),
+                                v >= 0 && d && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                            stroke: "black",
+                                            fill: "none",
+                                            strokeWidth: i + T * 2,
+                                            strokeLinecap: t === r || !u ? "butt" : "round",
+                                            d: C({
+                                                x1: k(0),
+                                                y1: g(0),
+                                                x2: k(W(d.end + (u ? 0 : l), 0, 1 - D)),
+                                                y2: g(W(d.end + (u ? 0 : l), 0, 1 - D)),
+                                                radius: c,
+                                                largeArchFlag: t === r ? d.end >= 0.5 : 0
+                                            })
+                                        }),
+                                        t === r && u && // the circular type has butt line caps, so we need to add a circle to the end
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("circle", {
+                                            cx: k(d.end),
+                                            cy: g(d.end),
+                                            r: i / 2 + T,
+                                            fill: "black"
+                                        }),
+                                        t === r && d.end <= 0.5 && // small patch to remove the circular mask when the last segment is too near to the start
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                            x: 0,
+                                            y: ft + T,
+                                            width: i + T * 2,
+                                            height: i / 2 + T,
+                                            fill: "white"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        t === r && /* @__PURE__ */ (0, _jsxruntime.jsxs)("mask", {
+                            id: ct,
+                            maskUnits: "userSpaceOnUse",
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                    x: 0,
+                                    y: 0,
+                                    width: A,
+                                    height: K,
+                                    fill: "white"
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                    stroke: "black",
+                                    strokeWidth: i,
+                                    fill: "none",
+                                    d: C({
+                                        x1: k(1 - l),
+                                        y1: g(1 - l),
+                                        x2: k(1),
+                                        y2: g(1),
+                                        radius: c
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                    stroke: At,
+                    opacity: q ? 0.5 : 1,
+                    fill: "none",
+                    strokeWidth: i,
+                    strokeLinecap: t === r || !u ? "butt" : "round",
+                    d: C({
+                        x1: k(0),
+                        y1: g(0),
+                        x2: k(1 - (t === r ? l : 0)),
+                        y2: g(1 - (t === r ? l : 0)),
+                        largeArchFlag: 1,
+                        radius: c
+                    }),
+                    mask: `url("#${lt}")`
+                }),
+                v >= 0 && [
+                    ..._
+                ].reverse().map((e, I)=>{
+                    const w = _.length - 1 - I, N = F(w), U = w === v, x = w === B, j = U || e.end - e.start < l ? e.start : e.start + l / 2, y = x || e.end - e.start < l ? e.end : e.end - l / 2;
+                    if (y - j < D) return null;
+                    const It = U && t !== r;
+                    return /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                        stroke: N,
+                        fill: "none",
+                        strokeWidth: i,
+                        strokeLinecap: "butt",
+                        markerEnd: x ? `url(#${st})` : void 0,
+                        markerStart: It ? `url(#${it})` : void 0,
+                        mask: x && t === r ? `url("#${ct}")` : void 0,
+                        d: C({
+                            x1: k(j),
+                            y1: g(j),
+                            x2: k(y),
+                            y2: g(y),
+                            largeArchFlag: t === r ? y - j >= 0.5 : 0,
+                            radius: c
+                        })
+                    }, I);
+                })
+            ]
+        })
+    }));
+}, Wt = (t)=>/* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Dt, _object_spread_props(_object_spread({}, t), {
+        key: `${t.type},${t.values.length},${t.reverse}`
+    })), Zt = Wt;

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "16.5.0";
+const o = "16.6.0";

package/dist/sheet-common.css-mistica.js

@@ -22,36 +22,42 @@ _export(exports, {
         return e;
     },
     children: function() {
-        return i;
+        return a;
     },
     closingOverlay: function() {
-        return a;
+        return r;
     },
     closingSheet: function() {
-        return r;
+        return i;
     },
-    handle: function() {
+    handleBar: function() {
         return t;
     },
     handleContainer: function() {
+        return h;
+    },
+    handleTouchable: function() {
         return o;
     },
     modalCloseButton: function() {
-        return h;
+        return m;
     },
     overlay: function() {
-        return m;
+        return p;
+    },
+    sheetTopDraggingArea: function() {
+        return d;
     },
     stickyButtons: function() {
-        return p;
+        return l;
     },
     stickyTitle: function() {
-        return d;
+        return k;
     },
     transitionDuration: function() {
-        return l;
+        return s;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./sheet-common.css.ts.vanilla.css-mistica.js");
-var f = "pidemf6 _1y2v1nf3r", y = "pidemf4 _1y2v1nfhk _1y2v1nfla _1y2v1nflp _1y2v1nfm4", _ = "pidemf9 _1y2v1nf85 _1y2v1nfho _1y2v1nfhu", e = "pidemfq", i = "_1y2v1nfku _1y2v1nfia _1y2v1nfho _1y2v1nfhu", a = "pidemfl", r = "pidemf7", t = "_1y2v1nf50 _1y2v1nfik _1y2v1nfiv _1y2v1nfk8", o = "pidemfc _1y2v1nf7q _1y2v1nf8z _1y2v1nfhj _1y2v1nfkv _1y2v1nfj5 _1y2v1nfib _1y2v1nfho _1y2v1nfhx", h = "pidemff _1y2v1nf82 _1y2v1nf9b _1y2v1nfak _1y2v1nfbt _1y2v1nfhj _1y2v1nfkv _1y2v1nflp", m = "pidemfk _1y2v1nfhk _1y2v1nf43 _1y2v1nfkv _1y2v1nfla _1y2v1nflp _1y2v1nfm4", p = "pidemfp _1y2v1nfhm _1y2v1nfm4 _1y2v1nf3r", d = "pidemfn _1y2v1nfhm _1y2v1nfkv _1y2v1nf3r", l = 400;
+var f = "pidemf6 _1y2v1nf3r", y = "pidemf4 _1y2v1nfhk _1y2v1nfla _1y2v1nflp _1y2v1nfm4", _ = "pidemf9 _1y2v1nf85 _1y2v1nfho _1y2v1nfhu", e = "pidemfu", a = "_1y2v1nfku _1y2v1nfia _1y2v1nfho _1y2v1nfhu", r = "pidemfp", i = "pidemf7", t = "_1y2v1nf50 _1y2v1nfib _1y2v1nfis _1y2v1nfk8", h = "pidemfe _1y2v1nfhn", o = "_1y2v1nfik _1y2v1nfiv", m = "pidemfj _1y2v1nf82 _1y2v1nf9b _1y2v1nfak _1y2v1nfbt _1y2v1nfhj _1y2v1nfkv _1y2v1nflp", p = "pidemfo _1y2v1nfhk _1y2v1nf43 _1y2v1nfkv _1y2v1nfla _1y2v1nflp _1y2v1nfm4", d = "pidemfc _1y2v1nf7q _1y2v1nf8z _1y2v1nfhj _1y2v1nfkv _1y2v1nfj5 _1y2v1nfib _1y2v1nfho _1y2v1nfhx", l = "pidemft _1y2v1nfhm _1y2v1nfm4 _1y2v1nf3r", k = "pidemfr _1y2v1nfhm _1y2v1nfkv _1y2v1nf3r", s = 400;

package/dist/sheet-common.css.d.ts

@@ -7,8 +7,10 @@ export declare const Sheet: string;
 export declare const closingSheet: string;
 export declare const SheetContent: string;
 export declare const children: string;
+export declare const sheetTopDraggingArea: string;
 export declare const handleContainer: string;
-export declare const handle: string;
+export declare const handleTouchable: string;
+export declare const handleBar: string;
 export declare const modalCloseButton: string;
 export declare const modalCloseButtonIcon: string;
 export declare const overlay: string;