@telefonica/mistica 14.7.1 → 14.9.0

package/dist/stepper.css-mistica.js

@@ -12,18 +12,18 @@ _export(exports, {
     bar: ()=>_,
     barFilled: ()=>r,
     barFilledAnimation: ()=>a,
-    barFilledReverseAnimation: ()=>e,
-    currentNumber: ()=>f,
+    barFilledReverseAnimation: ()=>f,
+    currentNumber: ()=>m,
     iconAnimation: ()=>y,
-    number: ()=>m,
+    number: ()=>e,
     step: ()=>i,
-    stepIconNumber: ()=>t,
-    stepper: ()=>h,
-    textContainer: ()=>o,
-    vars: ()=>q
+    stepIconNumber: ()=>q,
+    stepper: ()=>t,
+    textContainer: ()=>h,
+    vars: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./stepper.css.ts.vanilla.js");
-var _ = "_14h93mqk _1y2v1nf8e _1y2v1nf7v _1y2v1nfa1 _1y2v1nfa4", r = "_14h93mqm _1y2v1nf8e _1y2v1nf7v _1y2v1nfa1 _1y2v1nfa4", a = "_14h93mqn", e = "_14h93mqp _1y2v1nf7x", f = "_14h93mqf", y = "_14h93mqc", m = "_14h93mqe _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nf9n", i = "_14h93mq9 _1y2v1nf5j _1y2v1nf5p _1y2v1nf5u _1y2v1nf63", t = "_14h93mqb _1y2v1nf5j _1y2v1nf5o", h = "_14h93mq7 _1y2v1nf5o _1y2v1nf9b", o = "_14h93mqh _1y2v1nf5k", q = {
+var _ = "_14h93mqk _1y2v1nf8g _1y2v1nf7x _1y2v1nfa3 _1y2v1nfa6", r = "_14h93mqm _1y2v1nf8g _1y2v1nf7x _1y2v1nfa3 _1y2v1nfa6", a = "_14h93mqn", f = "_14h93mqp _1y2v1nf7z", m = "_14h93mqf", y = "_14h93mqc", e = "_14h93mqe _1y2v1nf5q _1y2v1nf65 _1y2v1nf5z _1y2v1nf9p", i = "_14h93mq9 _1y2v1nf5l _1y2v1nf5r _1y2v1nf5w _1y2v1nf65", q = "_14h93mqb _1y2v1nf5l _1y2v1nf5q", t = "_14h93mq7 _1y2v1nf5q _1y2v1nf9d", h = "_14h93mqh _1y2v1nf5m", p = {
     stepperMinHeight: "var(--_14h93mq0)"
 };

package/dist/switch-component.css-mistica.js

@@ -9,32 +9,32 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ballVariants: ()=>h,
-    barVariants: ()=>q,
+    ballVariants: ()=>p,
+    barVariants: ()=>n,
     checkboxVariants: ()=>v,
-    container: ()=>p,
-    disabled: ()=>f,
+    container: ()=>f,
+    disabled: ()=>q,
     switchCheckboxContainerVariants: ()=>y,
     switchCheckboxLabel: ()=>_
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./switch-component.css.ts.vanilla.js");
-var h = {
-    default: "q0hp3as q0hp3aq q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n",
-    ios: "q0hp3at q0hp3ar q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n",
-    checked: "q0hp3au q0hp3aq q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n",
-    checkedIos: "q0hp3av q0hp3ar q0hp3ap _1y2v1nf5k _1y2v1nfbc _1y2v1nf5q _1y2v1nf9n"
-}, q = {
-    default: "q0hp3ai q0hp3ah _1y2v1nf5q",
-    ios: "q0hp3aj q0hp3ah _1y2v1nf5q",
-    checked: "q0hp3ak q0hp3ah _1y2v1nf5q",
-    checkedIos: "q0hp3al q0hp3ah _1y2v1nf5q"
+var p = {
+    default: "q0hp3as q0hp3aq q0hp3ap _1y2v1nf5m _1y2v1nfbe _1y2v1nf5s _1y2v1nf9p",
+    ios: "q0hp3at q0hp3ar q0hp3ap _1y2v1nf5m _1y2v1nfbe _1y2v1nf5s _1y2v1nf9p",
+    checked: "q0hp3au q0hp3aq q0hp3ap _1y2v1nf5m _1y2v1nfbe _1y2v1nf5s _1y2v1nf9p",
+    checkedIos: "q0hp3av q0hp3ar q0hp3ap _1y2v1nf5m _1y2v1nfbe _1y2v1nf5s _1y2v1nf9p"
+}, n = {
+    default: "q0hp3ai q0hp3ah _1y2v1nf5s",
+    ios: "q0hp3aj q0hp3ah _1y2v1nf5s",
+    checked: "q0hp3ak q0hp3ah _1y2v1nf5s",
+    checkedIos: "q0hp3al q0hp3ah _1y2v1nf5s"
 }, v = {
-    default: "q0hp3a6 _1y2v1nf5s _1y2v1nfa3",
-    ios: "q0hp3a7 _1y2v1nf5s _1y2v1nfa3",
-    disabled: "q0hp3a8 _1y2v1nf5s _1y2v1nfa3",
-    disabledIos: "q0hp3a9 _1y2v1nf5s _1y2v1nfa3"
-}, p = "q0hp3am", f = "q0hp3an", y = {
-    default: "q0hp3ac q0hp3ab _1y2v1nf5j",
-    ios: "q0hp3ad q0hp3ab _1y2v1nf5j"
-}, _ = "q0hp3af _1y2v1nf5q _1y2v1nfa4";
+    default: "q0hp3a6 _1y2v1nf5u _1y2v1nfa5",
+    ios: "q0hp3a7 _1y2v1nf5u _1y2v1nfa5",
+    disabled: "q0hp3a8 _1y2v1nf5u _1y2v1nfa5",
+    disabledIos: "q0hp3a9 _1y2v1nf5u _1y2v1nfa5"
+}, f = "q0hp3am", q = "q0hp3an", y = {
+    default: "q0hp3ac q0hp3ab _1y2v1nf5l",
+    ios: "q0hp3ad q0hp3ab _1y2v1nf5l"
+}, _ = "q0hp3af _1y2v1nf5s _1y2v1nfa6";

package/dist/tabs.css-mistica.js

@@ -12,21 +12,21 @@ _export(exports, {
     animatedLine: ()=>v,
     icon: ()=>y,
     inner: ()=>_,
-    outer: ()=>a,
-    outerBorder: ()=>m,
-    tabSelectionVariants: ()=>o,
-    tabVariants: ()=>t,
-    tabWithIcon: ()=>r,
-    tabsContainer: ()=>e
+    outer: ()=>o,
+    outerBorder: ()=>a,
+    tabSelectionVariants: ()=>r,
+    tabVariants: ()=>e,
+    tabWithIcon: ()=>m,
+    tabsContainer: ()=>t
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tabs.css.ts.vanilla.js");
-var v = "_1y2v1nf5n _1y2v1nf5k _1y2v1nfak _1y2v1nfbc _1y2v1nf8d _1y2v1nf3s", y = "lgofm1m", _ = "lgofm14 _1y2v1nf5k _1y2v1nfak _1y2v1nfay _1y2v1nf8p", a = "lgofm12 _1y2v1nf8m _1y2v1nf5j _1y2v1nfa4", m = "lgofm10", o = {
-    noSelected: "_1y2v1nf1t",
-    selected: "_1y2v1nf1r lgofm1h",
-    selectedAnimating: "_1y2v1nf1r lgofm1i"
-}, t = {
-    default: "lgofm17 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nf78 _1y2v1nf7m _1y2v1nf8m _1y2v1nf5i lgofm18",
-    tabs2: "lgofm17 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nf78 _1y2v1nf7m _1y2v1nf8m _1y2v1nf5i lgofm19",
-    tabs3: "lgofm17 _1y2v1nf5p _1y2v1nf63 _1y2v1nf5x _1y2v1nf78 _1y2v1nf7m _1y2v1nf8m _1y2v1nf5i lgofm1a"
-}, r = "lgofm1e", e = "_1y2v1nf8m _1y2v1nf5o";
+var v = "_1y2v1nf5p _1y2v1nf5m _1y2v1nfam _1y2v1nfbe _1y2v1nf8f _1y2v1nf3u", y = "lgofm1m", _ = "lgofm14 _1y2v1nf5m _1y2v1nfam _1y2v1nfb0 _1y2v1nf8r", o = "lgofm12 _1y2v1nf8o _1y2v1nf5l _1y2v1nfa6", a = "lgofm10", r = {
+    noSelected: "_1y2v1nf1u",
+    selected: "_1y2v1nf1s lgofm1h",
+    selectedAnimating: "_1y2v1nf1s lgofm1i"
+}, e = {
+    default: "lgofm17 _1y2v1nf5r _1y2v1nf65 _1y2v1nf5z _1y2v1nf7a _1y2v1nf7o _1y2v1nf8o _1y2v1nf5k lgofm18",
+    tabs2: "lgofm17 _1y2v1nf5r _1y2v1nf65 _1y2v1nf5z _1y2v1nf7a _1y2v1nf7o _1y2v1nf8o _1y2v1nf5k lgofm19",
+    tabs3: "lgofm17 _1y2v1nf5r _1y2v1nf65 _1y2v1nf5z _1y2v1nf7a _1y2v1nf7o _1y2v1nf8o _1y2v1nf5k lgofm1a"
+}, m = "lgofm1e", t = "_1y2v1nf8o _1y2v1nf5q";

package/dist/tabs.js

@@ -112,8 +112,8 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = (r)=>{
-    switch(r){
+const f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = (a)=>{
+    switch(a){
         case 2:
             return "tabs2";
         case 3:
@@ -122,17 +122,17 @@ const f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = (r)=>{
             return "default";
     }
 }, J = (param)=>{
-    let { selectedIndex: r , onChange: A , tabs: d , dataAttributes: N  } = param;
-    const i = (0, _hooksJs.useAriaId)(), { ref: T  } = (0, _hooksJs.useElementDimensions)(), u = _react.useRef(null), b = _react.useRef(null), [p, h] = _react.useState(!1), L = (o, l)=>{
-        const e = document.querySelector(`[id='${i}'] [data-tabindex="${o}"]`), n = document.querySelector(`[id='${i}'] [data-tabindex="${l}"]`), t = u.current, s = b.current;
-        e && n && t && s && (h(!0), t.style.display = "block", t.style.width = `${e.offsetWidth}px`, t.style.transform = `translate(${e.offsetLeft - s.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            t.style.width = `${n.offsetWidth}px`, t.style.transform = `translate(${n.offsetLeft - s.scrollLeft}px, 0)`, t.style.transition = `transform ${f}ms, width ${f}ms`;
+    let { selectedIndex: a , onChange: A , tabs: d , dataAttributes: N  } = param;
+    const o = (0, _hooksJs.useAriaId)(), { ref: T  } = (0, _hooksJs.useElementDimensions)(), u = _react.useRef(null), b = _react.useRef(null), [p, h] = _react.useState(!1), L = (i, l)=>{
+        const e = document.querySelector(`[id='${o}'] [data-tabindex="${i}"]`), n = document.querySelector(`[id='${o}'] [data-tabindex="${l}"]`), t = u.current, r = b.current;
+        e && n && t && r && (h(!0), t.style.display = "block", t.style.width = `${e.offsetWidth}px`, t.style.transform = `translate(${e.offsetLeft - r.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            t.style.width = `${n.offsetWidth}px`, t.style.transform = `translate(${n.offsetLeft - r.scrollLeft}px, 0)`, t.style.transition = `transform ${f}ms, width ${f}ms`;
         }), setTimeout(()=>{
             t.style.transition = "", t.style.display = "none", h(!1);
         }, f));
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-        id: i,
+        id: o,
         role: "tablist",
         ref: T,
         className: _tabsCssMisticaJs.outerBorder
@@ -148,22 +148,21 @@ const f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = (r)=>{
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                             className: _tabsCssMisticaJs.tabsContainer,
                             children: d.map((param, t)=>{
-                                let { text: o , trackingEvent: l , icon: e , "aria-controls": n  } = param;
-                                const s = t === r;
+                                let { text: i , trackingEvent: l , icon: e , "aria-controls": n  } = param;
+                                const r = t === a;
                                 return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_touchableJs.BaseTouchable, {
                                     dataAttributes: {
                                         "component-name": "Tab",
                                         tabindex: t
                                     },
-                                    className: (0, _classnames.default)(_tabsCssMisticaJs.tabVariants[q(d.length)], s ? p ? _tabsCssMisticaJs.tabSelectionVariants.selectedAnimating : _tabsCssMisticaJs.tabSelectionVariants.selected : _tabsCssMisticaJs.tabSelectionVariants.noSelected, e && _tabsCssMisticaJs.tabWithIcon),
-                                    disabled: s,
+                                    className: (0, _classnames.default)(_tabsCssMisticaJs.tabVariants[q(d.length)], r ? p ? _tabsCssMisticaJs.tabSelectionVariants.selectedAnimating : _tabsCssMisticaJs.tabSelectionVariants.selected : _tabsCssMisticaJs.tabSelectionVariants.noSelected, e && _tabsCssMisticaJs.tabWithIcon),
                                     onPress: ()=>{
-                                        !p && r !== t && (A(t), L(r, t));
+                                        !p && a !== t && (A(t), L(a, t));
                                     },
                                     trackingEvent: l,
                                     role: "tab",
                                     "aria-controls": n,
-                                    "aria-selected": s ? "true" : "false",
+                                    "aria-selected": r ? "true" : "false",
                                     children: [
                                         e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                                             className: _tabsCssMisticaJs.icon,
@@ -174,7 +173,7 @@ const f = (0, _platformJs.isRunningAcceptanceTest)() ? 0 : 300, q = (r)=>{
                                             color: "inherit",
                                             wordBreak: !1,
                                             textAlign: "center",
-                                            children: o
+                                            children: i
                                         })
                                     ]
                                 }, t);

package/dist/tag.css-mistica.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "tag", {
     enumerable: true,
-    get: ()=>_
+    get: ()=>n
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tag.css.ts.vanilla.js");
-var _ = "_1wy08671 _1y2v1nf6d _1y2v1nf6r _1y2v1nf5p _1y2v1nf5t _1y2v1nf63 _1y2v1nf5x _1y2v1nf91 _1y2v1nf7l";
+var n = "_1wy08671 _1y2v1nf6f _1y2v1nf6t _1y2v1nf5r _1y2v1nf5v _1y2v1nf65 _1y2v1nf5z _1y2v1nf93 _1y2v1nf7n";

package/dist/text-field-base.css-mistica.js

@@ -10,8 +10,8 @@ function _export(target, all) {
 }
 _export(exports, {
     endIcon: ()=>n,
-    fullWidth: ()=>r,
-    input: ()=>t,
+    fullWidth: ()=>t,
+    input: ()=>r,
     inputFirefoxStyles: ()=>e,
     inputWithLabel: ()=>f,
     inputWithoutLabel: ()=>_,
@@ -22,10 +22,10 @@ _export(exports, {
     prefixWithoutLabel: ()=>l,
     startIcon: ()=>u,
     suggestionsContainer: ()=>p,
-    textArea: ()=>b,
+    textArea: ()=>x,
     textAreaWithLabel: ()=>m,
-    textAreaWithoutLabel: ()=>x
+    textAreaWithoutLabel: ()=>b
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-field-base.css.ts.vanilla.js");
-var n = "rhey4tf _1y2v1nf76 _1y2v1nf7m _1y2v1nf5o _1y2v1nf63", r = "rhey4t4", t = "rhey4ta _1y2v1nf5j _1y2v1nf8b rhey4t1 _1y2v1nf9m _1y2v1nf8r _1y2v1nf1r _1y2v1nf7v", e = "rhey4tb", f = "rhey4tc", _ = "_1y2v1nf6g _1y2v1nf6u", a = "rhey4to _1y2v1nf8l _1y2v1nf5o _1y2v1nf63 _1y2v1nfa3", h = "_1y2v1nf31", i = "rhey4tj _1y2v1nf77 _1y2v1nf7m", o = "rhey4tl _1y2v1nf6s", l = "_1y2v1nf6g _1y2v1nf6u", u = "rhey4th _1y2v1nf77 _1y2v1nf7l _1y2v1nf5o _1y2v1nf63 _1y2v1nf8b _1y2v1nf5k", p = "rhey4tr _1y2v1nf5k", b = "rhey4t6 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h rhey4t1 _1y2v1nf9m _1y2v1nf8r _1y2v1nf1r _1y2v1nf7v", m = "rhey4t7", x = "rhey4t8";
+var n = "rhey4tf _1y2v1nf78 _1y2v1nf7o _1y2v1nf5q _1y2v1nf65", t = "rhey4t4", r = "rhey4ta _1y2v1nf5l _1y2v1nf8d rhey4t1 _1y2v1nf9o _1y2v1nf8t _1y2v1nf1s _1y2v1nf7x", e = "rhey4tb", f = "rhey4tc", _ = "_1y2v1nf6i _1y2v1nf6w", a = "rhey4to _1y2v1nf8n _1y2v1nf5q _1y2v1nf65 _1y2v1nfa5", h = "_1y2v1nf33", i = "rhey4tj _1y2v1nf79 _1y2v1nf7o", o = "rhey4tl _1y2v1nf6u", l = "_1y2v1nf6i _1y2v1nf6w", u = "rhey4th _1y2v1nf79 _1y2v1nf7n _1y2v1nf5q _1y2v1nf65 _1y2v1nf8d _1y2v1nf5m", p = "rhey4tr _1y2v1nf5m", x = "rhey4t6 _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j rhey4t1 _1y2v1nf9o _1y2v1nf8t _1y2v1nf1s _1y2v1nf7x", m = "rhey4t7", b = "rhey4t8";

package/dist/text-field-components.css-mistica.js

@@ -15,19 +15,19 @@ _export(exports, {
     LABEL_SCALE_MOBILE: ()=>f,
     disabled: ()=>e,
     field: ()=>y,
-    fieldContainer: ()=>i,
-    fieldMulti: ()=>l,
+    fieldContainer: ()=>l,
+    fieldMulti: ()=>i,
     fieldSingle: ()=>t,
-    fullWidth: ()=>u,
-    helperContainer: ()=>k,
-    helperText: ()=>o,
-    labelContainer: ()=>L,
-    labelText: ()=>d,
+    fullWidth: ()=>k,
+    helperContainer: ()=>u,
+    helperText: ()=>L,
+    labelContainer: ()=>d,
+    labelText: ()=>o,
     leftText: ()=>E,
     normalWidth: ()=>T,
     rightText: ()=>h,
-    shrinked: ()=>A
+    shrinked: ()=>x
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-field-components.css.ts.vanilla.js");
-var _ = 328, n = 12, a = 0.78, f = 0.75, e = "_15k6ur97", y = "_1y2v1nfa4 _1y2v1nf9l _1y2v1nf5o _1y2v1nf9u _1y2v1nf5j", i = "_15k6ur96 _1y2v1nf5o _1y2v1nf5u", l = "_15k6ur9e", t = "_15k6ur9d _1y2v1nf8m", u = "_1y2v1nf7v", k = "_1y2v1nf77 _1y2v1nf7m _1y2v1nf5o", o = "_15k6ur9g", L = "_15k6ur91 _1y2v1nf5k _1y2v1nfa6 _1y2v1nf8i _1y2v1nf5o _1y2v1nf5t _1y2v1nfao", d = "_15k6ur93 _1y2v1nfa4 _1y2v1nf67", E = "_15k6ur9h", T = "_15k6ur99 _1y2v1nf7v", h = "_15k6ur9i", A = "_15k6ur94";
+var _ = 328, n = 12, a = 0.78, f = 0.75, e = "_15k6ur97", y = "_1y2v1nfa6 _1y2v1nf9n _1y2v1nf5q _1y2v1nf9w _1y2v1nf5l", l = "_15k6ur96 _1y2v1nf5q _1y2v1nf5w", i = "_15k6ur9e", t = "_15k6ur9d _1y2v1nf8o", k = "_1y2v1nf7x", u = "_1y2v1nf79 _1y2v1nf7o _1y2v1nf5q", L = "_15k6ur9g", d = "_15k6ur91 _1y2v1nf5m _1y2v1nfa8 _1y2v1nf8k _1y2v1nf5q _1y2v1nf5v _1y2v1nfaq", o = "_15k6ur93 _1y2v1nfa6 _1y2v1nf69", E = "_15k6ur9h", T = "_15k6ur99 _1y2v1nf7x", h = "_15k6ur9i", x = "_15k6ur94";

package/dist/text-link.css-mistica.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "variants", {
     enumerable: true,
-    get: ()=>r
+    get: ()=>v
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-link.css.ts.vanilla.js");
-var r = {
-    default: "_1m1n0pr1 _1y2v1nf7w _1y2v1nf5r _1y2v1nfa3 _1y2v1nf22",
-    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nf7w _1y2v1nf5r _1y2v1nfa3 _1y2v1nf23",
-    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nf7w _1y2v1nf5r _1y2v1nfa3 _1y2v1nf22"
+var v = {
+    default: "_1m1n0pr1 _1y2v1nf7y _1y2v1nf5t _1y2v1nfa5 _1y2v1nf23",
+    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nf7y _1y2v1nf5t _1y2v1nfa5 _1y2v1nf24",
+    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nf7y _1y2v1nf5t _1y2v1nfa5 _1y2v1nf23"
 };

package/dist/tooltip.css-mistica.js

@@ -10,15 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     arrow: ()=>v,
-    arrowBottom: ()=>t,
-    arrowLeft: ()=>_,
-    arrowRight: ()=>n,
+    arrowBottom: ()=>n,
+    arrowLeft: ()=>t,
+    arrowRight: ()=>_,
     arrowTop: ()=>e,
     arrowWrapper: ()=>f,
     container: ()=>p,
     enter: ()=>o,
-    enterActive: ()=>x,
-    enterDone: ()=>y,
+    enterActive: ()=>y,
+    enterDone: ()=>x,
     exit: ()=>h,
     exitActive: ()=>b,
     fadeInBottomKeyframes: ()=>m,
@@ -29,11 +29,11 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./tooltip.css.ts.vanilla.js");
-var v = "_1xhatbpb _1y2v1nf5k _1y2v1nfa6 _1y2v1nf81 _1y2v1nf8g _1y2v1nf9o _1y2v1nf2t _1y2v1nf9l", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nf5k _1y2v1nf83 _1y2v1nf8g _1y2v1nfa4 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf6e _1y2v1nf6s _1y2v1nf76 _1y2v1nf7k _1y2v1nf5k _1y2v1nfap _1y2v1nf7w _1y2v1nf9x _1y2v1nf9l", o = "_1xhatbpk", x = "_1xhatbpl", y = "_1xhatbpm", h = "_1xhatbpn", b = "_1xhatbpo", m = "_1xhatbp6", i = "_1xhatbp7", w = "_1xhatbp8", s = {
+var v = "_1xhatbpb _1y2v1nf5m _1y2v1nfa8 _1y2v1nf83 _1y2v1nf8i _1y2v1nf9q _1y2v1nf2u _1y2v1nf9n", n = "_1xhatbpe", t = "_1xhatbpf", _ = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nf5m _1y2v1nf85 _1y2v1nf8i _1y2v1nfa6 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf6g _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf5m _1y2v1nfar _1y2v1nf7y _1y2v1nf9z _1y2v1nf9n", o = "_1xhatbpk", y = "_1xhatbpl", x = "_1xhatbpm", h = "_1xhatbpn", b = "_1xhatbpo", m = "_1xhatbp6", i = "_1xhatbp7", w = "_1xhatbp8", s = {
     shadowAlpha: "var(--_1xhatbp0)",
     enterTransform: "var(--_1xhatbp1)",
     enterDoneTransform: "var(--_1xhatbp2)",
     exitTransform: "var(--_1xhatbp3)",
     enterActiveAnimationName: "var(--_1xhatbp4)",
     arrowBoxShadow: "var(--_1xhatbp5)"
-}, d = "_1y2v1nf5s";
+}, d = "_1y2v1nf5u";

package/dist/touchable.css-mistica.js

@@ -15,4 +15,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./touchable.css.ts.vanilla.js");
-var f = "mhti6u1 _1y2v1nfa3", y = "mhti6u4", _ = "mhti6u1 _1y2v1nfa3 _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5q _1y2v1nf9m _1y2v1nf7v _1y2v1nf2q _1y2v1nf5i _1y2v1nfa5";
+var f = "mhti6u1 _1y2v1nfa5", y = "mhti6u4", _ = "mhti6u1 _1y2v1nfa5 _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5s _1y2v1nf9o _1y2v1nf7x _1y2v1nf2r _1y2v1nf5k _1y2v1nfa7";

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

@@ -16,6 +16,6 @@ _export(exports, {
 });
 require("../sprinkles.css.ts.vanilla.js");
 require("./aspect-ratio-support.css.ts.vanilla.js");
-var v = "yqswj62", n = "_1y2v1nf7v _1y2v1nf8b _1y2v1nfa6 _1y2v1nfak", y = {
+var v = "yqswj62", n = "_1y2v1nf7x _1y2v1nf8d _1y2v1nfa8 _1y2v1nfam", y = {
     aspectRatio: "var(--yqswj60)"
-}, f = "_1y2v1nfa4 _1y2v1nf9j _1y2v1nf9k _1y2v1nf5j";
+}, f = "_1y2v1nfa6 _1y2v1nf9l _1y2v1nf9m _1y2v1nf5l";

package/dist/video.css-mistica.js

@@ -7,4 +7,4 @@ Object.defineProperty(exports, "video", {
     get: ()=>f
 });
 require("./sprinkles.css.ts.vanilla.js");
-var f = "_1y2v1nf5q _1y2v1nf7v _1y2v1nf8b _1y2v1nf5i _1y2v1nf9j _1y2v1nf9k _1y2v1nfbq";
+var f = "_1y2v1nfa8 _1y2v1nfam _1y2v1nf5s _1y2v1nf5k _1y2v1nf9l _1y2v1nf9m _1y2v1nfbs";

package/dist/video.d.ts

@@ -6,10 +6,11 @@ export declare const RATIO: {
     '16:9': number;
     '4:3': number;
 };
-type VideoSource = {
+type VideoSourceWithType = {
     src: string;
     type?: string;
 };
+export type VideoSource = string | ReadonlyArray<string> | VideoSourceWithType | ReadonlyArray<VideoSourceWithType>;
 export type VideoProps = {
     /** defaults to 100% when no width and no height are given */
     width?: string | number;
@@ -17,13 +18,19 @@ export type VideoProps = {
     /** defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original video proportions, set aspectRatio to 0 */
     aspectRatio?: AspectRatio | number;
     /** accepts multiple sources */
-    src: string | ReadonlyArray<string> | VideoSource | ReadonlyArray<VideoSource>;
+    src: VideoSource;
     /** defaults to true */
     loop?: boolean;
     /** defaults to true */
     muted?: boolean;
-    /** defaults to true */
-    autoPlay?: boolean;
+    /** defaults to when-loaded. If set to true, behaviour is the same as when the value is equal to when-loaded */
+    autoPlay?: boolean | 'streaming' | 'when-loaded';
+    /** defaults to 10s */
+    loadingTimeout?: number;
+    onError?: () => void;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onLoad?: () => void;
     poster?: string;
     children?: void;
     /** defaults to none */

package/dist/video.js

@@ -9,8 +9,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    RATIO: ()=>F,
-    default: ()=>O
+    RATIO: ()=>W,
+    default: ()=>ae
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _imageJs = require("./image.js");
@@ -20,6 +20,7 @@ const _domJs = require("./utils/dom.js");
 const _platformJs = require("./utils/platform.js");
 const _videoCssMisticaJs = require("./video.css-mistica.js");
 const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+const _hooksJs = require("./hooks.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -139,68 +140,146 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const F = {
+const L = {
+    loading: {
+        play: "playing",
+        pause: "paused",
+        fail: "error",
+        finishLoad: "loaded"
+    },
+    loaded: {
+        play: "playing",
+        pause: "paused",
+        reset: "loading"
+    },
+    playing: {
+        pause: "paused",
+        reset: "loading"
+    },
+    paused: {
+        play: "playing",
+        reset: "loading"
+    },
+    error: {
+        reset: "loading"
+    }
+}, M = (t, l)=>L[t][l] || t, W = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, N = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", O = /*#__PURE__*/ _react.forwardRef((_param, R)=>{
-    var { src: t , poster: i , autoPlay: o = !(0, _platformJs.isRunningAcceptanceTest)() , muted: c = !0 , loop: m = !0 , preload: u = "none" , aspectRatio: A = "1:1" , dataAttributes: f  } = _param, s = _objectWithoutProperties(_param, [
+}, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", ae = /*#__PURE__*/ _react.forwardRef((_param, F)=>{
+    var { src: t , poster: l , autoPlay: u = "when-loaded" , muted: C = !0 , loop: E = !0 , preload: S = "none" , loadingTimeout: y = 1e4 , onLoad: h , onError: c , onPause: f , onPlay: m , aspectRatio: A = "1:1" , dataAttributes: T  } = _param, i = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
         "muted",
         "loop",
         "preload",
+        "loadingTimeout",
+        "onLoad",
+        "onError",
+        "onPause",
+        "onPlay",
         "aspectRatio",
         "dataAttributes"
     ]);
-    const l = (0, _imageJs.useMediaBorderRadius)(), p = typeof A == "number" ? A : F[A], a = _react.useRef(null);
+    const [r, s] = _react.useReducer(M, "loading"), g = _react.useRef(null), b = _react.useRef(), w = (0, _imageJs.useMediaBorderRadius)(), p = typeof A == "number" ? A : W[A], R = _react.useCallback(()=>{
+        r === "loading" && (s("fail"), c == null || c());
+    }, [
+        c,
+        r
+    ]);
     _react.useEffect(()=>{
-        const e = a.current;
-        e && o && e.paused && e.play();
+        var e;
+        if (b.current !== t) {
+            b.current = t;
+            const n = setTimeout(R, y);
+            return (e = g.current) == null || e.load(), ()=>{
+                clearTimeout(n);
+            };
+        }
     }, [
-        o
+        t,
+        y,
+        R
     ]);
-    const g = (Array.isArray(t) ? t : [
+    const v = ()=>{
+        h == null || h();
+        const e = g.current, n = u && !(0, _platformJs.isRunningAcceptanceTest)();
+        s("finishLoad"), e && n && e.paused && e.play();
+    }, x = (Array.isArray(t) ? t : [
         t
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), d = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("video", _objectSpreadProps(_objectSpread({
-        ref: (0, _commonJs.combineRefs)(R, a),
+        } : e), a = r === "error" || r === "loading" || r === "loaded", { ref: I , width: N , height: k  } = (0, _hooksJs.useElementDimensions)(), B = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("video", _objectSpreadProps(_objectSpread({
+        ref: (0, _commonJs.combineRefs)(F, g),
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        autoPlay: o,
-        muted: c,
-        loop: m,
+        muted: C,
+        loop: E,
         className: _videoCssMisticaJs.video,
-        preload: u,
-        poster: i || N
-    }, (0, _domJs.getPrefixedDataAttributes)(f)), {
+        preload: S,
+        onLoadStart: ()=>{
+            s("reset");
+        },
+        onError: R,
+        onPause: ()=>{
+            f == null || f(), s("pause");
+        },
+        onPlay: ()=>{
+            m == null || m(), s("play");
+        },
+        onCanPlay: ()=>{
+            u === "streaming" && v();
+        },
+        onCanPlayThrough: ()=>{
+            u !== "streaming" && v();
+        },
+        poster: _
+    }, (0, _domJs.getPrefixedDataAttributes)(T)), {
         style: {
-            borderRadius: l ? _skinContractCssMisticaJs.vars.borderRadii.container : 0
+            borderRadius: w ? _skinContractCssMisticaJs.vars.borderRadii.container : 0,
+            visibility: a ? "hidden" : "visible",
+            position: a || p !== 0 ? "absolute" : "static",
+            width: a ? N : "100%",
+            height: a ? k : "100%"
         },
-        children: g.map((param, b)=>/* @__PURE__ */ {
-            let { src: e , type: h  } = param;
+        children: x.map((param, U)=>/* @__PURE__ */ {
+            let { src: e , type: n  } = param;
             return (0, _jsxRuntimeJs.jsx)("source", {
                 src: e,
-                type: h
-            }, b);
+                type: n
+            }, U);
         })
-    }));
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_aspectRatioSupportJs.AspectRatioElement, {
+    })), j = !!(p !== 0 || i.width && i.height), G = l ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.ImageContent, {
+        ref: I,
+        aspectRatio: A,
+        width: i.width,
+        height: i.height,
+        src: l
+    }) : j ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        style: {
+            position: "absolute",
+            width: "100%",
+            height: "100%"
+        },
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.ImageError, {
+            ref: I,
+            noBorderRadius: !w,
+            withIcon: r === "error"
+        })
+    }) : void 0;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_aspectRatioSupportJs.AspectRatioElement, {
+        style: {
+            position: "relative"
+        },
         aspectRatio: p,
-        width: s.width,
-        height: s.height,
-        children: (0, _platformJs.isSafari)() ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            style: {
-                width: "100%",
-                height: "100%",
-                backgroundImage: i ? `url("${i}")` : void 0,
-                backgroundSize: "cover",
-                backgroundPosition: "50% 50%"
-            },
-            children: d
-        }) : d
+        width: i.width,
+        height: i.height,
+        children: [
+            B,
+            a && G
+        ]
     });
 });

package/dist-es/avatar.css-mistica.js

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.js";
-var a = "_1y2v1nfa2 _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nfa4", f = "_1y2v1nfbq";
+var a = "_1y2v1nfa4 _1y2v1nf5q _1y2v1nf65 _1y2v1nf5z _1y2v1nfa6", f = "_1y2v1nfbs";
 export { a as avatar, f as image };

package/dist-es/badge.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./badge.css.ts.vanilla.js";
-var n = "_17szrmd2 _1y2v1nf80 _1y2v1nf8f _1y2v1nf42", r = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nf80 _1y2v1nf8f _1y2v1nf42 _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nf1s", y = "_1y2v1nf5k", a = "_1y2v1nf5j _1y2v1nf5s";
+var n = "_17szrmd2 _1y2v1nf82 _1y2v1nf8h _1y2v1nf44", r = "_17szrmd6", f = "_17szrmd4 _17szrmd2 _1y2v1nf82 _1y2v1nf8h _1y2v1nf44 _1y2v1nf5q _1y2v1nf65 _1y2v1nf5z _1y2v1nf1t", y = "_1y2v1nf5m", a = "_1y2v1nf5l _1y2v1nf5u";
 export { n as badge, r as badgeBigNumber, f as badgeNumber, y as badgeWithChildren, a as container };