@telefonica/mistica 16.7.0 → 16.9.0

package/dist/community/blocks.js

@@ -44,7 +44,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const x = (param)=>{
+const g = (param)=>{
     let { title: o, description: e } = param;
     const l = typeof e == "string" ? [
         e
@@ -57,12 +57,12 @@ const x = (param)=>{
                 color: _skincontractcssmistica.vars.colors.textPrimary,
                 children: o
             }),
-            l && l.map((c, t)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            l && l.map((c, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     as: "p",
                     children: c
-                }, t))
+                }, i))
         ]
     });
 }, L = (param)=>{
@@ -91,35 +91,49 @@ const x = (param)=>{
         })
     });
 }, $ = (param)=>{
-    let { image: o, description: e, "aria-label": l } = param;
+    let { image: o, description: e, "aria-label": l, rightText: c } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         "aria-label": l,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-            space: 16,
+            space: "between",
             alignItems: "center",
             children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    style: (0, _css.applyCssVars)({
-                        [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
-                    }),
-                    children: o
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    space: 16,
+                    alignItems: "center",
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            style: (0, _css.applyCssVars)({
+                                [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
+                            }),
+                            children: o
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            children: e
+                        })
+                    ]
                 }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                    regular: !0,
-                    color: _skincontractcssmistica.vars.colors.textSecondary,
-                    children: e
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _blockscssmistica.rightContent,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        regular: !0,
+                        color: _skincontractcssmistica.vars.colors.textBrand,
+                        children: c
+                    })
                 })
             ]
         })
     });
 }, q = (param)=>{
-    let { title: o, description: e, secondaryValue: l, value: c, valueColor: t = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": d } = param;
+    let { title: o, description: e, secondaryValue: l, value: c, valueColor: i = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": d } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
         space: "between",
         alignItems: "flex-end",
         "aria-label": d,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(x, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
                 title: o,
                 description: e
             }),
@@ -133,7 +147,7 @@ const x = (param)=>{
                         children: l
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
-                        color: t,
+                        color: i,
                         children: c
                     })
                 ]
@@ -141,9 +155,9 @@ const x = (param)=>{
         ]
     });
 }, z = (param)=>{
-    let { headline: o, headings: e, title: l, description: c, "aria-label": t } = param;
+    let { headline: o, headings: e, title: l, description: c, "aria-label": i } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        "aria-label": t,
+        "aria-label": i,
         children: [
             o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingBottom: 24,
@@ -151,7 +165,7 @@ const x = (param)=>{
             }),
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                 space: 2,
-                children: e.map((d, u)=>/* @__PURE__ */ {
+                children: e.map((d, h)=>/* @__PURE__ */ {
                     var _d_valueColor;
                     return (0, _jsxruntime.jsxs)(_inline.default, {
                         space: 8,
@@ -167,12 +181,12 @@ const x = (param)=>{
                                 children: d.text
                             })
                         ]
-                    }, u);
+                    }, h);
                 })
             }),
             l || c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingTop: 8,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
                     title: l,
                     description: c
                 })
@@ -180,9 +194,9 @@ const x = (param)=>{
         ]
     });
 }, D = (param)=>{
-    let { title: o, value: e, description: l, valueColor: c = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": t } = param;
+    let { title: o, value: e, description: l, valueColor: c = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": i } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        "aria-label": t,
+        "aria-label": i,
         className: _blockscssmistica.column,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
@@ -194,15 +208,15 @@ const x = (param)=>{
                 color: c,
                 children: e
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(x, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
                 description: l
             })
         ]
     });
 }, E = (param)=>{
-    let { title: o, stackingGroup: e, progressPercent: l, reverse: c, heading: t, description: d, "aria-label": u } = param;
+    let { title: o, stackingGroup: e, progressPercent: l, reverse: c, heading: i, description: d, "aria-label": h } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        "aria-label": u,
+        "aria-label": h,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
             space: 8,
             children: [
@@ -230,13 +244,13 @@ const x = (param)=>{
                     alignItems: "baseline",
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                            color: t.valueColor || _skincontractcssmistica.vars.colors.textPrimary,
-                            children: t.value
+                            color: i.valueColor || _skincontractcssmistica.vars.colors.textPrimary,
+                            children: i.value
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                            children: t.text
+                            children: i.text
                         })
                     ]
                 }),

package/dist/community/example-component.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "example", {
     }
 });
 require("./example-component.css.ts.vanilla.css-mistica.js");
-var m = "v16_7_jbmjs60";
+var m = "v16_9_jbmjs60";

package/dist/counter.css-mistica.js

@@ -45,4 +45,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./counter.css.ts.vanilla.css-mistica.js");
-var n = "v16_7_rijsns8 v16_7_1y2v1nf7g v16_7_1y2v1nfk6 v16_7_1y2v1nfhj v16_7_1y2v1nfim v16_7_1y2v1nfj2", r = "v16_7_rijsnse v16_7_1y2v1nfil v16_7_1y2v1nfj1 v16_7_1y2v1nfhj v16_7_1y2v1nfkd v16_7_1y2v1nf6p", s = "v16_7_rijsns6", a = "v16_7_rijsns3 v16_7_1y2v1nfkd v16_7_1y2v1nf3s v16_7_1y2v1nfhp v16_7_1y2v1nfkp", i = "v16_7_rijsnsc v16_7_rijsnsa v16_7_1y2v1nfhj", t = "v16_7_rijsnsa v16_7_1y2v1nfhj", f = "v16_7_rijsns4", y = "v16_7_rijsns0", j = "v16_7_rijsns1", o = "v16_7_rijsnsb v16_7_rijsnsa v16_7_1y2v1nfhj", e = "v16_7_1y2v1nfhi v16_7_1y2v1nfho v16_7_1y2v1nfhx";
+var n = "v16_9_rijsns8 v16_9_1y2v1nf7g v16_9_1y2v1nfk6 v16_9_1y2v1nfhj v16_9_1y2v1nfim v16_9_1y2v1nfj2", r = "v16_9_rijsnse v16_9_1y2v1nfil v16_9_1y2v1nfj1 v16_9_1y2v1nfhj v16_9_1y2v1nfkd v16_9_1y2v1nf6p", s = "v16_9_rijsns6", a = "v16_9_rijsns3 v16_9_1y2v1nfkd v16_9_1y2v1nf3s v16_9_1y2v1nfhp v16_9_1y2v1nfkp", i = "v16_9_rijsnsc v16_9_rijsnsa v16_9_1y2v1nfhj", t = "v16_9_rijsnsa v16_9_1y2v1nfhj", f = "v16_9_rijsns4", y = "v16_9_rijsns0", j = "v16_9_rijsns1", o = "v16_9_rijsnsb v16_9_rijsnsa v16_9_1y2v1nfhj", e = "v16_9_1y2v1nfhi v16_9_1y2v1nfho v16_9_1y2v1nfhx";

package/dist/cover-hero.css-mistica.js

@@ -54,6 +54,6 @@ require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./grid-layout.css.ts.vanilla.css-mistica.js");
 require("./carousel.css.ts.vanilla.css-mistica.js");
 require("./cover-hero.css.ts.vanilla.css-mistica.js");
-var r = "v16_7_moeazi9 v16_7_1y2v1nfi3", e = "v16_7_moeazi2 v16_7_1y2v1nfhi v16_7_1y2v1nfho v16_7_1y2v1nfhu v16_7_1y2v1nfhx v16_7_1y2v1nfib v16_7_1y2v1nfkv v16_7_1y2v1nfm4", o = "v16_7_moeazi4 v16_7_1y2v1nfhi v16_7_1y2v1nfho v16_7_1y2v1nfib", y = "v16_7_1y2v1nfho v16_7_1y2v1nfhu", f = "v16_7_moeazi7", m = "v16_7_1y2v1nfhi", t = "v16_7_1y2v1nfhj v16_7_1y2v1nfmj v16_7_1y2v1nfib v16_7_1y2v1nfis", h = "v16_7_moeazic v16_7_1y2v1nfhj v16_7_1y2v1nfkv v16_7_1y2v1nfla v16_7_1y2v1nfib v16_7_1y2v1nfis", s = "v16_7_moeazi6", z = "v16_7_1y2v1nfhi", p = "v16_7_moeazie", c = {
-    aspectRatio: "var(--v16_7_moeazi0)"
-}, x = "v16_7_moeazi5";
+var r = "v16_9_moeazi9 v16_9_1y2v1nfi3", e = "v16_9_moeazi2 v16_9_1y2v1nfhi v16_9_1y2v1nfho v16_9_1y2v1nfhu v16_9_1y2v1nfhx v16_9_1y2v1nfib v16_9_1y2v1nfkv v16_9_1y2v1nfm4", o = "v16_9_moeazi4 v16_9_1y2v1nfhi v16_9_1y2v1nfho v16_9_1y2v1nfib", y = "v16_9_1y2v1nfho v16_9_1y2v1nfhu", f = "v16_9_moeazi7", m = "v16_9_1y2v1nfhi", t = "v16_9_1y2v1nfhj v16_9_1y2v1nfmj v16_9_1y2v1nfib v16_9_1y2v1nfis", h = "v16_9_moeazic v16_9_1y2v1nfhj v16_9_1y2v1nfkv v16_9_1y2v1nfla v16_9_1y2v1nfib v16_9_1y2v1nfis", s = "v16_9_moeazi6", z = "v16_9_1y2v1nfhi", p = "v16_9_moeazie", c = {
+    aspectRatio: "var(--v16_9_moeazi0)"
+}, x = "v16_9_moeazi5";

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

@@ -24,7 +24,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./credit-card-number-field.css.ts.vanilla.css-mistica.js");
-var y = "v16_7_yvyo3q0", f = "v16_7_yvyo3q5 v16_7_yvyo3q2 v16_7_1y2v1nfho v16_7_1y2v1nfi3 v16_7_1y2v1nfhx v16_7_1y2v1nfis", o = "v16_7_yvyo3q2 v16_7_1y2v1nfho v16_7_1y2v1nfi3 v16_7_1y2v1nfhx v16_7_1y2v1nfis v16_7_1y2v1nfhj", n = {
-    default: "v16_7_yvyo3q7 v16_7_1y2v1nfhi v16_7_yvyo3q8",
-    backface: "v16_7_yvyo3q7 v16_7_1y2v1nfhi v16_7_yvyo3q9"
+var y = "v16_9_yvyo3q0", f = "v16_9_yvyo3q5 v16_9_yvyo3q2 v16_9_1y2v1nfho v16_9_1y2v1nfi3 v16_9_1y2v1nfhx v16_9_1y2v1nfis", o = "v16_9_yvyo3q2 v16_9_1y2v1nfho v16_9_1y2v1nfi3 v16_9_1y2v1nfhx v16_9_1y2v1nfis v16_9_1y2v1nfhj", n = {
+    default: "v16_9_yvyo3q7 v16_9_1y2v1nfhi v16_9_yvyo3q8",
+    backface: "v16_9_yvyo3q7 v16_9_1y2v1nfhi v16_9_yvyo3q9"
 };

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

@@ -12,4 +12,4 @@ require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
 require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./date-field.css.ts.vanilla.css-mistica.js");
-var p = "v16_7_1pntndu0";
+var p = "v16_9_1pntndu0";

package/dist/date-time-picker.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "reactDatePicker", {
     }
 });
 require("./date-time-picker.css.ts.vanilla.css-mistica.js");
-var e = "v16_7_c0yqjy0";
+var e = "v16_9_c0yqjy0";

package/dist/dialog.css-mistica.js

@@ -45,7 +45,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./dialog.css.ts.vanilla.css-mistica.js");
-var n = 200, y = "v16_7_3dl29lb", f = "v16_7_3dl29l6", l = "v16_7_3dl29ll v16_7_1y2v1nf82", a = "v16_7_3dl29lj v16_7_1y2v1nfia v16_7_1y2v1nfjo", o = "v16_7_3dl29lm", d = "v16_7_3dl29l8 v16_7_1y2v1nf7w v16_7_1y2v1nf95 v16_7_1y2v1nfae v16_7_1y2v1nfbn v16_7_1y2v1nfhj v16_7_1y2v1nfkv v16_7_1y2v1nflp", r = "v16_7_3dl29la v16_7_1y2v1nf3r v16_7_1y2v1nfkf", t = "v16_7_3dl29l5 v16_7_1y2v1nfhk v16_7_1y2v1nfho v16_7_1y2v1nfhx v16_7_1y2v1nfi3 v16_7_1y2v1nfhu v16_7_1y2v1nfkv v16_7_1y2v1nflp v16_7_1y2v1nfm4 v16_7_1y2v1nfla v16_7_1y2v1nf43", i = {
-    dialog: "v16_7_3dl29ld v16_7_1y2v1nfho v16_7_1y2v1nfhu v16_7_1y2v1nfi0 v16_7_1y2v1nfak v16_7_1y2v1nfbt v16_7_1y2v1nf88 v16_7_1y2v1nf9b",
-    default: "v16_7_3dl29ld v16_7_1y2v1nfho v16_7_1y2v1nfhu v16_7_1y2v1nfi0 v16_7_1y2v1nf82 v16_7_1y2v1nf9b v16_7_1y2v1nfak v16_7_1y2v1nfbt"
-}, e = "v16_7_1y2v1nfhi";
+var n = 200, y = "v16_9_3dl29lb", f = "v16_9_3dl29l6", l = "v16_9_3dl29ll v16_9_1y2v1nf82", a = "v16_9_3dl29lj v16_9_1y2v1nfia v16_9_1y2v1nfjo", o = "v16_9_3dl29lm", d = "v16_9_3dl29l8 v16_9_1y2v1nf7w v16_9_1y2v1nf95 v16_9_1y2v1nfae v16_9_1y2v1nfbn v16_9_1y2v1nfhj v16_9_1y2v1nfkv v16_9_1y2v1nflp", r = "v16_9_3dl29la v16_9_1y2v1nf3r v16_9_1y2v1nfkf", t = "v16_9_3dl29l5 v16_9_1y2v1nfhk v16_9_1y2v1nfho v16_9_1y2v1nfhx v16_9_1y2v1nfi3 v16_9_1y2v1nfhu v16_9_1y2v1nfkv v16_9_1y2v1nflp v16_9_1y2v1nfm4 v16_9_1y2v1nfla v16_9_1y2v1nf43", i = {
+    dialog: "v16_9_3dl29ld v16_9_1y2v1nfho v16_9_1y2v1nfhu v16_9_1y2v1nfi0 v16_9_1y2v1nfak v16_9_1y2v1nfbt v16_9_1y2v1nf88 v16_9_1y2v1nf9b",
+    default: "v16_9_3dl29ld v16_9_1y2v1nfho v16_9_1y2v1nfhu v16_9_1y2v1nfi0 v16_9_1y2v1nf82 v16_9_1y2v1nf9b v16_9_1y2v1nfak v16_9_1y2v1nfbt"
+}, e = "v16_9_1y2v1nfhi";

package/dist/divider.css-mistica.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "variants", {
 });
 require("./divider.css.ts.vanilla.css-mistica.js");
 var t = {
-    default: "v16_7_o0dvt10",
-    inverse: "v16_7_o0dvt11"
+    default: "v16_9_o0dvt10",
+    inverse: "v16_9_o0dvt11"
 };

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

@@ -14,6 +14,6 @@ require("./text-field-base.css.ts.vanilla.css-mistica.js");
 require("./text-field-components.css.ts.vanilla.css-mistica.js");
 require("./double-field.css.ts.vanilla.css-mistica.js");
 var f = {
-    default: "v16_7_skrulh1 v16_7_1y2v1nfho v16_7_1y2v1nfht v16_7_1y2v1nfib",
-    fullWidth: "v16_7_skrulh2 v16_7_1y2v1nfho v16_7_1y2v1nfht v16_7_1y2v1nfib"
+    default: "v16_9_skrulh1 v16_9_1y2v1nfho v16_9_1y2v1nfht v16_9_1y2v1nfib",
+    fullWidth: "v16_9_skrulh2 v16_9_1y2v1nfho v16_9_1y2v1nfht v16_9_1y2v1nfib"
 };

package/dist/drawer.css-mistica.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ANIMATION_DURATION_MS: function() {
+        return n;
+    },
+    closeButtonContainer: function() {
+        return y;
+    },
+    closed: function() {
+        return f;
+    },
+    container: function() {
+        return r;
+    },
+    drawer: function() {
+        return a;
+    },
+    open: function() {
+        return o;
+    },
+    overlay: function() {
+        return e;
+    },
+    overlayClosed: function() {
+        return w;
+    },
+    overlayOpen: function() {
+        return l;
+    },
+    scrollableSection: function() {
+        return c;
+    },
+    titleContainer: function() {
+        return i;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./drawer.css.ts.vanilla.css-mistica.js");
+var n = 350, y = "v16_9_1y2v1nfhj v16_9_1y2v1nfky v16_9_1y2v1nfls", f = "v16_9_c4ngww9", r = "v16_9_c4ngww1 v16_9_1y2v1nfhk v16_9_1y2v1nfho v16_9_1y2v1nf3r v16_9_1y2v1nfkv v16_9_1y2v1nflp v16_9_1y2v1nfm4 v16_9_1y2v1nfkp", a = "v16_9_1y2v1nf88 v16_9_1y2v1nfho v16_9_1y2v1nfhu v16_9_1y2v1nfi9", o = "v16_9_c4ngww8", e = "v16_9_c4ngwwb v16_9_1y2v1nfhk v16_9_1y2v1nfkv v16_9_1y2v1nfla v16_9_1y2v1nflp v16_9_1y2v1nfm4 v16_9_1y2v1nf43", w = "v16_9_c4ngwwc", l = "v16_9_c4ngwwd", c = "v16_9_1y2v1nfi9 v16_9_1y2v1nfku", i = "v16_9_c4ngww5 v16_9_1y2v1nfi6 v16_9_1y2v1nfi8";

package/dist/drawer.css.d.ts

@@ -0,0 +1,11 @@
+export declare const ANIMATION_DURATION_MS = 350;
+export declare const container: string;
+export declare const drawer: string;
+export declare const titleContainer: string;
+export declare const scrollableSection: string;
+export declare const open: string;
+export declare const closed: string;
+export declare const overlay: string;
+export declare const overlayClosed: string;
+export declare const overlayOpen: string;
+export declare const closeButtonContainer: string;

package/dist/drawer.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return a;
+    }
+});
+const a = "";

package/dist/drawer.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { DataAttributes, HeadingType, TrackingEvent } from './utils/types';
+type ButtonProps = {
+    text: string;
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
+    onPress?: () => unknown;
+};
+type DrawerProps = {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    titleAs?: HeadingType;
+    dismissLabel?: string;
+    /**
+     * this handler is mandatory. You should unmount the Drawer component on close.
+     */
+    onClose: () => void;
+    /**
+     * set this handler to enable dismiss:
+     * - touching "X"
+     * - touching overlay
+     * - pressing ESC
+     */
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+    /**
+     * width is ignored in mobile viewport
+     */
+    width?: number;
+    button?: ButtonProps;
+    secondaryButton?: ButtonProps;
+    buttonLink?: ButtonProps;
+    dataAttributes?: DataAttributes;
+};
+declare const Drawer: ({ title, subtitle, description, titleAs, dismissLabel, width, onClose, onDismiss, children, button, secondaryButton, buttonLink, dataAttributes, }: DrawerProps) => JSX.Element;
+export default Drawer;