@telefonica/mistica 17.3.0 → 17.5.0

package/dist/header.css-mistica.js

@@ -22,4 +22,4 @@ _export(exports, {
         return e;
     }
 });
-/* empty css                                     */ /* empty css                                  */ var e = "v17_3_mtk7e90", r = "v17_3_mtk7e92 v17_3_mtk7e90 v17_3_mtk7e91 v17_3_1y2v1nfj2", m = "v17_3_mtk7e93", t = "v17_3_mtk7e94 v17_3_1y2v1nfra v17_3_1y2v1nfrg";
+/* empty css                                     */ /* empty css                                  */ var e = "v17_5_mtk7e90", r = "v17_5_mtk7e92 v17_5_mtk7e90 v17_5_mtk7e91 v17_5_1y2v1nfj6", m = "v17_5_mtk7e93", t = "v17_5_mtk7e94 v17_5_1y2v1nfre v17_5_1y2v1nfrk";

package/dist/header.d.ts

@@ -11,17 +11,19 @@ type OverridableTextProps = {
 type RichText = string | ({
     text: string;
 } & OverridableTextProps);
+type TitleSizes = 'title1' | 'title2' | 'title3' | 'title4';
 type HeaderProps = {
     headline?: React.ReactNode;
     pretitle?: RichText;
     pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
+    titleSize?: TitleSizes;
     description?: string;
     small?: boolean;
     dataAttributes?: DataAttributes;
 };
-export declare const Header: ({ headline, pretitle, pretitleAs, title, titleAs, description, dataAttributes, small, }: HeaderProps) => JSX.Element;
+export declare const Header: ({ headline, pretitle, pretitleAs, title, titleAs, titleSize, description, dataAttributes, small, }: HeaderProps) => JSX.Element;
 type MainSectionHeaderProps = {
     title: string;
     titleAs?: HeadingType;

package/dist/header.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     get Header () {
-        return W;
+        return rt;
     },
     get HeaderLayout () {
-        return Z;
+        return it;
     },
     get MainSectionHeader () {
-        return X;
+        return ot;
     },
     get MainSectionHeaderLayout () {
-        return _;
+        return dt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -35,6 +35,7 @@ const _headercssmistica = require("./header.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _title = require("./title.js");
 const _headings = require("./utils/headings.js");
+const _hooks = require("./hooks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -119,46 +120,53 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const W = (param)=>{
-    let { headline: a, pretitle: r, pretitleAs: o, title: e, titleAs: n = "h2", description: d, dataAttributes: b, small: m = !1 } = param;
-    const i = (()=>{
+const rt = (param)=>{
+    let { headline: n, pretitle: r, pretitleAs: o, title: e, titleAs: a = "h2", titleSize: p, description: i, dataAttributes: m, small: c = !1 } = param;
+    const { textPresets: d } = (0, _hooks.useTheme)(), h = ()=>{
         if (!r) return null;
-        const x = {
-            regular: !0,
+        const g = {
             color: _skincontractcssmistica.vars.colors.textPrimary,
             as: o,
             dataAttributes: {
                 testid: "pretitle"
-            }
+            },
+            desktopSize: d.headerPretitle.size.desktop,
+            mobileSize: d.headerPretitle.size.mobile,
+            desktopLineHeight: d.headerPretitle.lineHeight.desktop,
+            mobileLineHeight: d.headerPretitle.lineHeight.mobile,
+            weight: d.headerPretitle.weight
         };
-        if (typeof r == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({}, x), {
+        if (typeof r == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, g), {
             children: r
         }));
-        const { text: T } = r, A = _object_without_properties(r, [
+        const { text: y } = r, T = _object_without_properties(r, [
             "text"
         ]);
-        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({}, x, A), {
-            children: T
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, g, T), {
+            children: y
         }));
-    })(), s = e ? m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title3, {
-        as: n,
-        dataAttributes: {
-            testid: "title"
-        },
-        children: e
-    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title4, {
-        as: n,
-        dataAttributes: {
-            testid: "title"
-        },
-        children: e
-    }) : void 0, v = a ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    }, S = ()=>{
+        if (!e) return;
+        const g = {
+            children: e,
+            as: a,
+            dataAttributes: {
+                testid: "title"
+            }
+        }, T = p ? ({
+            title1: _title.Title1,
+            title2: _title.Title2,
+            title3: _title.Title3,
+            title4: _title.Title4
+        })[p] : c ? _title.Title3 : _title.Title4;
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)(T, _object_spread({}, g));
+    }, u = h(), b = S(), k = n ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
-            paddingBottom: r || e || d ? 8 : 0,
+            paddingBottom: r || e || i ? 8 : 0,
             order: -1
         },
         "data-testid": "headline",
-        children: a
+        children: n
     }) : void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: {
@@ -167,77 +175,77 @@ const W = (param)=>{
         },
         dataAttributes: _object_spread({
             testid: "Header"
-        }, b),
-        children: (e || r || d) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        }, m),
+        children: (e || r || i) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             paddingRight: 16,
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _headercssmistica.flexColumn,
                 children: [
-                    (0, _headings.isBiggerHeading)(n, o) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    (0, _headings.isBiggerHeading)(a, o) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                         children: [
-                            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingBottom: d ? 8 : 0
+                                    paddingBottom: i ? 8 : 0
                                 },
-                                children: s
+                                children: b
                             }),
-                            v,
-                            i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            k,
+                            u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingBottom: e || d ? 8 : 0,
+                                    paddingBottom: e || i ? 8 : 0,
                                     order: -1
                                 },
-                                children: i
+                                children: u
                             })
                         ]
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                         children: [
-                            i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingBottom: e || d ? 8 : 0
+                                    paddingBottom: e || i ? 8 : 0
                                 },
-                                children: i
+                                children: u
                             }),
-                            v,
-                            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            k,
+                            b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingBottom: d ? 8 : 0
+                                    paddingBottom: i ? 8 : 0
                                 },
-                                children: s
+                                children: b
                             })
                         ]
                     }),
-                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
                             order: 1
                         },
-                        children: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        children: c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
                             dataAttributes: {
                                 testid: "description"
                             },
-                            children: d
+                            children: i
                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
                             dataAttributes: {
                                 testid: "description"
                             },
-                            children: d
+                            children: i
                         })
                     })
                 ]
             })
         })
     });
-}, X = (param)=>{
-    let { title: a, titleAs: r = "h1", description: o, button: e, dataAttributes: n } = param;
+}, ot = (param)=>{
+    let { title: n, titleAs: r = "h1", description: o, button: e, dataAttributes: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 32,
         dataAttributes: _object_spread({
             testid: "MainSectionHeader"
-        }, n),
+        }, a),
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                 space: {
@@ -245,12 +253,12 @@ const W = (param)=>{
                     desktop: 16
                 },
                 children: [
-                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text7, {
+                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text7, {
                         as: r,
                         dataAttributes: {
                             testid: "title"
                         },
-                        children: a
+                        children: n
                     }),
                     o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
                         dataAttributes: {
@@ -263,9 +271,9 @@ const W = (param)=>{
             e
         ]
     });
-}, Z = (param)=>{
-    let { variant: a = "default", breadcrumbs: r, header: o, slot: e, sideBySideSlotOnDesktop: n = !1, dataAttributes: d, bleed: b = !1, noPaddingY: m = !1 } = param;
-    const u = a === "brand", i = b && u && e, s = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+}, it = (param)=>{
+    let { variant: n = "default", breadcrumbs: r, header: o, slot: e, sideBySideSlotOnDesktop: a = !1, dataAttributes: p, bleed: i = !1, noPaddingY: m = !1 } = param;
+    const c = n === "brand", d = i && c && e, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         children: [
             r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _headercssmistica.breadcrumbs,
@@ -274,28 +282,28 @@ const W = (param)=>{
             o
         ]
     });
-    return (0, _overscrollcolorcontext.useSetOverscrollColor)(u ? {
+    return (0, _overscrollcolorcontext.useSetOverscrollColor)(c ? {
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop
     } : {}), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
         testid: "HeaderLayout"
-    }, d))), {
+    }, p))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                variant: u ? "brand" : void 0,
+                variant: c ? "brand" : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingTop: m ? 0 : {
                         mobile: o ? 32 : 0,
                         desktop: r ? 16 : 48
                     },
                     paddingBottom: {
-                        mobile: m && !i ? 0 : 24,
-                        desktop: i && !n ? 32 : m ? 0 : 48
+                        mobile: m && !d ? 0 : 24,
+                        desktop: d && !a ? 32 : m ? 0 : 48
                     },
-                    children: n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                    children: a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "6+6",
-                        left: s,
+                        left: h,
                         right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: i ? _headercssmistica.hideOnTabletOrSmaller : "",
+                            className: d ? _headercssmistica.hideOnTabletOrSmaller : "",
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: {
                                     mobile: o ? 24 : 0,
@@ -310,22 +318,22 @@ const W = (param)=>{
                             desktop: 32
                         } : 0,
                         children: [
-                            s,
-                            !i && e
+                            h,
+                            !d && e
                         ]
                     })
                 })
             }),
-            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                className: n ? _headercssmistica.hideOnDesktop : "",
+            d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                className: a ? _headercssmistica.hideOnDesktop : "",
                 backgroundColor: `linear-gradient(to bottom, ${_skincontractcssmistica.vars.colors.backgroundBrandBottom} 40px, ${_skincontractcssmistica.vars.colors.background} 0%)`,
                 children: e
             })
         ]
     }));
-}, _ = (param)=>{
-    let { variant: a = "default", children: r, dataAttributes: o } = param;
-    const e = a === "brand";
+}, dt = (param)=>{
+    let { variant: n = "default", children: r, dataAttributes: o } = param;
+    const e = n === "brand";
     return (0, _overscrollcolorcontext.useSetOverscrollColor)(e ? {
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop
     } : {}), /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {

package/dist/hero.css-mistica.js

@@ -28,10 +28,10 @@ _export(exports, {
         return o;
     },
     get expandedContent () {
-        return y;
+        return i;
     },
     get flexColumn () {
-        return i;
+        return y;
     },
     get hero () {
         return n;
@@ -44,5 +44,5 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                */ var r = {
-    height: "var(--v17_3_16rbpto0)"
-}, n = "v17_3_16rbpto1 v17_3_1y2v1nfse", t = "v17_3_16rbpto3 v17_3_16rbpto2 v17_3_1y2v1nfra", o = "v17_3_16rbpto4 v17_3_1y2v1nfse v17_3_1y2v1nfra v17_3_1y2v1nfrm v17_3_1y2v1nfrg", a = "v17_3_16rbpto5", e = "v17_3_16rbpto6 v17_3_1y2v1nfrg", p = "v17_3_16rbpto7 v17_3_1y2v1nfrp v17_3_1y2v1nfse", b = "v17_3_16rbpto9 v17_3_16rbpto8 v17_3_1y2v1nfra v17_3_1y2v1nfrw v17_3_1y2v1nfrq", f = "v17_3_16rbptoa", y = "v17_3_16rbptob", i = "v17_3_16rbptoc v17_3_1y2v1nfra v17_3_1y2v1nfrg";
+    height: "var(--v17_5_16rbpto0)"
+}, n = "v17_5_16rbpto1 v17_5_1y2v1nfsi", t = "v17_5_16rbpto3 v17_5_16rbpto2 v17_5_1y2v1nfre", o = "v17_5_16rbpto4 v17_5_1y2v1nfsi v17_5_1y2v1nfre v17_5_1y2v1nfrq v17_5_1y2v1nfrk", a = "v17_5_16rbpto5", e = "v17_5_16rbpto6 v17_5_1y2v1nfrk", p = "v17_5_16rbpto7 v17_5_1y2v1nfrt v17_5_1y2v1nfsi", b = "v17_5_16rbpto9 v17_5_16rbpto8 v17_5_1y2v1nfre v17_5_1y2v1nfs0 v17_5_1y2v1nfru", f = "v17_5_16rbptoa", i = "v17_5_16rbptob", y = "v17_5_16rbptoc v17_5_1y2v1nfre v17_5_1y2v1nfrk";

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

@@ -16,4 +16,4 @@ _export(exports, {
         return l;
     }
 });
-/* empty css                                     */ /* empty css                                             */ /* empty css                                             */ var l = "v17_3_1gl3gmv1 v17_3_1gl3gmv0 v17_3_1y2v1nfra", o = "v17_3_1gl3gmv2";
+/* empty css                                     */ /* empty css                                             */ /* empty css                                             */ var l = "v17_5_1gl3gmv1 v17_5_1gl3gmv0 v17_5_1y2v1nfre", o = "v17_5_1gl3gmv2";

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

@@ -59,63 +59,63 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                       */ var _ = {
-    "brand-solid-default": "v17_3_yqt1oe4",
-    "brand-solid-brand": "v17_3_yqt1oe5",
-    "brand-solid-negative": "v17_3_yqt1oe6",
-    "brand-solid-alternative": "v17_3_yqt1oe7",
-    "brand-soft-default": "v17_3_yqt1oe8",
-    "brand-soft-brand": "v17_3_yqt1oe9",
-    "brand-soft-negative": "v17_3_yqt1oea",
-    "brand-soft-alternative": "v17_3_yqt1oeb",
-    "brand-transparent-default": "v17_3_yqt1oec",
-    "brand-transparent-brand": "v17_3_yqt1oed",
-    "brand-transparent-negative": "v17_3_yqt1oee",
-    "brand-transparent-alternative": "v17_3_yqt1oef",
-    "neutral-solid-default": "v17_3_yqt1oeg",
-    "neutral-solid-brand": "v17_3_yqt1oeh",
-    "neutral-solid-negative": "v17_3_yqt1oei",
-    "neutral-solid-alternative": "v17_3_yqt1oej",
-    "neutral-soft-default": "v17_3_yqt1oek",
-    "neutral-soft-brand": "v17_3_yqt1oel",
-    "neutral-soft-negative": "v17_3_yqt1oem",
-    "neutral-soft-alternative": "v17_3_yqt1oen",
-    "neutral-transparent-default": "v17_3_yqt1oeo",
-    "neutral-transparent-brand": "v17_3_yqt1oep",
-    "neutral-transparent-negative": "v17_3_yqt1oeq",
-    "neutral-transparent-alternative": "v17_3_yqt1oer",
-    "danger-solid-default": "v17_3_yqt1oes",
-    "danger-solid-brand": "v17_3_yqt1oet",
-    "danger-solid-negative": "v17_3_yqt1oeu",
-    "danger-solid-alternative": "v17_3_yqt1oev",
-    "danger-soft-default": "v17_3_yqt1oew",
-    "danger-soft-brand": "v17_3_yqt1oex",
-    "danger-soft-negative": "v17_3_yqt1oey",
-    "danger-soft-alternative": "v17_3_yqt1oez",
-    "danger-transparent-default": "v17_3_yqt1oe10",
-    "danger-transparent-brand": "v17_3_yqt1oe11",
-    "danger-transparent-negative": "v17_3_yqt1oe12",
-    "danger-transparent-alternative": "v17_3_yqt1oe13",
-    "brand-media": "v17_3_yqt1oe14",
-    "neutral-media": "v17_3_yqt1oe15",
-    "danger-media": "v17_3_yqt1oe16"
-}, a = "v17_3_yqt1oe17", v = "v17_3_yqt1oe18", n = "v17_3_yqt1oe19", r = {
+    "brand-solid-default": "v17_5_yqt1oe4",
+    "brand-solid-brand": "v17_5_yqt1oe5",
+    "brand-solid-negative": "v17_5_yqt1oe6",
+    "brand-solid-alternative": "v17_5_yqt1oe7",
+    "brand-soft-default": "v17_5_yqt1oe8",
+    "brand-soft-brand": "v17_5_yqt1oe9",
+    "brand-soft-negative": "v17_5_yqt1oea",
+    "brand-soft-alternative": "v17_5_yqt1oeb",
+    "brand-transparent-default": "v17_5_yqt1oec",
+    "brand-transparent-brand": "v17_5_yqt1oed",
+    "brand-transparent-negative": "v17_5_yqt1oee",
+    "brand-transparent-alternative": "v17_5_yqt1oef",
+    "neutral-solid-default": "v17_5_yqt1oeg",
+    "neutral-solid-brand": "v17_5_yqt1oeh",
+    "neutral-solid-negative": "v17_5_yqt1oei",
+    "neutral-solid-alternative": "v17_5_yqt1oej",
+    "neutral-soft-default": "v17_5_yqt1oek",
+    "neutral-soft-brand": "v17_5_yqt1oel",
+    "neutral-soft-negative": "v17_5_yqt1oem",
+    "neutral-soft-alternative": "v17_5_yqt1oen",
+    "neutral-transparent-default": "v17_5_yqt1oeo",
+    "neutral-transparent-brand": "v17_5_yqt1oep",
+    "neutral-transparent-negative": "v17_5_yqt1oeq",
+    "neutral-transparent-alternative": "v17_5_yqt1oer",
+    "danger-solid-default": "v17_5_yqt1oes",
+    "danger-solid-brand": "v17_5_yqt1oet",
+    "danger-solid-negative": "v17_5_yqt1oeu",
+    "danger-solid-alternative": "v17_5_yqt1oev",
+    "danger-soft-default": "v17_5_yqt1oew",
+    "danger-soft-brand": "v17_5_yqt1oex",
+    "danger-soft-negative": "v17_5_yqt1oey",
+    "danger-soft-alternative": "v17_5_yqt1oez",
+    "danger-transparent-default": "v17_5_yqt1oe10",
+    "danger-transparent-brand": "v17_5_yqt1oe11",
+    "danger-transparent-negative": "v17_5_yqt1oe12",
+    "danger-transparent-alternative": "v17_5_yqt1oe13",
+    "brand-media": "v17_5_yqt1oe14",
+    "neutral-media": "v17_5_yqt1oe15",
+    "danger-media": "v17_5_yqt1oe16"
+}, a = "v17_5_yqt1oe17", v = "v17_5_yqt1oe18", n = "v17_5_yqt1oe19", r = {
     default: "1.5rem",
     small: "1.25rem"
 }, o = {
     small: "calc(1.25rem + 12px)"
-}, y = "v17_3_yqt1oe1a v17_3_1y2v1nfh3 v17_3_1y2v1nfic v17_3_1y2v1nfjl v17_3_1y2v1nfku v17_3_1y2v1nfts v17_3_1y2v1nfh2 v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj", d = {
-    default: "v17_3_yqt1oe1c v17_3_yqt1oe1b",
-    small: "v17_3_yqt1oe1d v17_3_yqt1oe1b"
-}, l = "v17_3_yqt1oe1f", q = {
-    default: "v17_3_yqt1oe1g",
-    small: "v17_3_yqt1oe1h"
+}, y = "v17_5_yqt1oe1a v17_5_1y2v1nfh7 v17_5_1y2v1nfig v17_5_1y2v1nfjp v17_5_1y2v1nfky v17_5_1y2v1nftw v17_5_1y2v1nfh6 v17_5_1y2v1nfre v17_5_1y2v1nfrt v17_5_1y2v1nfrn", d = {
+    default: "v17_5_yqt1oe1c v17_5_yqt1oe1b",
+    small: "v17_5_yqt1oe1d v17_5_yqt1oe1b"
+}, l = "v17_5_yqt1oe1f", q = {
+    default: "v17_5_yqt1oe1g",
+    small: "v17_5_yqt1oe1h"
 }, i = {
-    default: "v17_3_yqt1oe1i",
-    small: "v17_3_yqt1oe1j"
+    default: "v17_5_yqt1oe1i",
+    small: "v17_5_yqt1oe1j"
 }, f = {
-    default: "v17_3_yqt1oe1k",
-    small: "v17_3_yqt1oe1l"
+    default: "v17_5_yqt1oe1k",
+    small: "v17_5_yqt1oe1l"
 }, s = {
-    default: "v17_3_yqt1oe1o v17_3_yqt1oe1n v17_3_yqt1oe1m v17_3_1y2v1nftu v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj v17_3_1y2v1nfue v17_3_1y2v1nfr4",
-    small: "v17_3_yqt1oe1p v17_3_yqt1oe1n v17_3_yqt1oe1m v17_3_1y2v1nftu v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj v17_3_1y2v1nfue v17_3_1y2v1nfr4"
-}, u = "v17_3_yqt1oe1q", b = "v17_3_yqt1oe1s v17_3_yqt1oe1r v17_3_1y2v1nfr4 v17_3_1y2v1nfrb", g = "v17_3_yqt1oe1u v17_3_yqt1oe1t v17_3_1y2v1nfr5";
+    default: "v17_5_yqt1oe1o v17_5_yqt1oe1n v17_5_yqt1oe1m v17_5_1y2v1nfty v17_5_1y2v1nfre v17_5_1y2v1nfrt v17_5_1y2v1nfrn v17_5_1y2v1nfui v17_5_1y2v1nfr8",
+    small: "v17_5_yqt1oe1p v17_5_yqt1oe1n v17_5_yqt1oe1m v17_5_1y2v1nfty v17_5_1y2v1nfre v17_5_1y2v1nfrt v17_5_1y2v1nfrn v17_5_1y2v1nfui v17_5_1y2v1nfr8"
+}, u = "v17_5_yqt1oe1q", b = "v17_5_yqt1oe1s v17_5_yqt1oe1r v17_5_1y2v1nfr8 v17_5_1y2v1nfrf", g = "v17_5_yqt1oe1u v17_5_yqt1oe1t v17_5_1y2v1nfr9";

package/dist/icons/icon-chevron.css-mistica.js

@@ -20,5 +20,5 @@ _export(exports, {
     }
 });
 /* empty css                                        */ var o = {
-    transitionDuration: "var(--v17_3_77bqcx0)"
-}, a = "v17_3_77bqcx1", v = "v17_3_77bqcx2";
+    transitionDuration: "var(--v17_5_77bqcx0)"
+}, a = "v17_5_77bqcx1", v = "v17_5_77bqcx2";

package/dist/icons/icon-error.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
         return a;
     }
 });
-/* empty css                                      */ var a = "v17_3_1ao3f5e1", i = "v17_3_1ao3f5e2";
+/* empty css                                      */ var a = "v17_5_1ao3f5e1", i = "v17_5_1ao3f5e2";

package/dist/image.css-mistica.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     get FADE_IN_DURATION_MS () {
-        return v;
+        return r;
     },
     get circularBorderRadius () {
         return e;
     },
     get defaultBorderRadius () {
-        return f;
+        return u;
     },
     get image () {
         return i;
@@ -28,12 +28,12 @@ _export(exports, {
         return t;
     },
     get withBorderRadius () {
-        return u;
+        return o;
     },
     get withoutBorderRadius () {
         return d;
     }
 });
-/* empty css                                     */ /* empty css                                 */ var v = 300, t = {
-    mediaBorderRadius: "var(--v17_3_17tt25r0)"
-}, a = "v17_3_17tt25r1", i = "v17_3_17tt25r3 v17_3_17tt25r2 v17_3_1y2v1nfuk v17_3_1y2v1nfuz v17_3_1y2v1nfrc v17_3_1y2v1nfrx v17_3_1y2v1nfse v17_3_1y2v1nfw8 v17_3_1y2v1nftp v17_3_1y2v1nftq v17_3_1y2v1nfu2", d = "v17_3_17tt25r4", e = "v17_3_17tt25r5", u = "v17_3_17tt25r6", f = "v17_3_17tt25r7";
+/* empty css                                     */ /* empty css                                 */ var r = 300, t = {
+    mediaBorderRadius: "var(--v17_5_17tt25r0)"
+}, a = "v17_5_17tt25r1", i = "v17_5_17tt25r3 v17_5_17tt25r2 v17_5_1y2v1nfuo v17_5_1y2v1nfv3 v17_5_1y2v1nfrg v17_5_1y2v1nfs1 v17_5_1y2v1nfsi v17_5_1y2v1nfwc v17_5_1y2v1nftt v17_5_1y2v1nftu v17_5_1y2v1nfu6", d = "v17_5_17tt25r4", e = "v17_5_17tt25r5", o = "v17_5_17tt25r6", u = "v17_5_17tt25r7";

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Touchable } from './touchable';
 export type { TouchableElement } from './touchable';
 export { default as Spinner } from './spinner';
 export { default as FadeIn } from './fade-in';
+export { default as FadeOut } from './fade-out';
 export { AccordionItem, BoxedAccordionItem, Accordion, BoxedAccordion } from './accordion';
 export { ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink, ButtonLinkDanger } from './button';
 export type { ButtonLinkType } from './button';
@@ -90,6 +91,11 @@ export { Grid, GridItem } from './grid';
 export { default as Drawer } from './drawer';
 export { default as Timeline, TimelineItem } from './timeline';
 export { default as SkipLink, SkipLinkNav } from './skip-link';
+export { SidenavBar } from './sidenav-bar';
+export { SidenavLayout } from './sidenav-bar-layout';
+export type { SidenavBarProps } from './sidenav-bar';
+export type { SidenavLayoutProps } from './sidenav-bar-layout';
+export type { SidenavEntry, SidenavSection, SidenavFirstLevelItem, SidenavSecondLevelItem, SidenavSectionTitle, SidenavSlot, SidenavSlotRenderProps, SidenavCollapseState, } from './sidenav-bar-types';
 export { default as SheetRoot, showSheet } from './sheet-root';
 export type { NativeSheetImplementation } from './sheet-types';
 export { default as Sheet, SheetBody } from './sheet-common';

package/dist/index.js

@@ -204,6 +204,9 @@ _export(exports, {
     get FadeIn () {
         return _fadein.default;
     },
+    get FadeOut () {
+        return _fadeout.default;
+    },
     get FeedbackScreen () {
         return _feedback.FeedbackScreen;
     },
@@ -6964,7 +6967,7 @@ _export(exports, {
         return _cardnaked.NakedCard;
     },
     get NavigationBar () {
-        return _navigationbar.NavigationBar;
+        return _navigationshared.NavigationBar;
     },
     get NavigationBarAction () {
         return _navigationbar.NavigationBarAction;
@@ -7062,6 +7065,12 @@ _export(exports, {
     get SheetRoot () {
         return _sheetroot.SheetRoot;
     },
+    get SidenavBar () {
+        return _sidenavbar.default;
+    },
+    get SidenavLayout () {
+        return _sidenavbarlayout.default;
+    },
     get SkeletonCircle () {
         return _skeletons.SkeletonCircle;
     },
@@ -7383,6 +7392,7 @@ const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./scre
 const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
 const _spinner = /*#__PURE__*/ _interop_require_default(require("./spinner.js"));
 const _fadein = /*#__PURE__*/ _interop_require_default(require("./fade-in.js"));
+const _fadeout = /*#__PURE__*/ _interop_require_default(require("./fade-out.js"));
 const _accordion = require("./accordion.js");
 const _button = require("./button.js");
 const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
@@ -7462,6 +7472,8 @@ const _grid = require("./grid.js");
 const _drawer = /*#__PURE__*/ _interop_require_default(require("./drawer.js"));
 const _timeline = /*#__PURE__*/ _interop_require_wildcard(require("./timeline.js"));
 const _skiplink = /*#__PURE__*/ _interop_require_wildcard(require("./skip-link.js"));
+const _sidenavbar = /*#__PURE__*/ _interop_require_default(require("./sidenav-bar.js"));
+const _sidenavbarlayout = /*#__PURE__*/ _interop_require_default(require("./sidenav-bar-layout.js"));
 const _sheetroot = require("./sheet-root.js");
 const _sheetcommon = /*#__PURE__*/ _interop_require_wildcard(require("./sheet-common.js"));
 const _form = /*#__PURE__*/ _interop_require_default(require("./form.js"));
@@ -9728,6 +9740,7 @@ const _iconworlddeviceregular = /*#__PURE__*/ _interop_require_default(require("
 const _iconwritingfilled = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-writing-filled.js"));
 const _iconwritinglight = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-writing-light.js"));
 const _iconwritingregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-writing-regular.js"));
+const _navigationshared = require("./navigation-shared.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj