@telefonica/mistica 14.6.0 → 14.7.0

package/dist/credit-card-number-field.css-mistica.js

@@ -16,7 +16,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./credit-card-number-field.css.ts.vanilla.js");
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5e", f = {
-    default: "yvyo3q4 _1y2v1nf5d yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf5d yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5k", f = {
+    default: "yvyo3q4 _1y2v1nf5j yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf5j yvyo3q6"
 };

package/dist/cvv-field.css-mistica.js

@@ -9,9 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    cvvText: ()=>v,
-    tooltipContainer: ()=>i
+    cvvText: ()=>r,
+    tooltipContainer: ()=>v
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./cvv-field.css.ts.vanilla.js");
-var v = "_10ijton2 _1y2v1nf1o", i = "_1y2v1nf5i _1y2v1nf5x";
+var r = "_10ijton2 _1y2v1nf1r", v = "_1y2v1nf5o _1y2v1nf63";

package/dist/date-time-picker.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>Q
+    get: ()=>Z
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _textFieldBaseJs = require("./text-field-base.js");
@@ -17,6 +17,7 @@ const _domJs = require("./utils/dom.js");
 const _hooksJs = require("./hooks.js");
 const _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 const _dateTimePickerCssMisticaJs = require("./date-time-picker.css-mistica.js");
+const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -143,24 +144,24 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 const g = navigator.language.toLocaleLowerCase().split("-")[0];
 Promise.resolve(/* webpackChunkName: "moment-locale" */ `moment/locale/${g}`).then((p)=>/*#__PURE__*/ _interopRequireWildcard(require(p))).finally(()=>{});
-const Q = (_param)=>{
+const Z = (_param)=>{
     var { withTime: s , mode: l , isValidDate: y , optional: u  } = _param, t = _objectWithoutProperties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    const [m, x] = _react.useState(!1), { texts: b  } = (0, _hooksJs.useTheme)(), n = _react.useRef(null), { height: k , ref: v  } = (0, _hooksJs.useElementDimensions)(), i = (e)=>{
+    const [m, x] = _react.useState(!1), { texts: b  } = (0, _hooksJs.useTheme)(), n = _react.useRef(null), { height: v , ref: k  } = (0, _hooksJs.useElementDimensions)(), i = (e)=>{
         t.disabled || x(e);
     }, w = ()=>{
         var p;
         const { top: e = 0 , bottom: o = 0 , left: a = 0  } = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, P = 260 + o < window.innerHeight;
         return {
             width: _textFieldComponentsCssMisticaJs.DEFAULT_WIDTH,
-            top: P ? o : e - k,
+            top: P ? o : e - v,
             left: a,
             position: "absolute",
-            borderRadius: 8,
+            borderRadius: _skinContractCssMisticaJs.vars.borderRadii.input,
             overflow: "hidden",
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)"
         };
@@ -213,7 +214,7 @@ const Q = (_param)=>{
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    ref: v,
+                    ref: k,
                     style: w(),
                     className: _dateTimePickerCssMisticaJs.reactDatePicker,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_reactDatetime.default, {

package/dist/dialog.css-mistica.js

@@ -14,15 +14,15 @@ _export(exports, {
     dialogActions: ()=>f,
     dialogContent: ()=>l,
     iconContainer: ()=>a,
-    modalCloseButtonContainer: ()=>d,
-    modalContent: ()=>o,
+    modalCloseButtonContainer: ()=>o,
+    modalContent: ()=>d,
     modalOpacityLayer: ()=>r,
     variants: ()=>t,
-    wrapper: ()=>i
+    wrapper: ()=>e
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./dialog.css.ts.vanilla.js");
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6b", l = "_3dl29lj _1y2v1nf64 _1y2v1nf8z", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6a _1y2v1nf6o _1y2v1nf72 _1y2v1nf7g _1y2v1nf5e _1y2v1nf9q _1y2v1nfai", o = "_3dl29la _1y2v1nf2p _1y2v1nf9k", r = "_3dl29l5 _1y2v1nf5f _1y2v1nf5i _1y2v1nf5r _1y2v1nf5x _1y2v1nf5o _1y2v1nf9q _1y2v1nfai _1y2v1nfaw _1y2v1nfa4 _1y2v1nf2t", t = {
-    dialog: "_3dl29ld _1y2v1nf5i _1y2v1nf5o _1y2v1nf5u _1y2v1nf73 _1y2v1nf7h _1y2v1nf6d _1y2v1nf6p",
-    default: "_3dl29ld _1y2v1nf5i _1y2v1nf5o _1y2v1nf5u _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h"
-}, i = "_3dl29l3 _1y2v1nf5d";
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6h", l = "_3dl29lj _1y2v1nf6a _1y2v1nf95", a = "_3dl29lm", o = "_3dl29l8 _1y2v1nf6g _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf5k _1y2v1nfa6 _1y2v1nfay", d = "_3dl29la _1y2v1nf2s _1y2v1nf9v", r = "_3dl29l5 _1y2v1nf5l _1y2v1nf5o _1y2v1nf5x _1y2v1nf63 _1y2v1nf5u _1y2v1nfa6 _1y2v1nfay _1y2v1nfbc _1y2v1nfak _1y2v1nf2y", t = {
+    dialog: "_3dl29ld _1y2v1nf5o _1y2v1nf5u _1y2v1nf60 _1y2v1nf79 _1y2v1nf7n _1y2v1nf6j _1y2v1nf6v",
+    default: "_3dl29ld _1y2v1nf5o _1y2v1nf5u _1y2v1nf60 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf7n"
+}, e = "_3dl29l3 _1y2v1nf5j";

package/dist/dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonLink } from './button';
+import type { ButtonLink } from './button';
 import type { RendersNullableElement } from './utils/types';
 import type { ExclusifyUnion } from './utils/utility-types';
 interface BaseDialogProps {

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "variants", {
     enumerable: true,
-    get: ()=>v
+    get: ()=>r
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-field-components.css.ts.vanilla.js");
 require("./double-field.css.ts.vanilla.js");
-var v = {
-    default: "skrulh1 _1y2v1nf5i _1y2v1nf5n _1y2v1nf7p",
-    fullWidth: "skrulh2 _1y2v1nf5i _1y2v1nf5n _1y2v1nf7p"
+var r = {
+    default: "skrulh1 _1y2v1nf5o _1y2v1nf5t _1y2v1nf7v",
+    fullWidth: "skrulh2 _1y2v1nf5o _1y2v1nf5t _1y2v1nf7v"
 };

package/dist/double-field.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import CreditCardExpirationField from './credit-card-expiration-field';
-import CvvField from './cvv-field';
-import DateField from './date-field';
-import DecimalField from './decimal-field';
-import EmailField from './email-field';
-import IntegerField from './integer-field';
-import PasswordField from './password-field';
-import PhoneNumberField from './phone-number-field';
-import Select from './select';
-import TextField from './text-field';
+import type CreditCardExpirationField from './credit-card-expiration-field';
+import type CvvField from './cvv-field';
+import type DateField from './date-field';
+import type DecimalField from './decimal-field';
+import type EmailField from './email-field';
+import type IntegerField from './integer-field';
+import type PasswordField from './password-field';
+import type PhoneNumberField from './phone-number-field';
+import type Select from './select';
+import type TextField from './text-field';
 import type { RendersElement } from './utils/types';
 type Field = RendersElement<typeof TextField> | RendersElement<typeof Select> | RendersElement<typeof CvvField> | RendersElement<typeof CreditCardExpirationField> | RendersElement<typeof DecimalField> | RendersElement<typeof IntegerField> | RendersElement<typeof DateField> | RendersElement<typeof PhoneNumberField> | RendersElement<typeof PasswordField> | RendersElement<typeof EmailField>;
 type Props = {

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

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>n,
+    container: ()=>a,
     iconContainer: ()=>o,
     image: ()=>v
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state-card.css.ts.vanilla.js");
-var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf80 _1y2v1nf8f", v = "_1azor6p2 _1y2v1nf5k _1y2v1nf8h";
+var a = "_1azor6p0", o = "_1azor6p4 _1y2v1nf86 _1y2v1nf8l", v = "_1azor6p2 _1y2v1nf5q _1y2v1nf8n";

package/dist/empty-state-card.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
+import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
 import type { DataAttributes, RendersNullableElement } from './utils/types';
 interface CommonProps {
     title: string;

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

@@ -20,9 +20,9 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state.css.ts.vanilla.js");
-var n = "_13fzrua2 _1y2v1nf5i _1y2v1nf5c", v = {
+var n = "_13fzrua2 _1y2v1nf5o _1y2v1nf5i", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf82 _1y2v1nf8h", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf85", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5k", t = {
+}, e = "_13fzrua9 _1y2v1nf88 _1y2v1nf8n", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf8b", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5q", t = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/empty-state.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ButtonPrimary, ButtonSecondary, ButtonLink } from './button';
+import { ButtonPrimary } from './button';
+import type { ButtonSecondary, ButtonLink } from './button';
 import type { DataAttributes, RendersNullableElement } from './utils/types';
 interface BaseProps {
     title: string;

package/dist/feedback.css-mistica.js

@@ -11,12 +11,12 @@ function _export(target, all) {
 _export(exports, {
     container: ()=>n,
     desktopContainer: ()=>r,
-    desktopContent: ()=>t,
-    feedbackData: ()=>v,
-    feedbackDataAppear: ()=>p,
+    desktopContent: ()=>v,
+    feedbackData: ()=>t,
+    feedbackDataAppear: ()=>o,
     feedbackDataAppearActive: ()=>f,
-    innerContainer: ()=>i
+    innerContainer: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./feedback.css.ts.vanilla.js");
-var n = "gx6h6a3 _1y2v1nf5i _1y2v1nf85 _1y2v1nf7p", r = "_1y2v1nf9l _1y2v1nf5i _1y2v1nf5u", t = "gx6h6a1", v = "gx6h6a7", p = "gx6h6a5", f = "gx6h6a6", i = "gx6h6a4";
+var n = "gx6h6a3 _1y2v1nf5o _1y2v1nf8b _1y2v1nf7v", r = "_1y2v1nf9w _1y2v1nf5o _1y2v1nf60", v = "gx6h6a1", t = "gx6h6a7", o = "gx6h6a5", f = "gx6h6a6", p = "gx6h6a4";

package/dist/feedback.d.ts

@@ -18,6 +18,7 @@ interface FeedbackScreenProps extends AssetFeedbackProps {
     hapticFeedback?: HapticFeedback;
     icon?: React.ReactNode;
     animateText?: boolean;
+    isInverse?: boolean;
 }
 export declare const FeedbackScreen: React.FC<FeedbackScreenProps>;
 export declare const SuccessFeedbackScreen: React.FC<AssetFeedbackProps>;

package/dist/feedback.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ErrorFeedbackScreen: ()=>Ge,
-    FeedbackScreen: ()=>x,
-    InfoFeedbackScreen: ()=>Me,
-    SuccessFeedback: ()=>Pe,
-    SuccessFeedbackScreen: ()=>Ke
+    ErrorFeedbackScreen: ()=>Ke,
+    FeedbackScreen: ()=>A,
+    InfoFeedbackScreen: ()=>Ge,
+    SuccessFeedback: ()=>Me,
+    SuccessFeedbackScreen: ()=>je
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _hooksJs = require("./hooks.js");
@@ -160,17 +160,17 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
+const R = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), W = (param)=>{
     let { primaryButton: r , secondaryButton: o  } = param;
     return !!r || !!o;
-}, Ie = ()=>{
+}, ve = ()=>{
     const o = `body {background:${(0, _themeVariantContextJs.useIsInverseVariant)() ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background}}`;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("style", {
         children: o
     });
 }, D = (r)=>{
     (0, _webviewBridge.isWebViewBridgeAvailable)() && (0, _webviewBridge.requestVibration)(r).catch(()=>{});
-}, K = (r)=>{
+}, j = (r)=>{
     _react.useEffect(()=>{
         let o;
         return r === "success" && (o = setTimeout(()=>D("success"), 700)), r === "error" && (o = setTimeout(()=>D("error"), 1e3)), ()=>{
@@ -179,7 +179,7 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
     }, [
         r
     ]);
-}, G = ()=>{
+}, K = ()=>{
     const [r, o] = _react.useState(!1);
     return (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
         const t = window.requestAnimationFrame(()=>{
@@ -187,13 +187,13 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
         });
         return ()=>window.cancelAnimationFrame(t);
     }, []), r;
-}, M = (param, c, a)=>{
-    let { icon: r , title: o , description: t , children: n  } = param;
-    const d = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
+}, G = (param, n, i)=>{
+    let { icon: r , title: o , description: t , children: c  } = param;
+    const m = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
         space: 16,
-        children: t.map((u, m)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
+        children: t.map((u, l)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
                 children: u
-            }, m))
+            }, l))
     }) : t;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
@@ -201,24 +201,24 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             r,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
-                className: (0, _classnames.default)(_feedbackCssMisticaJs.feedbackData, c && _feedbackCssMisticaJs.feedbackDataAppear, c && a && _feedbackCssMisticaJs.feedbackDataAppearActive),
+                className: (0, _classnames.default)(_feedbackCssMisticaJs.feedbackData, n && _feedbackCssMisticaJs.feedbackDataAppear, n && i && _feedbackCssMisticaJs.feedbackDataAppearActive),
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         as: "h1",
                         children: o
                     }),
-                    d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                    m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
                         color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                        children: d
+                        children: m
                     }),
-                    n
+                    c
                 ]
             })
         ]
     });
-}, P = (r, o)=>{
-    const t = j(o);
+}, M = (r, o)=>{
+    const t = W(o);
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
         children: [
@@ -226,12 +226,12 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, o))
         ]
     });
-}, U = (param)=>/* @__PURE__ */ {
-    let { isInverse: r , inlineFeedbackBody: o , imageFit: t , imageUrl: n , dataAttributes: c  } = param;
+}, P = (param)=>/* @__PURE__ */ {
+    let { isInverse: r , inlineFeedbackBody: o , imageFit: t , imageUrl: c , dataAttributes: n  } = param;
     return (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
         className: _feedbackCssMisticaJs.desktopContainer,
         isInverse: r,
-        dataAttributes: c,
+        dataAttributes: n,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _feedbackCssMisticaJs.desktopContent,
@@ -240,9 +240,9 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
                     children: o
                 })
             }),
-            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
-                    backgroundImage: `url(${n})`,
+                    backgroundImage: `url(${c})`,
                     backgroundPosition: t === "fit" ? "bottom right" : "center right",
                     backgroundRepeat: "no-repeat",
                     backgroundSize: t === "fit" ? "contain" : "cover",
@@ -252,29 +252,29 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             })
         ]
     });
-}, x = (param)=>{
-    let { title: r , description: o , children: t , primaryButton: n , secondaryButton: c , link: a , hapticFeedback: d , icon: u , animateText: m = !1 , unstable_inlineInDesktop: h , imageUrl: k , imageFit: g , dataAttributes: S  } = param;
-    K(d);
-    const l = (0, _themeVariantContextJs.useIsInverseVariant)(), { platformOverrides: v , isDarkMode: p , skinName: T  } = (0, _hooksJs.useTheme)(), J = (0, _hooksJs.useWindowHeight)(), { isTabletOrSmaller: y  } = (0, _hooksJs.useScreenSize)(), [Q, X] = _react.useState(typeof self < "u"), [C, Y] = _react.useState(0), N = Q ? "100vh" : `${J - C}px`, V = j({
-        primaryButton: n,
-        secondaryButton: c,
-        link: a
-    }), Z = G();
+}, A = (param)=>{
+    let { title: r , description: o , children: t , primaryButton: c , secondaryButton: n , link: i , hapticFeedback: m , icon: u , animateText: l = !1 , isInverse: a = !1 , unstable_inlineInDesktop: h , imageUrl: k , imageFit: g , dataAttributes: x  } = param;
+    j(m);
+    const { platformOverrides: S , isDarkMode: p , skinName: T  } = (0, _hooksJs.useTheme)(), U = (0, _hooksJs.useWindowHeight)(), { isTabletOrSmaller: y  } = (0, _hooksJs.useScreenSize)(), [J, Q] = _react.useState(typeof self < "u"), [C, X] = _react.useState(0), N = J ? "100vh" : `${U - C}px`, V = W({
+        primaryButton: c,
+        secondaryButton: n,
+        link: i
+    }), Y = K();
     (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
-        X(!1);
+        Q(!1);
     }, []);
-    const w = M({
+    const w = G({
         icon: u,
         title: r,
         description: o,
         children: t
-    }, m && W(v), Z), H = P(w, {
-        primaryButton: n,
-        secondaryButton: c,
-        link: a
+    }, l && R(S), Y), H = M(w, {
+        primaryButton: c,
+        secondaryButton: n,
+        link: i
     });
     if (!y && h) return H;
-    const ee = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+    const Z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: _feedbackCssMisticaJs.container,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -283,22 +283,23 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             })
         })
     });
-    return y ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+    return y ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
+        isInverse: a,
         children: [
-            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "relative"
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonFixedFooterLayoutJs.default, {
                     isFooterVisible: V,
-                    button: n,
-                    secondaryButton: c,
-                    link: a,
-                    footerBgColor: l && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
-                    containerBgColor: l && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
-                    onChangeFooterHeight: Y,
-                    children: ee
+                    button: c,
+                    secondaryButton: n,
+                    link: i,
+                    footerBgColor: a && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: a && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    onChangeFooterHeight: X,
+                    children: Z
                 })
             }),
             T === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -309,48 +310,46 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
                     left: 0,
                     right: 0,
                     height: V ? `calc(${N} + 1px)` : `calc(${N})`,
-                    background: l ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background
+                    background: a ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background
                 }
             }),
-            T !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Ie, {})
+            T !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ve, {})
         ]
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingTop: 64,
-            children: U({
-                isInverse: l,
+            children: P({
+                isInverse: a,
                 inlineFeedbackBody: H,
                 imageFit: g,
                 imageUrl: k,
-                dataAttributes: S
+                dataAttributes: x
             })
         })
     });
-}, Ke = (_param)=>{
+}, je = (_param)=>{
     var { dataAttributes: r  } = _param, o = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)(), { skinName: n  } = (0, _hooksJs.useTheme)();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)(), { skinName: c  } = (0, _hooksJs.useTheme)();
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(A, _objectSpreadProps(_objectSpread({}, o), {
         isInverse: !o.unstable_inlineInDesktop || t,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(x, _objectSpreadProps(_objectSpread({}, o), {
-            hapticFeedback: "success",
-            icon: n === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
-            animateText: !0,
-            imageUrl: o.imageUrl,
-            imageFit: o.imageFit,
-            dataAttributes: _objectSpread({
-                "component-name": "SuccessFeedbackScreen"
-            }, r)
-        }))
-    });
-}, Ge = (_param)=>/* @__PURE__ */ {
-    var { children: r , errorReference: o , dataAttributes: t  } = _param, n = _objectWithoutProperties(_param, [
+        hapticFeedback: "success",
+        icon: c === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
+        animateText: !0,
+        imageUrl: o.imageUrl,
+        imageFit: o.imageFit,
+        dataAttributes: _objectSpread({
+            "component-name": "SuccessFeedbackScreen"
+        }, r)
+    }));
+}, Ke = (_param)=>/* @__PURE__ */ {
+    var { children: r , errorReference: o , dataAttributes: t  } = _param, c = _objectWithoutProperties(_param, [
         "children",
         "errorReference",
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsxs)(x, _objectSpreadProps(_objectSpread({}, n), {
+    return (0, _jsxRuntimeJs.jsxs)(A, _objectSpreadProps(_objectSpread({}, c), {
         hapticFeedback: "error",
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconErrorJs.default, {}),
         animateText: !0,
@@ -366,30 +365,30 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             })
         ]
     }));
-}, Me = (_param)=>/* @__PURE__ */ {
+}, Ge = (_param)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, o = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsx)(x, _objectSpread({
+    return (0, _jsxRuntimeJs.jsx)(A, _objectSpread({
         dataAttributes: _objectSpread({
             "component-name": "InfoFeedbackScreen"
         }, r),
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconInfoJs.default, {})
     }, o));
-}, Pe = (param)=>{
-    let { title: r , description: o , children: t , primaryButton: n , secondaryButton: c , link: a , imageUrl: d , imageFit: u , dataAttributes: m  } = param;
-    K("success");
-    const { isTabletOrSmaller: h  } = (0, _hooksJs.useScreenSize)(), { skinName: k , platformOverrides: g  } = (0, _hooksJs.useTheme)(), S = G(), v = M({
-        icon: k === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
+}, Me = (param)=>{
+    let { title: r , description: o , children: t , primaryButton: c , secondaryButton: n , link: i , imageUrl: m , imageFit: u , dataAttributes: l  } = param;
+    j("success");
+    const { isTabletOrSmaller: a  } = (0, _hooksJs.useScreenSize)(), { skinName: h , platformOverrides: k  } = (0, _hooksJs.useTheme)(), g = K(), S = G({
+        icon: h === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
         title: r,
         description: o,
         children: t
-    }, W(g), S), p = P(v, {
-        primaryButton: n,
-        secondaryButton: c,
-        link: a
+    }, R(k), g), p = M(S, {
+        primaryButton: c,
+        secondaryButton: n,
+        link: i
     });
-    return h ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+    return a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
         isInverse: !0,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
@@ -397,20 +396,20 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
                 paddingBottom: 32,
                 dataAttributes: _objectSpread({
                     "component-name": "SuccessFeedback"
-                }, m),
+                }, l),
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                     className: _feedbackCssMisticaJs.innerContainer,
                     children: p
                 })
             })
         ]
-    }) : U({
+    }) : P({
         isInverse: !0,
         inlineFeedbackBody: p,
         imageFit: u,
-        imageUrl: d,
+        imageUrl: m,
         dataAttributes: _objectSpread({
             "component-name": "SuccessFeedback"
-        }, m)
+        }, l)
     });
 };

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

@@ -10,15 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     container: ()=>v,
-    elevated: ()=>a,
-    fixedFooter: ()=>j,
-    footer: ()=>t,
+    elevated: ()=>t,
+    fixedFooter: ()=>a,
+    footer: ()=>j,
     vars: ()=>e,
     withoutFooter: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./fixed-footer-layout.css.ts.vanilla.js");
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf2q", j = "p5j8j54", t = "p5j8j53 _1y2v1nf7p _1y2v1nf2p", e = {
+var v = "p5j8j58", t = "p5j8j56 _1y2v1nf2t", a = "p5j8j54", j = "p5j8j53 _1y2v1nf7v _1y2v1nf2s", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nf5h";
+}, p = "_1y2v1nf5n";

package/dist/header.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import NavigationBreadcrumbs from './navigation-breadcrumbs';
-import { ButtonPrimary, ButtonSecondary } from './button';
+import type NavigationBreadcrumbs from './navigation-breadcrumbs';
+import type { ButtonPrimary, ButtonSecondary } from './button';
 import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
 import type { TextPresetProps } from './text';
 type OverridableTextProps = {

package/dist/hero.css-mistica.js

@@ -10,15 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     actions: ()=>v,
-    container: ()=>n,
-    containerDesktop: ()=>a,
-    containerMobile: ()=>i,
-    layout: ()=>_,
+    container: ()=>a,
+    containerDesktop: ()=>n,
+    containerMobile: ()=>_,
+    layout: ()=>i,
     vars: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
 require("./hero.css.ts.vanilla.js");
-var v = "_16rbpto6 _1y2v1nf5i _1y2v1nf64 _1y2v1nf5y", n = "_16rbpto2 _1y2v1nf5i", a = "_1y2v1nf5x _1y2v1nf85", i = "_1y2v1nf5o", _ = "_16rbpto7", p = {
+var v = "_16rbpto6 _1y2v1nf5o _1y2v1nf6a _1y2v1nf64", a = "_16rbpto2 _1y2v1nf5o", n = "_1y2v1nf63 _1y2v1nf8b", _ = "_1y2v1nf5u", i = "_16rbpto7", p = {
     height: "var(--_16rbpto0)"
 };