@telefonica/mistica 14.20.1 → 14.21.0

package/dist/feedback.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     ErrorFeedbackScreen: function() {
-        return Ke;
+        return Xe;
     },
     FeedbackScreen: function() {
-        return A;
+        return V;
     },
     InfoFeedbackScreen: function() {
-        return Ge;
+        return Ye;
     },
     SuccessFeedback: function() {
-        return Me;
+        return Ze;
     },
     SuccessFeedbackScreen: function() {
-        return je;
+        return Qe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -47,6 +47,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames")
 const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _feedbackcssmistica = require("./feedback.css-mistica.js");
+const _iconsuccessvivonew = /*#__PURE__*/ _interop_require_default(require("./icons/icon-success-vivo-new.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -170,26 +171,26 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
+const P = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), U = (param)=>{
     let { primaryButton: r , secondaryButton: o  } = param;
     return !!r || !!o;
-}, ve = ()=>{
+}, ye = ()=>{
     const o = `body {background:${(0, _themevariantcontext.useIsInverseVariant)() ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background}}`;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
         children: o
     });
-}, D = (r)=>{
+}, $ = (r)=>{
     (0, _webviewbridge.isWebViewBridgeAvailable)() && (0, _webviewbridge.requestVibration)(r).catch(()=>{});
-}, j = (r)=>{
+}, J = (r)=>{
     _react.useEffect(()=>{
         let o;
-        return r === "success" && (o = setTimeout(()=>D("success"), 700)), r === "error" && (o = setTimeout(()=>D("error"), 1e3)), ()=>{
+        return r === "success" && (o = setTimeout(()=>$("success"), 700)), r === "error" && (o = setTimeout(()=>$("error"), 1e3)), ()=>{
             clearTimeout(o);
         };
     }, [
         r
     ]);
-}, K = ()=>{
+}, Q = ()=>{
     const [r, o] = _react.useState(!1);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         const t = window.requestAnimationFrame(()=>{
@@ -197,46 +198,58 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
         });
         return ()=>window.cancelAnimationFrame(t);
     }, []), r;
-}, G = (param, n, i)=>{
-    let { icon: r , title: o , description: t , children: c  } = param;
-    const m = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+}, X = (param, n, s)=>{
+    let { icon: r , title: o , description: t , extra: c  } = param;
+    const a = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,
-        children: t.map((u, l)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
-                children: u
-            }, l))
+        children: t.map((m, u)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
+                children: m
+            }, u))
     }) : t;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 24,
         children: [
-            r,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _feedbackcssmistica.iconContainer,
+                children: r
+            }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                 space: 16,
-                className: (0, _classnames.default)(_feedbackcssmistica.feedbackData, n && _feedbackcssmistica.feedbackDataAppear, n && i && _feedbackcssmistica.feedbackDataAppearActive),
+                className: (0, _classnames.default)(_feedbackcssmistica.feedbackData),
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
-                        as: "h1",
-                        children: o
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(n && _feedbackcssmistica.feedbackDataAppear, n && s && _feedbackcssmistica.feedbackDataAppearActiveFast),
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                            as: "h1",
+                            children: o
+                        })
                     }),
-                    m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                        regular: !0,
-                        color: _skincontractcssmistica.vars.colors.textSecondary,
-                        children: m
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(n && _feedbackcssmistica.feedbackDataAppear, n && s && _feedbackcssmistica.feedbackDataAppearActiveMedium),
+                        children: a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            children: a
+                        })
                     }),
-                    c
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(n && _feedbackcssmistica.feedbackDataAppear, n && s && (a ? _feedbackcssmistica.feedbackDataAppearActiveSlow : _feedbackcssmistica.feedbackDataAppearActiveMedium)),
+                        children: c
+                    })
                 ]
             })
         ]
     });
-}, M = (r, o)=>{
-    const t = W(o);
+}, Y = (r, o, t)=>{
+    const c = U(o);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-        space: 24,
+        space: t ? 24 : 40,
         children: [
             r,
-            t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, _object_spread({}, o))
+            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, _object_spread({}, o))
         ]
     });
-}, P = (param)=>/* @__PURE__ */ {
+}, Z = (param)=>/* @__PURE__ */ {
     let { isInverse: r , inlineFeedbackBody: o , imageFit: t , imageUrl: c , dataAttributes: n  } = param;
     return (0, _jsxruntime.jsxs)(_boxed.Boxed, {
         className: _feedbackcssmistica.desktopContainer,
@@ -262,92 +275,98 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
             })
         ]
     });
-}, 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, _hooks.useTheme)(), U = (0, _hooks.useWindowHeight)(), { isTabletOrSmaller: y  } = (0, _hooks.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();
+}, V = (param)=>{
+    let { title: r , description: o , children: t , extra: c , primaryButton: n , secondaryButton: s , link: a , hapticFeedback: m , icon: u , animateText: f = !1 , isInverse: i = !1 , unstable_inlineInDesktop: h , imageUrl: g , imageFit: v , dataAttributes: C  } = param;
+    J(m);
+    const { platformOverrides: F , isDarkMode: p , skinName: z  } = (0, _hooks.useTheme)(), ee = (0, _hooks.useWindowHeight)(), { isTabletOrSmaller: I  } = (0, _hooks.useScreenSize)(), [oe, re] = _react.useState(typeof self < "u"), [w, te] = _react.useState(0), T = oe ? "100vh" : `${ee - w}px`, D = U({
+        primaryButton: n,
+        secondaryButton: s,
+        link: a
+    }), ce = Q();
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        Q(!1);
+        re(!1);
     }, []);
-    const w = G({
+    const O = X({
         icon: u,
         title: r,
         description: o,
-        children: t
-    }, l && R(S), Y), H = M(w, {
-        primaryButton: c,
-        secondaryButton: n,
-        link: i
-    });
-    if (!y && h) return H;
-    const Z = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        extra: c !== null && c !== void 0 ? c : t
+    }, f && P(F), ce), H = Y(O, {
+        primaryButton: n,
+        secondaryButton: s,
+        link: a
+    }, I);
+    if (!I && h) return H;
+    const ne = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _feedbackcssmistica.container,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _feedbackcssmistica.innerContainer,
-                children: w
+                children: O
             })
         })
     });
-    return y ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        isInverse: a,
+    return I ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+        isInverse: i,
         children: [
-            a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
+            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "relative"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttonfixedfooterlayout.default, {
-                    isFooterVisible: V,
-                    button: c,
-                    secondaryButton: n,
-                    link: i,
-                    footerBgColor: a && !p ? _skincontractcssmistica.vars.colors.backgroundFeedbackBottom : void 0,
-                    containerBgColor: a && !p ? _skincontractcssmistica.vars.colors.backgroundFeedbackBottom : void 0,
-                    onChangeFooterHeight: X,
-                    children: Z
+                    isFooterVisible: D,
+                    button: n,
+                    secondaryButton: s,
+                    link: a,
+                    footerBgColor: i && !p ? _skincontractcssmistica.vars.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: i && !p ? _skincontractcssmistica.vars.colors.backgroundFeedbackBottom : void 0,
+                    onChangeFooterHeight: te,
+                    children: ne
                 })
             }),
-            T === _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            z === _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
-                    bottom: C,
+                    bottom: w,
                     top: 0,
                     left: 0,
                     right: 0,
                     // This extra height is a workaround to make sure the background div is displayed *under* the fixed footer.
                     // Otherwise in some devices (Galaxy S20+) the background and the fixed footer are rendered with some distance between them
-                    height: V ? `calc(${N} + 1px)` : `calc(${N})`,
-                    background: a ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background
+                    height: D ? `calc(${T} + 1px)` : `calc(${T})`,
+                    background: i ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background
                 }
             }),
-            T !== _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)(ve, {})
+            z !== _constants.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxruntime.jsx)(ye, {})
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             paddingTop: 64,
-            children: P({
-                isInverse: a,
+            children: Z({
+                isInverse: i,
                 inlineFeedbackBody: H,
-                imageFit: g,
-                imageUrl: k,
-                dataAttributes: x
+                imageFit: v,
+                imageUrl: g,
+                dataAttributes: C
             })
         })
     });
-}, je = (_param)=>{
+}, Qe = (_param)=>{
     var { dataAttributes: r  } = _param, o = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     const { isTabletOrSmaller: t  } = (0, _hooks.useScreenSize)(), { skinName: c  } = (0, _hooks.useTheme)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(A, _object_spread_props(_object_spread({}, o), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, o), {
         isInverse: !o.unstable_inlineInDesktop || t,
         hapticFeedback: "success",
-        icon: c === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivo.default, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccess.default, {}),
+        icon: c === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivo.default, {
+            size: "100%"
+        }) : c === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivonew.default, {
+            size: "100%"
+        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccess.default, {
+            size: "100%"
+        }),
         animateText: !0,
         imageUrl: o.imageUrl,
         imageFit: o.imageFit,
@@ -355,52 +374,66 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
             "component-name": "SuccessFeedbackScreen"
         }, r)
     }));
-}, Ke = (_param)=>/* @__PURE__ */ {
+}, Xe = (_param)=>/* @__PURE__ */ {
     var { children: r , errorReference: o , dataAttributes: t  } = _param, c = _object_without_properties(_param, [
         "children",
         "errorReference",
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsxs)(A, _object_spread_props(_object_spread({}, c), {
+    return (0, _jsxruntime.jsx)(V, _object_spread_props(_object_spread({}, c), {
         hapticFeedback: "error",
-        icon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconerror.default, {}),
+        icon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconerror.default, {
+            size: "100%"
+        }),
         animateText: !0,
         dataAttributes: _object_spread({
             "component-name": "ErrorFeedbackScreen"
         }, t),
-        children: [
-            r,
-            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                color: _skincontractcssmistica.vars.colors.textSecondary,
-                regular: !0,
-                children: o
-            })
-        ]
+        extra: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+            space: 16,
+            children: [
+                r,
+                o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                    regular: !0,
+                    children: o
+                })
+            ]
+        })
     }));
-}, Ge = (_param)=>/* @__PURE__ */ {
-    var { dataAttributes: r  } = _param, o = _object_without_properties(_param, [
-        "dataAttributes"
+}, Ye = (_param)=>/* @__PURE__ */ {
+    var { dataAttributes: r , Icon: o = _iconinfo.default  } = _param, t = _object_without_properties(_param, [
+        "dataAttributes",
+        "Icon"
     ]);
-    return (0, _jsxruntime.jsx)(A, _object_spread({
+    return (0, _jsxruntime.jsx)(V, _object_spread({
         dataAttributes: _object_spread({
             "component-name": "InfoFeedbackScreen"
         }, r),
-        icon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconinfo.default, {})
-    }, o));
-}, 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, _hooks.useScreenSize)(), { skinName: h , platformOverrides: k  } = (0, _hooks.useTheme)(), g = K(), S = G({
-        icon: h === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivo.default, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccess.default, {}),
+        icon: /* @__PURE__ */ (0, _jsxruntime.jsx)(o, {
+            size: "100%"
+        })
+    }, t));
+}, Ze = (param)=>{
+    let { title: r , description: o , children: t , extra: c , primaryButton: n , secondaryButton: s , link: a , imageUrl: m , imageFit: u , dataAttributes: f  } = param;
+    J("success");
+    const { isTabletOrSmaller: i  } = (0, _hooks.useScreenSize)(), { skinName: h , platformOverrides: g  } = (0, _hooks.useTheme)(), v = Q(), F = X({
+        icon: h === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivo.default, {
+            size: "100%"
+        }) : h === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccessvivonew.default, {
+            size: "100%"
+        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsuccess.default, {
+            size: "100%"
+        }),
         title: r,
         description: o,
-        children: t
-    }, R(k), g), p = M(S, {
-        primaryButton: c,
-        secondaryButton: n,
-        link: i
-    });
-    return a ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
+        extra: c !== null && c !== void 0 ? c : t
+    }, P(g), v), p = Y(F, {
+        primaryButton: n,
+        secondaryButton: s,
+        link: a
+    }, i);
+    return i ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
         isInverse: !0,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
@@ -408,20 +441,20 @@ const R = (r)=>!(0, _platform.isRunningAcceptanceTest)(r), W = (param)=>{
                 paddingBottom: 32,
                 dataAttributes: _object_spread({
                     "component-name": "SuccessFeedback"
-                }, l),
+                }, f),
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _feedbackcssmistica.innerContainer,
                     children: p
                 })
             })
         ]
-    }) : P({
+    }) : Z({
         isInverse: !0,
         inlineFeedbackBody: p,
         imageFit: u,
         imageUrl: m,
         dataAttributes: _object_spread({
             "component-name": "SuccessFeedback"
-        }, l)
+        }, f)
     });
 };

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

@@ -30,7 +30,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./fixed-footer-layout.css.ts.vanilla.css-mistica.js");
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nfbr _1y2v1nf30", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nfbs _1y2v1nf30", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nfb3";
+}, p = "_1y2v1nfb4";

package/dist/fixed-footer-layout.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _debounce = /*#__PURE__*/ _interop_require_default(require("lodash/debounce"));
+const _helpers = require("./utils/helpers.js");
 const _platform = require("./utils/platform.js");
 const _hooks = require("./hooks.js");
 const _dom = require("./utils/dom.js");
@@ -127,7 +127,7 @@ const X = 2, Y = (e)=>e === document.documentElement ? window : e, Z = (e)=>{
         o,
         s
     ]), _react.useEffect(()=>{
-        const a = (0, _dom.getScrollableParentElement)(u.current), R = ()=>(0, _platform.isRunningAcceptanceTest)(d) || !i ? !1 : (0, _dom.hasScroll)(a) ? (0, _dom.getScrollDistanceToBottom)(a) > 1 : !1, t = (0, _debounce.default)(()=>{
+        const a = (0, _dom.getScrollableParentElement)(u.current), R = ()=>(0, _platform.isRunningAcceptanceTest)(d) || !i ? !1 : (0, _dom.hasScroll)(a) ? (0, _dom.getScrollDistanceToBottom)(a) > 1 : !1, t = (0, _helpers.debounce)(()=>{
             y(R());
         }, 50, {
             leading: !0,

package/dist/grid.css.d.ts

@@ -9,8 +9,8 @@ export declare const vars: {
 export declare const grid: string;
 export declare const gridTemplateColumnsAutoRepeat: string;
 export declare const gridTemplateRowsAutoRepeat: string;
-export declare const gridTemplateColumns: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
-export declare const gridTemplateRows: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const gridTemplateColumns: Record<1 | 2 | 4 | 8 | 12 | 5 | 6 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const gridTemplateRows: Record<1 | 2 | 4 | 8 | 12 | 5 | 6 | 3 | 9 | 10 | 7 | 11, string>;
 export declare const gridAutoFlow: Record<"column" | "row" | "row dense" | "column dense", string>;
 export declare const gridJustifyItems: Record<"center" | "stretch" | "end" | "start", string>;
 export declare const gridAlignItems: Record<"center" | "stretch" | "end" | "start" | "baseline", string>;
@@ -18,9 +18,9 @@ export declare const gridJustifyContent: Record<"center" | "space-around" | "spa
 export declare const gridAlignContent: Record<"center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start", string>;
 export declare const fullColumns: string;
 export declare const fullRows: string;
-export declare const spanColumns: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
-export declare const spanRows: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
-export declare const columnStart: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
-export declare const rowStart: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const spanColumns: Record<1 | 2 | 4 | 8 | 12 | 5 | 6 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const spanRows: Record<1 | 2 | 4 | 8 | 12 | 5 | 6 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const columnStart: Record<1 | 2 | 4 | 8 | 12 | 5 | 6 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const rowStart: Record<1 | 2 | 4 | 8 | 12 | 5 | 6 | 3 | 9 | 10 | 7 | 11, string>;
 export declare const justifySelf: Record<"center" | "stretch" | "end" | "start", string>;
 export declare const alignSelf: Record<"center" | "stretch" | "end" | "start" | "baseline", string>;

package/dist/hero.css-mistica.js

@@ -13,10 +13,10 @@ _export(exports, {
         return v;
     },
     container: function() {
-        return a;
+        return n;
     },
     containerDesktop: function() {
-        return n;
+        return a;
     },
     containerMobile: function() {
         return b;
@@ -31,6 +31,6 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./hero.css.ts.vanilla.css-mistica.js");
-var v = "_16rbpto6 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfbk", a = "_16rbpto2 _1y2v1nfb4", n = "_1y2v1nfbj _1y2v1nfc8", b = "_1y2v1nfba", _ = "_16rbpto7", i = {
+var v = "_16rbpto6 _1y2v1nfb5 _1y2v1nfbr _1y2v1nfbl", n = "_16rbpto2 _1y2v1nfb5", a = "_1y2v1nfbk _1y2v1nfc9", b = "_1y2v1nfbb", _ = "_16rbpto7", i = {
     height: "var(--_16rbpto0)"
 };

package/dist/highlighted-card.css-mistica.js

@@ -24,7 +24,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./highlighted-card.css.ts.vanilla.css-mistica.js");
-var y = "wrb8722 _1y2v1nfb4 _1y2v1nfb9 _1y2v1nfbg _1y2v1nfbm", f = "wrb8725 _1y2v1nfb4", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nfb4 _1y2v1nfba _1y2v1nfbi _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nfb4 _1y2v1nfba _1y2v1nfbi _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w"
-}, b = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb4 _1y2v1nfbm _1y2v1nfdm _1y2v1nfbr _1y2v1nf5y";
+var y = "wrb8722 _1y2v1nfb5 _1y2v1nfba _1y2v1nfbh _1y2v1nfbn", f = "wrb8725 _1y2v1nfb5", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nfb5 _1y2v1nfbb _1y2v1nfbj _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nfb5 _1y2v1nfbb _1y2v1nfbj _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w"
+}, b = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb5 _1y2v1nfbn _1y2v1nfdn _1y2v1nfbs _1y2v1nf5y";

package/dist/horizontal-scroll.css-mistica.js

@@ -19,4 +19,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
-var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfb4";
+var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfb5";

package/dist/icon-button.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
-var t = "yqt1oe1 _1y2v1nfb8";
+var t = "yqt1oe1 _1y2v1nfb9";

package/dist/icons/icon-error.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare const IconError: () => JSX.Element;
+type Props = {
+    size?: number | string;
+};
+declare const IconError: (props: Props) => JSX.Element;
 export default IconError;

package/dist/icons/icon-error.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return v;
+        return w;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -42,12 +42,14 @@ function _object_spread(target) {
     }
     return target;
 }
-const d = ()=>{
+const h = (param)=>{
+    let { size: e = 48  } = param;
     const { platformOverrides: o  } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
-        width: "72",
-        height: "64",
-        viewBox: "0 0 72 64",
+        width: e,
+        height: e,
+        viewBox: "0 0 64 64",
+        overflow: "visible",
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("g", {
             stroke: _skincontractcssmistica.vars.colors.error,
             fill: _skincontractcssmistica.vars.colors.error,
@@ -91,12 +93,14 @@ const d = ()=>{
             ]
         })
     });
-}, h = ()=>{
+}, f = (param)=>{
+    let { size: e = 48  } = param;
     const { platformOverrides: o  } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
-        width: "72",
-        height: "64",
-        viewBox: "0 0 72 64",
+        width: e,
+        height: e,
+        viewBox: "0 0 64 64",
+        overflow: "visible",
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("g", {
             stroke: _skincontractcssmistica.vars.colors.error,
             fill: "none",
@@ -137,7 +141,7 @@ const d = ()=>{
             ]
         })
     });
-}, f = ()=>{
+}, k = (e)=>{
     const { skinName: o  } = (0, _hooks.useTheme)();
-    return o === _constants.O2_SKIN || o === _constants.O2_CLASSIC_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(h, {});
-}, v = f;
+    return o === _constants.O2_SKIN || o === _constants.O2_CLASSIC_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(h, _object_spread({}, e)) : /* @__PURE__ */ (0, _jsxruntime.jsx)(f, _object_spread({}, e));
+}, w = k;

package/dist/icons/icon-info.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare const IconInfo: () => JSX.Element;
+type Props = {
+    size?: number | string;
+};
+declare const IconInfo: (props: Props) => JSX.Element;
 export default IconInfo;