@telefonica/mistica 16.1.1 → 16.2.0

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

@@ -1,9 +1,9 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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)"
 };
-export { e as assetContainer, n as container, v as contentVariants, f as inverseBorder, _ as largeImage, o as largeImageContainer, t as smallImage, u as vars };
+export { v as assetContainer, e as border, n as container, f as contentVariants, _ as inverseBorder, o as largeImage, t as largeImageContainer, u as smallImage, i as vars };

package/dist-es/empty-state.js

@@ -59,16 +59,15 @@ 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 b, inverseBorder as E, vars as T, contentVariants as l, assetContainer as V, largeImageContainer as $, largeImage as j, smallImage as A } from "./empty-state.css-mistica.js";
+import { container as b, inverseBorder as E, border as T, vars as V, contentVariants as c, assetContainer as $, largeImageContainer as j, largeImage as A, smallImage as D } 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 M } from "./utils/dom.js";
-import { sprinkles as P } from "./sprinkles.css-mistica.js";
+import { AspectRatioContainer as M } from "./utils/aspect-ratio-support.js";
+import { getPrefixedDataAttributes as P } from "./utils/dom.js";
 import { applyCssVars as R } from "./utils/css.js";
 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 } = C(), t = k(), v = i ? /* @__PURE__ */ r("img", {
-        className: A,
+    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 } = C(), t = k(), u = i ? /* @__PURE__ */ r("img", {
+        className: D,
         alt: "",
         src: i
     }) : void 0, y = _object_spread_props(_object_spread({}, (e == null ? void 0 : e.type) === B ? {
@@ -79,15 +78,13 @@ const w = (param)=>{
         link: f
     });
     return /* @__PURE__ */ s("div", _object_spread_props(_object_spread({
-        className: x(b, t ? E : P({
-            border: "regular"
-        })),
+        className: x(b, t ? E : T),
         style: R({
-            [T.backgroundColor]: t && !u ? a.colors.backgroundBrand : a.colors.backgroundContainer
+            [V.backgroundColor]: t && !g ? a.colors.backgroundBrand : a.colors.backgroundContainer
         }),
-        "aria-label": g,
+        "aria-label": h,
         role: "region"
-    }, M(h, "EmptyState")), {
+    }, P(v, "EmptyState")), {
         children: [
             /* @__PURE__ */ r("div", {
                 style: {
@@ -95,10 +92,10 @@ const w = (param)=>{
                 },
                 children: /* @__PURE__ */ s(n, {
                     space: 24,
-                    className: o ? l.largeImage : l.default,
+                    className: o ? c.largeImage : c.default,
                     children: [
-                        v !== null && v !== void 0 ? v : m && /* @__PURE__ */ r("div", {
-                            className: V,
+                        u !== null && u !== void 0 ? u : m && /* @__PURE__ */ r("div", {
+                            className: $,
                             children: m
                         }),
                         /* @__PURE__ */ s(n, {
@@ -106,7 +103,7 @@ const w = (param)=>{
                             children: [
                                 /* @__PURE__ */ r(I, {
                                     as: d,
-                                    children: c
+                                    children: l
                                 }),
                                 /* @__PURE__ */ r(N, {
                                     regular: !0,
@@ -125,13 +122,13 @@ const w = (param)=>{
                     flex: 1,
                     position: "relative"
                 },
-                children: o && /* @__PURE__ */ r(D, {
+                children: o && /* @__PURE__ */ r(M, {
                     aspectRatio: 16 / 9,
-                    className: $,
+                    className: j,
                     height: "100%",
                     width: "100%",
                     children: /* @__PURE__ */ r("div", {
-                        className: j,
+                        className: A,
                         style: {
                             backgroundImage: `url(${o})`
                         }
@@ -140,5 +137,5 @@ const w = (param)=>{
             })
         ]
     }));
-}, _ = w;
-export { _ as default };
+}, Z = w;
+export { Z as default };

package/dist-es/form.css-mistica.js

@@ -0,0 +1,3 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+var o = "_1y2v1nfi7";
+export { o as form };

package/dist-es/form.js

@@ -51,18 +51,18 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as k, jsxs as $ } from "react/jsx-runtime";
+import { jsx as g, jsxs as $ } from "react/jsx-runtime";
 import * as n from "react";
 import { useTheme as q } from "./hooks.js";
 import { FormContext as G } from "./form-context.js";
 import U from "classnames";
-import { sprinkles as z } from "./sprinkles.css-mistica.js";
+import { form as z } from "./form.css-mistica.js";
 import { formFieldErrorIsMandatory as H, formErrorsAlertMessage as K } from "./text-tokens.js";
 import Q from "./screen-reader-only.js";
 process.env.NODE_ENV !== "test" && typeof document < "u" && !("scrollBehavior" in document.documentElement.style) && import("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 = n.useRef(!0), [u, w] = n.useState(E), [c, V] = n.useState(E), [P, m] = n.useState("filling"), [d, F] = n.useState({}), l = n.useRef(/* @__PURE__ */ new Map()), p = n.useRef(null), { texts: b, t: h } = q(), T = n.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 = n.useRef(!0), [u, V] = n.useState(E), [c, w] = n.useState(E), [P, m] = n.useState("filling"), [d, F] = n.useState({}), l = n.useRef(/* @__PURE__ */ new Map()), p = n.useRef(null), { texts: b, t: h } = q(), T = n.useId(), I = M || T;
     n.useEffect(()=>(f.current = !0, ()=>{
             f.current = !1;
         }), []);
@@ -131,21 +131,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 = n.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 = n.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 = n.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 = n.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)=>{
@@ -153,7 +153,7 @@ const X = (param)=>{
         var s;
         return t && ((s = l.current.get(e)) == null ? void 0 : s.label);
     }).filter(Boolean), _ = N.length > 1;
-    return /* @__PURE__ */ k(G.Provider, {
+    return /* @__PURE__ */ g(G.Provider, {
         value: {
             formStatus: P,
             values: u,
@@ -172,13 +172,11 @@ const X = (param)=>{
             id: I,
             onSubmit: C,
             ref: p,
-            className: U(z({
-                width: "100%"
-            }), j),
+            className: U(z, j),
             noValidate: !0,
             children: [
-                _ ? /* @__PURE__ */ k(Q, {
-                    children: /* @__PURE__ */ k("span", {
+                _ ? /* @__PURE__ */ g(Q, {
+                    children: /* @__PURE__ */ g("span", {
                         role: "alert",
                         children: v ? v(d) : `${b.formErrorsAlertMessage || h(K)} ${N.join(", ")}`
                     })

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

@@ -1,24 +1,54 @@
 import "./grid.css.ts.vanilla.css-mistica.js";
 var i = {
-    start: "mfyikv34",
-    end: "mfyikv35",
-    center: "mfyikv36",
-    stretch: "mfyikv37",
-    baseline: "mfyikv38"
+    start: "mfyikv3b",
+    end: "mfyikv3c",
+    center: "mfyikv3d",
+    stretch: "mfyikv3e",
+    baseline: "mfyikv3f"
 }, m = {
-    1: "mfyikv2c",
-    2: "mfyikv2d",
-    3: "mfyikv2e",
-    4: "mfyikv2f",
-    5: "mfyikv2g",
-    6: "mfyikv2h",
-    7: "mfyikv2i",
-    8: "mfyikv2j",
-    9: "mfyikv2k",
-    10: "mfyikv2l",
-    11: "mfyikv2m",
-    12: "mfyikv2n"
-}, f = "mfyikv1m", y = "mfyikv1n", k = "mfyikv4", e = {
+    1: "mfyikv2j",
+    2: "mfyikv2k",
+    3: "mfyikv2l",
+    4: "mfyikv2m",
+    5: "mfyikv2n",
+    6: "mfyikv2o",
+    7: "mfyikv2p",
+    8: "mfyikv2q",
+    9: "mfyikv2r",
+    10: "mfyikv2s",
+    11: "mfyikv2t",
+    12: "mfyikv2u"
+}, f = "mfyikv1t", y = "mfyikv1u", k = "mfyikvb", e = {
+    columnGap: {
+        desktop: "var(--mfyikv4)",
+        tablet: "var(--mfyikv5)",
+        mobile: "var(--mfyikv6)"
+    },
+    rowGap: {
+        desktop: "var(--mfyikv7)",
+        tablet: "var(--mfyikv8)",
+        mobile: "var(--mfyikv9)"
+    }
+}, r = "mfyikva", a = {
+    start: "mfyikv1m",
+    end: "mfyikv1n",
+    center: "mfyikv1o",
+    stretch: "mfyikv1p",
+    "space-between": "mfyikv1q",
+    "space-around": "mfyikv1r",
+    "space-evenly": "mfyikv1s"
+}, t = {
+    start: "mfyikv1a",
+    end: "mfyikv1b",
+    center: "mfyikv1c",
+    stretch: "mfyikv1d",
+    baseline: "mfyikv1e"
+}, n = {
+    column: "mfyikv12",
+    row: "mfyikv13",
+    "row dense": "mfyikv14",
+    "column dense": "mfyikv15"
+}, s = {
     start: "mfyikv1f",
     end: "mfyikv1g",
     center: "mfyikv1h",
@@ -26,104 +56,85 @@ var i = {
     "space-between": "mfyikv1j",
     "space-around": "mfyikv1k",
     "space-evenly": "mfyikv1l"
-}, r = {
-    start: "mfyikv13",
-    end: "mfyikv14",
-    center: "mfyikv15",
-    stretch: "mfyikv16",
-    baseline: "mfyikv17"
-}, t = {
-    column: "mfyikvv",
-    row: "mfyikvw",
-    "row dense": "mfyikvx",
-    "column dense": "mfyikvy"
-}, a = {
-    start: "mfyikv18",
-    end: "mfyikv19",
-    center: "mfyikv1a",
-    stretch: "mfyikv1b",
-    "space-between": "mfyikv1c",
-    "space-around": "mfyikv1d",
-    "space-evenly": "mfyikv1e"
-}, n = {
-    start: "mfyikvz",
-    end: "mfyikv10",
-    center: "mfyikv11",
-    stretch: "mfyikv12"
-}, s = {
-    1: "mfyikv7",
-    2: "mfyikv8",
-    3: "mfyikv9",
-    4: "mfyikva",
-    5: "mfyikvb",
-    6: "mfyikvc",
-    7: "mfyikvd",
-    8: "mfyikve",
-    9: "mfyikvf",
-    10: "mfyikvg",
-    11: "mfyikvh",
-    12: "mfyikvi"
-}, o = "mfyikv5", l = {
-    1: "mfyikvj",
-    2: "mfyikvk",
-    3: "mfyikvl",
-    4: "mfyikvm",
-    5: "mfyikvn",
-    6: "mfyikvo",
-    7: "mfyikvp",
-    8: "mfyikvq",
-    9: "mfyikvr",
-    10: "mfyikvs",
-    11: "mfyikvt",
-    12: "mfyikvu"
-}, c = "mfyikv6", d = {
-    start: "mfyikv30",
-    end: "mfyikv31",
-    center: "mfyikv32",
-    stretch: "mfyikv33"
-}, u = {
-    1: "mfyikv2o",
-    2: "mfyikv2p",
-    3: "mfyikv2q",
-    4: "mfyikv2r",
-    5: "mfyikv2s",
-    6: "mfyikv2t",
-    7: "mfyikv2u",
-    8: "mfyikv2v",
-    9: "mfyikv2w",
-    10: "mfyikv2x",
-    11: "mfyikv2y",
-    12: "mfyikv2z"
-}, p = {
-    1: "mfyikv1o",
-    2: "mfyikv1p",
-    3: "mfyikv1q",
-    4: "mfyikv1r",
-    5: "mfyikv1s",
-    6: "mfyikv1t",
-    7: "mfyikv1u",
-    8: "mfyikv1v",
-    9: "mfyikv1w",
-    10: "mfyikv1x",
-    11: "mfyikv1y",
-    12: "mfyikv1z"
+}, o = {
+    start: "mfyikv16",
+    end: "mfyikv17",
+    center: "mfyikv18",
+    stretch: "mfyikv19"
+}, l = {
+    1: "mfyikve",
+    2: "mfyikvf",
+    3: "mfyikvg",
+    4: "mfyikvh",
+    5: "mfyikvi",
+    6: "mfyikvj",
+    7: "mfyikvk",
+    8: "mfyikvl",
+    9: "mfyikvm",
+    10: "mfyikvn",
+    11: "mfyikvo",
+    12: "mfyikvp"
+}, c = "mfyikvc", d = {
+    1: "mfyikvq",
+    2: "mfyikvr",
+    3: "mfyikvs",
+    4: "mfyikvt",
+    5: "mfyikvu",
+    6: "mfyikvv",
+    7: "mfyikvw",
+    8: "mfyikvx",
+    9: "mfyikvy",
+    10: "mfyikvz",
+    11: "mfyikv10",
+    12: "mfyikv11"
+}, p = "mfyikvd", u = {
+    start: "mfyikv37",
+    end: "mfyikv38",
+    center: "mfyikv39",
+    stretch: "mfyikv3a"
 }, g = {
-    1: "mfyikv20",
-    2: "mfyikv21",
-    3: "mfyikv22",
-    4: "mfyikv23",
-    5: "mfyikv24",
-    6: "mfyikv25",
-    7: "mfyikv26",
-    8: "mfyikv27",
-    9: "mfyikv28",
-    10: "mfyikv29",
-    11: "mfyikv2a",
-    12: "mfyikv2b"
+    1: "mfyikv2v",
+    2: "mfyikv2w",
+    3: "mfyikv2x",
+    4: "mfyikv2y",
+    5: "mfyikv2z",
+    6: "mfyikv30",
+    7: "mfyikv31",
+    8: "mfyikv32",
+    9: "mfyikv33",
+    10: "mfyikv34",
+    11: "mfyikv35",
+    12: "mfyikv36"
 }, w = {
+    1: "mfyikv1v",
+    2: "mfyikv1w",
+    3: "mfyikv1x",
+    4: "mfyikv1y",
+    5: "mfyikv1z",
+    6: "mfyikv20",
+    7: "mfyikv21",
+    8: "mfyikv22",
+    9: "mfyikv23",
+    10: "mfyikv24",
+    11: "mfyikv25",
+    12: "mfyikv26"
+}, b = {
+    1: "mfyikv27",
+    2: "mfyikv28",
+    3: "mfyikv29",
+    4: "mfyikv2a",
+    5: "mfyikv2b",
+    6: "mfyikv2c",
+    7: "mfyikv2d",
+    8: "mfyikv2e",
+    9: "mfyikv2f",
+    10: "mfyikv2g",
+    11: "mfyikv2h",
+    12: "mfyikv2i"
+}, h = {
     rowMinSize: "var(--mfyikv0)",
     rowMaxSize: "var(--mfyikv1)",
     columnMinSize: "var(--mfyikv2)",
     columnMaxSize: "var(--mfyikv3)"
 };
-export { i as alignSelf, m as columnStart, f as fullColumns, y as fullRows, k as grid, e as gridAlignContent, r as gridAlignItems, t as gridAutoFlow, a as gridJustifyContent, n as gridJustifyItems, s as gridTemplateColumns, o as gridTemplateColumnsAutoRepeat, l as gridTemplateRows, c as gridTemplateRowsAutoRepeat, d as justifySelf, u as rowStart, p as spanColumns, g as spanRows, w as vars };
+export { i as alignSelf, m as columnStart, f as fullColumns, y as fullRows, k as gap, e as gapVars, r as grid, a as gridAlignContent, t as gridAlignItems, n as gridAutoFlow, s as gridJustifyContent, o as gridJustifyItems, l as gridTemplateColumns, c as gridTemplateColumnsAutoRepeat, d as gridTemplateRows, p as gridTemplateRowsAutoRepeat, u as justifySelf, g as rowStart, w as spanColumns, b as spanRows, h as vars };

package/dist-es/grid.js

@@ -26,51 +26,48 @@ function _object_spread(target) {
     }
     return target;
 }
-import c from "classnames";
-import * as d from "react";
-import { grid as G, gridTemplateColumns as C, gridTemplateColumnsAutoRepeat as M, gridTemplateRows as T, gridTemplateRowsAutoRepeat as j, gridAutoFlow as v, gridJustifyItems as V, gridAlignItems as k, gridJustifyContent as E, gridAlignContent as J, fullColumns as N, spanColumns as h, fullRows as w, spanRows as D, columnStart as F, rowStart as I, justifySelf as P, alignSelf as q, vars as p } from "./grid.css-mistica.js";
-import { applyCssVars as B } from "./utils/css.js";
+import A from "classnames";
+import * as u from "react";
+import { grid as k, gap as T, gridTemplateColumns as E, gridTemplateColumnsAutoRepeat as J, gridTemplateRows as N, gridTemplateRowsAutoRepeat as j, gridAutoFlow as D, gridJustifyItems as F, gridAlignItems as I, gridJustifyContent as P, gridAlignContent as h, fullColumns as q, spanColumns as w, fullRows as B, spanRows as H, columnStart as K, rowStart as L, justifySelf as O, alignSelf as Q, gapVars as c, vars as d } from "./grid.css-mistica.js";
+import { applyCssVars as z } from "./utils/css.js";
 import { getPrefixedDataAttributes as R } from "./utils/dom.js";
-import { sprinkles as H } from "./sprinkles.css-mistica.js";
-const K = (t, e)=>{
-    const i = {}, f = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, o = (r)=>typeof r == "number" ? `${r}px` : r;
-    return t && typeof t != "number" && (typeof t.minSize < "u" && (i[p.rowMinSize] = f(t.minSize)), typeof t.maxSize < "u" && (i[p.rowMaxSize] = o(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (i[p.columnMinSize] = f(e.minSize)), typeof e.maxSize < "u" && (i[p.columnMaxSize] = o(e.maxSize))), i;
-}, Y = /*#__PURE__*/ d.forwardRef((param, x)=>{
-    let { rows: t, columns: e, gap: i = 0, flow: f, justifyItems: o, alignItems: r, justifyContent: l, alignContent: n, height: u, minHeight: y, children: s, as: z = "div", dataAttributes: S } = param;
-    const [m, a] = Array.isArray(i) ? i : [
+const U = (t, e)=>{
+    const i = {}, a = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, o = (r)=>typeof r == "number" ? `${r}px` : r;
+    return t && typeof t != "number" && (typeof t.minSize < "u" && (i[d.rowMinSize] = a(t.minSize)), typeof t.maxSize < "u" && (i[d.rowMaxSize] = o(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (i[d.columnMinSize] = a(e.minSize)), typeof e.maxSize < "u" && (i[d.columnMaxSize] = o(e.maxSize))), i;
+}, _ = /*#__PURE__*/ u.forwardRef((param, V)=>{
+    let { rows: t, columns: e, gap: i = 0, flow: a, justifyItems: o, alignItems: r, justifyContent: f, alignContent: n, height: y, minHeight: b, children: s, as: S = "div", dataAttributes: G } = param;
+    const [m, p] = Array.isArray(i) ? i : [
         i,
         i
-    ], A = {
-        columnGap: m,
-        rowGap: a,
-        gridColumnGap: m,
-        gridRowGap: a
+    ], M = typeof m == "object" ? m : {
+        mobile: m,
+        tablet: m,
+        desktop: m
+    }, C = typeof p == "object" ? p : {
+        mobile: p,
+        tablet: p,
+        desktop: p
+    }, g = (x, l)=>{
+        var _l_tablet;
+        return z({
+            [x.mobile]: `${l.mobile}px`,
+            [x.tablet]: `${(_l_tablet = l.tablet) !== null && _l_tablet !== void 0 ? _l_tablet : l.mobile}px`,
+            [x.desktop]: `${l.desktop}px`
+        });
     };
-    let b = {}, g = "";
-    try {
-        g = H(A);
-    } catch (e) {
-        b = {
-            columnGap: typeof m == "object" ? m.mobile : m,
-            rowGap: typeof a == "object" ? a.mobile : a,
-            // Chrome 57-65 support
-            gridColumnGap: typeof m == "object" ? m.mobile : m,
-            gridRowGap: typeof a == "object" ? a.mobile : a
-        };
-    }
-    return /*#__PURE__*/ d.createElement(z, _object_spread({
-        ref: x,
-        className: c(G, g, e ? typeof e == "number" ? C[e] : M : "", t ? typeof t == "number" ? T[t] : j : "", f ? v[f] : "", o ? V[o] : "", r ? k[r] : "", l ? E[l] : "", n ? J[n] : ""),
+    return /*#__PURE__*/ u.createElement(S, _object_spread({
+        ref: V,
+        className: A(k, T, e ? typeof e == "number" ? E[e] : J : "", t ? typeof t == "number" ? N[t] : j : "", a ? D[a] : "", o ? F[o] : "", r ? I[r] : "", f ? P[f] : "", n ? h[n] : ""),
         style: _object_spread({
-            height: u,
-            minHeight: y
-        }, g ? {} : b, B(_object_spread({}, K(t, e))))
-    }, R(S)), s);
-}), Z = /*#__PURE__*/ d.forwardRef((param, s)=>{
-    let { rowStart: t, rowSpan: e, columnStart: i, columnSpan: f, span: o, justifySelf: r, alignSelf: l, children: n, as: u = "div", dataAttributes: y } = param;
-    return o && (Array.isArray(o) ? (f = o[0], e = o[1]) : (f = o, e = o)), /*#__PURE__*/ d.createElement(u, _object_spread({
+            height: y,
+            minHeight: b
+        }, g(c.columnGap, M), g(c.rowGap, C), z(_object_spread({}, U(t, e))))
+    }, R(G)), s);
+}), v = /*#__PURE__*/ u.forwardRef((param, s)=>{
+    let { rowStart: t, rowSpan: e, columnStart: i, columnSpan: a, span: o, justifySelf: r, alignSelf: f, children: n, as: y = "div", dataAttributes: b } = param;
+    return o && (Array.isArray(o) ? (a = o[0], e = o[1]) : (a = o, e = o)), /*#__PURE__*/ u.createElement(y, _object_spread({
         ref: s,
-        className: c(f ? f === "full" ? N : h[f] : "", e ? e === "full" ? w : D[e] : "", i ? F[i] : "", t ? I[t] : "", r ? P[r] : "", l ? q[l] : "")
-    }, R(y)), n);
+        className: A(a ? a === "full" ? q : w[a] : "", e ? e === "full" ? B : H[e] : "", i ? K[i] : "", t ? L[t] : "", r ? O[r] : "", f ? Q[f] : "")
+    }, R(b)), n);
 });
-export { Y as Grid, Z as GridItem };
+export { _ as Grid, v as GridItem };

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

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./hero.css.ts.vanilla.css-mistica.js";
-var t = "_16rbpto7 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", o = "_16rbpto2 _1y2v1nfhk", a = "_1y2v1nfhz _1y2v1nfio", v = "_16rbpto3", i = "_1y2v1nfhq", _ = "_16rbpto9", e = "_16rbpto8", p = {
+var o = "_16rbpto9 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", v = "_16rbpto3 _1y2v1nfhk", t = "_1y2v1nfhz _1y2v1nfio", a = "_16rbpto5", _ = "_1y2v1nfhq", i = "_1y2v1nfio _1y2v1nfhk _1y2v1nfhw _1y2v1nfhq", e = "_16rbptob", y = "_1y2v1nfio", f = "_16rbptoa", h = {
     height: "var(--_16rbpto0)"
 };
-export { t as actions, o as container, a as containerDesktop, v as containerMinHeight, i as containerMobile, _ as expandedContent, e as layout, p as vars };
+export { o as actions, v as container, t as containerDesktop, a as containerMinHeight, _ as containerMobile, i as contentContainer, e as expandedContent, y as hero, f as layout, h as vars };