@telefonica/mistica 16.70.0 → 16.72.0

package/dist/theme-variant-context.d.ts

@@ -5,19 +5,9 @@ export type Variant = 'default' | 'brand' | 'negative' | 'alternative' | 'media'
  | 'inverse';
 export declare const normalizeVariant: <T extends Variant>(variant: T) => T extends "inverse" ? "brand" : T;
 type ThemeVariantProps = {
-    /** @deprecated Use variant = 'brand' instead */
-    isInverse?: boolean;
     variant?: Variant;
     children: React.ReactNode;
 };
-export declare const ThemeVariant: ({ isInverse, variant, children }: ThemeVariantProps) => JSX.Element;
+export declare const ThemeVariant: ({ variant, children }: ThemeVariantProps) => JSX.Element;
 export declare const useThemeVariant: () => NonDeprecatedVariant;
-/**
- * @deprecated use `useThemeVariant` instead
- */
-export declare const useIsInverseVariant: () => boolean;
-/**
- * @deprecated use `useThemeVariant` instead
- */
-export declare const useIsInverseOrMediaVariant: () => boolean;
 export {};

package/dist/theme-variant-context.js

@@ -11,19 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     get ThemeVariant () {
-        return c;
+        return s;
     },
     get normalizeVariant () {
-        return i;
-    },
-    get useIsInverseOrMediaVariant () {
-        return m;
-    },
-    get useIsInverseVariant () {
-        return d;
+        return o;
     },
     get useThemeVariant () {
-        return n;
+        return m;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -69,13 +63,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const i = (e)=>e === "inverse" ? "brand" : e, t = /*#__PURE__*/ _react.createContext("default"), c = (param)=>{
-    let { isInverse: e, variant: a, children: s } = param;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(t.Provider, {
-        value: a !== null && a !== void 0 ? a : e ? "brand" : "default",
-        children: s
+const o = (e)=>e === "inverse" ? "brand" : e, r = /*#__PURE__*/ _react.createContext("default"), s = (param)=>{
+    let { variant: e, children: n } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(r.Provider, {
+        value: e !== null && e !== void 0 ? e : "default",
+        children: n
     });
-}, n = ()=>i(_react.useContext(t)), d = ()=>n() === "brand", m = ()=>{
-    const e = n();
-    return e === "brand" || e === "media";
-};
+}, m = ()=>o(_react.useContext(r));

package/dist/theme.d.ts

@@ -70,8 +70,6 @@ export type ThemeConfig = Readonly<{
         Component: React.ComponentType<any>;
     };
     useHrefDecorator?: () => (href: string) => string;
-    /** @deprecated Better use default browser behavior for :focus-visible */
-    enableTabFocus?: boolean;
     preventCopyInFormFields?: boolean;
 }>;
 export type Theme = {

package/dist/time-field.js

@@ -102,7 +102,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const J = (_param)=>{
-    var { disabled: s, error: a, helperText: m, name: f, label: d, optional: l, validate: c, validateOnBlurInsideForm: u, onChange: p, onChangeValue: g, onBlur: T, value: h, defaultValue: F, min: t, max: r, dataAttributes: O } = _param, C = _object_without_properties(_param, [
+    var { disabled: s, error: a, helperText: m, name: f, label: d, optional: l, validate: c, validateOnBlurInsideForm: u, onChange: p, onChangeValue: g, onBlur: h, value: O, defaultValue: T, min: t, max: r, dataAttributes: C } = _param, F = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -123,14 +123,14 @@ const J = (_param)=>{
     const I = (e)=>e, { texts: R, t: V } = (0, _hooks.useTheme)(), n = (e)=>!(t && e && e < t || r && e && e > r), x = (0, _formcontext.useFieldProps)({
         name: f,
         label: d,
-        value: h,
-        defaultValue: F,
+        value: O,
+        defaultValue: T,
         processValue: I,
         helperText: m,
         optional: l,
         error: a,
         disabled: s,
-        onBlur: T,
+        onBlur: h,
         validate: (e, o)=>n(e) ? c === null || c === void 0 ? void 0 : c(e, o) : R.formDateOutOfRangeError || V(_texttokens.formDateOutOfRangeError),
         validateOnBlurInsideForm: u,
         onChange: p,
@@ -138,7 +138,7 @@ const J = (_param)=>{
             n(e) && (g === null || g === void 0 ? void 0 : g(e, o));
         }
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, C, x), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, F, x), {
         min: t,
         max: r,
         type: "time",
@@ -150,8 +150,7 @@ const J = (_param)=>{
             })
         }),
         dataAttributes: _object_spread({
-            "component-name": "TimeField",
             testid: "TimeField"
-        }, O)
+        }, C)
     }));
 };

package/dist/timeline.css-mistica.js

@@ -35,13 +35,13 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                    */ var t = {
-    vertical: "v16_70_w6pat20",
-    horizontal: "v16_70_w6pat21"
-}, a = "v16_70_w6pat23 v16_70_w6pat22 v16_70_1y2v1nfq4 v16_70_1y2v1nfqh", n = "v16_70_w6pat25 v16_70_w6pat24 v16_70_1y2v1nfqq v16_70_1y2v1nfsh v16_70_1y2v1nfhf", e = {
-    active: "v16_70_w6pat26",
-    inactive: "v16_70_w6pat27",
-    completed: "v16_70_w6pat28"
-}, p = "v16_70_w6pat2a v16_70_w6pat29 v16_70_1y2v1nfq4 v16_70_1y2v1nfqj", f = "v16_70_w6pat2b", r = "v16_70_w6pat2d v16_70_w6pat2c v16_70_1y2v1nfr1 v16_70_1y2v1nfrh v16_70_1y2v1nfso v16_70_1y2v1nfq4 v16_70_1y2v1nfqj v16_70_1y2v1nfqd v16_70_1y2v1nf83", w = {
-    default: "v16_70_w6pat2g v16_70_w6pat2f v16_70_w6pat2e v16_70_1y2v1nfqq",
-    overBrand: "v16_70_w6pat2h v16_70_w6pat2f v16_70_w6pat2e v16_70_1y2v1nfqq"
+    vertical: "v16_72_w6pat20",
+    horizontal: "v16_72_w6pat21"
+}, a = "v16_72_w6pat23 v16_72_w6pat22 v16_72_1y2v1nfq4 v16_72_1y2v1nfqh", n = "v16_72_w6pat25 v16_72_w6pat24 v16_72_1y2v1nfqq v16_72_1y2v1nfsh v16_72_1y2v1nfhf", e = {
+    active: "v16_72_w6pat26",
+    inactive: "v16_72_w6pat27",
+    completed: "v16_72_w6pat28"
+}, p = "v16_72_w6pat2a v16_72_w6pat29 v16_72_1y2v1nfq4 v16_72_1y2v1nfqj", f = "v16_72_w6pat2b", r = "v16_72_w6pat2d v16_72_w6pat2c v16_72_1y2v1nfr1 v16_72_1y2v1nfrh v16_72_1y2v1nfso v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfqd v16_72_1y2v1nf83", w = {
+    default: "v16_72_w6pat2g v16_72_w6pat2f v16_72_w6pat2e v16_72_1y2v1nfqq",
+    overBrand: "v16_72_w6pat2h v16_72_w6pat2f v16_72_w6pat2e v16_72_1y2v1nfqq"
 };

package/dist/timeline.js

@@ -217,7 +217,9 @@ const f = (param)=>{
         "aria-label": d,
         "aria-labelledby": s,
         "aria-current": i === "active" ? "step" : void 0
-    }, (0, _dom.getPrefixedDataAttributes)(m, "TimelineItem")), {
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        testid: "TimelineItem"
+    }, m))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _timelinecssmistica.lineContainer,
@@ -245,7 +247,9 @@ const f = (param)=>{
         role: n,
         "aria-label": d,
         "aria-labelledby": s
-    }, (0, _dom.getPrefixedDataAttributes)(m, "Timeline")), {
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        testid: "Timeline"
+    }, m))), {
         children: r
     }));
 };

package/dist/timer.css-mistica.js

@@ -31,10 +31,10 @@ _export(exports, {
         return e;
     }
 });
-/* empty css                                     */ /* empty css                                 */ var f = "v16_70_18fye840 v16_70_1y2v1nfq8", y = "v16_70_18fye841", e = "v16_70_18fye843 v16_70_18fye841 v16_70_18fye842 v16_70_1y2v1nfq5 v16_70_1y2v1nfqd", n = "v16_70_18fye845 v16_70_18fye841 v16_70_18fye844 v16_70_1y2v1nfq8", a = "v16_70_18fye847 v16_70_18fye846 v16_70_1y2v1nfq4 v16_70_1y2v1nfqa v16_70_1y2v1nfqj", i = "v16_70_18fye848", r = {
-    default: "v16_70_18fye84g v16_70_18fye84a v16_70_18fye849 v16_70_1y2v1nfil v16_70_1y2v1nfju v16_70_1y2v1nfg6 v16_70_1y2v1nfhf v16_70_1y2v1nfsw v16_70_18fye84b v16_70_1y2v1nfdi",
-    brand: "v16_70_18fye84h v16_70_18fye84a v16_70_18fye849 v16_70_1y2v1nfil v16_70_1y2v1nfju v16_70_1y2v1nfg6 v16_70_1y2v1nfhf v16_70_1y2v1nfsw v16_70_18fye84c v16_70_1y2v1nf83",
-    negative: "v16_70_18fye84i v16_70_18fye84a v16_70_18fye849 v16_70_1y2v1nfil v16_70_1y2v1nfju v16_70_1y2v1nfg6 v16_70_1y2v1nfhf v16_70_1y2v1nfsw v16_70_18fye84d v16_70_1y2v1nf83",
-    alternative: "v16_70_18fye84j v16_70_18fye84a v16_70_18fye849 v16_70_1y2v1nfil v16_70_1y2v1nfju v16_70_1y2v1nfg6 v16_70_1y2v1nfhf v16_70_1y2v1nfsw v16_70_18fye84e v16_70_1y2v1nf83",
-    media: "v16_70_18fye84k v16_70_18fye84a v16_70_18fye849 v16_70_1y2v1nfil v16_70_1y2v1nfju v16_70_1y2v1nfg6 v16_70_1y2v1nfhf v16_70_1y2v1nfsw v16_70_18fye84f"
+/* empty css                                     */ /* empty css                                 */ var f = "v16_72_18fye840 v16_72_1y2v1nfq8", y = "v16_72_18fye841", e = "v16_72_18fye843 v16_72_18fye841 v16_72_18fye842 v16_72_1y2v1nfq5 v16_72_1y2v1nfqd", n = "v16_72_18fye845 v16_72_18fye841 v16_72_18fye844 v16_72_1y2v1nfq8", a = "v16_72_18fye847 v16_72_18fye846 v16_72_1y2v1nfq4 v16_72_1y2v1nfqa v16_72_1y2v1nfqj", i = "v16_72_18fye848", r = {
+    default: "v16_72_18fye84g v16_72_18fye84a v16_72_18fye849 v16_72_1y2v1nfil v16_72_1y2v1nfju v16_72_1y2v1nfg6 v16_72_1y2v1nfhf v16_72_1y2v1nfsw v16_72_18fye84b v16_72_1y2v1nfdi",
+    brand: "v16_72_18fye84h v16_72_18fye84a v16_72_18fye849 v16_72_1y2v1nfil v16_72_1y2v1nfju v16_72_1y2v1nfg6 v16_72_1y2v1nfhf v16_72_1y2v1nfsw v16_72_18fye84c v16_72_1y2v1nf83",
+    negative: "v16_72_18fye84i v16_72_18fye84a v16_72_18fye849 v16_72_1y2v1nfil v16_72_1y2v1nfju v16_72_1y2v1nfg6 v16_72_1y2v1nfhf v16_72_1y2v1nfsw v16_72_18fye84d v16_72_1y2v1nf83",
+    alternative: "v16_72_18fye84j v16_72_18fye84a v16_72_18fye849 v16_72_1y2v1nfil v16_72_1y2v1nfju v16_72_1y2v1nfg6 v16_72_1y2v1nfhf v16_72_1y2v1nfsw v16_72_18fye84e v16_72_1y2v1nf83",
+    media: "v16_72_18fye84k v16_72_18fye84a v16_72_18fye849 v16_72_1y2v1nfil v16_72_1y2v1nfju v16_72_1y2v1nfg6 v16_72_1y2v1nfhf v16_72_1y2v1nfsw v16_72_18fye84f"
 };

package/dist/timer.js

@@ -271,7 +271,9 @@ const $ = 24, V = 60, Q = 60, C = 1e3, X = Q * C, Z = V * X, be = $ * Z, H = (s,
             // try to keep the timer in the same line without wrapping only when label is not long
             display: o !== "long" ? "inline-block" : void 0
         }
-    }, (0, _dom.getPrefixedDataAttributes)(L, "TextTimer")), {
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        testid: "TextTimer"
+    }, L))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
@@ -348,7 +350,9 @@ const $ = 24, V = 60, Q = 60, C = 1e3, X = Q * C, Z = V * X, be = $ * Z, H = (s,
         role: "timer",
         "aria-labelledby": p,
         className: _timercssmistica.timerWrapper
-    }, (0, _dom.getPrefixedDataAttributes)(L, "Timer")), {
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        testid: "Timer"
+    }, L))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {

package/dist/title.js

@@ -87,27 +87,27 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const m = (param)=>{
-    let { title: t, right: e, dataAttributes: o } = param;
-    const { textPresets: r } = (0, _hooks.useTheme)();
+const c = (param)=>{
+    let { title: t, right: e, dataAttributes: r } = param;
+    const { textPresets: o } = (0, _hooks.useTheme)();
     return e ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
         space: "between",
         alignItems: "baseline",
-        dataAttributes: o,
+        dataAttributes: r,
         children: [
             t,
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingLeft: 16,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                    weight: r.link.weight,
+                    weight: o.link.weight,
                     children: e
                 })
             })
         ]
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(o)), {
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(r)), {
         children: t
     }));
-}, c = (t)=>{
+}, m = (t)=>{
     const { textPresets: e } = (0, _hooks.useTheme)();
     return {
         weight: e[t].weight,
@@ -117,66 +117,66 @@ const m = (param)=>{
         mobileLineHeight: e[t].lineHeight.mobile
     };
 }, A = (param)=>{
-    let { children: t, as: e = "h3", id: o, right: r, dataAttributes: n } = param;
-    const s = c("title1");
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
+    let { children: t, as: e = "h3", id: r, right: o, dataAttributes: s } = param;
+    const n = m("title1");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
         title: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({
             as: e,
-            id: o
-        }, s), {
+            id: r
+        }, n), {
             color: _skincontractcssmistica.vars.colors.textSecondary,
             transform: "uppercase",
             wordBreak: !1,
             children: t
         })),
-        right: r,
+        right: o,
         dataAttributes: _object_spread({
-            "component-name": "Title1"
-        }, n)
+            testid: "Title1"
+        }, s)
     });
 }, H = (param)=>{
-    let { children: t, as: e = "h3", id: o, right: r, dataAttributes: n } = param;
-    const s = c("title2");
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
+    let { children: t, as: e = "h3", id: r, right: o, dataAttributes: s } = param;
+    const n = m("title2");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
         title: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({
             as: e,
-            id: o
-        }, s), {
+            id: r
+        }, n), {
             children: t
         })),
-        right: r,
+        right: o,
         dataAttributes: _object_spread({
-            "component-name": "Title2"
-        }, n)
+            testid: "Title2"
+        }, s)
     });
 }, L = (param)=>{
-    let { children: t, as: e = "h3", id: o, right: r, dataAttributes: n } = param;
-    const s = c("title3");
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
+    let { children: t, as: e = "h3", id: r, right: o, dataAttributes: s } = param;
+    const n = m("title3");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
         title: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({
             as: e,
-            id: o
-        }, s), {
+            id: r
+        }, n), {
             children: t
         })),
-        right: r,
+        right: o,
         dataAttributes: _object_spread({
-            "component-name": "Title3"
-        }, n)
+            testid: "Title3"
+        }, s)
     });
 }, j = (param)=>{
-    let { children: t, as: e = "h3", id: o, right: r, dataAttributes: n } = param;
-    const s = c("title4");
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
+    let { children: t, as: e = "h3", id: r, right: o, dataAttributes: s } = param;
+    const n = m("title4");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
         title: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({
             as: e,
-            id: o
-        }, s), {
+            id: r
+        }, n), {
             children: t
         })),
-        right: r,
+        right: o,
         dataAttributes: _object_spread({
-            "component-name": "Title4"
-        }, n)
+            testid: "Title4"
+        }, s)
     });
 };

package/dist/tooltip.css-mistica.js

@@ -13,13 +13,13 @@ _export(exports, {
         return t;
     },
     get arrow () {
-        return f;
+        return x;
     },
     get arrowContainer () {
         return e;
     },
     get closeButtonIcon () {
-        return i;
+        return f;
     },
     get container () {
         return a;
@@ -54,4 +54,4 @@ _export(exports, {
         opacity: 0
     },
     unmounted: {}
-}, a = "v16_70_1xhatbp1 v16_70_1xhatbp0 v16_70_1y2v1nfpz", p = "v16_70_1xhatbp3 v16_70_1xhatbp2 v16_70_1y2v1nfpy v16_70_1y2v1nfsy v16_70_1y2v1nf83", o = "v16_70_1xhatbp5 v16_70_1xhatbp4 v16_70_1y2v1nfpy v16_70_1y2v1nft8", r = "v16_70_1xhatbp6", y = "v16_70_1xhatbp7 v16_70_1y2v1nfq4 v16_70_1y2v1nfqa v16_70_1y2v1nfqj", e = "v16_70_1xhatbp9 v16_70_1xhatbp8 v16_70_1y2v1nfpz v16_70_1y2v1nfqz v16_70_1y2v1nft8", f = "v16_70_1xhatbpb v16_70_1xhatbpa v16_70_1y2v1nfqx v16_70_1y2v1nfrd v16_70_1y2v1nfpz v16_70_1y2v1nfte v16_70_1y2v1nf83", i = "v16_70_1xhatbpd v16_70_1xhatbpc v16_70_1y2v1nfpz";
+}, a = "v16_72_1xhatbp1 v16_72_1xhatbp0 v16_72_1y2v1nfpz", p = "v16_72_1xhatbp3 v16_72_1xhatbp2 v16_72_1y2v1nfpy v16_72_1y2v1nfsx v16_72_1y2v1nf83", o = "v16_72_1xhatbp5 v16_72_1xhatbp4 v16_72_1y2v1nfpy v16_72_1y2v1nft7", r = "v16_72_1xhatbp6", y = "v16_72_1xhatbp7 v16_72_1y2v1nfq4 v16_72_1y2v1nfqa v16_72_1y2v1nfqj", e = "v16_72_1xhatbp9 v16_72_1xhatbp8 v16_72_1y2v1nfpz v16_72_1y2v1nfqz v16_72_1y2v1nft7", x = "v16_72_1xhatbpb v16_72_1xhatbpa v16_72_1y2v1nfqx v16_72_1y2v1nfrd v16_72_1y2v1nfpz v16_72_1y2v1nftd v16_72_1y2v1nf83", f = "v16_72_1xhatbpd v16_72_1xhatbpc v16_72_1y2v1nfpz";

package/dist/tooltip.d.ts

@@ -3,7 +3,7 @@ import type { DataAttributes, TrackingEvent } from './utils/types';
 type Position = 'top' | 'bottom' | 'left' | 'right';
 type Props = {
     children?: React.ReactNode;
-    extra?: React.ReactNode;
+    slot?: React.ReactNode;
     description?: string;
     target: React.ReactNode;
     targetStyle?: React.CSSProperties;
@@ -31,5 +31,5 @@ type BaseTooltipProps = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 };
 export declare const BaseTooltip: ({ content, target, targetStyle, width, position, dataAttributes, delay, centerContent, open, onClose, closeButtonLabel, hasPointerInteractionOnly, trackingEvent, }: BaseTooltipProps) => JSX.Element;
-declare const Tooltip: ({ centerContent, extra, children, dataAttributes, title, description, ...props }: Props) => JSX.Element;
+declare const Tooltip: ({ centerContent, slot, children, dataAttributes, title, description, ...props }: Props) => JSX.Element;
 export default Tooltip;

package/dist/tooltip.js

@@ -163,7 +163,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const dt = (t)=>({
+const ft = (t)=>({
         border: `1px solid ${({
             default: _skincontractcssmistica.vars.colors.border,
             alternative: _skincontractcssmistica.vars.colors.border,
@@ -184,20 +184,20 @@ const dt = (t)=>({
         default:
             return "";
     }
-}, ut = (t)=>{
-    const m = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), T = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), g = t.offsetWidth - m, c = t.offsetHeight - T;
+}, mt = (t)=>{
+    const u = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), T = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), g = t.offsetWidth - u, c = t.offsetHeight - T;
     return {
         width: g,
         height: c
     };
-}, mt = (t, m, T, g, c)=>{
-    if (!t || !m) return;
-    const { top: b, bottom: _, left: W, right: V } = t, v = g - _, S = c - V, o = b, w = W, { width: X, height: z } = ut(m), f = X + I, N = z + I, O = f <= Math.max(w, S), R = N <= Math.max(v, o);
+}, ut = (t, u, T, g, c)=>{
+    if (!t || !u) return;
+    const { top: b, bottom: _, left: W, right: V } = t, v = g - _, S = c - V, o = b, w = W, { width: X, height: z } = mt(u), d = X + I, N = z + I, O = d <= Math.max(w, S), R = N <= Math.max(v, o);
     if (!(!R && !O)) switch(T){
         case "left":
-            return O ? f <= w ? "left" : "right" : v > o ? "bottom" : "top";
+            return O ? d <= w ? "left" : "right" : v > o ? "bottom" : "top";
         case "right":
-            return O ? f <= S ? "right" : "left" : v > o ? "bottom" : "top";
+            return O ? d <= S ? "right" : "left" : v > o ? "bottom" : "top";
         case "top":
             return R ? N <= o ? "top" : "bottom" : w > S ? "left" : "right";
         case "bottom":
@@ -206,8 +206,8 @@ const dt = (t)=>({
             return;
     }
 }, Zt = (param)=>{
-    let { content: t, target: m, targetStyle: T, width: g, position: c = "top", dataAttributes: b, delay: _ = !0, centerContent: W, open: V, onClose: v, closeButtonLabel: S, hasPointerInteractionOnly: o = !1, trackingEvent: w } = param;
-    const { texts: X, t: z } = (0, _hooks.useTheme)(), f = _react.useId(), { openTooltipId: N } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: O, closeTooltip: R } = (0, _tooltipcontextprovider.useSetTooltipState)(), [H, P] = _react.useState(), [Y, G] = _react.useState(), K = _react.useRef(null), U = _react.useRef(null), [y, ht] = _react.useState(null), u = (0, _environment.isTouchableDevice)(), j = _ ? Ut : 0, [ot, q] = _react.useState(!1), [Z, L] = _react.useState(!1), J = V !== void 0, [rt, Q] = _react.useState(!1), x = J ? V : f === N, st = (0, _themevariantcontext.useThemeVariant)(), d = (0, _hooks.useBoundingRect)(K, x), it = (0, _hooks.useBoundingRect)(U, x, !0), n = (0, _hooks.useWindowSize)(), M = _react.useCallback(()=>{
+    let { content: t, target: u, targetStyle: T, width: g, position: c = "top", dataAttributes: b, delay: _ = !0, centerContent: W, open: V, onClose: v, closeButtonLabel: S, hasPointerInteractionOnly: o = !1, trackingEvent: w } = param;
+    const { texts: X, t: z } = (0, _hooks.useTheme)(), d = _react.useId(), { openTooltipId: N } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: O, closeTooltip: R } = (0, _tooltipcontextprovider.useSetTooltipState)(), [H, P] = _react.useState(), [Y, G] = _react.useState(), K = _react.useRef(null), U = _react.useRef(null), [y, ht] = _react.useState(null), m = (0, _environment.isTouchableDevice)(), j = _ ? Ut : 0, [ot, q] = _react.useState(!1), [Z, L] = _react.useState(!1), J = V !== void 0, [rt, Q] = _react.useState(!1), x = J ? V : d === N, st = (0, _themevariantcontext.useThemeVariant)(), f = (0, _hooks.useBoundingRect)(K, x), it = (0, _hooks.useBoundingRect)(U, x, !0), n = (0, _hooks.useWindowSize)(), M = _react.useCallback(()=>{
         Q(!1), q(!1), L(!1);
     }, []);
     _react.useEffect(()=>{
@@ -217,14 +217,14 @@ const dt = (t)=>({
         M
     ]), _react.useEffect(()=>{
         if (!y || !x) return;
-        const a = mt(d, y, c, n.height, n.width);
-        if (!a || !d) {
+        const a = ut(f, y, c, n.height, n.width);
+        if (!a || !f) {
             P(void 0), G(void 0), M();
             return;
         }
         let r, e;
         var _parseInt;
-        const { left: l, right: k, top: A, bottom: $ } = d, { width: F, height: B } = ut(y), nt = n.width - F, at = n.height - B, h = (_parseInt = parseInt((0, _dom.getCssVarValue)(_skincontractcssmistica.vars.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
+        const { left: l, right: k, top: A, bottom: $ } = f, { width: F, height: B } = mt(y), nt = n.width - F, at = n.height - B, h = (_parseInt = parseInt((0, _dom.getCssVarValue)(_skincontractcssmistica.vars.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
         switch(a){
             case "top":
                 r = {
@@ -276,15 +276,15 @@ const dt = (t)=>({
         typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / B * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), (0, _helpers.isEqual)(r, H) || P(r), (0, _helpers.isEqual)(e, Y) || G(e);
     }, [
         y,
-        d,
+        f,
         it,
         x,
         c,
         n,
         H,
         Y,
-        u,
-        f,
+        m,
+        d,
         M
     ]);
     const tt = _react.useRef(!1);
@@ -299,28 +299,28 @@ const dt = (t)=>({
                     break;
             }
         }, r = ()=>tt.current = !1, e = (l)=>{
-            !o && u && d && (l.clientX < d.left || l.clientX > d.right || l.clientY < d.top || l.clientY > d.bottom) && M();
+            !o && m && f && (l.clientX < f.left || l.clientX > f.right || l.clientY < f.top || l.clientY > f.bottom) && M();
         };
         return document.addEventListener("keydown", a, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
             document.removeEventListener("keydown", a, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
         };
     }, [
-        u,
+        m,
         M,
-        d,
+        f,
         o
     ]), _react.useEffect(()=>{
-        J || (Z || ot || rt ? O(f) : R(f));
+        J || (Z || ot || rt ? O(d) : R(d));
     }, [
         Z,
         ot,
         rt,
-        f,
+        d,
         O,
         R,
         J
     ]);
-    const Tt = mt(d, y, c, n.height, n.width), gt = W !== void 0 ? W : (it === null || it === void 0 ? void 0 : it.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
+    const Tt = ut(f, y, c, n.height, n.width), gt = W !== void 0 ? W : (it === null || it === void 0 ? void 0 : it.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -330,22 +330,22 @@ const dt = (t)=>({
                     r && r !== K.current && (K.current = r);
                 },
                 onMouseOver: ()=>{
-                    !u && !o && L(!0);
+                    !m && !o && L(!0);
                 },
                 onMouseLeave: ()=>{
-                    !u && !o && L(!1);
+                    !m && !o && L(!1);
                 },
                 onClick: ()=>{
-                    (u || o) && L(o ? !Z : !0);
+                    (m || o) && L(o ? !Z : !0);
                 },
                 onFocus: ()=>{
                     tt.current && !o && Q(!0);
                 },
                 onBlur: ()=>{
-                    !u && !o && Q(!1);
+                    !m && !o && Q(!1);
                 },
-                "aria-describedby": f,
-                children: m
+                "aria-describedby": d,
+                children: u
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
@@ -374,7 +374,7 @@ const dt = (t)=>({
                             }
                         }, b), {
                             role: "tooltip",
-                            "aria-label": f,
+                            "aria-label": d,
                             tabIndex: -1,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_tooltipcssmistica.container),
@@ -386,16 +386,16 @@ const dt = (t)=>({
                                 }),
                                 ref: (0, _common.combineRefs)(ht, U),
                                 onMouseEnter: ()=>{
-                                    !u && a === "entered" && !o && q(!0);
+                                    !m && a === "entered" && !o && q(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !u && !o && q(!1);
+                                    !m && !o && q(!1);
                                 },
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     className: _tooltipcssmistica.tooltip,
                                     style: _object_spread_props(_object_spread({
                                         width: g
-                                    }, dt(st)), {
+                                    }, ft(st)), {
                                         maxWidth: Math.min(pt, n.width)
                                     }),
                                     children: [
@@ -427,7 +427,7 @@ const dt = (t)=>({
                                             style: Y,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: (0, _classnames.default)(_tooltipcssmistica.arrow),
-                                                style: dt(st)
+                                                style: ft(st)
                                             })
                                         })
                                     ]
@@ -439,9 +439,9 @@ const dt = (t)=>({
         ]
     });
 }, be = (_param)=>{
-    var { centerContent: t, extra: m, children: T, dataAttributes: g, title: c, description: b } = _param, _ = _object_without_properties(_param, [
+    var { centerContent: t, slot: u, children: T, dataAttributes: g, title: c, description: b } = _param, _ = _object_without_properties(_param, [
         "centerContent",
-        "extra",
+        "slot",
         "children",
         "dataAttributes",
         "title",
@@ -464,12 +464,12 @@ const dt = (t)=>({
                         })
                     ]
                 }),
-                m !== null && m !== void 0 ? m : T
+                u !== null && u !== void 0 ? u : T
             ]
         }),
         centerContent: t,
         dataAttributes: _object_spread({
-            "component-name": "Tooltip"
+            testid: "Tooltip"
         }, g)
     }, _));
 };

package/dist/touchable.css-mistica.js

@@ -22,4 +22,4 @@ _export(exports, {
         return n;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var t = "v16_70_mhti6u0", f = "v16_70_mhti6u2 v16_70_mhti6u1 v16_70_1y2v1nft7", n = "v16_70_mhti6u4 v16_70_mhti6u2 v16_70_mhti6u1 v16_70_1y2v1nft7 v16_70_mhti6u3 v16_70_1y2v1nffx v16_70_1y2v1nfh6 v16_70_1y2v1nfif v16_70_1y2v1nfjo v16_70_1y2v1nfq6 v16_70_1y2v1nfsm v16_70_1y2v1nfqr v16_70_1y2v1nf7x v16_70_1y2v1nffw v16_70_1y2v1nft9", i = "v16_70_mhti6u5";
+/* empty css                                     */ /* empty css                                     */ var t = "v16_72_mhti6u0", f = "v16_72_mhti6u2 v16_72_mhti6u1 v16_72_1y2v1nft6", n = "v16_72_mhti6u4 v16_72_mhti6u2 v16_72_mhti6u1 v16_72_1y2v1nft6 v16_72_mhti6u3 v16_72_1y2v1nffx v16_72_1y2v1nfh6 v16_72_1y2v1nfif v16_72_1y2v1nfjo v16_72_1y2v1nfq6 v16_72_1y2v1nfsm v16_72_1y2v1nfqr v16_72_1y2v1nf7x v16_72_1y2v1nffw v16_72_1y2v1nft8", i = "v16_72_mhti6u5";

package/dist/touchable.js

@@ -172,7 +172,9 @@ const I = /*#__PURE__*/ _react.forwardRef((e, t)=>{
         "aria-disabled": e["aria-disabled"],
         "aria-hidden": e["aria-hidden"],
         "aria-live": e["aria-live"]
-    }, (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Touchable")), u = {
+    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        testid: "Touchable"
+    }, e.dataAttributes))), u = {
         "aria-checked": e["aria-checked"],
         "aria-disabled": e.disabled || e["aria-disabled"] ? !0 : void 0,
         "aria-controls": e["aria-controls"],

package/dist/utils/aspect-ratio-support.css-mistica.js

@@ -23,5 +23,5 @@ _export(exports, {
     }
 });
 /* empty css                                      */ /* empty css                                                */ var r = {
-    aspectRatio: "var(--v16_70_yqswj60)"
-}, y = "v16_70_yqswj61 v16_70_1y2v1nft8 v16_70_1y2v1nfsj v16_70_1y2v1nfsk v16_70_1y2v1nfpy", a = "v16_70_yqswj62", n = "v16_70_yqswj63 v16_70_1y2v1nfqr v16_70_1y2v1nfr8 v16_70_1y2v1nfte v16_70_1y2v1nftt";
+    aspectRatio: "var(--v16_72_yqswj60)"
+}, y = "v16_72_yqswj61 v16_72_1y2v1nft7 v16_72_1y2v1nfsj v16_72_1y2v1nfsk v16_72_1y2v1nfpy", a = "v16_72_yqswj62", n = "v16_72_yqswj63 v16_72_1y2v1nfqr v16_72_1y2v1nfr8 v16_72_1y2v1nftd v16_72_1y2v1nfts";