@telefonica/mistica 14.2.0 → 14.4.0

package/dist/date-time-picker.js

@@ -141,8 +141,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const h = navigator.language.toLocaleLowerCase().split("-")[0];
-Promise.resolve(/* webpackChunkName: "moment-locale" */ `moment/locale/${h}`).then((p)=>/*#__PURE__*/ _interopRequireWildcard(require(p))).finally(()=>{});
+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)=>{
     var { withTime: s , mode: l , isValidDate: y , optional: u  } = _param, t = _objectWithoutProperties(_param, [
         "withTime",
@@ -150,15 +150,15 @@ const Q = (_param)=>{
         "isValidDate",
         "optional"
     ]);
-    const [m, x] = _react.useState(!1), { texts: b  } = (0, _hooksJs.useTheme)(), n = _react.useRef(null), { height: k , ref: v  } = (0, _hooksJs.useElementDimensions)(), a = (e)=>{
+    const [m, x] = _react.useState(!1), { texts: b  } = (0, _hooksJs.useTheme)(), n = _react.useRef(null), { height: k , ref: v  } = (0, _hooksJs.useElementDimensions)(), i = (e)=>{
         t.disabled || x(e);
     }, w = ()=>{
         var p;
-        const { top: e = 0 , bottom: o = 0 , left: i = 0  } = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, P = 260 + o < window.innerHeight;
+        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,
-            left: i,
+            left: a,
             position: "absolute",
             borderRadius: 8,
             overflow: "hidden",
@@ -169,21 +169,21 @@ const Q = (_param)=>{
         const e = (o = n.current) == null ? void 0 : o.value;
         return e ? new Date(e) : void 0;
     }, C = (e)=>s ? e.format("yyyy-MM-DD HH:mm") : l === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), f = (e)=>{
-        var i;
+        var a;
         const o = typeof e == "string" ? e : C(e);
-        n.current && (n.current.focus(), (i = t.onChange) == null || i.call(t, (0, _domJs.createChangeEvent)(n.current, o)));
+        n.current && (n.current.focus(), (a = t.onChange) == null || a.call(t, (0, _domJs.createChangeEvent)(n.current, o)));
     }, D = ()=>c() && u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
             "aria-label": b.clearButton,
             size: 32,
-            onPress: (e)=>{
-                e.stopPropagation(), f("");
+            onPress: ()=>{
+                f("");
             },
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {})
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
             disabled: t.disabled,
             "aria-label": "",
             size: 32,
-            onPress: ()=>a(!m),
+            onPress: ()=>i(!m),
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCalendarRegularJs.default, {})
         });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
@@ -202,14 +202,14 @@ const Q = (_param)=>{
                     (o = t == null ? void 0 : t.inputRef) == null || o.call(t, e), n.current = e;
                 },
                 readOnly: !0,
-                onKeyDown: ()=>a(!0),
+                onKeyDown: ()=>i(!0),
                 onClick: ()=>{
-                    a(!0);
+                    i(!0);
                 }
             })),
             m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
                 onPress: (e)=>{
-                    (0, _domJs.cancelEvent)(e), a(!1);
+                    (0, _domJs.cancelEvent)(e), i(!1);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -221,7 +221,7 @@ const Q = (_param)=>{
                         dateFormat: l === "year-month" ? "YYYY-MM" : void 0,
                         timeFormat: s ? "HH:mm" : !1,
                         initialValue: c(),
-                        locale: h,
+                        locale: g,
                         input: !1,
                         onChange: f,
                         isValidDate: y

package/dist/empty-state-card.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>Y
+    get: ()=>V
 });
 const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 const _boxedJs = require("./boxed.js");
@@ -20,50 +20,54 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const Y = (param)=>{
-    let { title: n , description: f , button: e , secondaryButton: o , buttonLink: i , icon: l , imageUrl: m , "aria-label": h , dataAttributes: x  } = param;
-    var s;
-    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)();
-    let a;
-    return m && (a = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
+const V = (param)=>{
+    let { title: n , description: h , button: r , secondaryButton: o , buttonLink: t , icon: a , imageUrl: l , "aria-label": f , dataAttributes: x  } = param;
+    var m;
+    const { isTabletOrSmaller: s  } = (0, _hooksJs.useScreenSize)(), { textPresets: S  } = (0, _hooksJs.useTheme)();
+    let i;
+    return l && (i = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
         className: _emptyStateCardCssMisticaJs.image,
         alt: "",
-        src: m
-    })), process.env.NODE_ENV !== "production" && e && !((s = e == null ? void 0 : e.props) != null && s.small) && console.error("button property in EmptyStateCard must be a a small Button. Set small prop to true"), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
+        src: l
+    })), process.env.NODE_ENV !== "production" && r && !((m = r == null ? void 0 : r.props) != null && m.small) && console.error("button property in EmptyStateCard must be a a small Button. Set small prop to true"), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
         dataAttributes: x,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-            paddingY: t ? 24 : 40,
-            paddingX: t ? 16 : 40,
+            paddingY: s ? 24 : 40,
+            paddingX: s ? 16 : 40,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
                 className: _emptyStateCardCssMisticaJs.container,
-                "aria-label": h,
+                "aria-label": f,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 16,
                     children: [
-                        a != null ? a : l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        i != null ? i : a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                             className: _emptyStateCardCssMisticaJs.iconContainer,
-                            children: l
+                            children: a
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                 space: 8,
                                 children: [
-                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
-                                        regular: !0,
+                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
+                                        mobileSize: 18,
+                                        mobileLineHeight: "24px",
+                                        desktopSize: 20,
+                                        desktopLineHeight: "28px",
+                                        weight: S.cardTitle.weight,
                                         children: n
                                     }),
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                         regular: !0,
                                         color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                                        children: f
+                                        children: h
                                     })
                                 ]
                             })
                         }),
-                        (e || o || i) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                            primaryButton: e,
+                        (r || o || t) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                            primaryButton: r,
                             secondaryButton: o,
-                            link: i
+                            link: t
                         })
                     ]
                 })

package/dist/header.d.ts

@@ -60,6 +60,7 @@ type HeaderLayoutProps = {
     sideBySideExtraOnDesktop?: boolean;
     children?: void;
     dataAttributes?: DataAttributes;
+    bleed?: boolean;
 };
 export declare const HeaderLayout: React.FC<HeaderLayoutProps>;
 type MainSectionHeaderLayoutProps = {

package/dist/header.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    Header: ()=>J,
-    HeaderLayout: ()=>N,
-    MainSectionHeader: ()=>K,
-    MainSectionHeaderLayout: ()=>Q
+    Header: ()=>N,
+    HeaderLayout: ()=>U,
+    MainSectionHeader: ()=>Q,
+    MainSectionHeaderLayout: ()=>W
 });
 const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 const _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
@@ -109,33 +109,33 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const J = (param)=>{
-    let { pretitle: i , title: e , description: o , dataAttributes: n , preamount: c , amount: s , button: a , subtitle: g , isErrorAmount: H , secondaryButton: x  } = param;
-    const { isTabletOrSmaller: L  } = (0, _hooksJs.useScreenSize)(), O = (0, _themeVariantContextJs.useIsInverseVariant)(), f = (m, y)=>{
-        if (typeof m == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
+const N = (param)=>{
+    let { pretitle: l , title: e , description: t , dataAttributes: i , preamount: c , amount: m , button: h , subtitle: a , isErrorAmount: s , secondaryButton: y  } = param;
+    const { isTabletOrSmaller: L  } = (0, _hooksJs.useScreenSize)(), O = (0, _themeVariantContextJs.useIsInverseVariant)(), u = (g, S)=>{
+        if (typeof g == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y), {
-            children: m
+        }, S), {
+            children: g
         }));
-        const { text: M  } = m, I = _objectWithoutProperties(m, [
+        const { text: G  } = g, k = _objectWithoutProperties(g, [
             "text"
         ]);
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y, I), {
-            children: m.text
+        }, S, k), {
+            children: g.text
         }));
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: L ? 24 : 32,
-        dataAttributes: n,
+        dataAttributes: i,
         children: [
-            (e || i || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            (e || l || t) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 16,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 8,
                     children: [
-                        i && f(i, {
+                        l && u(l, {
                             color: _skinContractCssMisticaJs.vars.colors.textPrimary
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
@@ -143,121 +143,129 @@ const J = (param)=>{
                             "aria-level": 2,
                             children: e
                         }),
-                        o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                        t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                             regular: !0,
                             color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                            children: o
+                            children: t
                         })
                     ]
                 })
             }),
-            (c || s || a || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+            (c || m || h || a) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
                 children: [
-                    (c || s) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    (c || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 8,
                         children: [
-                            c && f(c, {
+                            c && u(c, {
                                 color: _skinContractCssMisticaJs.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
-                                color: H && !O ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
-                                children: s
+                                color: s && !O ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
+                                children: m
                             })
                         ]
                     }),
-                    (a || x) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                        primaryButton: a,
-                        secondaryButton: x
+                    (h || y) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                        primaryButton: h,
+                        secondaryButton: y
                     }),
-                    g && f(g, {})
+                    a && u(a, {})
                 ]
             })
         ]
     });
-}, K = (param)=>{
-    let { title: i , description: e , button: o  } = param;
-    const { isTabletOrSmaller: n  } = (0, _hooksJs.useScreenSize)();
+}, Q = (param)=>{
+    let { title: l , description: e , button: t  } = param;
+    const { isTabletOrSmaller: i  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 32,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                space: n ? 12 : 16,
+                space: i ? 12 : 16,
                 children: [
-                    i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text7, {
+                    l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text7, {
                         role: "heading",
                         "aria-level": 1,
-                        children: i
+                        children: l
                     }),
                     e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         children: e
                     })
                 ]
             }),
-            o
+            t
         ]
     });
-}, N = (param)=>{
-    let { isInverse: i = !0 , breadcrumbs: e , header: o , extra: n , sideBySideExtraOnDesktop: c = !1 , dataAttributes: s  } = param;
-    const { isTabletOrSmaller: a  } = (0, _hooksJs.useScreenSize)();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
-        isInverse: i,
-        dataAttributes: _objectSpread({
-            "component-name": "HeaderLayout"
-        }, s),
+}, U = (param)=>{
+    let { isInverse: l = !0 , breadcrumbs: e , header: t , extra: i , sideBySideExtraOnDesktop: c = !1 , dataAttributes: m , bleed: h = !1  } = param;
+    const { isTabletOrSmaller: a  } = (0, _hooksJs.useScreenSize)(), s = h && l;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: o ? 32 : 0,
-                paddingBottom: 24,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                    space: 24,
-                    children: [
-                        o,
-                        n
-                    ]
-                })
-            }) : c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: e ? 16 : 48,
-                paddingBottom: 48,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
-                    template: "6+6",
-                    left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                        space: 32,
-                        children: [
-                            e,
-                            o
-                        ]
-                    }),
-                    right: n
-                })
-            }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: e ? 16 : 48,
-                paddingBottom: 48,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                    space: a ? 24 : 32,
-                    children: [
-                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                            space: 32,
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+                isInverse: l,
+                dataAttributes: _objectSpread({
+                    "component-name": "HeaderLayout"
+                }, m),
+                children: [
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+                    a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: t ? 32 : 0,
+                        paddingBottom: 24,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            space: 24,
                             children: [
-                                e,
-                                o
+                                t,
+                                !s && i
                             ]
-                        }),
-                        n
-                    ]
-                })
+                        })
+                    }) : c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: e ? 16 : 48,
+                        paddingBottom: 48,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
+                            template: "6+6",
+                            left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                space: 32,
+                                children: [
+                                    e,
+                                    t
+                                ]
+                            }),
+                            right: i
+                        })
+                    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: e ? 16 : 48,
+                        paddingBottom: s ? 32 : 48,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            space: a ? 24 : 32,
+                            children: [
+                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                    space: 32,
+                                    children: [
+                                        e,
+                                        t
+                                    ]
+                                }),
+                                !s && i
+                            ]
+                        })
+                    })
+                ]
+            }),
+            s && i && (a || !c) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
+                backgroundColor: `linear-gradient(to bottom, ${_skinContractCssMisticaJs.vars.colors.backgroundBrand} 40px, ${_skinContractCssMisticaJs.vars.colors.background} 0%)`,
+                children: i
             })
         ]
     });
-}, Q = (param)=>{
-    let { isInverse: i = !0 , children: e  } = param;
-    const { isTabletOrSmaller: o  } = (0, _hooksJs.useScreenSize)();
+}, W = (param)=>{
+    let { isInverse: l = !0 , children: e  } = param;
+    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
-        isInverse: i,
+        isInverse: l,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: 12,
                 paddingBottom: 24,
                 children: e

package/dist/highlighted-card.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>F
+    get: ()=>W
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _themeVariantContextJs = require("./theme-variant-context.js");
@@ -15,6 +15,7 @@ const _boxedJs = require("./boxed.js");
 const _maybeDismissableJs = /*#__PURE__*/ _interopRequireWildcard(require("./maybe-dismissable.js"));
 const _highlightedCardCssMisticaJs = require("./highlighted-card.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 _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -139,11 +140,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
+const S = /*#__PURE__*/ _react.forwardRef((e, i)=>{
     var h;
-    const { title: a , description: r , imageUrl: o , imageFit: l  } = e, f = (0, _themeVariantContextJs.useIsInverseVariant)(), g = (h = e.isInverse) != null ? h : f, m = (0, _maybeDismissableJs.useIsDismissable)(), n = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
+    const { title: a , description: r , imageUrl: o , imageFit: l  } = e, u = (0, _themeVariantContextJs.useIsInverseVariant)(), f = (h = e.isInverse) != null ? h : u, d = (0, _maybeDismissableJs.useIsDismissable)(), { textPresets: b  } = (0, _hooksJs.useTheme)(), n = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
         ref: i,
-        isInverse: g,
+        isInverse: f,
         className: _highlightedCardCssMisticaJs.container,
         dataAttributes: _objectSpread({
             "component-name": "HighlightedCard"
@@ -151,14 +152,18 @@ const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
         width: e.width ? `${e.width}px` : "100%",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-                role: m ? void 0 : "region",
+                role: d ? void 0 : "region",
                 className: _highlightedCardCssMisticaJs.textContainerVariant[o ? "withImage" : "withoutImage"],
-                "aria-label": m ? void 0 : e["aria-label"],
+                "aria-label": d ? void 0 : e["aria-label"],
                 children: [
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
-                        as: "h3",
-                        regular: !0,
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text, {
+                        mobileSize: 18,
+                        mobileLineHeight: "24px",
+                        desktopSize: 20,
+                        desktopLineHeight: "28px",
                         truncate: e.titleLinesMax,
+                        weight: b.cardTitle.weight,
+                        as: "h3",
                         children: a
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
@@ -187,7 +192,8 @@ const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
             o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _highlightedCardCssMisticaJs.imageContent,
                 style: {
-                    background: `url(${o}) no-repeat`,
+                    backgroundImage: `url(${o})`,
+                    backgroundRepeat: "no-repeat",
                     backgroundSize: l === "fit" ? "contain" : "cover",
                     backgroundPosition: l === "fit" ? "bottom right" : `center ${l === "fill-center" ? "center" : "right"}`
                 }
@@ -212,7 +218,7 @@ const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
         className: _highlightedCardCssMisticaJs.touchableContainer,
         children: n
     }) : n;
-}), F = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
+}), W = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
     var { "aria-label": e  } = _param, i = _objectWithoutProperties(_param, [
         "aria-label"
     ]);
@@ -221,7 +227,7 @@ const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
         onClose: i.onClose,
         "aria-label": r,
         width: i.width,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, _objectSpreadProps(_objectSpread({}, i), {
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(S, _objectSpreadProps(_objectSpread({}, i), {
             "aria-label": r,
             ref: a
         }))

package/dist/icon-button.js

@@ -113,14 +113,14 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const s = 24, b = (e, a, t, n, c)=>{
+const d = 24, b = (e, a, t, n, l)=>{
     const m = n ? `${n}px ${n}px` : "100% 100%";
     return {
         padding: 0,
         backgroundColor: t,
         backgroundImage: e ? `url(${e})` : "initial",
         backgroundSize: m,
-        cursor: c ? "default" : "pointer",
+        cursor: l ? "default" : "pointer",
         height: a,
         width: a
     };
@@ -147,7 +147,9 @@ const s = 24, b = (e, a, t, n, c)=>{
         "aria-label": e["aria-label"],
         children: !a && _react.Children.only(t)
     })) : e.onPress ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
-        onPress: e.onPress,
+        onPress: (l)=>{
+            l.stopPropagation(), e.onPress(l);
+        },
         "aria-label": e["aria-label"],
         children: !a && _react.Children.only(t)
     })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
@@ -155,13 +157,13 @@ const s = 24, b = (e, a, t, n, c)=>{
         children: !a && _react.Children.only(t)
     }));
 }, I = (e)=>{
-    const { icon: a , backgroundColor: t = "transparent" , iconSize: n , size: c = s  } = e;
+    const { icon: a , backgroundColor: t = "transparent" , iconSize: n , size: l = d  } = e;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(u, _objectSpreadProps(_objectSpread({}, e), {
         className: (0, _classnames.default)(_iconButtonCssMisticaJs.base, e.className),
-        style: _objectSpread({}, b(a, c, t, n, e.disabled), e.style)
+        style: _objectSpread({}, b(a, l, t, n, e.disabled), e.style)
     }));
 }, w = (e)=>{
-    const { size: a = s , disabled: t  } = e;
+    const { size: a = d , disabled: t  } = e;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(u, _objectSpreadProps(_objectSpread({}, e), {
         className: (0, _classnames.default)(_iconButtonCssMisticaJs.base, e.className),
         style: {

package/dist/inline.css-mistica.js

@@ -12,13 +12,14 @@ _export(exports, {
     fullWidth: ()=>v,
     justifyVariants: ()=>n,
     noFullWidth: ()=>a,
-    vars: ()=>f
+    vars: ()=>f,
+    wrap: ()=>r
 });
 require("./inline.css.ts.vanilla.js");
 var v = "kkfbnv2 kkfbnv1", n = {
-    between: "kkfbnv4",
-    around: "kkfbnv5",
-    evenly: "kkfbnv6"
-}, a = "kkfbnv3 kkfbnv1", f = {
+    between: "kkfbnv5",
+    around: "kkfbnv6",
+    evenly: "kkfbnv7"
+}, a = "kkfbnv4 kkfbnv1", f = {
     space: "var(--kkfbnv0)"
-};
+}, r = "kkfbnv3 kkfbnv1";

package/dist/inline.css.d.ts

@@ -3,5 +3,6 @@ export declare const vars: {
 };
 export declare const inline: string;
 export declare const fullWidth: string;
+export declare const wrap: string;
 export declare const noFullWidth: string;
 export declare const justifyVariants: Record<"between" | "around" | "evenly", string>;

package/dist/inline.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
 type Props = {
-    space: 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 'between' | 'around' | 'evenly';
+    space: -16 | -12 | -8 | -4 | -2 | 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 'between' | 'around' | 'evenly';
     alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
     children: React.ReactNode;
     className?: string;
@@ -9,6 +9,7 @@ type Props = {
     'aria-labelledby'?: string;
     fullWidth?: boolean;
     dataAttributes?: DataAttributes;
+    wrap?: boolean;
 };
 declare const Inline: React.FC<Props>;
 export default Inline;