@telefonica/mistica 16.11.2 → 16.13.0

package/dist/meter.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Zt;
+        return qt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -116,285 +116,308 @@ function _object_spread_props(target, source) {
     }
     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 = [
+const $ = 100, tt = $ / 2, xt = $ / 2, O = 6, Ot = 2, $t = 200, rt = 1e3, Ft = 1e3 / 60 / rt / 4, pt = 100, H = 1e-4, E = "linear", et = "angular", r = "circular", Ut = [
     _skincontractcssmistica.vars.colors.controlActivated,
     _skincontractcssmistica.vars.colors.warning,
     _skincontractcssmistica.vars.colors.success,
     _skincontractcssmistica.vars.colors.highlight,
     _skincontractcssmistica.vars.colors.promo
-], Ft = [
+], Dt = [
     _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
+], Ht = (0, _cubicbezier.default)(0.75, 0, 0.27, 1, Ft), W = (t, o, I)=>Math.min(Math.max(t, o), I), At = (t, o, I, T)=>{
+    var p;
+    const i = [];
+    let b = 0, L = 0;
+    for(let u = 0; u < t.length; u++){
+        b += t[u], L += o[u];
+        const V = $t * (T ? u : t.length - 1 - u), Z = W((I - V) / rt, 0, 1), X = W(Ht(Z), 0, 1), q = ((p = i.at(-1)) == null ? void 0 : p.end) || 0, Y = W(b + (L - b) * X, 0, 1 - H);
+        i.push({
+            start: q,
+            end: Y
         });
     }
-    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({
+    return i;
+}, F = (param)=>{
+    let { x1: t, y1: o, x2: I, y2: T, radius: i, clockwise: b = 1, largeArchFlag: L = 0 } = param;
+    return i ? `M ${t} ${o} A ${i} ${i} 0 ${+L} ${+b} ${I} ${T}` : `M ${t} ${o} L ${I} ${T}`;
+}, Wt = (param)=>{
+    let { type: t = et, width: o = "100%", colors: I, values: T, reverse: i = !1, dataAttributes: b, "aria-hidden": L = !1, "aria-label": p, "aria-labelledby": u, extra: V } = param;
+    const { borderRadii: Z, t: X } = (0, _hooks.useTheme)(), { ref: q, width: Y } = (0, _hooks.useElementDimensions)(), v = parseInt(Z.bar) !== 0, nt = (0, _themevariantcontext.useThemeVariant)(), K = nt === "media", ot = nt === "inverse", at = I || (ot || K ? Dt : Ut), [M, st] = _react.useState(typeof o == "number" ? o : 0), J = M === 0 ? 1 : $ / M, it = v ? O / 2 : 0, P = it * J, c = O * J, d = t === E ? 0 : tt - c / 2, R = Ot * J, B = _react.useId(), ct = `marker-current-${B}`, lt = `marker-start-${B}`, dt = `mask-last-segment-${B}`, mt = `mask-bar-track-${B}`, ht = _react.useMemo(()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches !== !0 && !(0, _platform.isRunningAcceptanceTest)(), []), _ = t === E ? $ - P * 2 : t === r ? Math.PI * 2 : Math.PI, m = t === E ? R / $ : R / d / _, ut = t === E ? O : t === r ? M : M / 2 + it, Q = t === E ? c : t === r ? $ : tt + P, It = K ? _skincontractcssmistica.vars.colors.inverse : ot ? _skincontractcssmistica.vars.colors.barTrackInverse : _skincontractcssmistica.vars.colors.barTrack, f = _react.useMemo(()=>T.map((e)=>e / pt), [
+        T
+    ]), j = _react.useRef(Array.from({
         length: f.length
-    }, ()=>s ? 1 : 0)), [_, $t] = _react.useState(()=>f.map(()=>({
+    }, ()=>i ? 1 : 0)), [w, Mt] = _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);
+    let S = -1, y = -1;
+    for(let e = 0; e < w.length; e++)w[e].end - w[e].start > H && (S < 0 && (S = e), y = e);
+    const h = w.at(-1);
     _react.useEffect(()=>{
-        ot(typeof n == "number" ? n : X);
+        st(typeof o == "number" ? o : Y);
     }, [
-        n,
-        X
+        o,
+        Y
     ]), _react.useEffect(()=>{
         let e;
-        const I = performance.now(), w = I + tt + gt * (f.length - 1);
+        const n = performance.now(), C = n + rt + $t * (f.length - 1);
         let N = [];
-        const U = ()=>{
+        const D = ()=>{
             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);
+            N = At(j.current, f, x - n, i), ht && x < C ? e = requestAnimationFrame(D) : (N = At(j.current, f, C - n, i), j.current = f), Mt(N);
         };
-        return U(), ()=>{
-            cancelAnimationFrame(e), P.current = N.map((x)=>x.end - x.start);
+        return D(), ()=>{
+            cancelAnimationFrame(e), j.current = N.map((x)=>x.end - x.start);
         };
     }, [
-        c,
+        d,
         f,
         t,
-        s,
-        dt
+        i,
+        ht
     ]);
-    const k = _react.useCallback((e)=>t === R ? Y + L * e : J - c * Math.cos(e * L), [
-        Y,
-        L,
-        c,
+    const g = _react.useCallback((e)=>t === E ? P + _ * e : tt - d * Math.cos(e * _), [
+        P,
+        _,
+        d,
         t
-    ]), g = _react.useCallback((e)=>t === R ? i / 2 : ft - c * Math.sin(e * L), [
-        L,
+    ]), k = _react.useCallback((e)=>t === E ? c / 2 : xt - d * Math.sin(e * _), [
+        _,
+        d,
         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,
+    ]), U = (e)=>at[e % at.length], ft = Math.round(((h == null ? void 0 : h.end) || 0) * 100), gt = X(_texttokens.meterTotalLabel, f.length, ft) + " " + f.map((e, n)=>`${X(_texttokens.meterSectionLabel, n + 1, Math.round(e * 100))}`).join(". "), Et = _react.useMemo(()=>{
+        if (t === E) return {
+            display: "flex"
+        };
+        const e = 0.707107, n = (M / 2 - O) * e;
+        return {
+            display: "flex",
+            marginTop: -1 * (t === et ? n + O / 2 : n + M / 2),
+            width: n * 2,
+            minHeight: t === et ? n + O / 2 : n * 2,
+            marginLeft: "auto",
+            marginRight: "auto"
+        };
+    }, [
+        M,
+        t
+    ]);
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        ref: q,
         style: {
-            width: n
+            width: o,
+            minHeight: ut
         },
         role: "meter",
-        "aria-label": O || (h ? void 0 : ht),
-        "aria-labelledby": h,
-        "aria-valuenow": mt,
+        "aria-label": p || (u ? void 0 : gt),
+        "aria-labelledby": u,
+        "aria-valuenow": ft,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-live": "polite",
-        "aria-valuetext": ht,
-        "aria-hidden": S
+        "aria-valuetext": gt,
+        "aria-hidden": L
     }, (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
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
+                viewBox: `0 0 ${$} ${Q}`,
+                style: {
+                    width: M,
+                    height: ut,
+                    display: "block",
+                    transform: `rotate(${t === r ? "90deg" : 0})`
+                },
+                "aria-hidden": "true",
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("defs", {
+                        children: [
+                            v && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("marker", {
+                                        id: ct,
+                                        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: U(y)
                                             }),
-                                            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
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                                d: F({
+                                                    x1: 5,
+                                                    y1: 0,
+                                                    x2: 5,
+                                                    y2: 10,
+                                                    radius: 5
+                                                }),
+                                                fill: U(y)
+                                            })
+                                        ]
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("marker", {
+                                        id: lt,
+                                        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: U(S)
                                             }),
-                                            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
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                                d: F({
+                                                    x1: 5,
+                                                    y1: 0,
+                                                    x2: 5,
+                                                    y2: 10,
+                                                    radius: 5,
+                                                    clockwise: 0
+                                                }),
+                                                fill: U(S)
                                             })
-                                        }),
-                                        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"
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)("mask", {
+                                id: mt,
+                                maskUnits: "userSpaceOnUse",
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                        x: 0,
+                                        y: 0,
+                                        width: $,
+                                        height: Q,
+                                        fill: "white"
+                                    }),
+                                    S >= 0 && h && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                        children: [
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                                stroke: "black",
+                                                fill: "none",
+                                                strokeWidth: c + R * 2,
+                                                strokeLinecap: t === r || !v ? "butt" : "round",
+                                                d: F({
+                                                    x1: g(0),
+                                                    y1: k(0),
+                                                    x2: g(W(h.end + (v ? 0 : m), 0, 1 - H)),
+                                                    y2: k(W(h.end + (v ? 0 : m), 0, 1 - H)),
+                                                    radius: d,
+                                                    largeArchFlag: t === r ? h.end >= 0.5 : 0
+                                                })
+                                            }),
+                                            t === r && v && // the circular type has butt line caps, so we need to add a circle to the end
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)("circle", {
+                                                cx: g(h.end),
+                                                cy: k(h.end),
+                                                r: c / 2 + R,
+                                                fill: "black"
+                                            }),
+                                            t === r && h.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: xt + R,
+                                                width: c + R * 2,
+                                                height: c / 2 + R,
+                                                fill: "white"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            t === r && /* @__PURE__ */ (0, _jsxruntime.jsxs)("mask", {
+                                id: dt,
+                                maskUnits: "userSpaceOnUse",
+                                children: [
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                        x: 0,
+                                        y: 0,
+                                        width: $,
+                                        height: Q,
+                                        fill: "white"
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                        stroke: "black",
+                                        strokeWidth: c,
+                                        fill: "none",
+                                        d: F({
+                                            x1: g(1 - m),
+                                            y1: k(1 - m),
+                                            x2: g(1),
+                                            y2: k(1),
+                                            radius: d
                                         })
-                                    ]
-                                })
-                            ]
-                        }),
-                        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,
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                        stroke: It,
+                        opacity: K ? 0.5 : 1,
                         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);
-                })
-            ]
-        })
+                        strokeWidth: c,
+                        strokeLinecap: t === r || !v ? "butt" : "round",
+                        d: F({
+                            x1: g(0),
+                            y1: k(0),
+                            x2: g(1 - (t === r ? m : 0)),
+                            y2: k(1 - (t === r ? m : 0)),
+                            largeArchFlag: 1,
+                            radius: d
+                        }),
+                        mask: `url("#${mt}")`
+                    }),
+                    S >= 0 && [
+                        ...w
+                    ].reverse().map((e, n)=>{
+                        const C = w.length - 1 - n, N = U(C), D = C === S, x = C === y, z = D || e.end - e.start < m ? e.start : e.start + m / 2, G = x || e.end - e.start < m ? e.end : e.end - m / 2;
+                        if (G - z < H) return null;
+                        const Tt = D && t !== r;
+                        return /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                            stroke: N,
+                            fill: "none",
+                            strokeWidth: c,
+                            strokeLinecap: "butt",
+                            markerEnd: x ? `url(#${ct})` : void 0,
+                            markerStart: Tt ? `url(#${lt})` : void 0,
+                            mask: x && t === r ? `url("#${dt}")` : void 0,
+                            d: F({
+                                x1: g(z),
+                                y1: k(z),
+                                x2: g(G),
+                                y2: k(G),
+                                largeArchFlag: t === r ? G - z >= 0.5 : 0,
+                                radius: d
+                            })
+                        }, n);
+                    })
+                ]
+            }),
+            V && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: Et,
+                children: V
+            })
+        ]
     }));
-}, Wt = (t)=>/* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Dt, _object_spread_props(_object_spread({}, t), {
+}, Vt = (t)=>/* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Wt, _object_spread_props(_object_spread({}, t), {
         key: `${t.type},${t.values.length},${t.reverse}`
-    })), Zt = Wt;
+    })), qt = Vt;

package/dist/mosaic.css-mistica.js

@@ -16,8 +16,8 @@ _export(exports, {
         return t;
     },
     squareContainer: function() {
-        return _;
+        return a;
     }
 });
 require("./mosaic.css.ts.vanilla.css-mistica.js");
-var r = "v16_11_2_1j2q6te2", t = "v16_11_2_1j2q6te1", _ = "v16_11_2_1j2q6te0";
+var r = "v16_13_1j2q6te2", t = "v16_13_1j2q6te1", a = "v16_13_1j2q6te0";