@telefonica/mistica 15.9.0 → 15.11.0

package/dist-es/cover-hero.js

@@ -0,0 +1,241 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import * as z from "react";
+import D from "./responsive-layout.js";
+import v from "./box.js";
+import I from "./button-group.js";
+import m from "./stack.js";
+import { Text3 as g, Text8 as q } from "./text.js";
+import { vars as i } from "./skins/skin-contract.css-mistica.js";
+import { mainContent as F, sixColumns as k, coverHeroContainer as J, minHeight as K, withAspectRatio as O, coverHero as Q, centered as U, hasSideExtra as W, sideExtra as X, vars as Y } from "./cover-hero.css-mistica.js";
+import x from "classnames";
+import { applyCssVars as Z } from "./utils/css.js";
+import { vars as _ } from "./image.css-mistica.js";
+import C from "./grid-layout.js";
+import { CoverHeroMedia as E } from "./cover-hero-media.js";
+import { getPrefixedDataAttributes as P } from "./utils/dom.js";
+const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
+        "1:1": 1,
+        "16:9": 16 / 9,
+        "7:10": 7 / 10,
+        "4:3": 9 / 10
+    })[e], rr = /*#__PURE__*/ z.forwardRef((_param, R)=>{
+    var { headline: e, pretitle: d, pretitleLinesMax: H, title: y, titleLinesMax: B, titleAs: N = "h1", description: u, descriptionLinesMax: S, extra: w, sideExtra: o, button: A, secondaryButton: T, buttonLink: j, minHeight: G, aspectRatio: c = "auto", variant: p, centered: t, noPaddingY: f, dataAttributes: L, "aria-label": M } = _param, l = _object_without_properties(_param, [
+        "headline",
+        "pretitle",
+        "pretitleLinesMax",
+        "title",
+        "titleLinesMax",
+        "titleAs",
+        "description",
+        "descriptionLinesMax",
+        "extra",
+        "sideExtra",
+        "button",
+        "secondaryButton",
+        "buttonLink",
+        "minHeight",
+        "aspectRatio",
+        "variant",
+        "centered",
+        "noPaddingY",
+        "dataAttributes",
+        "aria-label"
+    ]);
+    const a = l.backgroundVideo || l.backgroundImage, V = a ? "none" : l.background || ({
+        default: i.colors.background,
+        inverse: i.colors.backgroundBrand,
+        alternative: i.colors.backgroundAlternative
+    })[p !== null && p !== void 0 ? p : "default"], s = a ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, h = /* @__PURE__ */ n("div", {
+        className: F,
+        children: [
+            e && /* @__PURE__ */ r(v, {
+                paddingBottom: {
+                    desktop: 8,
+                    tablet: 8,
+                    mobile: 16
+                },
+                children: e
+            }),
+            /* @__PURE__ */ n(m, {
+                space: 16,
+                children: [
+                    /* @__PURE__ */ n(m, {
+                        space: 8,
+                        children: [
+                            d && /* @__PURE__ */ r("div", {
+                                className: k,
+                                children: /* @__PURE__ */ r(g, {
+                                    regular: !0,
+                                    truncate: H,
+                                    textShadow: s,
+                                    children: d
+                                })
+                            }),
+                            /* @__PURE__ */ r(q, {
+                                as: N,
+                                truncate: B,
+                                textShadow: s,
+                                children: y
+                            })
+                        ]
+                    }),
+                    u && /* @__PURE__ */ r("div", {
+                        className: k,
+                        children: /* @__PURE__ */ r(g, {
+                            as: "p",
+                            regular: !0,
+                            truncate: S,
+                            color: a ? i.colors.textPrimary : i.colors.textSecondary,
+                            textShadow: s,
+                            children: u
+                        })
+                    })
+                ]
+            }),
+            w
+        ]
+    }), b = c && c !== "auto";
+    return /* @__PURE__ */ r("section", _object_spread_props(_object_spread({}, P(L, "CoverHero")), {
+        "aria-label": M,
+        ref: R,
+        className: x(J, {
+            [K]: !f,
+            [O]: b
+        }),
+        style: _object_spread({
+            minHeight: b ? "auto" : G,
+            boxSizing: "border-box",
+            background: V
+        }, Z({
+            [Y.aspectRatio]: String($(c)),
+            [_.mediaBorderRadius]: "0px"
+        })),
+        children: /* @__PURE__ */ n("div", {
+            className: x(Q, {
+                [U]: t,
+                [W]: o
+            }),
+            children: [
+                a ? /* @__PURE__ */ r(E, _object_spread({}, l)) : null,
+                /* @__PURE__ */ r(D, {
+                    variant: a ? "inverse" : p,
+                    backgroundColor: "none",
+                    children: /* @__PURE__ */ r(v, {
+                        paddingY: f ? 0 : {
+                            desktop: 56,
+                            tablet: 56,
+                            mobile: 24
+                        },
+                        children: /* @__PURE__ */ n(m, {
+                            space: 24,
+                            children: [
+                                t && !o ? /* @__PURE__ */ r(C, {
+                                    template: "8",
+                                    children: h
+                                }) : /* @__PURE__ */ r(C, {
+                                    template: "8+4",
+                                    collapseBreakpoint: "mobile",
+                                    left: h,
+                                    right: /* @__PURE__ */ r("div", {
+                                        className: X,
+                                        children: o
+                                    })
+                                }),
+                                /* @__PURE__ */ r(I, {
+                                    align: {
+                                        mobile: t ? "center" : "left",
+                                        tablet: t && !o ? "center" : "left",
+                                        desktop: t && !o ? "center" : "left"
+                                    },
+                                    primaryButton: A,
+                                    secondaryButton: T,
+                                    link: j
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    }));
+}), hr = rr;
+export { hr as default };

package/dist-es/empty-state.js

@@ -51,7 +51,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import x from "classnames";
 import { useIsInverseVariant as k } from "./theme-variant-context.js";
 import { ButtonPrimary as B } from "./button.js";
@@ -59,7 +59,7 @@ import { useTheme as C } from "./hooks.js";
 import n from "./stack.js";
 import { Text6 as I, Text3 as N } from "./text.js";
 import S from "./button-group.js";
-import { container as E, inverseBorder as T, vars as V, contentVariants as l, iconContainer as $, largeImageContainer as b, largeImage as j, smallImage as A } from "./empty-state.css-mistica.js";
+import { container as b, inverseBorder as E, vars as T, contentVariants as l, iconContainer as V, largeImageContainer as $, largeImage as j, smallImage as A } from "./empty-state.css-mistica.js";
 import { vars as a } from "./skins/skin-contract.css-mistica.js";
 import { AspectRatioContainer as D } from "./utils/aspect-ratio-support.js";
 import { getPrefixedDataAttributes as P } from "./utils/dom.js";
@@ -67,7 +67,7 @@ import { sprinkles as R } from "./sprinkles.css-mistica.js";
 import { applyCssVars as w } from "./utils/css.js";
 const G = (param)=>{
     let { title: c, titleAs: p = "h1", description: d, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": g, dataAttributes: h } = param;
-    const { isDarkMode: v } = C(), s = k(), u = i ? /* @__PURE__ */ r("img", {
+    const { isDarkMode: u } = C(), t = k(), v = i ? /* @__PURE__ */ r("img", {
         className: A,
         alt: "",
         src: i
@@ -78,12 +78,12 @@ const G = (param)=>{
     }), {
         link: f
     });
-    return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-        className: x(E, s ? T : R({
+    return /* @__PURE__ */ s("div", _object_spread_props(_object_spread({
+        className: x(b, t ? E : R({
             border: "regular"
         })),
         style: w({
-            [V.backgroundColor]: s && !v ? a.colors.backgroundBrand : a.colors.backgroundContainer
+            [T.backgroundColor]: t && !u ? a.colors.backgroundBrand : a.colors.backgroundContainer
         }),
         "aria-label": g,
         role: "region"
@@ -93,15 +93,15 @@ const G = (param)=>{
                 style: {
                     flex: 1
                 },
-                children: /* @__PURE__ */ t(n, {
+                children: /* @__PURE__ */ s(n, {
                     space: 24,
                     className: o ? l.largeImage : l.default,
                     children: [
-                        u !== null && u !== void 0 ? u : m && /* @__PURE__ */ r("div", {
-                            className: $,
+                        v !== null && v !== void 0 ? v : m && /* @__PURE__ */ r("div", {
+                            className: V,
                             children: m
                         }),
-                        /* @__PURE__ */ t(n, {
+                        /* @__PURE__ */ s(n, {
                             space: 16,
                             children: [
                                 /* @__PURE__ */ r(I, {
@@ -111,12 +111,12 @@ const G = (param)=>{
                                 /* @__PURE__ */ r(N, {
                                     regular: !0,
                                     as: "p",
-                                    color: s ? a.colors.inverse : a.colors.textSecondary,
+                                    color: t ? a.colors.inverse : a.colors.textSecondary,
                                     children: d
                                 })
                             ]
                         }),
-                        e && /* @__PURE__ */ r(S, _object_spread({}, y))
+                        /* @__PURE__ */ r(S, _object_spread({}, y))
                     ]
                 })
             }),
@@ -127,7 +127,7 @@ const G = (param)=>{
                 },
                 children: o && /* @__PURE__ */ r(D, {
                     aspectRatio: 16 / 9,
-                    className: b,
+                    className: $,
                     height: "100%",
                     width: "100%",
                     children: /* @__PURE__ */ r("div", {

package/dist-es/grid-layout.css-mistica.js

@@ -1,6 +1,6 @@
 import "./grid-layout.css.ts.vanilla.css-mistica.js";
-var r = "_379jdb2", d = "_379jdb1", v = "_379jdb0", o = "_379jdb4", e = "_379jdb6", p = {
-    colSpan: "var(--_379jdb5)",
+var r = "_379jdb5", d = "_379jdb2", v = "_379jdb1", e = "_379jdb0", l = "_379jdb4", o = "_379jdb7", b = {
+    colSpan: "var(--_379jdb6)",
     verticalSpace: "var(--_379jdb3)"
 };
-export { r as desktopLargeColumn, d as desktopMediumColumn, v as desktopSmallColumn, o as grid, e as span, p as vars };
+export { r as collapsedInTablet, d as desktopLargeColumn, v as desktopMediumColumn, e as desktopSmallColumn, l as grid, o as span, b as vars };

package/dist-es/grid-layout.js

@@ -50,115 +50,129 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { getPrefixedDataAttributes as m } from "./utils/dom.js";
-import { grid as h, vars as c, span as u, desktopLargeColumn as f, desktopMediumColumn as s, desktopSmallColumn as o } from "./grid-layout.css-mistica.js";
-import g from "classnames";
-import d from "./desktop-container-type-context.js";
-import { applyCssVars as v } from "./utils/css.js";
-const y = (i)=>{
-    const t = m(i.dataAttributes), l = (n)=>({
-            className: g(u, {
-                [f]: n >= 10,
-                [s]: n > 5 && n < 10,
-                [o]: n <= 5
+import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import { getPrefixedDataAttributes as y } from "./utils/dom.js";
+import { grid as x, collapsedInTablet as C, span as b, desktopLargeColumn as S, desktopMediumColumn as k, desktopSmallColumn as L, vars as t } from "./grid-layout.css-mistica.js";
+import m from "classnames";
+import r from "./desktop-container-type-context.js";
+import { applyCssVars as h } from "./utils/css.js";
+const D = (param)=>{
+    let { dataAttributes: p, template: n, left: a, right: s, verticalSpace: u, collapseBreakpoint: f = "tablet", children: o } = param;
+    const e = y(p, "GridLayout"), d = (c)=>({
+            className: m(b, {
+                [S]: c >= 10,
+                [k]: c > 5 && c < 10,
+                [L]: c <= 5
             }),
-            style: v({
-                [c.colSpan]: String(n)
+            style: h({
+                [t.colSpan]: String(c)
             })
-        }), r = {
-        className: h,
-        style: i.verticalSpace ? v({
-            [c.verticalSpace]: `${i.verticalSpace}px`
+        }), l = {
+        className: m(x, {
+            [C]: f === "tablet"
+        }),
+        style: u ? h({
+            [t.verticalSpace]: `${u}px`
         }) : void 0
     };
-    return i.template === "6+6" ? /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, r, t), {
-        children: /* @__PURE__ */ a(d, {
+    return n === "6+6" ? /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, l, e), {
+        children: /* @__PURE__ */ v(r, {
             value: "medium",
             children: [
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(6)), {
-                    children: i.left
+                /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(6)), {
+                    children: a
                 })),
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(6)), {
-                    children: i.right
+                /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(6)), {
+                    children: s
                 }))
             ]
         })
-    })) : i.template === "8+4" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "8+4" ? /* @__PURE__ */ v("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ i(r, {
                 value: "medium",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(8)), {
-                    children: i.left
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(8)), {
+                    children: a
                 }))
             }),
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ i(r, {
                 value: "small",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(4)), {
-                    children: i.right
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(4)), {
+                    children: s
                 }))
             })
         ]
-    })) : i.template === "4+6" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "4+6" ? /* @__PURE__ */ v("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ i(r, {
                 value: "small",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(4)), {
-                    children: i.left
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(4)), {
+                    children: a
                 }))
             }),
-            /* @__PURE__ */ e("div", _object_spread({}, l(1))),
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ i("div", _object_spread({}, d(1))),
+            /* @__PURE__ */ i(r, {
                 value: "medium",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(6)), {
-                    children: i.right
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(6)), {
+                    children: s
                 }))
             }),
-            /* @__PURE__ */ e("div", _object_spread({}, l(1)))
+            /* @__PURE__ */ i("div", _object_spread({}, d(1)))
         ]
-    })) : i.template === "5+4" ? /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, r, t), {
-        children: /* @__PURE__ */ a(d, {
+    })) : n === "5+4" ? /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, l, e), {
+        children: /* @__PURE__ */ v(r, {
             value: "small",
             children: [
-                /* @__PURE__ */ e("div", _object_spread({}, l(1))),
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(5)), {
-                    children: i.left
+                /* @__PURE__ */ i("div", _object_spread({}, d(1))),
+                /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(5)), {
+                    children: a
                 })),
-                /* @__PURE__ */ e("div", _object_spread({}, l(1))),
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(4)), {
-                    children: i.right
+                /* @__PURE__ */ i("div", _object_spread({}, d(1))),
+                /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(4)), {
+                    children: s
                 })),
-                /* @__PURE__ */ e("div", _object_spread({}, l(1)))
+                /* @__PURE__ */ i("div", _object_spread({}, d(1)))
             ]
         })
-    })) : i.template === "3+9" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "3+9" ? /* @__PURE__ */ v("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ i(r, {
                 value: "small",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(3)), {
-                    children: i.left
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(3)), {
+                    children: a
                 }))
             }),
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ i(r, {
                 value: "medium",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(9)), {
-                    children: i.right
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(9)), {
+                    children: s
                 }))
             })
         ]
-    })) : i.template === "10" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "10" ? /* @__PURE__ */ v("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
-            /* @__PURE__ */ e("div", _object_spread({}, l(1))),
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ i("div", _object_spread({}, d(1))),
+            /* @__PURE__ */ i(r, {
                 value: "large",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(10)), {
-                    children: i.children
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(10)), {
+                    children: o
                 }))
             }),
-            /* @__PURE__ */ e("div", _object_spread({}, l(1)))
+            /* @__PURE__ */ i("div", _object_spread({}, d(1)))
         ]
-    })) : /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, r, t), {
-        children: i.children
+    })) : n === "8" ? /* @__PURE__ */ v("div", _object_spread_props(_object_spread({}, l, e), {
+        children: [
+            /* @__PURE__ */ i("div", _object_spread({}, d(2))),
+            /* @__PURE__ */ i(r, {
+                value: "medium",
+                children: /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, d(8)), {
+                    children: o
+                }))
+            }),
+            /* @__PURE__ */ i("div", _object_spread({}, d(2)))
+        ]
+    })) : /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, l, e), {
+        children: o
     }));
-}, L = y;
-export { L as default };
+}, T = D;
+export { T as default };