@telefonica/mistica 13.4.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/carousel.css-mistica.js

@@ -9,31 +9,31 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    bullet: ()=>a,
+    bullet: ()=>f,
     bulletActive: ()=>y,
     bulletActiveInverse: ()=>r,
-    bulletInverse: ()=>c,
+    bulletInverse: ()=>e,
     carousel: ()=>u,
-    carouselBullets: ()=>e,
+    carouselBullets: ()=>c,
     carouselContainer: ()=>b,
-    carouselItem: ()=>s,
+    carouselItem: ()=>o,
     carouselNextArrowButton: ()=>t,
-    carouselPrevArrowButton: ()=>o,
-    carouselWithScroll: ()=>l,
+    carouselPrevArrowButton: ()=>l,
+    carouselWithScroll: ()=>s,
     centeredCarousel: ()=>i,
-    slideshow: ()=>p,
+    slideshow: ()=>h,
     slideshowBullets: ()=>d,
-    slideshowContainer: ()=>g,
-    slideshowItem: ()=>m,
-    slideshowNextArrowButton: ()=>w,
-    slideshowPrevArrowButton: ()=>h,
+    slideshowContainer: ()=>m,
+    slideshowItem: ()=>w,
+    slideshowNextArrowButton: ()=>p,
+    slideshowPrevArrowButton: ()=>q,
     vars: ()=>x
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
 require("./grid-layout.css.ts.vanilla.js");
 require("./carousel.css.ts.vanilla.js");
-var a = "_1abcu71 _1y2v1nf7s _1y2v1nf87 _1y2v1nf9f _1y2v1nf3k", y = "_1abcu72 _1abcu71 _1y2v1nf7s _1y2v1nf87 _1y2v1nf9f _1y2v1nf3l", r = "_1abcu72 _1abcu71 _1y2v1nf7s _1y2v1nf87 _1y2v1nf9f _1y2v1nf40", c = "_1abcu75 _1abcu71 _1y2v1nf7s _1y2v1nf87 _1y2v1nf9f", u = "_1abcu7l _1abcu7b _1y2v1nf5g _1y2v1nf8i", e = "_1y2v1nf5g _1y2v1nf5p", b = "_1y2v1nf8u _1y2v1nf5b", s = "_1abcu7o", t = "_1abcu7s _1abcu7q _1abcu7d _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p _1y2v1nf9f _1y2v1nf2p _1y2v1nf7x _1y2v1nf8c _1y2v1nf9d _1y2v1nf5c", o = "_1abcu7r _1abcu7q _1abcu7d _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p _1y2v1nf9f _1y2v1nf2p _1y2v1nf7x _1y2v1nf8c _1y2v1nf9d _1y2v1nf5c", l = "_1abcu7m", i = "_1abcu7n", p = "_1abcu7v _1abcu7b _1y2v1nf5g _1y2v1nf8i", d = "_1abcu713 _1y2v1nf5c _1y2v1nfb0 _1y2v1nf5g _1y2v1nf5p _1y2v1nf7n", g = "_1y2v1nf5b", m = "_1abcu7x _1y2v1nf7n _1y2v1nf5y", w = "_1abcu711 _1abcu7q _1abcu7d _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p _1y2v1nf9f _1y2v1nf2p _1y2v1nf7x _1y2v1nf8c _1y2v1nf9d _1y2v1nf5c _1y2v1nfam", h = "_1abcu7z _1abcu7q _1abcu7d _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p _1y2v1nf9f _1y2v1nf2p _1y2v1nf7x _1y2v1nf8c _1y2v1nf9d _1y2v1nf5c _1y2v1nfa8", x = {
+var f = "_1abcu71 _1y2v1nf7u _1y2v1nf89 _1y2v1nf9h _1y2v1nf3m", y = "_1abcu72 _1abcu71 _1y2v1nf7u _1y2v1nf89 _1y2v1nf9h _1y2v1nf3n", r = "_1abcu72 _1abcu71 _1y2v1nf7u _1y2v1nf89 _1y2v1nf9h _1y2v1nf42", e = "_1abcu75 _1abcu71 _1y2v1nf7u _1y2v1nf89 _1y2v1nf9h", u = "_1abcu7l _1abcu7b _1y2v1nf5i _1y2v1nf8k", c = "_1y2v1nf5i _1y2v1nf5r", b = "_1y2v1nf8w _1y2v1nf5d", o = "_1abcu7o", t = "_1abcu7s _1abcu7q _1abcu7d _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h _1y2v1nf2q _1y2v1nf7z _1y2v1nf8e _1y2v1nf9f _1y2v1nf5e", l = "_1abcu7r _1abcu7q _1abcu7d _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h _1y2v1nf2q _1y2v1nf7z _1y2v1nf8e _1y2v1nf9f _1y2v1nf5e", s = "_1abcu7m", i = "_1abcu7n", h = "_1abcu7v _1abcu7b _1y2v1nf5i _1y2v1nf8k", d = "_1abcu713 _1y2v1nf5e _1y2v1nfb2 _1y2v1nf5i _1y2v1nf5r _1y2v1nf7p", m = "_1y2v1nf5d", w = "_1abcu7x _1y2v1nf7p _1y2v1nf60", p = "_1abcu711 _1abcu7q _1abcu7d _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h _1y2v1nf2q _1y2v1nf7z _1y2v1nf8e _1y2v1nf9f _1y2v1nf5e _1y2v1nfao", q = "_1abcu7z _1abcu7q _1abcu7d _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h _1y2v1nf2q _1y2v1nf7z _1y2v1nf8e _1y2v1nf9f _1y2v1nf5e _1y2v1nfaa", x = {
     itemsPerPageMobile: "var(--_1abcu7g)",
     itemsPerPageTablet: "var(--_1abcu7h)",
     itemsPerPageDesktop: "var(--_1abcu7i)",

package/dist/checkbox.css-mistica.js

@@ -9,16 +9,16 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    boxVariant: ()=>n,
-    check: ()=>y,
-    checkChecked: ()=>r,
-    checkboxContainer: ()=>f,
+    boxVariant: ()=>r,
+    check: ()=>n,
+    checkChecked: ()=>f,
+    checkboxContainer: ()=>y,
     disabled: ()=>b
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./checkbox.css.ts.vanilla.js");
-var n = {
-    ios: "_1rz9b14 _1rz9b13 _1y2v1nf5h _1y2v1nf5p _1y2v1nf5v _1y2v1nf5y _1y2v1nf9g _1y2v1nf2o",
-    rest: "_1rz9b15 _1rz9b13 _1y2v1nf5h _1y2v1nf5p _1y2v1nf5v _1y2v1nf5y _1y2v1nf9g _1y2v1nf2o",
-    checked: "_1rz9b16 _1rz9b13 _1y2v1nf5h _1y2v1nf5p _1y2v1nf5v _1y2v1nf5y _1y2v1nf9g _1y2v1nf2o"
-}, y = "_1rz9b18 _1y2v1nf5i", r = "_1rz9b19", f = "_1rz9b11 _1y2v1nf5j", b = "_1rz9b1a";
+var r = {
+    ios: "_1rz9b14 _1rz9b13 _1y2v1nf5j _1y2v1nf5r _1y2v1nf5x _1y2v1nf60 _1y2v1nf9i _1y2v1nf2p",
+    rest: "_1rz9b15 _1rz9b13 _1y2v1nf5j _1y2v1nf5r _1y2v1nf5x _1y2v1nf60 _1y2v1nf9i _1y2v1nf2p",
+    checked: "_1rz9b16 _1rz9b13 _1y2v1nf5j _1y2v1nf5r _1y2v1nf5x _1y2v1nf60 _1y2v1nf9i _1y2v1nf2p"
+}, n = "_1rz9b18 _1y2v1nf5k", f = "_1rz9b19", y = "_1rz9b11 _1y2v1nf5l", b = "_1rz9b1a";

package/dist/chip.css-mistica.js

@@ -11,7 +11,7 @@ function _export(target, all) {
 _export(exports, {
     chipInteractiveVariants: ()=>t,
     chipVariants: ()=>v,
-    icon: ()=>h,
+    icon: ()=>f,
     iconActive: ()=>a
 });
 require("./sprinkles.css.ts.vanilla.js");
@@ -20,6 +20,6 @@ var t = {
     light: "cc7htn8 cc7htn7",
     dark: "cc7htn9 cc7htn7"
 }, v = {
-    default: "cc7htn1 _1y2v1nf5h _1y2v1nf5p _1y2v1nf5v _1y2v1nf9d _1y2v1nf2p _1y2v1nf1n",
-    active: "cc7htn6 cc7htn2 cc7htn1 _1y2v1nf5h _1y2v1nf5p _1y2v1nf5v _1y2v1nf9d _1y2v1nfy _1y2v1nf4z"
-}, h = "cc7htna", a = "cc7htnb";
+    default: "cc7htn1 _1y2v1nf5j _1y2v1nf5r _1y2v1nf5x _1y2v1nf9f _1y2v1nf2q _1y2v1nf1o",
+    active: "cc7htn6 cc7htn2 cc7htn1 _1y2v1nf5j _1y2v1nf5r _1y2v1nf5x _1y2v1nf9f _1y2v1nfz _1y2v1nf51"
+}, f = "cc7htna", a = "cc7htnb";

package/dist/chip.css.d.ts

@@ -1,4 +1,4 @@
 export declare const chipVariants: Record<"default" | "active", string>;
-export declare const chipInteractiveVariants: Record<"dark" | "light", string>;
+export declare const chipInteractiveVariants: Record<"light" | "dark", string>;
 export declare const icon: string;
 export declare const iconActive: string;

package/dist/circle.css-mistica.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "circle", {
     enumerable: true,
-    get: ()=>y
+    get: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./circle.css.ts.vanilla.js");
-var y = "_1wpwyyp1 _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p _1y2v1nf9f";
+var p = "_1wpwyyp1 _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h";

package/dist/credit-card-number-field.css-mistica.js

@@ -16,7 +16,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./credit-card-number-field.css.ts.vanilla.js");
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5c", f = {
-    default: "yvyo3q4 _1y2v1nf5b yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf5b yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5e", f = {
+    default: "yvyo3q4 _1y2v1nf5d yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf5d yvyo3q6"
 };

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

@@ -9,9 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    cvvText: ()=>n,
-    tooltipContainer: ()=>o
+    cvvText: ()=>v,
+    tooltipContainer: ()=>i
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./cvv-field.css.ts.vanilla.js");
-var n = "_10ijton2 _1y2v1nf1n", o = "_1y2v1nf5g _1y2v1nf5v";
+var v = "_10ijton2 _1y2v1nf1o", i = "_1y2v1nf5i _1y2v1nf5x";