@telefonica/mistica 16.1.0 → 16.2.0

package/dist/community/advanced-data-card.js

@@ -11,16 +11,15 @@ function _export(target, all) {
 }
 _export(exports, {
     AdvancedDataCard: function() {
-        return Tr;
+        return Br;
     },
     default: function() {
-        return kr;
+        return Or;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _boxed = require("../boxed.js");
-const _sprinklescssmistica = require("../sprinkles.css-mistica.js");
 const _stack = /*#__PURE__*/ _interop_require_default(require("../stack.js"));
 const _advanceddatacardcssmistica = require("./advanced-data-card.css-mistica.js");
 const _imagecssmistica = require("../image.css-mistica.js");
@@ -160,20 +159,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const xr = (param)=>{
-    let { headline: a, pretitle: i, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: d = "h3", titleLinesMax: c, subtitle: l, subtitleLinesMax: o, description: t, descriptionLinesMax: h } = param;
+const Tr = (param)=>{
+    let { headline: a, pretitle: o, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: d = "h3", titleLinesMax: c, subtitle: l, subtitleLinesMax: i, description: e, descriptionLinesMax: h } = param;
     const { textPresets: x } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 4,
         children: [
             a,
-            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                 color: _skincontractcssmistica.vars.colors.textPrimary,
                 truncate: m,
                 as: s,
                 regular: !0,
                 hyphens: "auto",
-                children: i
+                children: o
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _text.textProps.text4), {
                 truncate: c,
@@ -184,25 +183,25 @@ const xr = (param)=>{
             })),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                 color: _skincontractcssmistica.vars.colors.textPrimary,
-                truncate: o,
+                truncate: i,
                 as: "p",
                 regular: !0,
                 hyphens: "auto",
                 children: l
             }),
-            t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                 truncate: h,
                 as: "p",
                 regular: !0,
                 color: _skincontractcssmistica.vars.colors.textSecondary,
                 hyphens: "auto",
-                children: t
+                children: e
             })
         ]
     });
-}, Cr = (param)=>{
-    let { button: a, footerImage: i, footerText: s, footerTextLinesMax: m, buttonLink: n } = param;
-    const d = !!a, c = !!i, l = !!s, o = !!n, t = d && (c || l) && o, h = o && !t ? "178px" : "";
+}, Ar = (param)=>{
+    let { button: a, footerImage: o, footerText: s, footerTextLinesMax: m, buttonLink: n } = param;
+    const d = !!a, c = !!o, l = !!s, i = !!n, e = d && (c || l) && i, h = i && !e ? "178px" : "";
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -210,28 +209,23 @@ const xr = (param)=>{
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[t ? "mobile" : "default"]),
+                className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[e ? "mobile" : "default"]),
                 children: [
                     d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_advanceddatacardcssmistica.marginRightButton, _advanceddatacardcssmistica.buttonMobile),
                         children: a
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, t ? _advanceddatacardcssmistica.marginRightAuto : (0, _sprinklescssmistica.sprinkles)({
-                            paddingTop: 16
-                        })),
+                        className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, e ? _advanceddatacardcssmistica.marginRightAuto : _advanceddatacardcssmistica.withPaddingTop),
                         children: [
                             c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingRight: 16,
-                                className: (0, _sprinklescssmistica.sprinkles)({
-                                    alignItems: "center",
-                                    display: "flex"
-                                }),
+                                className: _advanceddatacardcssmistica.footerImage,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     style: (0, _css.applyCssVars)({
                                         [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                     }),
-                                    children: i
+                                    children: o
                                 })
                             }),
                             l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -247,16 +241,16 @@ const xr = (param)=>{
                             })
                         ]
                     }),
-                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, t ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, e ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
                         children: n
                     })
                 ]
             })
         ]
     });
-}, Tr = /*#__PURE__*/ _react.forwardRef((_param, k)=>{
-    var { stackingGroup: a, headline: i, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: d, titleAs: c, titleLinesMax: l, subtitle: o, subtitleLinesMax: t, description: h, descriptionLinesMax: x, extra: p, extraDividerPadding: G = 24, noExtraDivider: M = !1, button: A, footerImage: B, footerText: b, footerTextLinesMax: V, buttonLink: R, dataAttributes: W, actions: v, "aria-label": w, onClose: D } = _param, f = _object_without_properties(_param, [
+}, Br = /*#__PURE__*/ _react.forwardRef((_param, W)=>{
+    var { stackingGroup: a, headline: o, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: d, titleAs: c, titleLinesMax: l, subtitle: i, subtitleLinesMax: e, description: h, descriptionLinesMax: x, extra: p, extraDividerPadding: E = 24, noExtraDivider: G = !1, button: T, footerImage: A, footerText: B, footerTextLinesMax: M, buttonLink: b, dataAttributes: V, actions: f, "aria-label": w, onClose: R } = _param, g = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",
@@ -282,20 +276,17 @@ const xr = (param)=>{
         "aria-label",
         "onClose"
     ]);
-    const C = !!f.href || !!f.onPress || !!f.to, z = {
-        button: A,
-        footerImage: B,
-        footerText: b,
-        footerTextLinesMax: V,
-        buttonLink: R
-    }, F = !!A || !!B || !!b || !!R, H = !!(p != null && p.length), O = ((v == null ? void 0 : v.length) || 0) + (D ? 1 : 0);
+    const C = !!g.href || !!g.onPress || !!g.to, z = {
+        button: T,
+        footerImage: A,
+        footerText: B,
+        footerTextLinesMax: M,
+        buttonLink: b
+    }, D = !!T || !!A || !!B || !!b, I = !!(p != null && p.length), O = ((f == null ? void 0 : f.length) || 0) + (R ? 1 : 0);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", _object_spread_props(_object_spread({
-        className: (0, _sprinklescssmistica.sprinkles)({
-            position: "relative",
-            height: "100%"
-        })
-    }, (0, _dom.getPrefixedDataAttributes)(W, "AdvancedDataCard")), {
-        ref: k,
+        className: _advanceddatacardcssmistica.container
+    }, (0, _dom.getPrefixedDataAttributes)(V, "AdvancedDataCard")), {
+        ref: W,
         "aria-label": C ? void 0 : w,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
@@ -306,7 +297,7 @@ const xr = (param)=>{
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.default, _object_spread_props(_object_spread({
                         maybe: !0
-                    }, f), {
+                    }, g), {
                         "aria-label": C ? w : void 0,
                         className: _advanceddatacardcssmistica.touchable,
                         children: [
@@ -314,7 +305,7 @@ const xr = (param)=>{
                                 className: _advanceddatacardcssmistica.touchableCardHoverOverlay
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !F && !H ? _advanceddatacardcssmistica.minHeight : ""),
+                                className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !D && !I ? _advanceddatacardcssmistica.minHeight : ""),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                     paddingTop: 8,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -324,16 +315,16 @@ const xr = (param)=>{
                                                 space: 8,
                                                 children: [
                                                     a,
-                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(xr, {
-                                                        headline: i,
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Tr, {
+                                                        headline: o,
                                                         pretitle: s,
                                                         pretitleAs: m,
                                                         pretitleLinesMax: n,
                                                         title: d,
                                                         titleAs: c,
                                                         titleLinesMax: l,
-                                                        subtitle: o,
-                                                        subtitleLinesMax: t,
+                                                        subtitle: i,
+                                                        subtitleLinesMax: e,
                                                         description: h,
                                                         descriptionLinesMax: x
                                                     })
@@ -354,33 +345,33 @@ const xr = (param)=>{
                                     flexGrow: 1
                                 }
                             }),
-                            H && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            I && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: 16,
                                 paddingBottom: 24,
                                 width: "100%",
                                 className: _advanceddatacardcssmistica.zindex,
-                                children: p.map((X, I)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                children: p.map((X, F)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                         children: [
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: _advanceddatacardcssmistica.paddingX,
                                                 children: X
                                             }),
-                                            I + 1 !== p.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                                paddingY: G,
-                                                children: !M && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                                            F + 1 !== p.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                                paddingY: E,
+                                                children: !G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                                             })
                                         ]
-                                    }, I))
+                                    }, F))
                             })
                         ]
                     })),
-                    F && /* @__PURE__ */ (0, _jsxruntime.jsx)(Cr, _object_spread({}, z))
+                    D && /* @__PURE__ */ (0, _jsxruntime.jsx)(Ar, _object_spread({}, z))
                 ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
-                actions: v,
-                onClose: D
+                actions: f,
+                onClose: R
             })
         ]
     }));
-}), kr = Tr;
+}), Or = Br;

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

@@ -10,35 +10,38 @@ function _export(target, all) {
 }
 _export(exports, {
     assetContainer: function() {
+        return v;
+    },
+    border: function() {
         return e;
     },
     container: function() {
         return n;
     },
     contentVariants: function() {
-        return v;
+        return f;
     },
     inverseBorder: function() {
-        return f;
+        return _;
     },
     largeImage: function() {
-        return _;
+        return o;
     },
     largeImageContainer: function() {
-        return o;
+        return t;
     },
     smallImage: function() {
-        return t;
+        return u;
     },
     vars: function() {
-        return u;
+        return i;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./empty-state.css.ts.vanilla.css-mistica.js");
-var e = "_13fzrua9 _1y2v1nfil _1y2v1nfj1", n = "_13fzrua2 _1y2v1nfhk _1y2v1nf7c", v = {
+var v = "_13fzrua9 _1y2v1nfil _1y2v1nfj1", e = "_1y2v1nfk1", n = "_13fzrua2 _1y2v1nfhk _1y2v1nf7c", f = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, f = "_13fzruac", _ = "_13fzrua7 _1y2v1nfio", o = "_13fzrua5", t = "_13fzruab _1y2v1nfhm", u = {
+}, _ = "_13fzruad", o = "_13fzrua7 _1y2v1nfio", t = "_13fzrua5", u = "_13fzruab _1y2v1nfhm", i = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/empty-state.css.d.ts

@@ -7,4 +7,5 @@ export declare const largeImageContainer: string;
 export declare const largeImage: string;
 export declare const assetContainer: string;
 export declare const smallImage: string;
+export declare const border: string;
 export declare const inverseBorder: string;

package/dist/empty-state.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return _;
+        return Z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -21,7 +21,6 @@ const _emptystatecssmistica = require("./empty-state.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _aspectratiosupport = require("./utils/aspect-ratio-support.js");
 const _dom = require("./utils/dom.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -81,8 +80,8 @@ function _object_spread_props(target, source) {
     return target;
 }
 const w = (param)=>{
-    let { title: c, titleAs: d = "h1", description: p, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, asset: m, "aria-label": g, dataAttributes: h } = param;
-    const { isDarkMode: u } = (0, _hooks.useTheme)(), t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), v = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+    let { title: l, titleAs: d = "h1", description: p, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, asset: m, "aria-label": h, dataAttributes: v } = param;
+    const { isDarkMode: g } = (0, _hooks.useTheme)(), t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), u = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
         className: _emptystatecssmistica.smallImage,
         alt: "",
         src: i
@@ -94,15 +93,13 @@ const w = (param)=>{
         link: f
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_emptystatecssmistica.container, t ? _emptystatecssmistica.inverseBorder : (0, _sprinklescssmistica.sprinkles)({
-            border: "regular"
-        })),
+        className: (0, _classnames.default)(_emptystatecssmistica.container, t ? _emptystatecssmistica.inverseBorder : _emptystatecssmistica.border),
         style: (0, _css.applyCssVars)({
-            [_emptystatecssmistica.vars.backgroundColor]: t && !u ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
+            [_emptystatecssmistica.vars.backgroundColor]: t && !g ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
         }),
-        "aria-label": g,
+        "aria-label": h,
         role: "region"
-    }, (0, _dom.getPrefixedDataAttributes)(h, "EmptyState")), {
+    }, (0, _dom.getPrefixedDataAttributes)(v, "EmptyState")), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
@@ -112,7 +109,7 @@ const w = (param)=>{
                     space: 24,
                     className: o ? _emptystatecssmistica.contentVariants.largeImage : _emptystatecssmistica.contentVariants.default,
                     children: [
-                        v !== null && v !== void 0 ? v : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        u !== null && u !== void 0 ? u : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _emptystatecssmistica.assetContainer,
                             children: m
                         }),
@@ -121,7 +118,7 @@ const w = (param)=>{
                             children: [
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
                                     as: d,
-                                    children: c
+                                    children: l
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                     regular: !0,
@@ -155,4 +152,4 @@ const w = (param)=>{
             })
         ]
     }));
-}, _ = w;
+}, Z = w;

package/dist/form.css-mistica.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "form", {
+    enumerable: true,
+    get: function() {
+        return o;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+var o = "_1y2v1nfi7";

package/dist/form.css.d.ts

@@ -0,0 +1 @@
+export declare const form: string;

package/dist/form.js

@@ -14,7 +14,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _hooks = require("./hooks.js");
 const _formcontext = require("./form-context.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _formcssmistica = require("./form.css-mistica.js");
 const _texttokens = require("./text-tokens.js");
 const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
 function _interop_require_default(obj) {
@@ -117,8 +117,8 @@ function _object_spread_props(target, source) {
 }
 process.env.NODE_ENV !== "test" && typeof document < "u" && !("scrollBehavior" in document.documentElement.style) && Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("scroll-behavior-polyfill"))).finally(()=>{});
 const X = (param)=>{
-    let { children: S, className: j, onSubmit: g, initialValues: E = {}, autoJump: O = !1, onValidationErrors: a, getErrorMessageForScreenReader: v, id: M } = param;
-    const f = _react.useRef(!0), [u, w] = _react.useState(E), [c, V] = _react.useState(E), [P, m] = _react.useState("filling"), [d, F] = _react.useState({}), l = _react.useRef(/* @__PURE__ */ new Map()), p = _react.useRef(null), { texts: b, t: h } = (0, _hooks.useTheme)(), T = _react.useId(), I = M || T;
+    let { children: S, className: j, onSubmit: k, initialValues: E = {}, autoJump: O = !1, onValidationErrors: a, getErrorMessageForScreenReader: v, id: M } = param;
+    const f = _react.useRef(!0), [u, V] = _react.useState(E), [c, w] = _react.useState(E), [P, m] = _react.useState("filling"), [d, F] = _react.useState({}), l = _react.useRef(/* @__PURE__ */ new Map()), p = _react.useRef(null), { texts: b, t: h } = (0, _hooks.useTheme)(), T = _react.useId(), I = M || T;
     _react.useEffect(()=>(f.current = !0, ()=>{
             f.current = !1;
         }), []);
@@ -187,21 +187,21 @@ const X = (param)=>{
             return (o = (r = l.current.get(s)) == null ? void 0 : r.input) != null && o.disabled ? t : _object_spread_props(_object_spread({}, t), {
                 [s]: e[s]
             });
-        }, {}), C = _react.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(y()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(g(x(u), x(c))).finally(()=>{
+        }, {}), C = _react.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(y()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(k(x(u), x(c))).finally(()=>{
             f.current && m("filling");
         })), [
-        g,
+        k,
         c,
         y,
         u
     ]), L = _react.useCallback((param)=>{
         let { name: e, value: t } = param;
-        w((s)=>_object_spread_props(_object_spread({}, s), {
+        V((s)=>_object_spread_props(_object_spread({}, s), {
                 [e]: t
             }));
     }, []), W = _react.useCallback((param)=>{
         let { name: e, value: t } = param;
-        V((s)=>_object_spread_props(_object_spread({}, s), {
+        w((s)=>_object_spread_props(_object_spread({}, s), {
                 [e]: t
             }));
     }, []), N = Object.entries(d).map((param)=>{
@@ -228,9 +228,7 @@ const X = (param)=>{
             id: I,
             onSubmit: C,
             ref: p,
-            className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
-                width: "100%"
-            }), j),
+            className: (0, _classnames.default)(_formcssmistica.form, j),
             noValidate: !0,
             children: [
                 _ ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {