@telefonica/mistica 14.7.0 → 14.8.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/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-base.js

@@ -148,7 +148,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
-    var { error: c , helperText: A , label: n , inputProps: g , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: p , inputComponent: f , prefix: m , startIcon: e , endIcon: a , endIconOverlay: x , shrinkLabel: H , multiline: L = !1 , focus: C , fieldRef: K , maxLength: S , id: M , autoComplete: G , fullWidth: J  } = _param, r = _objectWithoutProperties(_param, [
+    var { error: c , helperText: A , label: n , inputProps: g , inputRef: y , defaultValue: o , value: t , onFocus: u , onBlur: p , inputComponent: h , prefix: m , startIcon: e , endIcon: a , endIconOverlay: x , shrinkLabel: H , multiline: L = !1 , focus: C , fieldRef: K , maxLength: S , id: M , autoComplete: G , fullWidth: J  } = _param, r = _objectWithoutProperties(_param, [
         "error",
         "helperText",
         "label",
@@ -173,13 +173,13 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
         "fullWidth"
     ]);
     var q;
-    const F = (0, _hooksJs.useAriaId)(M), [h, d] = _react.useState((o == null ? void 0 : o.length) || (t == null ? void 0 : t.length) ? "filled" : "default"), { isTabletOrSmaller: U  } = (0, _hooksJs.useScreenSize)(), [X, N] = _react.useState((q = o == null ? void 0 : o.length) != null ? q : 0), E = !!n || !r.required, w = (0, _hooksJs.useTheme)(), P = H || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [Y, Z] = _react.useState("baseline");
+    const F = (0, _hooksJs.useAriaId)(M), [f, d] = _react.useState((o == null ? void 0 : o.length) || (t == null ? void 0 : t.length) ? "filled" : "default"), { isTabletOrSmaller: U  } = (0, _hooksJs.useScreenSize)(), [X, N] = _react.useState((q = o == null ? void 0 : o.length) != null ? q : 0), E = !!n || !r.required, w = (0, _hooksJs.useTheme)(), P = H || (r.type === "date" || r.type === "datetime-local" || r.type === "month") && !r.required, [Y, Z] = _react.useState("baseline");
     (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
         (0, _platformJs.isSafari)() && Z("initial");
     }, []), _react.useEffect(()=>{
-        h !== "focused" && (t == null ? void 0 : t.length) && (N(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && (t == null ? void 0 : t.length) && d("filled");
+        f !== "focused" && (t == null ? void 0 : t.length) && (N(t.length), d("filled")), C && d("focused"), C === !1 && !(t != null && t.length) && d("default"), C === !1 && (t == null ? void 0 : t.length) && d("filled");
     }, [
-        h,
+        f,
         t,
         C
     ]), _react.useEffect(()=>{
@@ -187,14 +187,14 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
     }, [
         r.autoFocus
     ]);
-    const v = L ? "textarea" : "input", $ = f ? {
+    const v = L ? "textarea" : "input", $ = h ? {
         inputRef: y
     } : {
         ref: (0, _commonJs.combineRefs)(Q, y)
     }, b = _objectSpread(_objectSpreadProps(_objectSpread({}, r), {
         maxLength: S,
         autoComplete: G
-    }), g), k = P || h === "focused" || h === "filled", V = k ? U ? _textFieldComponentsCssMisticaJs.LABEL_SCALE_MOBILE : _textFieldComponentsCssMisticaJs.LABEL_SCALE_DESKTOP : 1, ee = {
+    }), g), k = P || f === "focused" || f === "filled", V = k ? U ? _textFieldComponentsCssMisticaJs.LABEL_SCALE_MOBILE : _textFieldComponentsCssMisticaJs.LABEL_SCALE_DESKTOP : 1, ee = {
         left: e ? 48 : _textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION,
         width: `calc(((100% - ${_textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION + (e ? 48 : _textFieldComponentsCssMisticaJs.LABEL_LEFT_POSITION)}px)) / ${V})`,
         paddingRight: a && !k ? 36 : 0
@@ -221,7 +221,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
             m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: (0, _classnames.default)(_textFieldBaseCssMisticaJs.prefix, E ? _textFieldBaseCssMisticaJs.prefixWithLabel : _textFieldBaseCssMisticaJs.prefixWithoutLabel),
                 style: {
-                    opacity: h === "default" ? 0 : 1,
+                    opacity: f === "default" ? 0 : 1,
                     alignSelf: Y
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
@@ -239,7 +239,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     as: "div",
                     regular: !0,
-                    children: /*#__PURE__*/ _react.createElement(f || v, _objectSpread(_objectSpreadProps(_objectSpread({}, $, b), {
+                    children: /*#__PURE__*/ _react.createElement(h || v, _objectSpread(_objectSpreadProps(_objectSpread({}, $, b), {
                         id: F,
                         style: _objectSpreadProps(_objectSpread({}, b.style), {
                             fontFamily: te
@@ -255,7 +255,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                         },
                         onChange: (l)=>{
                             var B;
-                            S === void 0 || l.target.value.length <= S ? (N(l.target.value.length), (B = b.onChange) == null || B.call(b, l)) : (l.stopPropagation(), l.preventDefault());
+                            S === void 0 || l.target.value.length <= S ? (N(l.target.value.length), l.target.value.length > 0 && f !== "focused" && d("filled"), (B = b.onChange) == null || B.call(b, l)) : (l.stopPropagation(), l.preventDefault());
                         },
                         defaultValue: o,
                         value: t
@@ -268,7 +268,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                 style: ee,
                 error: c,
                 forId: F,
-                inputState: h,
+                inputState: f,
                 shrinkLabel: P,
                 optional: !r.required,
                 children: n
@@ -285,19 +285,19 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
         "getSuggestions",
         "id"
     ]);
-    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: p  } = (0, _hooksJs.useTheme)(), f = (0, _hooksJs.useAriaId)(A), m = (0, _hooksJs.useAriaId)();
+    const [y, o] = _react.useState([]), t = _react.useRef(null), { platformOverrides: u , texts: p  } = (0, _hooksJs.useTheme)(), h = (0, _hooksJs.useAriaId)(A), m = (0, _hooksJs.useAriaId)();
     if (c && (n.value === void 0 || n.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
     return c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Suspense, {
         fallback: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, n), {
             label: (0, _platformJs.isRunningAcceptanceTest)(u) ? "" : n.label,
             autoComplete: "off",
             ref: g,
-            id: f
+            id: h
         })),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Ne, {
             id: m,
             inputProps: _objectSpreadProps(_objectSpread({}, n), {
-                id: f,
+                id: h,
                 autoComplete: "off",
                 onChange: (e, param)=>{
                     let { newValue: a  } = param;
@@ -342,7 +342,7 @@ const I = /*#__PURE__*/ _react.forwardRef((_param, Q)=>{
                 }))
         })
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, n), {
-        id: f,
+        id: h,
         ref: g
     }));
 });

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 };