@telefonica/mistica 13.4.0 → 13.6.0

package/dist/dialog.css-mistica.js

@@ -18,11 +18,11 @@ _export(exports, {
     modalContent: ()=>o,
     modalOpacityLayer: ()=>r,
     variants: ()=>t,
-    wrapper: ()=>e
+    wrapper: ()=>i
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./dialog.css.ts.vanilla.js");
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf69", l = "_3dl29lj _1y2v1nf62 _1y2v1nf8x", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf68 _1y2v1nf6m _1y2v1nf70 _1y2v1nf7e _1y2v1nf5c _1y2v1nf9o _1y2v1nfag", o = "_3dl29la _1y2v1nf2o _1y2v1nf9i", r = "_3dl29l5 _1y2v1nf5d _1y2v1nf5g _1y2v1nf5p _1y2v1nf5v _1y2v1nf5m _1y2v1nf9o _1y2v1nfag _1y2v1nfau _1y2v1nfa2 _1y2v1nf2r", t = {
-    dialog: "_3dl29ld _1y2v1nf5g _1y2v1nf5m _1y2v1nf5s _1y2v1nf71 _1y2v1nf7f _1y2v1nf6b _1y2v1nf6n",
-    default: "_3dl29ld _1y2v1nf5g _1y2v1nf5m _1y2v1nf5s _1y2v1nf69 _1y2v1nf6n _1y2v1nf71 _1y2v1nf7f"
-}, e = "_3dl29l3 _1y2v1nf5b";
+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";

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

@@ -10,6 +10,6 @@ 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 _1y2v1nf5g _1y2v1nf5l _1y2v1nf7n",
-    fullWidth: "skrulh2 _1y2v1nf5g _1y2v1nf5l _1y2v1nf7n"
+    default: "skrulh1 _1y2v1nf5i _1y2v1nf5n _1y2v1nf7p",
+    fullWidth: "skrulh2 _1y2v1nf5i _1y2v1nf5n _1y2v1nf7p"
 };

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

@@ -11,8 +11,8 @@ function _export(target, all) {
 _export(exports, {
     container: ()=>n,
     iconContainer: ()=>o,
-    image: ()=>i
+    image: ()=>v
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state-card.css.ts.vanilla.js");
-var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf7y _1y2v1nf8d", i = "_1azor6p2 _1y2v1nf5i _1y2v1nf8f";
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf80 _1y2v1nf8f", v = "_1azor6p2 _1y2v1nf5k _1y2v1nf8h";

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

@@ -10,9 +10,9 @@ function _export(target, all) {
 }
 _export(exports, {
     container: ()=>n,
-    contentVariants: ()=>f,
-    iconContainer: ()=>v,
-    inverseBorder: ()=>e,
+    contentVariants: ()=>v,
+    iconContainer: ()=>e,
+    inverseBorder: ()=>f,
     largeImage: ()=>_,
     largeImageContainer: ()=>o,
     smallImage: ()=>u,
@@ -20,9 +20,9 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state.css.ts.vanilla.js");
-var n = "_13fzrua2 _1y2v1nf5g _1y2v1nf5a", f = {
+var n = "_13fzrua2 _1y2v1nf5i _1y2v1nf5c", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, v = "_13fzrua9 _1y2v1nf80 _1y2v1nf8f", e = "_13fzruac", _ = "_13fzrua7 _1y2v1nf83", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5i", t = {
+}, e = "_13fzrua9 _1y2v1nf82 _1y2v1nf8h", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf85", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5k", t = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/feedback.css-mistica.js

@@ -13,10 +13,10 @@ _export(exports, {
     desktopContainer: ()=>r,
     desktopContent: ()=>t,
     feedbackData: ()=>v,
-    feedbackDataAppear: ()=>f,
-    feedbackDataAppearActive: ()=>o,
-    innerContainer: ()=>p
+    feedbackDataAppear: ()=>p,
+    feedbackDataAppearActive: ()=>f,
+    innerContainer: ()=>i
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./feedback.css.ts.vanilla.js");
-var n = "gx6h6a3 _1y2v1nf5g _1y2v1nf83 _1y2v1nf7n", r = "_1y2v1nf9j _1y2v1nf5g _1y2v1nf5s", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
+var n = "gx6h6a3 _1y2v1nf5i _1y2v1nf85 _1y2v1nf7p", r = "_1y2v1nf9l _1y2v1nf5i _1y2v1nf5u", t = "gx6h6a1", v = "gx6h6a7", p = "gx6h6a5", f = "gx6h6a6", i = "gx6h6a4";

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

@@ -18,7 +18,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./fixed-footer-layout.css.ts.vanilla.js");
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf2p", j = "p5j8j54", t = "p5j8j53 _1y2v1nf7n _1y2v1nf2o", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf2q", j = "p5j8j54", t = "p5j8j53 _1y2v1nf7p _1y2v1nf2p", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nf5f";
+}, p = "_1y2v1nf5h";

package/dist/hero.css-mistica.js

@@ -9,16 +9,16 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    actions: ()=>t,
+    actions: ()=>v,
     container: ()=>n,
     containerDesktop: ()=>a,
-    containerMobile: ()=>_,
-    layout: ()=>i,
+    containerMobile: ()=>i,
+    layout: ()=>_,
     vars: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
 require("./hero.css.ts.vanilla.js");
-var t = "_16rbpto6 _1y2v1nf5g _1y2v1nf62 _1y2v1nf5w", n = "_16rbpto2 _1y2v1nf5g", a = "_1y2v1nf5v _1y2v1nf83", _ = "_1y2v1nf5m", i = "_16rbpto7", p = {
+var v = "_16rbpto6 _1y2v1nf5i _1y2v1nf64 _1y2v1nf5y", n = "_16rbpto2 _1y2v1nf5i", a = "_1y2v1nf5x _1y2v1nf85", i = "_1y2v1nf5o", _ = "_16rbpto7", p = {
     height: "var(--_16rbpto0)"
 };

package/dist/hero.js

@@ -213,7 +213,7 @@ const k = (param)=>/* @__PURE__ */ {
     default: _skinContractCssMisticaJs.vars.colors.background,
     alternative: _skinContractCssMisticaJs.vars.colors.backgroundAlternative,
     brand: _skinContractCssMisticaJs.vars.colors.backgroundBrand,
-    "brand-secondary": _skinContractCssMisticaJs.vars.colors.backgroundBrand
+    "brand-secondary": _skinContractCssMisticaJs.vars.colors.backgroundBrandSecondary
 }, er = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
     var { height: e , background: o = "default" , media: a , desktopMediaPosition: i = "left" , dataAttributes: d  } = _param, n = _objectWithoutProperties(_param, [
         "height",

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

@@ -9,14 +9,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>y,
-    imageContent: ()=>f,
+    container: ()=>f,
+    imageContent: ()=>y,
     textContainerVariant: ()=>_,
     touchableContainer: ()=>r
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./highlighted-card.css.ts.vanilla.js");
-var y = "wrb8722 _1y2v1nf5g _1y2v1nf5l _1y2v1nf5s _1y2v1nf5y", f = "wrb8725 _1y2v1nf5g", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nf5g _1y2v1nf5m _1y2v1nf5u _1y2v1nf69 _1y2v1nf6n _1y2v1nf70",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nf5g _1y2v1nf5m _1y2v1nf5u _1y2v1nf69 _1y2v1nf6n _1y2v1nf70"
-}, r = "_1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5g _1y2v1nf5y _1y2v1nf9e _1y2v1nf7n _1y2v1nf5a";
+var f = "wrb8722 _1y2v1nf5i _1y2v1nf5n _1y2v1nf5u _1y2v1nf60", y = "wrb8725 _1y2v1nf5i", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nf5i _1y2v1nf5o _1y2v1nf5w _1y2v1nf6b _1y2v1nf6p _1y2v1nf72",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf5i _1y2v1nf5o _1y2v1nf5w _1y2v1nf6b _1y2v1nf6p _1y2v1nf72"
+}, r = "_1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5i _1y2v1nf60 _1y2v1nf9g _1y2v1nf7p _1y2v1nf5c";

package/dist/highlighted-card.js

@@ -156,7 +156,7 @@ const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
                 "aria-label": m ? void 0 : e["aria-label"],
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
-                        as: "h1",
+                        as: "h3",
                         regular: !0,
                         truncate: e.titleLinesMax,
                         children: a

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

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

package/dist/image.css-mistica.js

@@ -9,9 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    FADE_IN_DURATION_MS: ()=>n,
-    image: ()=>f
+    FADE_IN_DURATION_MS: ()=>f,
+    image: ()=>n
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./image.css.ts.vanilla.js");
-var n = 300, f = "_17tt25r1 _1y2v1nf9o _1y2v1nfa2 _1y2v1nf5i _1y2v1nf7n _1y2v1nf83 _1y2v1nfb8 _1y2v1nf9b _1y2v1nf9c";
+var f = 300, n = "_17tt25r1 _1y2v1nf9q _1y2v1nfa4 _1y2v1nf5k _1y2v1nf7p _1y2v1nf85 _1y2v1nfba _1y2v1nf9d _1y2v1nf9e";

package/dist/index.d.ts

@@ -50,7 +50,7 @@ export { default as Inline } from './inline';
 export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { default as ProgressBar } from './progress-bar';
-export { MediaCard, DataCard, SnapCard } from './card';
+export { MediaCard, DataCard, SnapCard, DisplayDataCard, DisplayMediaCard } from './card';
 export { default as Hero } from './hero';
 export { default as Divider } from './divider';
 export { default as Menu } from './menu';

package/dist/index.js

@@ -36,6 +36,8 @@ _export(exports, {
     DateField: ()=>_dateFieldJs.default,
     DateTimeField: ()=>_dateTimeFieldJs.default,
     DecimalField: ()=>_decimalFieldJs.default,
+    DisplayDataCard: ()=>_cardJs.DisplayDataCard,
+    DisplayMediaCard: ()=>_cardJs.DisplayMediaCard,
     Divider: ()=>_dividerJs.default,
     DoubleField: ()=>_doubleFieldJs.default,
     EmailField: ()=>_emailFieldJs.default,

package/dist/list.css-mistica.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     asset: ()=>_,
-    badge: ()=>y,
-    center: ()=>f,
-    content: ()=>a,
-    disabled: ()=>r,
-    dualActionContainer: ()=>e,
-    dualActionLeft: ()=>o,
-    dualActionRight: ()=>t,
+    badge: ()=>f,
+    center: ()=>y,
+    content: ()=>r,
+    disabled: ()=>a,
+    dualActionContainer: ()=>i,
+    dualActionLeft: ()=>t,
+    dualActionRight: ()=>o,
     hoverBackground: ()=>g,
-    pointer: ()=>i,
-    right: ()=>d,
-    rowBody: ()=>u,
-    rowContent: ()=>b
+    pointer: ()=>e,
+    right: ()=>b,
+    rowBody: ()=>c,
+    rowContent: ()=>d
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./list.css.ts.vanilla.js");
-var _ = "_1y2v1nf5g _1y2v1nf5y _1y2v1nf60", y = "_1y2v1nf5p _1y2v1nf8o _1y2v1nf83 _1y2v1nf5y", f = "_1y2v1nf5g _1y2v1nf5v", a = "_1y2v1nf5g _1y2v1nf7n _1y2v1nf99", r = "_2buj9g0", e = "_1y2v1nf5g _1y2v1nf5l", o = "_1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5i _1y2v1nf9e _1y2v1nf5a _1y2v1nf70 _1y2v1nf7e _1y2v1nf61", t = "_2buj9gi _1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5i _1y2v1nf9e _1y2v1nf5a _1y2v1nf70 _1y2v1nf7e _1y2v1nf5g _1y2v1nf5v _1y2v1nf60 _1y2v1nf7o", g = "_2buj9g1", i = "_1y2v1nf9l", d = "_2buj9gb", u = "_1y2v1nf5g _1y2v1nf5m _1y2v1nf62", b = "_1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf7n _1y2v1nf9e _1y2v1nf5a";
+var _ = "_1y2v1nf5i _1y2v1nf60 _1y2v1nf62", f = "_1y2v1nf5r _1y2v1nf8q _1y2v1nf85 _1y2v1nf60", y = "_1y2v1nf5i _1y2v1nf5x", r = "_1y2v1nf5i _1y2v1nf7p _1y2v1nf9b", a = "_2buj9g0", i = "_1y2v1nf5i _1y2v1nf5n", t = "_1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5k _1y2v1nf9g _1y2v1nf5c _1y2v1nf72 _1y2v1nf7g _1y2v1nf63", o = "_2buj9gi _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5k _1y2v1nf9g _1y2v1nf5c _1y2v1nf72 _1y2v1nf7g _1y2v1nf5i _1y2v1nf5x _1y2v1nf62 _1y2v1nf7q", g = "_2buj9g1", e = "_1y2v1nf9n", b = "_2buj9gb", c = "_1y2v1nf5i _1y2v1nf5o _1y2v1nf64", d = "_1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf7p _1y2v1nf9g _1y2v1nf5c";

package/dist/loading-bar.css-mistica.js

@@ -11,14 +11,14 @@ function _export(target, all) {
 _export(exports, {
     TRANSITION_DURATION_MS: ()=>r,
     enter: ()=>_,
-    enterActive: ()=>a,
-    exit: ()=>e,
+    enterActive: ()=>e,
+    exit: ()=>a,
     exitActive: ()=>f,
     innerProgress: ()=>y,
-    portal: ()=>g,
-    progress: ()=>t,
-    progressContainer: ()=>m
+    portal: ()=>t,
+    progress: ()=>g,
+    progressContainer: ()=>i
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./loading-bar.css.ts.vanilla.js");
-var r = 400, _ = "_1num3qg9", a = "_1num3qga", e = "_1num3qgb", f = "_1num3qgc", y = "_1num3qg8 _1y2v1nf83", g = "_1num3qg3 _1y2v1nf5d _1y2v1nf9o _1y2v1nfa2 _1y2v1nfag", t = "_1num3qg6 _1y2v1nf5c _1y2v1nf83 _1y2v1nf7n", m = "_1y2v1nf7n _1y2v1nf9m _1y2v1nf5b _1y2v1nf3o _1y2v1nf86";
+var r = 400, _ = "_1num3qg9", e = "_1num3qga", a = "_1num3qgb", f = "_1num3qgc", y = "_1num3qg8 _1y2v1nf85", t = "_1num3qg3 _1y2v1nf5f _1y2v1nf9q _1y2v1nfa4 _1y2v1nfai", g = "_1num3qg6 _1y2v1nf5e _1y2v1nf85 _1y2v1nf7p", i = "_1y2v1nf7p _1y2v1nf9o _1y2v1nf5d _1y2v1nf3q _1y2v1nf88";

package/dist/maybe-dismissable.css-mistica.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    dismissableButton: ()=>y,
-    dismissableCircleContainer: ()=>f,
-    dismissableContainer: ()=>_
+    dismissableButton: ()=>f,
+    dismissableCircleContainer: ()=>i,
+    dismissableContainer: ()=>y
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./maybe-dismissable.css.ts.vanilla.js");
-var y = "cim30m2 _1y2v1nf5c _1y2v1nf9o _1y2v1nfag _1y2v1nf7y _1y2v1nf8d _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p", f = "cim30m4 _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p _1y2v1nf7v _1y2v1nf8a _1y2v1nf9f", _ = "_1y2v1nf5b _1y2v1nf5g _1y2v1nf5y";
+var f = "cim30m2 _1y2v1nf5e _1y2v1nf9q _1y2v1nfai _1y2v1nf80 _1y2v1nf8f _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r", i = "cim30m4 _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf7x _1y2v1nf8c _1y2v1nf9h", y = "_1y2v1nf5d _1y2v1nf5i _1y2v1nf60";

package/dist/menu.css-mistica.js

@@ -9,18 +9,18 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    hideItems: ()=>k,
+    hideItems: ()=>r,
     menuContainer: ()=>_,
     showItems: ()=>a,
-    vars: ()=>t
+    vars: ()=>n
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./menu.css.ts.vanilla.js");
-var k = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5c _1y2v1nf2p _1y2v1nf9i", a = "_2k0k3u8", t = {
+var r = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf2q _1y2v1nf9k _1y2v1nf5i _1y2v1nf5o _1y2v1nf5e", a = "_2k0k3u8", n = {
     top: "var(--_2k0k3u0)",
     bottom: "var(--_2k0k3u1)",
-    right: "var(--_2k0k3u2)",
+    left: "var(--_2k0k3u2)",
     width: "var(--_2k0k3u3)",
-    transformOrigin: "var(--_2k0k3u4)",
-    maxHeight: "var(--_2k0k3u5)"
+    maxHeight: "var(--_2k0k3u4)",
+    transformOrigin: "var(--_2k0k3u5)"
 };

package/dist/menu.css.d.ts

@@ -1,10 +1,10 @@
 export declare const vars: {
     top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     bottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    right: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    left: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    transformOrigin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     maxHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    transformOrigin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const menuContainer: string;
 export declare const showItems: string;

package/dist/menu.js

@@ -4,16 +4,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>Y
+    get: ()=>rt
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
-const _dynamic = require("@vanilla-extract/dynamic");
 const _keyCodesJs = require("./utils/key-codes.js");
 const _domJs = require("./utils/dom.js");
 const _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
 const _menuCssMisticaJs = require("./menu.css-mistica.js");
-const _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+const _hooksJs = require("./hooks.js");
+const _portalJs = require("./portal.js");
+const _dynamic = require("@vanilla-extract/dynamic");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -111,102 +112,105 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const h = 416, Y = (param)=>{
-    let { renderTarget: I , renderMenu: b , width: l , position: d = "left" , dataAttributes: v  } = param;
-    const [t, i] = _react.useState(!1), [a, w] = _react.useState(null), [u, y] = _react.useState(null), [H, x] = _react.useState(!1), [r, c] = _react.useState(null);
+const J = 350, f = 400, v = 12, rt = (param)=>{
+    let { renderTarget: y , renderMenu: A , width: c = J , position: O = "left" , dataAttributes: P  } = param;
+    const [e, i] = _react.useState(!1), [a, M] = _react.useState(null), [u, C] = _react.useState(null), [T, w] = _react.useState(!1), [s, m] = _react.useState(null), p = (0, _hooksJs.useWindowSize)();
     _react.useEffect(()=>{
-        var M;
+        var I;
         const o = a == null ? void 0 : a.getBoundingClientRect();
-        if (!u || !o || !t) {
-            x(!1);
+        if (!u || !o || !e) {
+            w(!1);
             return;
         }
-        const n = 12, { top: f , width: O , height: C  } = o, m = f + C, P = (M = parseInt(window.getComputedStyle(u).getPropertyValue("height"))) != null ? M : 0, p = d === "left" ? "auto" : `calc(100% - ${O}px)`;
-        if (m + P + n > window.innerHeight) {
-            const T = window.innerHeight - m;
-            f > T ? c({
-                right: p,
-                bottom: "100%",
-                top: "auto",
-                maxHeight: Math.min(f, h),
-                transformOrigin: "center bottom"
-            }) : c({
-                top: "100%",
-                bottom: "auto",
-                right: p,
-                maxHeight: Math.min(window.innerHeight - m - n, h),
-                transformOrigin: "center top"
-            });
-        } else c({
-            top: "100%",
+        const { top: n , width: $ , left: E , bottom: d  } = o, g = (I = parseInt(window.getComputedStyle(u).getPropertyValue("height"))) != null ? I : 0, l = O === "left" ? E : E + $ - c, h = p.height - d - v, x = n - v, L = h > g, R = x > g;
+        L ? m({
+            left: l,
+            top: `${d}px`,
+            bottom: "auto",
+            maxHeight: f,
+            transformOrigin: "center top"
+        }) : R ? m({
+            left: l,
+            top: `${n - g}px`,
+            bottom: "auto",
+            maxHeight: f,
+            transformOrigin: "center bottom"
+        }) : h > x ? m({
+            left: l,
+            top: `${d}px`,
             bottom: "auto",
-            right: p,
-            maxHeight: Math.min(window.innerHeight - m - n, h),
+            maxHeight: Math.min(h, f),
             transformOrigin: "center top"
+        }) : m({
+            left: l,
+            top: "auto",
+            bottom: `${p.height - n}px`,
+            maxHeight: Math.min(x, f),
+            transformOrigin: "center bottom"
         });
-        let g;
-        return t && (g = requestAnimationFrame(()=>{
-            x(!0);
+        let S;
+        return e && (S = requestAnimationFrame(()=>{
+            w(!0);
         })), ()=>{
-            g && cancelAnimationFrame(g);
+            S && cancelAnimationFrame(S);
         };
     }, [
-        d,
-        t,
+        O,
+        e,
         u,
         a,
-        l
+        c,
+        p
     ]);
-    const A = _react.useMemo(()=>({
-            ref: w,
+    const D = _react.useMemo(()=>({
+            ref: M,
             onPress: ()=>{
-                i(!t);
+                i(!e);
             }
         }), [
-        w,
-        t,
+        M,
+        e,
         i
-    ]), E = _react.useMemo(()=>({
-            ref: y,
-            className: (0, _classnames.default)(_menuCssMisticaJs.menuContainer, H ? _menuCssMisticaJs.showItems : _menuCssMisticaJs.hideItems),
+    ]), F = _react.useMemo(()=>({
+            ref: C,
+            className: (0, _classnames.default)(_menuCssMisticaJs.menuContainer, T ? _menuCssMisticaJs.showItems : _menuCssMisticaJs.hideItems),
             close: ()=>{
                 i(!1);
             }
         }), [
-        H
+        T
     ]);
     return _react.useEffect(()=>{
         const o = (n)=>{
-            t && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && i(!1));
+            e && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && i(!1));
         };
         return document.addEventListener("keydown", o, !1), ()=>{
             document.removeEventListener("keydown", o, !1);
         };
-    }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
-        className: (0, _sprinklesCssMisticaJs.sprinkles)({
-            position: "relative"
-        }),
-        style: _objectSpread({}, (0, _dynamic.assignInlineVars)(_objectSpread({
-            [_menuCssMisticaJs.vars.width]: l ? `${l}px` : "100%"
-        }, r ? {
-            [_menuCssMisticaJs.vars.top]: r.top,
-            [_menuCssMisticaJs.vars.bottom]: r.bottom,
-            [_menuCssMisticaJs.vars.right]: r.right,
-            [_menuCssMisticaJs.vars.transformOrigin]: r.transformOrigin,
-            [_menuCssMisticaJs.vars.maxHeight]: `${r.maxHeight}px`
-        } : {})))
-    }, (0, _domJs.getPrefixedDataAttributes)(v, "Menu")), {
+    }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(P, "Menu")), {
         children: [
-            t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
-                onPress: (o)=>{
-                    (0, _domJs.cancelEvent)(o), i(!1);
-                },
-                disableScroll: !0
-            }) : null,
-            I(_objectSpreadProps(_objectSpread({}, A), {
-                isMenuOpen: t
+            y(_objectSpreadProps(_objectSpread({}, D), {
+                isMenuOpen: e
             })),
-            t ? b(E) : null
+            e ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_portalJs.Portal, {
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
+                    onPress: (o)=>{
+                        (0, _domJs.cancelEvent)(o), i(!1);
+                    },
+                    disableScroll: !0,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        style: _objectSpread({}, (0, _dynamic.assignInlineVars)(_objectSpread({}, s ? {
+                            [_menuCssMisticaJs.vars.top]: s.top,
+                            [_menuCssMisticaJs.vars.bottom]: s.bottom,
+                            [_menuCssMisticaJs.vars.left]: `${s.left}px`,
+                            [_menuCssMisticaJs.vars.transformOrigin]: s.transformOrigin,
+                            [_menuCssMisticaJs.vars.maxHeight]: `${s.maxHeight}px`,
+                            [_menuCssMisticaJs.vars.width]: `${c}px`
+                        } : {}))),
+                        children: A(F)
+                    })
+                })
+            }) : null
         ]
     }));
 };

package/dist/navigation-bar.css-mistica.js

@@ -22,24 +22,24 @@ _export(exports, {
     logoContainer: ()=>z,
     navbarBorderColorVariants: ()=>o,
     section: ()=>u,
-    selectedSectionVariantes: ()=>g,
+    selectedSectionVariantes: ()=>p,
     spacer: ()=>s,
-    textWrapperVariants: ()=>l,
-    topFixed: ()=>b
+    textWrapperVariants: ()=>x,
+    topFixed: ()=>g
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./navigation-bar.css.ts.vanilla.js");
-var y = "_1vcy5dz1 _1y2v1nf5b _1y2v1nf7v _1y2v1nf8a", _ = "_1vcy5dzr _1y2v1nf5d _1y2v1nf9y _1y2v1nfa2 _1y2v1nfag _1y2v1nf2o", e = "_1vcy5dzl", r = "_1vcy5dzm", f = "_1vcy5dzn", a = "_1vcy5dzo", c = {
-    default: "_1vcy5dzu _1y2v1nf1e",
-    inverse: "_1vcy5dzv _1y2v1nf1d"
-}, d = "_1vcy5dz4 _1vcy5dz3 _1y2v1nf5c", i = "_1vcy5dz5 _1vcy5dz3 _1y2v1nf5c", t = "_1vcy5dzw", z = "_1y2v1nf5g _1y2v1nf5p", o = {
-    default: "_1vcy5dza _1vcy5dz9 _1y2v1nf68 _1y2v1nf6m _1y2v1nf5g _1y2v1nf5v _1y2v1nf7n _1y2v1nf8h",
-    inverse: "_1vcy5dzb _1vcy5dz9 _1y2v1nf68 _1y2v1nf6m _1y2v1nf5g _1y2v1nf5v _1y2v1nf7n _1y2v1nf8h",
-    menuOpen: "_1vcy5dzc _1vcy5dz9 _1y2v1nf68 _1y2v1nf6m _1y2v1nf5g _1y2v1nf5v _1y2v1nf7n _1y2v1nf8h"
-}, u = "_1vcy5dze _1y2v1nf6y _1y2v1nf7c _1y2v1nf8h _1y2v1nf5g _1y2v1nf5v _1y2v1nf9e _1y2v1nf5a", g = {
+var y = "_1vcy5dz1 _1y2v1nf5d _1y2v1nf7x _1y2v1nf8c", _ = "_1vcy5dzr _1y2v1nf5f _1y2v1nfa0 _1y2v1nfa4 _1y2v1nfai _1y2v1nf2p", e = "_1vcy5dzl", r = "_1vcy5dzm", f = "_1vcy5dzn", a = "_1vcy5dzo", c = {
+    default: "_1vcy5dzu _1y2v1nf1f",
+    inverse: "_1vcy5dzv _1y2v1nf1e"
+}, d = "_1vcy5dz4 _1vcy5dz3 _1y2v1nf5e", i = "_1vcy5dz5 _1vcy5dz3 _1y2v1nf5e", t = "_1vcy5dzw", z = "_1y2v1nf5i _1y2v1nf5r", o = {
+    default: "_1vcy5dza _1vcy5dz9 _1y2v1nf6a _1y2v1nf6o _1y2v1nf5i _1y2v1nf5x _1y2v1nf7p _1y2v1nf8j",
+    inverse: "_1vcy5dzb _1vcy5dz9 _1y2v1nf6a _1y2v1nf6o _1y2v1nf5i _1y2v1nf5x _1y2v1nf7p _1y2v1nf8j",
+    menuOpen: "_1vcy5dzc _1vcy5dz9 _1y2v1nf6a _1y2v1nf6o _1y2v1nf5i _1y2v1nf5x _1y2v1nf7p _1y2v1nf8j"
+}, u = "_1vcy5dze _1y2v1nf70 _1y2v1nf7e _1y2v1nf8j _1y2v1nf5i _1y2v1nf5x _1y2v1nf9g _1y2v1nf5c", p = {
     default: "_1vcy5dzf",
     inverse: "_1vcy5dzg"
-}, s = "_1vcy5dzk _1y2v1nf8h", l = {
+}, s = "_1vcy5dzk _1y2v1nf8j", x = {
     default: "_1vcy5dzh",
     inverse: "_1vcy5dzi"
-}, b = "_1vcy5dz7 _1y2v1nf5d _1y2v1nf9o _1y2v1nfa2 _1y2v1nfag";
+}, g = "_1vcy5dz7 _1y2v1nf5f _1y2v1nf9q _1y2v1nfa4 _1y2v1nfai";

package/dist/navigation-breadcrumbs.css-mistica.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    current: ()=>r,
+    current: ()=>v,
     link: ()=>f,
     list: ()=>i,
     listItem: ()=>_
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./navigation-breadcrumbs.css.ts.vanilla.js");
-var r = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79", _ = "_1y2v1nf5j";
+var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b", _ = "_1y2v1nf5l";

package/dist/package-version.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
     enumerable: true,
     get: ()=>o
 });
-const o = "13.4.0";
+const o = "13.6.0";

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "shadow", {
     enumerable: true,
-    get: ()=>v
+    get: ()=>f
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./password-field.css.ts.vanilla.js");
-var v = "ptqylz1 _1y2v1nf66 _1y2v1nf6k _1y2v1nf6y _1y2v1nf7c _1y2v1nf9f _1y2v1nf5a";
+var f = "ptqylz1 _1y2v1nf68 _1y2v1nf6m _1y2v1nf70 _1y2v1nf7e _1y2v1nf9h _1y2v1nf5c";

package/dist/popover.css-mistica.js

@@ -9,19 +9,19 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    arrow: ()=>r,
-    arrowSize: ()=>t,
-    arrowWrapper: ()=>o,
-    closeButtonIcon: ()=>a,
-    container: ()=>_,
-    defaultPositionDesktop: ()=>f,
+    arrow: ()=>t,
+    arrowSize: ()=>r,
+    arrowWrapper: ()=>a,
+    closeButtonIcon: ()=>f,
+    container: ()=>o,
+    defaultPositionDesktop: ()=>_,
     defaultPositionMobile: ()=>i,
-    distanceToTarget: ()=>y,
-    marginLeftRightMobile: ()=>e,
+    distanceToTarget: ()=>e,
+    marginLeftRightMobile: ()=>y,
     maxWidthDesktop: ()=>g,
     textAlign: ()=>p,
-    textContent: ()=>c
+    textContent: ()=>u
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./popover.css.ts.vanilla.js");
-var r = "_12igu661 _1y2v1nf5c _1y2v1nf9o _1y2v1nf9d _1y2v1nf9g _1y2v1nf2p", t = 12, o = "_12igu663 _1y2v1nf5c _1y2v1nf2 _1y2v1nf9m", a = "_12igu669 _1y2v1nf5c _1y2v1nf9r _1y2v1nfaj", _ = "_12igu665 _1y2v1nf5c _1y2v1nf7o _1y2v1nf2p _1y2v1nf9d _1y2v1nf9i", f = "bottom", i = "top", y = 20, e = 16, g = 488, p = "_1y2v1nf5g _1y2v1nf5v _1y2v1nf83", c = "_12igu667";
+var t = "_12igu661 _1y2v1nf5e _1y2v1nf9q _1y2v1nf9f _1y2v1nf9i _1y2v1nf2q", r = 12, a = "_12igu663 _1y2v1nf5e _1y2v1nf2 _1y2v1nf9o", f = "_12igu669 _1y2v1nf5e _1y2v1nf9t _1y2v1nfal", o = "_12igu665 _1y2v1nf5e _1y2v1nf7q _1y2v1nf2q _1y2v1nf9f _1y2v1nf9k", _ = "bottom", i = "top", e = 20, y = 16, g = 488, p = "_1y2v1nf5i _1y2v1nf5x _1y2v1nf85", u = "_12igu667";