@telefonica/mistica 13.5.0 → 13.6.0

package/dist/card.js

@@ -9,9 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DataCard: ()=>or,
-    MediaCard: ()=>nr,
-    SnapCard: ()=>sr
+    DataCard: ()=>zr,
+    DisplayDataCard: ()=>Gr,
+    DisplayMediaCard: ()=>Ir,
+    MediaCard: ()=>Rr,
+    SnapCard: ()=>Hr
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _tagJs = /*#__PURE__*/ _interopRequireDefault(require("./tag.js"));
@@ -27,6 +29,9 @@ const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js"
 const _cardCssMisticaJs = require("./card.css-mistica.js");
 const _hooksJs = require("./hooks.js");
 const _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+const _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
+const _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
+const _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -151,9 +156,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const M = (param)=>{
-    let { headline: e , pretitle: a , pretitleLinesMax: t , title: n , titleLinesMax: h , subtitle: d , subtitleLinesMax: u , description: s , descriptionLinesMax: l , extra: i , button: c , buttonLink: m  } = param;
-    const p = ()=>e ? typeof e == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
+const z = (param)=>{
+    let { headline: e , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: n , subtitle: l , subtitleLinesMax: p , description: c , descriptionLinesMax: s , extra: o , button: u , buttonLink: m  } = param;
+    const f = ()=>e ? typeof e == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_tagJs.default, {
             type: "promo",
             children: e
         }) : e : null;
@@ -170,87 +175,88 @@ const M = (param)=>{
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 8,
                         children: [
-                            (e || a || n || d) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
+                            (e || a || t || l) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                     space: 8,
                                     children: [
-                                        p(),
+                                        f(),
                                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                                             space: 4,
                                             children: [
-                                                a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
-                                                    truncate: t,
+                                                a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                    truncate: i,
                                                     as: "div",
                                                     regular: !0,
-                                                    transform: "uppercase",
                                                     children: a
                                                 }),
                                                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text4, {
-                                                    truncate: h,
-                                                    as: "h1",
+                                                    truncate: n,
+                                                    as: "h3",
                                                     regular: !0,
-                                                    children: n
+                                                    children: t
                                                 }),
                                                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                                    truncate: u,
+                                                    truncate: p,
                                                     as: "div",
                                                     regular: !0,
-                                                    children: d
+                                                    children: l
                                                 })
                                             ]
                                         })
                                     ]
                                 })
                             }),
-                            s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                truncate: l,
+                            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                truncate: s,
                                 as: "p",
                                 regular: !0,
                                 color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                                children: s
+                                children: c
                             })
                         ]
                     }),
-                    i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        children: i
+                    o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        children: o
                     })
                 ]
             }),
-            (c || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            (u || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _cardCssMisticaJs.actions,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                    primaryButton: c,
+                    primaryButton: u,
                     link: m
                 })
             })
         ]
     });
-}, S = (param)=>{
-    let { "aria-label": e , className: a , children: t  } = param;
+}, H = (param)=>{
+    let { "aria-label": e , className: a , style: i , children: t  } = param;
     return (0, _maybeDismissableJs.useIsDismissable)() ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: a,
+        style: i,
         children: t
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("section", {
         className: a,
+        style: i,
         "aria-label": e,
         children: t
     });
-}, nr = /*#__PURE__*/ _react.forwardRef((param, x)=>/* @__PURE__ */ {
-    let { media: e , headline: a , pretitle: t , pretitleLinesMax: n , subtitle: h , subtitleLinesMax: d , title: u , titleLinesMax: s , description: l , descriptionLinesMax: i , extra: c , button: m , buttonLink: p , dataAttributes: v , "aria-label": f , onClose: g  } = param;
+}, Rr = /*#__PURE__*/ _react.forwardRef((param, S)=>/* @__PURE__ */ {
+    let { media: e , headline: a , pretitle: i , pretitleLinesMax: t , subtitle: n , subtitleLinesMax: l , title: p , titleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: g , "aria-label": h , onClose: C  } = param;
     return (0, _jsxRuntimeJs.jsx)(_maybeDismissableJs.default, {
-        onClose: g,
-        "aria-label": f,
+        onClose: C,
+        "aria-label": h,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
             className: _cardCssMisticaJs.boxed,
             dataAttributes: _objectSpread({
                 "component-name": "MediaCard"
-            }, v),
-            ref: x,
+            }, g),
+            ref: S,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(S, {
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(H, {
                 className: _cardCssMisticaJs.mediaCard,
-                "aria-label": f,
+                "aria-label": h,
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
                         value: !1,
@@ -258,66 +264,66 @@ const M = (param)=>{
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                         className: _cardCssMisticaJs.mediaCardContent,
-                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(M, {
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(z, {
                             headline: a,
-                            pretitle: t,
-                            pretitleLinesMax: n,
-                            title: u,
-                            titleLinesMax: s,
-                            subtitle: h,
-                            subtitleLinesMax: d,
-                            description: l,
-                            descriptionLinesMax: i,
-                            extra: c,
+                            pretitle: i,
+                            pretitleLinesMax: t,
+                            title: p,
+                            titleLinesMax: c,
+                            subtitle: n,
+                            subtitleLinesMax: l,
+                            description: s,
+                            descriptionLinesMax: o,
+                            extra: u,
                             button: m,
-                            buttonLink: p
+                            buttonLink: f
                         })
                     })
                 ]
             })
         })
     });
-}), or = /*#__PURE__*/ _react.forwardRef((param, x)=>/* @__PURE__ */ {
-    let { icon: e , headline: a , pretitle: t , pretitleLinesMax: n , title: h , titleLinesMax: d , subtitle: u , subtitleLinesMax: s , description: l , descriptionLinesMax: i , extra: c , button: m , buttonLink: p , dataAttributes: v , "aria-label": f , onClose: g  } = param;
+}), zr = /*#__PURE__*/ _react.forwardRef((param, S)=>/* @__PURE__ */ {
+    let { icon: e , headline: a , pretitle: i , pretitleLinesMax: t , title: n , titleLinesMax: l , subtitle: p , subtitleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , buttonLink: f , dataAttributes: g , "aria-label": h , onClose: C  } = param;
     return (0, _jsxRuntimeJs.jsx)(_maybeDismissableJs.default, {
-        "aria-label": f,
-        onClose: g,
+        "aria-label": h,
+        onClose: C,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
             className: _cardCssMisticaJs.boxed,
             dataAttributes: _objectSpread({
                 "component-name": "DataCard"
-            }, v),
-            ref: x,
+            }, g),
+            ref: S,
             width: "100%",
             height: "100%",
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(S, {
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(H, {
                 className: _cardCssMisticaJs.dataCard,
-                "aria-label": f,
+                "aria-label": h,
                 children: [
                     e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingBottom: 16,
                         children: e
                     }),
-                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(M, {
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(z, {
                         headline: a,
-                        pretitle: t,
-                        pretitleLinesMax: n,
-                        title: h,
-                        titleLinesMax: d,
-                        subtitle: u,
-                        subtitleLinesMax: s,
-                        description: l,
-                        descriptionLinesMax: i,
-                        extra: c,
+                        pretitle: i,
+                        pretitleLinesMax: t,
+                        title: n,
+                        titleLinesMax: l,
+                        subtitle: p,
+                        subtitleLinesMax: c,
+                        description: s,
+                        descriptionLinesMax: o,
+                        extra: u,
                         button: m,
-                        buttonLink: p
+                        buttonLink: f
                     })
                 ]
             })
         })
     });
-}), sr = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
-    var { icon: e , title: a , titleLinesMax: t , subtitle: n , subtitleLinesMax: h , dataAttributes: d , "aria-label": u , extra: s , isInverse: l = !1  } = _param, i = _objectWithoutProperties(_param, [
+}), Hr = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
+    var { icon: e , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: n , dataAttributes: l , "aria-label": p , extra: c , isInverse: s = !1  } = _param, o = _objectWithoutProperties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -328,21 +334,21 @@ const M = (param)=>{
         "extra",
         "isInverse"
     ]);
-    const { isDarkMode: m  } = (0, _hooksJs.useTheme)(), p = Boolean(i.to || i.href || i.onPress);
+    const { isDarkMode: m  } = (0, _hooksJs.useTheme)(), f = Boolean(o.to || o.href || o.onPress);
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
         className: _cardCssMisticaJs.boxed,
         dataAttributes: _objectSpread({
             "component-name": "SnapCard"
-        }, d),
-        ref: c,
-        isInverse: l,
+        }, l),
+        ref: u,
+        isInverse: s,
         width: "100%",
         height: "100%",
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({
             maybe: !0
-        }, i), {
-            className: p && !l && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
-            "aria-label": u,
+        }, o), {
+            className: f && !s && !m ? _cardCssMisticaJs.snapCardTouchableHover : _cardCssMisticaJs.snapCardTouchableHoverTransparent,
+            "aria-label": p,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
                 className: _cardCssMisticaJs.snapCard,
                 children: [
@@ -356,27 +362,213 @@ const M = (param)=>{
                                 space: 4,
                                 children: [
                                     a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                        truncate: t,
-                                        as: "h1",
+                                        truncate: i,
+                                        as: "h3",
                                         regular: !0,
                                         children: a
                                     }),
-                                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                                        truncate: h,
+                                    t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                        truncate: n,
                                         regular: !0,
                                         color: _skinContractCssMisticaJs.vars.colors.textSecondary,
                                         as: "p",
-                                        children: n
+                                        children: t
                                     })
                                 ]
                             })
                         ]
                     }),
-                    s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        children: s
+                    c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        children: c
                     })
                 ]
             })
         }))
     });
+}), sr = (param)=>/* @__PURE__ */ {
+    let { actions: e , isInverse: a  } = param;
+    return (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
+        space: 0,
+        children: e.map((param, l)=>/* @__PURE__ */ {
+            let { onPress: i , label: t , Icon: n  } = param;
+            return (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+                size: 48,
+                onPress: i,
+                "aria-label": t,
+                className: _cardCssMisticaJs.cardActionIconButton,
+                style: {
+                    display: "flex"
+                },
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    className: a ? _cardCssMisticaJs.cardActionInverse : _cardCssMisticaJs.cardAction,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n, {
+                        color: _skinContractCssMisticaJs.vars.colors.neutralHigh,
+                        size: 20
+                    })
+                })
+            }, l);
+        })
+    });
+}, mr = {
+    "1:1": "1",
+    "16:9": "16 / 9",
+    "7:10": "7 / 10",
+    "9:10": "9 / 10",
+    auto: "auto"
+}, hr = (param)=>{
+    let { children: e , width: a = "100%" , height: i = "100%" , aspectRatio: t , actions: n , onClose: l , isInverse: p , "aria-label": c  } = param;
+    const { texts: s  } = (0, _hooksJs.useTheme)(), o = n ? [
+        ...n
+    ] : [];
+    l && o.push({
+        label: s.closeButtonLabel,
+        onPress: l,
+        Icon: _iconCloseRegularJs.default
+    });
+    const u = o.length > 0, m = t ? typeof t == "number" ? String(t) : mr[t] : void 0;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
+        "aria-label": c,
+        style: {
+            width: a,
+            height: i,
+            aspectRatio: m,
+            position: "relative"
+        },
+        children: [
+            e,
+            u && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                style: {
+                    position: "absolute",
+                    right: 8,
+                    top: 8
+                },
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(sr, {
+                    actions: o,
+                    isInverse: p
+                })
+            })
+        ]
+    });
+}, I = /*#__PURE__*/ _react.forwardRef((param, _)=>{
+    let { isInverse: e , backgroundImage: a , icon: i , headline: t , pretitle: n , pretitleLinesMax: l , title: p , titleLinesMax: c , description: s , descriptionLinesMax: o , extra: u , button: m , secondaryButton: f , onClose: g , actions: h , buttonLink: C , dataAttributes: S , width: G , height: j , aspectRatio: k , "aria-label": X  } = param;
+    const v = !!a, D = v ? "0 0 16px rgba(0,0,0,0.4)" : void 0, E = (h == null ? void 0 : h.length) || g;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(hr, {
+        width: G,
+        height: j,
+        aspectRatio: k,
+        onClose: g,
+        actions: h,
+        "aria-label": X,
+        isInverse: e,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.InternalBoxed, {
+            borderRadius: 16,
+            className: _cardCssMisticaJs.boxed,
+            dataAttributes: S,
+            ref: _,
+            width: "100%",
+            minHeight: "100%",
+            isInverse: e,
+            background: e && a ? _skinContractCssMisticaJs.vars.colors.backgroundContainer : void 0,
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+                className: _cardCssMisticaJs.displayCard,
+                style: {
+                    backgroundImage: a ? `url("${CSS.escape(a)}")` : void 0,
+                    paddingTop: v && !i && !E ? 0 : 24
+                },
+                children: [
+                    i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingBottom: v ? 0 : 40,
+                        paddingX: 24,
+                        children: i
+                    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingBottom: (h == null ? void 0 : h.length) || g ? v ? 24 : 64 : 0
+                    }),
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingX: 24,
+                        paddingTop: v ? 40 : 0,
+                        paddingBottom: 24,
+                        className: v ? _cardCssMisticaJs.displayCardGradient : void 0,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            space: 24,
+                            children: [
+                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                            space: 8,
+                                            children: [
+                                                (t || n || p) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
+                                                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                                        space: 16,
+                                                        children: [
+                                                            t,
+                                                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                                                space: 4,
+                                                                children: [
+                                                                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                                                        forceMobileSizes: !0,
+                                                                        truncate: l,
+                                                                        as: "div",
+                                                                        regular: !0,
+                                                                        textShadow: D,
+                                                                        children: n
+                                                                    }),
+                                                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
+                                                                        forceMobileSizes: !0,
+                                                                        truncate: c,
+                                                                        as: "h3",
+                                                                        textShadow: D,
+                                                                        children: p
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                }),
+                                                s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                                    forceMobileSizes: !0,
+                                                    truncate: o,
+                                                    as: "p",
+                                                    regular: !0,
+                                                    color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                                    textShadow: D,
+                                                    children: s
+                                                })
+                                            ]
+                                        }),
+                                        u
+                                    ]
+                                }),
+                                (m || f || C) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                                    primaryButton: m,
+                                    secondaryButton: f,
+                                    link: C
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        })
+    });
+}), Ir = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, a = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, a), {
+        ref: i,
+        isInverse: !0,
+        dataAttributes: _objectSpreadProps(_objectSpread({}, e), {
+            "component-name": "DisplayMediaCard"
+        })
+    }));
+}), Gr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
+    var { dataAttributes: e  } = _param, a = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxRuntimeJs.jsx)(I, _objectSpreadProps(_objectSpread({}, a), {
+        ref: i,
+        dataAttributes: _objectSpreadProps(_objectSpread({}, e), {
+            "component-name": "DisplayDataCard"
+        })
+    }));
 });

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/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/menu.css-mistica.js

@@ -9,18 +9,18 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    hideItems: ()=>v,
+    hideItems: ()=>r,
     menuContainer: ()=>_,
     showItems: ()=>a,
-    vars: ()=>t
+    vars: ()=>n
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./menu.css.ts.vanilla.js");
-var v = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5e _1y2v1nf2q _1y2v1nf9k", 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;