@telefonica/mistica 16.18.1 → 16.19.0

package/dist-es/date-time-field.js

@@ -80,19 +80,19 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as r } from "react/jsx-runtime";
 import * as c from "react";
-import { useFieldProps as z } from "./form-context.js";
-import { TextFieldBaseAutosuggest as b } from "./text-field-base.js";
-import { isInputTypeSupported as w } from "./utils/dom.js";
-import { isServerSide as A } from "./utils/environment.js";
+import { useFieldProps as b } from "./form-context.js";
+import { TextFieldBaseAutosuggest as w } from "./text-field-base.js";
+import { isInputTypeSupported as A } from "./utils/dom.js";
+import { isServerSide as E } from "./utils/environment.js";
 import { getLocalDateTimeString as i } from "./utils/time.js";
-import E from "./generated/mistica-icons/icon-calendar-regular.js";
-import { isFirefox as N } from "./utils/platform.js";
-import { useTheme as V } from "./hooks.js";
-import { iconContainer as j } from "./date-field.css-mistica.js";
-import { iconSize as B } from "./icon-button.css-mistica.js";
-import { formDateOutOfRangeError as C } from "./text-tokens.js";
-const L = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), M = (_param)=>{
-    var { disabled: F, error: g, helperText: R, name: S, label: I, optional: f, validate: a, onChange: O, onChangeValue: m, onBlur: h, value: k, defaultValue: y, min: o, /**
+import N from "./generated/mistica-icons/icon-calendar-regular.js";
+import { isFirefox as V } from "./utils/platform.js";
+import { useTheme as j } from "./hooks.js";
+import { iconContainer as B } from "./date-field.css-mistica.js";
+import { iconSize as C } from "./icon-button.css-mistica.js";
+import { formDateOutOfRangeError as L } from "./text-tokens.js";
+const M = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), $ = (_param)=>{
+    var { disabled: F, error: g, helperText: R, name: S, label: I, optional: f, validate: a, validateOnBlurInsideForm: O, onChange: h, onChangeValue: m, onBlur: k, value: y, defaultValue: v, min: o, /**
    * When typing a datetime value into the input field (inside a test for example), some browsers like Chrome
    * force the year to have exactly 6 digits. In order to prevent this, in case max value was not provided we
    * set it so that it only accepts datetime values with years having up to 4 digits.
@@ -104,6 +104,7 @@ const L = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "label",
         "optional",
         "validate",
+        "validateOnBlurInsideForm",
         "onChange",
         "onChangeValue",
         "onBlur",
@@ -113,34 +114,35 @@ const L = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "max",
         "dataAttributes"
     ]);
-    const u = c.useMemo(()=>N() ? !1 : w("datetime-local"), []), p = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v, t: x } = V(), n = (e)=>{
+    const u = c.useMemo(()=>V() ? !1 : A("datetime-local"), []), p = (e)=>u ? e : e.replace(/\s/, "T"), { texts: x, t: z } = j(), n = (e)=>{
         const t = p(e);
         return !(o && t && t < i(o) || s && t && t > i(s));
-    }, D = z({
+    }, D = b({
         name: S,
         label: I,
-        value: k,
-        defaultValue: y,
+        value: y,
+        defaultValue: v,
         processValue: p,
         helperText: R,
         optional: f,
         error: g,
         disabled: F,
-        onBlur: h,
-        validate: (e, t)=>n(e) ? a == null ? void 0 : a(e, t) : v.formDateOutOfRangeError || x(C),
-        onChange: O,
+        onBlur: k,
+        validate: (e, t)=>n(e) ? a == null ? void 0 : a(e, t) : x.formDateOutOfRangeError || z(L),
+        validateOnBlurInsideForm: O,
+        onChange: h,
         onChangeValue: (e, t)=>{
             n(e) && (m == null || m(e, t));
         }
-    }), T = /* @__PURE__ */ r(b, _object_spread_props(_object_spread({}, l, D), {
+    }), T = /* @__PURE__ */ r(w, _object_spread_props(_object_spread({}, l, D), {
         min: o ? i(o) : void 0,
         max: s ? i(s) : void 0,
         type: "datetime-local",
         endIconOverlay: /* @__PURE__ */ r("div", {
-            className: j,
+            className: B,
             "data-testid": "endIcon",
-            children: /* @__PURE__ */ r(E, {
-                size: B.default
+            children: /* @__PURE__ */ r(N, {
+                size: C.default
             })
         }),
         dataAttributes: _object_spread({
@@ -148,9 +150,9 @@ const L = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
             testid: "DateTimeField"
         }, d)
     }));
-    return u || A() ? T : /* @__PURE__ */ r(c.Suspense, {
+    return u || E() ? T : /* @__PURE__ */ r(c.Suspense, {
         fallback: T,
-        children: /* @__PURE__ */ r(L, _object_spread_props(_object_spread({}, l, D), {
+        children: /* @__PURE__ */ r(M, _object_spread_props(_object_spread({}, l, D), {
             optional: f,
             withTime: !0,
             isValidDate: (e)=>n(i(e.toDate())),
@@ -160,5 +162,5 @@ const L = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker
             }, d)
         }))
     });
-}, ee = M;
-export { ee as default };
+}, te = $;
+export { te as default };

package/dist-es/date-time-picker.css-mistica.js

@@ -1,3 +1,3 @@
 import "./date-time-picker.css.ts.vanilla.css-mistica.js";
-var e = "v16_18_1_c0yqjy0";
+var e = "v16_19_c0yqjy0";
 export { e as reactDatePicker };

package/dist-es/decimal-field.js

@@ -80,50 +80,50 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as S } from "react/jsx-runtime";
 import * as D from "react";
-import { useFieldProps as C } from "./form-context.js";
-import { useTheme as F } from "./hooks.js";
-import { TextFieldBaseAutosuggest as V } from "./text-field-base.js";
-import { createChangeEvent as x } from "./utils/dom.js";
-import { useRifm as P } from "rifm";
-import { combineRefs as R } from "./utils/common.js";
-const b = (n)=>{
+import { useFieldProps as F } from "./form-context.js";
+import { useTheme as V } from "./hooks.js";
+import { TextFieldBaseAutosuggest as x } from "./text-field-base.js";
+import { createChangeEvent as P } from "./utils/dom.js";
+import { useRifm as R } from "rifm";
+import { combineRefs as b } from "./utils/common.js";
+const v = (o)=>{
     try {
-        return 1.1.toLocaleString(n.replace("_", "-"))[1];
+        return 1.1.toLocaleString(o.replace("_", "-"))[1];
     } catch (e) {
         return ".";
     }
-}, v = (n, t)=>{
-    const i = String(n !== null && n !== void 0 ? n : "").replace(/[^.,\d]/g, ""), e = /[.,]/.exec(i), r = i.split(/[.,]/);
+}, j = (o, t)=>{
+    const i = String(o !== null && o !== void 0 ? o : "").replace(/[^.,\d]/g, ""), e = /[.,]/.exec(i), r = i.split(/[.,]/);
     return r.length === 0 ? "" : e && t > 0 ? r.shift() + e[0] + r.join("").slice(0, t) : r[0];
-}, j = (_param)=>{
-    var { inputRef: n, value: t, defaultValue: i, onChange: e, maxDecimals: r } = _param, l = _object_without_properties(_param, [
+}, A = (_param)=>{
+    var { inputRef: o, value: t, defaultValue: i, onChange: e, maxDecimals: r } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
         "maxDecimals"
     ]);
-    const { i18n: a } = F(), u = b(a.locale), m = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, u), [p, f] = D.useState(i !== null && i !== void 0 ? i : ""), c = D.useRef(null), s = typeof t < "u", d = s ? t : p, g = D.useCallback((o)=>{
-        s || f(o), c.current && (e == null || e(x(c.current, o)));
+    const { i18n: u } = V(), m = v(u.locale), p = (n)=>String(n !== null && n !== void 0 ? n : "").replace(/[.,]/g, m), [f, d] = D.useState(i !== null && i !== void 0 ? i : ""), c = D.useRef(null), s = typeof t < "u", g = s ? t : f, h = D.useCallback((n)=>{
+        s || d(n), c.current && (e == null || e(P(c.current, n)));
     }, [
         s,
         e
-    ]), h = P({
-        format: (o)=>v(o, r),
-        replace: m,
-        value: d,
-        onChange: g,
+    ]), l = R({
+        format: (n)=>j(n, r),
+        replace: p,
+        value: g,
+        onChange: h,
         accept: /[\d.,]+/g
     });
-    return /* @__PURE__ */ S("input", _object_spread_props(_object_spread({}, l), {
+    return /* @__PURE__ */ S("input", _object_spread_props(_object_spread({}, a), {
         type: "text",
         inputMode: "decimal",
-        value: h.value,
-        onChange: h.onChange,
-        ref: R(n, c)
+        value: l.value,
+        onChange: l.onChange,
+        ref: b(o, c)
     }));
-}, A = (_param)=>{
-    var { disabled: n, error: t, helperText: i, name: e, label: r, optional: l, validate: a, onChange: u, onChangeValue: m, onBlur: p, value: f, defaultValue: c, maxDecimals: s = 1 / 0, dataAttributes: d } = _param, g = _object_without_properties(_param, [
+}, B = (_param)=>{
+    var { disabled: o, error: t, helperText: i, name: e, label: r, optional: a, validate: u, validateOnBlurInsideForm: m, onChange: p, onChangeValue: f, onBlur: d, value: c, defaultValue: s, maxDecimals: g = 1 / 0, dataAttributes: h } = _param, l = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -131,6 +131,7 @@ const b = (n)=>{
         "label",
         "optional",
         "validate",
+        "validateOnBlurInsideForm",
         "onChange",
         "onChangeValue",
         "onBlur",
@@ -139,30 +140,31 @@ const b = (n)=>{
         "maxDecimals",
         "dataAttributes"
     ]);
-    const o = C({
+    const y = F({
         name: e,
         label: r,
-        value: f,
-        defaultValue: c,
-        processValue: (y)=>y.trim(),
+        value: c,
+        defaultValue: s,
+        processValue: (C)=>C.trim(),
         helperText: i,
-        optional: l,
+        optional: a,
         error: t,
-        disabled: n,
-        onBlur: p,
-        validate: a,
-        onChange: u,
-        onChangeValue: m
+        disabled: o,
+        onBlur: d,
+        validate: u,
+        validateOnBlurInsideForm: m,
+        onChange: p,
+        onChangeValue: f
     });
-    return /* @__PURE__ */ S(V, _object_spread_props(_object_spread({}, g, o), {
-        inputComponent: j,
+    return /* @__PURE__ */ S(x, _object_spread_props(_object_spread({}, l, y), {
+        inputComponent: A,
         inputProps: {
-            maxDecimals: s
+            maxDecimals: g
         },
         dataAttributes: _object_spread({
             "component-name": "DecimalField",
             testid: "DecimalField"
-        }, d)
+        }, h)
     }));
-}, M = A;
-export { j as DecimalInput, M as default };
+}, _ = B;
+export { A as DecimalInput, _ as default };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./dialog.css.ts.vanilla.css-mistica.js";
-var n = 200, y = "v16_18_1_3dl29lb", f = "v16_18_1_3dl29l6", l = "v16_18_1_3dl29ll v16_18_1_1y2v1nf8y", a = "v16_18_1_3dl29lj v16_18_1_1y2v1nfj6 v16_18_1_1y2v1nfkk", i = "v16_18_1_3dl29lm", r = "v16_18_1_3dl29l8 v16_18_1_1y2v1nf8s v16_18_1_1y2v1nfa1 v16_18_1_1y2v1nfba v16_18_1_1y2v1nfcj v16_18_1_1y2v1nfif v16_18_1_1y2v1nflr v16_18_1_1y2v1nfml", d = "v16_18_1_3dl29la v16_18_1_1y2v1nf47 v16_18_1_1y2v1nflb", o = "v16_18_1_3dl29l5 v16_18_1_1y2v1nfig v16_18_1_1y2v1nfik v16_18_1_1y2v1nfit v16_18_1_1y2v1nfiz v16_18_1_1y2v1nfiq v16_18_1_1y2v1nflr v16_18_1_1y2v1nfml v16_18_1_1y2v1nfn0 v16_18_1_1y2v1nfm6 v16_18_1_1y2v1nf4j", t = {
-    dialog: "v16_18_1_3dl29ld v16_18_1_1y2v1nfik v16_18_1_1y2v1nfiq v16_18_1_1y2v1nfiw v16_18_1_1y2v1nfbg v16_18_1_1y2v1nfcp v16_18_1_1y2v1nf94 v16_18_1_1y2v1nfa7",
-    default: "v16_18_1_3dl29ld v16_18_1_1y2v1nfik v16_18_1_1y2v1nfiq v16_18_1_1y2v1nfiw v16_18_1_1y2v1nf8y v16_18_1_1y2v1nfa7 v16_18_1_1y2v1nfbg v16_18_1_1y2v1nfcp"
-}, e = "v16_18_1_1y2v1nfie";
+var n = 200, y = "v16_19_3dl29lb", f = "v16_19_3dl29l6", l = "v16_19_3dl29ll v16_19_1y2v1nf8y", a = "v16_19_3dl29lj v16_19_1y2v1nfj6 v16_19_1y2v1nfkk", i = "v16_19_3dl29lm", r = "v16_19_3dl29l8 v16_19_1y2v1nf8s v16_19_1y2v1nfa1 v16_19_1y2v1nfba v16_19_1y2v1nfcj v16_19_1y2v1nfif v16_19_1y2v1nflr v16_19_1y2v1nfml", d = "v16_19_3dl29la v16_19_1y2v1nf47 v16_19_1y2v1nflb", o = "v16_19_3dl29l5 v16_19_1y2v1nfig v16_19_1y2v1nfik v16_19_1y2v1nfit v16_19_1y2v1nfiz v16_19_1y2v1nfiq v16_19_1y2v1nflr v16_19_1y2v1nfml v16_19_1y2v1nfn0 v16_19_1y2v1nfm6 v16_19_1y2v1nf4j", t = {
+    dialog: "v16_19_3dl29ld v16_19_1y2v1nfik v16_19_1y2v1nfiq v16_19_1y2v1nfiw v16_19_1y2v1nfbg v16_19_1y2v1nfcp v16_19_1y2v1nf94 v16_19_1y2v1nfa7",
+    default: "v16_19_3dl29ld v16_19_1y2v1nfik v16_19_1y2v1nfiq v16_19_1y2v1nfiw v16_19_1y2v1nf8y v16_19_1y2v1nfa7 v16_19_1y2v1nfbg v16_19_1y2v1nfcp"
+}, e = "v16_19_1y2v1nfie";
 export { n as ANIMATION_DURATION_MS, y as closedModalContent, f as closedOpactityLayer, l as dialogActions, a as dialogContent, i as iconContainer, r as modalCloseButtonContainer, d as modalContent, o as modalOpacityLayer, t as variants, e as wrapper };

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

@@ -1,6 +1,6 @@
 import "./divider.css.ts.vanilla.css-mistica.js";
 var t = {
-    default: "v16_18_1_o0dvt10",
-    inverse: "v16_18_1_o0dvt11"
+    default: "v16_19_o0dvt10",
+    inverse: "v16_19_o0dvt11"
 };
 export { t as variants };

package/dist-es/double-field.css-mistica.js

@@ -4,7 +4,7 @@ import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
 import "./double-field.css.ts.vanilla.css-mistica.js";
 var f = {
-    default: "v16_18_1_skrulh1 v16_18_1_1y2v1nfik v16_18_1_1y2v1nfip v16_18_1_1y2v1nfj7",
-    fullWidth: "v16_18_1_skrulh2 v16_18_1_1y2v1nfik v16_18_1_1y2v1nfip v16_18_1_1y2v1nfj7"
+    default: "v16_19_skrulh1 v16_19_1y2v1nfik v16_19_1y2v1nfip v16_19_1y2v1nfj7",
+    fullWidth: "v16_19_skrulh2 v16_19_1y2v1nfik v16_19_1y2v1nfip v16_19_1y2v1nfj7"
 };
 export { f as variants };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./drawer.css.ts.vanilla.css-mistica.js";
-var n = 350, y = "v16_18_1_1y2v1nfif v16_18_1_1y2v1nflu v16_18_1_1y2v1nfmo", f = "v16_18_1_c4ngww9", r = "v16_18_1_c4ngww1 v16_18_1_1y2v1nfig v16_18_1_1y2v1nfik v16_18_1_1y2v1nf47 v16_18_1_1y2v1nflr v16_18_1_1y2v1nfml v16_18_1_1y2v1nfn0 v16_18_1_1y2v1nfll", a = "v16_18_1_1y2v1nf94 v16_18_1_1y2v1nfik v16_18_1_1y2v1nfiq v16_18_1_1y2v1nfj5", l = "v16_18_1_c4ngww8", o = "v16_18_1_c4ngwwb v16_18_1_1y2v1nfig v16_18_1_1y2v1nflr v16_18_1_1y2v1nfm6 v16_18_1_1y2v1nfml v16_18_1_1y2v1nfn0 v16_18_1_1y2v1nf4j", e = "v16_18_1_c4ngwwc", w = "v16_18_1_c4ngwwd", c = "v16_18_1_1y2v1nfj5 v16_18_1_1y2v1nflq", i = "v16_18_1_c4ngww5 v16_18_1_1y2v1nfj2 v16_18_1_1y2v1nfj4";
+var n = 350, y = "v16_19_1y2v1nfif v16_19_1y2v1nflu v16_19_1y2v1nfmo", f = "v16_19_c4ngww9", r = "v16_19_c4ngww1 v16_19_1y2v1nfig v16_19_1y2v1nfik v16_19_1y2v1nf47 v16_19_1y2v1nflr v16_19_1y2v1nfml v16_19_1y2v1nfn0 v16_19_1y2v1nfll", a = "v16_19_1y2v1nf94 v16_19_1y2v1nfik v16_19_1y2v1nfiq v16_19_1y2v1nfj5", l = "v16_19_c4ngww8", o = "v16_19_c4ngwwb v16_19_1y2v1nfig v16_19_1y2v1nflr v16_19_1y2v1nfm6 v16_19_1y2v1nfml v16_19_1y2v1nfn0 v16_19_1y2v1nf4j", e = "v16_19_c4ngwwc", w = "v16_19_c4ngwwd", c = "v16_19_1y2v1nfj5 v16_19_1y2v1nflq", i = "v16_19_c4ngww5 v16_19_1y2v1nfj2 v16_19_1y2v1nfj4";
 export { n as ANIMATION_DURATION_MS, y as closeButtonContainer, f as closed, r as container, a as drawer, l as open, o as overlay, e as overlayClosed, w as overlayOpen, c as scrollableSection, i as titleContainer };

package/dist-es/email-field.js

@@ -78,13 +78,13 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as M } from "react/jsx-runtime";
-import { useFieldProps as T } from "./form-context.js";
-import { useTheme as V } from "./hooks.js";
-import { TextFieldBaseAutosuggest as $ } from "./text-field-base.js";
-import { formEmailError as b } from "./text-tokens.js";
-const h = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, j = (_param)=>{
-    var { disabled: r, error: s, helperText: o, name: i, label: m, optional: l, validate: e, onChange: a, onChangeValue: n, onBlur: u, value: c, autoComplete: d = "email", defaultValue: f, dataAttributes: E } = _param, p = _object_without_properties(_param, [
+import { jsx as T } from "react/jsx-runtime";
+import { useFieldProps as V } from "./form-context.js";
+import { useTheme as $ } from "./hooks.js";
+import { TextFieldBaseAutosuggest as b } from "./text-field-base.js";
+import { formEmailError as h } from "./text-tokens.js";
+const j = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, y = (_param)=>{
+    var { disabled: r, error: s, helperText: o, name: i, label: m, optional: l, validate: e, validateOnBlurInsideForm: a, onChange: n, onChangeValue: u, onBlur: c, value: d, autoComplete: f = "email", defaultValue: E, dataAttributes: p } = _param, F = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -92,6 +92,7 @@ const h = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, j = (_param)=>{
         "label",
         "optional",
         "validate",
+        "validateOnBlurInsideForm",
         "onChange",
         "onChangeValue",
         "onBlur",
@@ -100,29 +101,30 @@ const h = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, j = (_param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: F, t: x } = V(), A = T({
+    const { texts: x, t: A } = $(), g = V({
         name: i,
         label: m,
-        value: c,
-        defaultValue: f,
+        value: d,
+        defaultValue: E,
         processValue: (t)=>t.trim(),
         helperText: o,
         optional: l,
         error: s,
         disabled: r,
-        onBlur: u,
-        validate: (t, g)=>h.test(t !== null && t !== void 0 ? t : "") ? e == null ? void 0 : e(t, g) : F.formEmailError || x(b),
-        onChange: a,
-        onChangeValue: n
+        onBlur: c,
+        validate: (t, M)=>j.test(t !== null && t !== void 0 ? t : "") ? e == null ? void 0 : e(t, M) : x.formEmailError || A(h),
+        validateOnBlurInsideForm: a,
+        onChange: n,
+        onChangeValue: u
     });
-    return /* @__PURE__ */ M($, _object_spread_props(_object_spread({}, p, A), {
+    return /* @__PURE__ */ T(b, _object_spread_props(_object_spread({}, F, g), {
         type: "email",
         inputMode: "email",
-        autoComplete: d,
+        autoComplete: f,
         dataAttributes: _object_spread({
             "component-name": "EmailField",
             testid: "EmailField"
-        }, E)
+        }, p)
     }));
-}, q = j;
-export { q as default };
+}, w = y;
+export { w as default };

package/dist-es/empty-state-card.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./empty-state-card.css.ts.vanilla.css-mistica.js";
-var r = "v16_18_1_1azor6p4 v16_18_1_1y2v1nfjj v16_18_1_1y2v1nfjz", a = "v16_18_1_1azor6p0", n = "v16_18_1_1azor6p2 v16_18_1_1y2v1nfim v16_18_1_1y2v1nfk1";
+var r = "v16_19_1azor6p4 v16_19_1y2v1nfjj v16_19_1y2v1nfjz", a = "v16_19_1azor6p0", n = "v16_19_1azor6p2 v16_19_1y2v1nfim v16_19_1y2v1nfk1";
 export { r as assetContainer, a as container, n as image };

package/dist-es/empty-state.css-mistica.js

@@ -1,9 +1,9 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./empty-state.css.ts.vanilla.css-mistica.js";
-var a = "v16_18_1_13fzrua9 v16_18_1_1y2v1nfjl v16_18_1_1y2v1nfk1", v = "v16_18_1_1y2v1nfl1", e = "v16_18_1_13fzrua2 v16_18_1_1y2v1nfik v16_18_1_1y2v1nf8c", n = {
-    default: "v16_18_1_13fzrua3",
-    largeImage: "v16_18_1_13fzrua4"
-}, f = "v16_18_1_13fzruad", o = "v16_18_1_13fzrua7 v16_18_1_1y2v1nfjo", t = "v16_18_1_13fzrua5", u = "v16_18_1_13fzruab v16_18_1_1y2v1nfim", i = {
-    backgroundColor: "var(--v16_18_1_13fzrua0)"
+var v = "v16_19_13fzrua9 v16_19_1y2v1nfjl v16_19_1y2v1nfk1", _ = "v16_19_1y2v1nfl1", e = "v16_19_13fzrua2 v16_19_1y2v1nfik v16_19_1y2v1nf8c", n = {
+    default: "v16_19_13fzrua3",
+    largeImage: "v16_19_13fzrua4"
+}, f = "v16_19_13fzruad", o = "v16_19_13fzrua7 v16_19_1y2v1nfjo", t = "v16_19_13fzrua5", u = "v16_19_13fzruab v16_19_1y2v1nfim", i = {
+    backgroundColor: "var(--v16_19_13fzrua0)"
 };
-export { a as assetContainer, v as border, e as container, n as contentVariants, f as inverseBorder, o as largeImage, t as largeImageContainer, u as smallImage, i as vars };
+export { v as assetContainer, _ as border, e as container, n as contentVariants, f as inverseBorder, o as largeImage, t as largeImageContainer, u as smallImage, i as vars };

package/dist-es/fade-in.css-mistica.js

@@ -1,3 +1,3 @@
 import "./fade-in.css.ts.vanilla.css-mistica.js";
-var p = "v16_18_1_kq227n1";
+var p = "v16_19_kq227n1";
 export { p as wrapper };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./feedback.css.ts.vanilla.css-mistica.js";
-var v = "v16_18_1_1y2v1nfjj v16_18_1_1y2v1nfjz", e = "v16_18_1_gx6h6af", r = "v16_18_1_gx6h6a4 v16_18_1_1y2v1nfik v16_18_1_1y2v1nfjo v16_18_1_1y2v1nfj7 v16_18_1_1y2v1nfiq", n = "v16_18_1_gx6h6a0", t = "v16_18_1_gx6h6a1", x = "v16_18_1_gx6h6a2", g = "v16_18_1_gx6h6ae", o = "v16_18_1_gx6h6ab v16_18_1_gx6h6aa", h = "v16_18_1_gx6h6ac v16_18_1_gx6h6aa", i = "v16_18_1_gx6h6ad v16_18_1_gx6h6aa", p = "v16_18_1_gx6h6a5", d = "v16_18_1_gx6h6a6";
+var v = "v16_19_1y2v1nfjj v16_19_1y2v1nfjz", e = "v16_19_gx6h6af", r = "v16_19_gx6h6a4 v16_19_1y2v1nfik v16_19_1y2v1nfjo v16_19_1y2v1nfj7 v16_19_1y2v1nfiq", n = "v16_19_gx6h6a0", t = "v16_19_gx6h6a1", x = "v16_19_gx6h6a2", g = "v16_19_gx6h6ae", o = "v16_19_gx6h6ab v16_19_gx6h6aa", h = "v16_19_gx6h6ac v16_19_gx6h6aa", i = "v16_19_gx6h6ad v16_19_gx6h6aa", p = "v16_19_gx6h6a5", d = "v16_19_gx6h6a6";
 export { v as assetContainer, e as backgroundBrand, r as container, n as desktopContainer, t as desktopContent, x as desktopImage, g as feedbackData, o as feedbackTextAppearFast, h as feedbackTextAppearMedium, i as feedbackTextAppearSlow, p as innerContainer, d as innerContainerWithButtons };

package/dist-es/fixed-footer-layout.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./fixed-footer-layout.css.ts.vanilla.css-mistica.js";
-var r = "v16_18_1_p5j8j5d v16_18_1_1y2v1nfm6 v16_18_1_1y2v1nfml v16_18_1_1y2v1nfif", n = "v16_18_1_p5j8j57", a = "v16_18_1_p5j8j55", f = "v16_18_1_p5j8j5b v16_18_1_1y2v1nflr v16_18_1_1y2v1nfm6 v16_18_1_1y2v1nfml v16_18_1_1y2v1nfn0 v16_18_1_1y2v1nfig", j = "v16_18_1_p5j8j54", o = "v16_18_1_p5j8j53 v16_18_1_1y2v1nfj7", y = "v16_18_1_p5j8j59 v16_18_1_1y2v1nflr v16_18_1_1y2v1nfm6 v16_18_1_1y2v1nfml v16_18_1_1y2v1nfn0 v16_18_1_1y2v1nfig", e = {
-    footerHeight: "var(--v16_18_1_p5j8j50)",
-    backgroundColor: "var(--v16_18_1_p5j8j51)"
-}, t = "v16_18_1_1y2v1nfij";
+var r = "v16_19_p5j8j5d v16_19_1y2v1nfm6 v16_19_1y2v1nfml v16_19_1y2v1nfif", n = "v16_19_p5j8j57", a = "v16_19_p5j8j55", f = "v16_19_p5j8j5b v16_19_1y2v1nflr v16_19_1y2v1nfm6 v16_19_1y2v1nfml v16_19_1y2v1nfn0 v16_19_1y2v1nfig", j = "v16_19_p5j8j54", o = "v16_19_p5j8j53 v16_19_1y2v1nfj7", y = "v16_19_p5j8j59 v16_19_1y2v1nflr v16_19_1y2v1nfm6 v16_19_1y2v1nfml v16_19_1y2v1nfn0 v16_19_1y2v1nfig", e = {
+    footerHeight: "var(--v16_19_p5j8j50)",
+    backgroundColor: "var(--v16_19_p5j8j51)"
+}, t = "v16_19_1y2v1nfij";
 export { r as absoluteBackgroundLayer, n as container, a as elevated, f as fixedBackgroundLayer, j as fixedFooter, o as footer, y as portal, e as vars, t as withoutFooter };

package/dist-es/fixed-footer-layout.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs as p, Fragment as H, jsx as a } from "react/jsx-runtime";
-import * as v from "react";
+import { jsxs as f, Fragment as H, jsx as s } from "react/jsx-runtime";
+import * as g from "react";
 import z from "classnames";
 import { debounce as O } from "./utils/helpers.js";
 import { isRunningAcceptanceTest as P } from "./utils/platform.js";
@@ -8,7 +8,7 @@ import { useBoundingRect as _, useScreenSize as j, useTheme as M, useElementDime
 import { getScrollableParentElement as X, addPassiveEventListener as E, removePassiveEventListener as b, hasScroll as q, getScrollDistanceToBottom as J } from "./utils/dom.js";
 import { Portal as K } from "./portal.js";
 import { vars as T } from "./skins/skin-contract.css-mistica.js";
-import { container as Q, footer as U, withoutFooter as V, elevated as Y, fixedFooter as Z, portal as C, fixedBackgroundLayer as ee, absoluteBackgroundLayer as S, vars as te } from "./fixed-footer-layout.css-mistica.js";
+import { container as Q, footer as U, withoutFooter as Y, elevated as Z, fixedFooter as V, portal as C, fixedBackgroundLayer as ee, absoluteBackgroundLayer as S, vars as te } from "./fixed-footer-layout.css-mistica.js";
 import { applyCssVars as oe, safeAreaInsetBottom as re } from "./utils/css.js";
 import { useFixedToTopHeight as se } from "./fixed-to-top.js";
 import { useOverScrollColor as ae } from "./overscroll-color-context.js";
@@ -18,100 +18,106 @@ const ie = (e)=>e === document.documentElement ? window : e, ne = (e)=>{
         cancel: ()=>clearTimeout(l)
     };
 }, ce = 200, le = (param)=>{
-    let { isFooterVisible: e = !0, footer: l, footerHeight: F = "auto", footerBgColor: i = T.colors.background, containerBgColor: k = T.colors.background, children: L, onChangeFooterHeight: n } = param;
-    const [$, g] = v.useState(!1), d = v.useRef(null), { height: m } = _(d) || {
+    let { isFooterVisible: e = !0, footer: l, footerHeight: k = "auto", footerBgColor: i = T.colors.background, containerBgColor: F = T.colors.background, children: L, onChangeFooterHeight: n } = param;
+    const [$, h] = g.useState(!1), d = g.useRef(null), { height: m } = _(d) || {
         height: 0
-    }, { isTabletOrSmaller: u } = j(), { platformOverrides: h } = M(), { height: r, ref: w } = y({
+    }, { isTabletOrSmaller: u } = j(), { platformOverrides: v } = M(), { height: o, ref: w } = y({
         includeMargins: !0
-    }), { visualHeight: D } = W(), s = se(), t = D - s - r > ce, { topColor: I = i } = ae(), { height: x, ref: N } = y();
+    }), { visualHeight: D } = W(), a = se(), t = D - a - o > ce, { topColor: I = i } = ae(), { height: x, ref: N } = y();
     G(()=>{
-        n == null || n(r);
+        n == null || n(o);
     }, [
         n,
-        r
-    ]), v.useEffect(()=>{
-        if (!u || P(h) || !t) {
-            g(!1);
+        o
+    ]), g.useEffect(()=>{
+        if (!u || P(v) || !t) {
+            h(!1);
             return;
         }
-        const f = X(d.current), A = ()=>q(f) && J(f) > s + 1, o = O(()=>{
-            g(A());
+        const p = X(d.current), A = ()=>q(p) && J(p) > a + 1, r = O(()=>{
+            h(A());
         }, 50, {
             leading: !0,
             maxWait: 100
-        }), B = ne(o), c = ie(f);
-        return E(c, "resize", o), E(c, "scroll", o), ()=>{
-            o.cancel(), b(c, "scroll", o), b(c, "resize", o), B.cancel();
+        }), B = ne(r), c = ie(p);
+        return E(c, "resize", r), E(c, "scroll", r), ()=>{
+            r.cancel(), b(c, "scroll", r), b(c, "resize", r), B.cancel();
         };
     }, [
-        h,
+        v,
         u,
         t,
         // `topDistance` and `contentHeight` dependencies are needed to recalculate the elevation state
-        s,
+        a,
         m
     ]);
-    const R = ()=>/* @__PURE__ */ p(K, {
+    const R = ()=>/* @__PURE__ */ f(K, {
             className: C,
             children: [
-                /* @__PURE__ */ a("div", {
+                /* @__PURE__ */ s("div", {
                     className: ee,
                     style: {
                         background: `linear-gradient(180deg, ${I} 50%, ${i} 50% 100%)`
                     }
                 }),
-                /* @__PURE__ */ a("div", {
+                /* @__PURE__ */ s("div", {
                     ref: N,
                     className: S,
                     style: {
-                        background: k,
+                        background: F,
                         // this color could be a gradient
-                        top: s - 1,
+                        top: a - 1,
                         // -1 because the navigationbar could have a 1px transparent background
-                        bottom: t ? r : "unset",
+                        bottom: t ? o : "unset",
                         height: t ? "unset" : m
                     }
                 }),
-                /* @__PURE__ */ a("div", {
+                /* @__PURE__ */ s("div", {
                     className: S,
                     style: {
                         background: i,
-                        top: x + s - 1,
+                        top: x + a - 1,
                         height: `calc(${m}px - ${x}px)`
                     }
                 })
             ]
         });
-    return /* @__PURE__ */ p(H, {
+    return /* @__PURE__ */ f(H, {
         children: [
-            /* @__PURE__ */ p("div", {
+            /* @__PURE__ */ f("div", {
                 ref: d,
                 className: Q,
                 style: oe({
-                    [te.footerHeight]: t ? `${r}px` : "0px"
+                    [te.footerHeight]: t ? `${o}px` : "0px"
                 }),
                 children: [
                     R(),
                     L
                 ]
             }),
-            /* @__PURE__ */ a("div", {
+            e && t && /**
+    * This style is added to the `html` element to prevent the footer
+    * from covering the focus of elements when there is overflow.
+    */ /* @__PURE__ */ s("style", {
+                children: `html {scroll-padding-bottom: ${o}px}`
+            }),
+            /* @__PURE__ */ s("div", {
                 className: z(U, {
-                    [V]: !e,
-                    [Y]: $,
-                    [Z]: t
+                    [Y]: !e,
+                    [Z]: $,
+                    [V]: t
                 }),
                 style: {
                     background: u ? i : void 0
                 },
                 "data-testid": `fixed-footer${e ? "-visible" : "-hidden"}`,
                 "data-position-fixed": "bottom",
-                children: e && /* @__PURE__ */ a("aside", {
+                children: e && /* @__PURE__ */ s("aside", {
                     ref: w,
                     "data-component-name": "FixedFooter",
                     "data-testid": "FixedFooter",
                     style: {
-                        height: F,
+                        height: k,
                         marginBottom: re
                     },
                     children: l