@telefonica/mistica 15.9.0 → 15.11.0

package/dist/cover-hero.js

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return hr;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _text = require("./text.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _coverherocssmistica = require("./cover-hero.css-mistica.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _css = require("./utils/css.js");
+const _imagecssmistica = require("./image.css-mistica.js");
+const _gridlayout = /*#__PURE__*/ _interop_require_default(require("./grid-layout.js"));
+const _coverheromedia = require("./cover-hero-media.js");
+const _dom = require("./utils/dom.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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;
+}
+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__*/ _react.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: _skincontractcssmistica.vars.colors.background,
+        inverse: _skincontractcssmistica.vars.colors.backgroundBrand,
+        alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
+    })[p !== null && p !== void 0 ? p : "default"], s = a ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: _coverherocssmistica.mainContent,
+        children: [
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingBottom: {
+                    desktop: 8,
+                    tablet: 8,
+                    mobile: 16
+                },
+                children: e
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 16,
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                        space: 8,
+                        children: [
+                            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _coverherocssmistica.sixColumns,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    regular: !0,
+                                    truncate: H,
+                                    textShadow: s,
+                                    children: d
+                                })
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                                as: N,
+                                truncate: B,
+                                textShadow: s,
+                                children: y
+                            })
+                        ]
+                    }),
+                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _coverherocssmistica.sixColumns,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            as: "p",
+                            regular: !0,
+                            truncate: S,
+                            color: a ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
+                            textShadow: s,
+                            children: u
+                        })
+                    })
+                ]
+            }),
+            w
+        ]
+    }), b = c && c !== "auto";
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(L, "CoverHero")), {
+        "aria-label": M,
+        ref: R,
+        className: (0, _classnames.default)(_coverherocssmistica.coverHeroContainer, {
+            [_coverherocssmistica.minHeight]: !f,
+            [_coverherocssmistica.withAspectRatio]: b
+        }),
+        style: _object_spread({
+            minHeight: b ? "auto" : G,
+            boxSizing: "border-box",
+            background: V
+        }, (0, _css.applyCssVars)({
+            [_coverherocssmistica.vars.aspectRatio]: String($(c)),
+            [_imagecssmistica.vars.mediaBorderRadius]: "0px"
+        })),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)(_coverherocssmistica.coverHero, {
+                [_coverherocssmistica.centered]: t,
+                [_coverherocssmistica.hasSideExtra]: o
+            }),
+            children: [
+                a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_coverheromedia.CoverHeroMedia, _object_spread({}, l)) : null,
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    variant: a ? "inverse" : p,
+                    backgroundColor: "none",
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        paddingY: f ? 0 : {
+                            desktop: 56,
+                            tablet: 56,
+                            mobile: 24
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                            space: 24,
+                            children: [
+                                t && !o ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                                    template: "8",
+                                    children: h
+                                }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                                    template: "8+4",
+                                    collapseBreakpoint: "mobile",
+                                    left: h,
+                                    right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        className: _coverherocssmistica.sideExtra,
+                                        children: o
+                                    })
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                    align: {
+                                        mobile: t ? "center" : "left",
+                                        tablet: t && !o ? "center" : "left",
+                                        desktop: t && !o ? "center" : "left"
+                                    },
+                                    primaryButton: A,
+                                    secondaryButton: T,
+                                    link: j
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    }));
+}), hr = rr;

package/dist/empty-state.js

@@ -82,7 +82,7 @@ function _object_spread_props(target, source) {
 }
 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 } = (0, _hooks.useTheme)(), s = (0, _themevariantcontext.useIsInverseVariant)(), u = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+    const { isDarkMode: u } = (0, _hooks.useTheme)(), t = (0, _themevariantcontext.useIsInverseVariant)(), v = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
         className: _emptystatecssmistica.smallImage,
         alt: "",
         src: i
@@ -94,11 +94,11 @@ const G = (param)=>{
         link: f
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_emptystatecssmistica.container, s ? _emptystatecssmistica.inverseBorder : (0, _sprinklescssmistica.sprinkles)({
+        className: (0, _classnames.default)(_emptystatecssmistica.container, t ? _emptystatecssmistica.inverseBorder : (0, _sprinklescssmistica.sprinkles)({
             border: "regular"
         })),
         style: (0, _css.applyCssVars)({
-            [_emptystatecssmistica.vars.backgroundColor]: s && !v ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
+            [_emptystatecssmistica.vars.backgroundColor]: t && !u ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
         }),
         "aria-label": g,
         role: "region"
@@ -112,7 +112,7 @@ const G = (param)=>{
                     space: 24,
                     className: o ? _emptystatecssmistica.contentVariants.largeImage : _emptystatecssmistica.contentVariants.default,
                     children: [
-                        u !== null && u !== void 0 ? u : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        v !== null && v !== void 0 ? v : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _emptystatecssmistica.iconContainer,
                             children: m
                         }),
@@ -126,12 +126,12 @@ const G = (param)=>{
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                     regular: !0,
                                     as: "p",
-                                    color: s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.textSecondary,
+                                    color: t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.textSecondary,
                                     children: d
                                 })
                             ]
                         }),
-                        e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, _object_spread({}, y))
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, _object_spread({}, y))
                     ]
                 })
             }),

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

@@ -9,27 +9,30 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    desktopLargeColumn: function() {
+    collapsedInTablet: function() {
         return r;
     },
-    desktopMediumColumn: function() {
+    desktopLargeColumn: function() {
         return d;
     },
-    desktopSmallColumn: function() {
+    desktopMediumColumn: function() {
         return v;
     },
+    desktopSmallColumn: function() {
+        return e;
+    },
     grid: function() {
-        return o;
+        return l;
     },
     span: function() {
-        return e;
+        return o;
     },
     vars: function() {
-        return p;
+        return b;
     }
 });
 require("./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)"
 };

package/dist/grid-layout.css.d.ts

@@ -2,6 +2,7 @@ export declare const desktopSmallColumn: string;
 export declare const desktopMediumColumn: string;
 export declare const desktopLargeColumn: string;
 export declare const grid: string;
+export declare const collapsedInTablet: string;
 export declare const span: string;
 export declare const vars: {
     colSpan: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/grid-layout.d.ts

@@ -1,58 +1,48 @@
 import * as React from 'react';
+import type { ExclusifyUnion } from './utils/utility-types';
 import type { DataAttributes } from './utils/types';
-type VerticalSpace = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
-type PropsChildren = {
-    template?: undefined;
-    children: React.ReactNode;
+export type VerticalSpace = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
+type CommonProps = {
     verticalSpace?: VerticalSpace;
+    collapseBreakpoint?: 'tablet' | 'mobile';
     dataAttributes?: DataAttributes;
 };
+type PropsChildren = {
+    children: React.ReactNode;
+};
 type PropsTemplate6_6 = {
     template: '6+6';
     left: React.ReactNode;
     right: React.ReactNode;
-    children?: undefined;
-    verticalSpace?: VerticalSpace;
-    dataAttributes?: DataAttributes;
 };
 type PropsTemplate8_4 = {
     template: '8+4';
     left: React.ReactNode;
     right: React.ReactNode;
-    children?: undefined;
-    verticalSpace?: VerticalSpace;
-    dataAttributes?: DataAttributes;
 };
 type PropsTemplate4_6 = {
     template: '4+6';
     left: React.ReactNode;
     right: React.ReactNode;
-    children?: undefined;
-    verticalSpace?: VerticalSpace;
-    dataAttributes?: DataAttributes;
 };
 type PropsTemplate5_4 = {
     template: '5+4';
     left: React.ReactNode;
     right: React.ReactNode;
-    children?: undefined;
-    verticalSpace?: VerticalSpace;
-    dataAttributes?: DataAttributes;
 };
 type PropsTemplate3_9 = {
     template: '3+9';
     left: React.ReactNode;
     right: React.ReactNode;
-    children?: undefined;
-    verticalSpace?: VerticalSpace;
-    dataAttributes?: DataAttributes;
 };
 type PropsTemplate10 = {
     template: '10';
     children: React.ReactNode;
-    verticalSpace?: VerticalSpace;
-    dataAttributes?: DataAttributes;
 };
-type Props = PropsChildren | PropsTemplate6_6 | PropsTemplate8_4 | PropsTemplate4_6 | PropsTemplate5_4 | PropsTemplate3_9 | PropsTemplate10;
+type PropsTemplate8 = {
+    template: '8';
+    children: React.ReactNode;
+};
+type Props = CommonProps & ExclusifyUnion<PropsChildren | PropsTemplate6_6 | PropsTemplate8_4 | PropsTemplate4_6 | PropsTemplate5_4 | PropsTemplate3_9 | PropsTemplate10 | PropsTemplate8>;
 declare const GridLayout: React.FC<Props>;
 export default GridLayout;

package/dist/grid-layout.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return L;
+        return T;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -71,108 +71,122 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const y = (i)=>{
-    const t = (0, _dom.getPrefixedDataAttributes)(i.dataAttributes), l = (n)=>({
+const D = (param)=>{
+    let { dataAttributes: p, template: n, left: a, right: s, verticalSpace: u, collapseBreakpoint: f = "tablet", children: o } = param;
+    const e = (0, _dom.getPrefixedDataAttributes)(p, "GridLayout"), d = (c)=>({
             className: (0, _classnames.default)(_gridlayoutcssmistica.span, {
-                [_gridlayoutcssmistica.desktopLargeColumn]: n >= 10,
-                [_gridlayoutcssmistica.desktopMediumColumn]: n > 5 && n < 10,
-                [_gridlayoutcssmistica.desktopSmallColumn]: n <= 5
+                [_gridlayoutcssmistica.desktopLargeColumn]: c >= 10,
+                [_gridlayoutcssmistica.desktopMediumColumn]: c > 5 && c < 10,
+                [_gridlayoutcssmistica.desktopSmallColumn]: c <= 5
             }),
             style: (0, _css.applyCssVars)({
-                [_gridlayoutcssmistica.vars.colSpan]: String(n)
+                [_gridlayoutcssmistica.vars.colSpan]: String(c)
             })
-        }), r = {
-        className: _gridlayoutcssmistica.grid,
-        style: i.verticalSpace ? (0, _css.applyCssVars)({
-            [_gridlayoutcssmistica.vars.verticalSpace]: `${i.verticalSpace}px`
+        }), l = {
+        className: (0, _classnames.default)(_gridlayoutcssmistica.grid, {
+            [_gridlayoutcssmistica.collapsedInTablet]: f === "tablet"
+        }),
+        style: u ? (0, _css.applyCssVars)({
+            [_gridlayoutcssmistica.vars.verticalSpace]: `${u}px`
         }) : void 0
     };
-    return i.template === "6+6" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, r, t), {
+    return n === "6+6" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l, e), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_desktopcontainertypecontext.default, {
             value: "medium",
             children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(6)), {
-                    children: i.left
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(6)), {
+                    children: a
                 })),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(6)), {
-                    children: i.right
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(6)), {
+                    children: s
                 }))
             ]
         })
-    })) : i.template === "8+4" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "8+4" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "medium",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(8)), {
-                    children: i.left
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(8)), {
+                    children: a
                 }))
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "small",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(4)), {
-                    children: i.right
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(4)), {
+                    children: s
                 }))
             })
         ]
-    })) : i.template === "4+6" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "4+6" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "small",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(4)), {
-                    children: i.left
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(4)), {
+                    children: a
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "medium",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(6)), {
-                    children: i.right
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(6)), {
+                    children: s
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1)))
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1)))
         ]
-    })) : i.template === "5+4" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "5+4" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l, e), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_desktopcontainertypecontext.default, {
             value: "small",
             children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(5)), {
-                    children: i.left
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(5)), {
+                    children: a
                 })),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(4)), {
-                    children: i.right
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(4)), {
+                    children: s
                 })),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1)))
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1)))
             ]
         })
-    })) : i.template === "3+9" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "3+9" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "small",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(3)), {
-                    children: i.left
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(3)), {
+                    children: a
                 }))
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "medium",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(9)), {
-                    children: i.right
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(9)), {
+                    children: s
                 }))
             })
         ]
-    })) : i.template === "10" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
+    })) : n === "10" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, l, e), {
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "large",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(10)), {
-                    children: i.children
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(10)), {
+                    children: o
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1)))
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1)))
         ]
-    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, r, t), {
-        children: i.children
+    })) : n === "8" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, l, e), {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(2))),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
+                value: "medium",
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(8)), {
+                    children: o
+                }))
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(2)))
+        ]
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l, e), {
+        children: o
     }));
-}, L = y;
+}, T = D;