@telefonica/mistica 16.36.1 → 16.37.0

package/dist-es/rating.js

@@ -78,7 +78,7 @@ import fo from "./generated/mistica-icons/icon-face-happy-regular.js";
 import go from "./generated/mistica-icons/icon-face-super-happy-filled.js";
 import bo from "./generated/mistica-icons/icon-face-super-happy-regular.js";
 import { useTheme as ho } from "./hooks.js";
-import { ratingVeryBadLabel as Ao, ratingBadLabel as Fo, ratingRegularLabel as Ro, ratingGoodLabel as No, ratingVeryGoodLabel as So, ratingQuantitativeLabel as Lo } from "./text-tokens.js";
+import { ratingVeryBadLabel as Ao, ratingBadLabel as Fo, ratingRegularLabel as Ro, ratingGoodLabel as So, ratingVeryGoodLabel as Lo, ratingQuantitativeLabel as No } from "./text-tokens.js";
 const To = 32, _o = 16, yo = 5, Eo = {
     ActiveIcon: q,
     InactiveIcon: D,
@@ -125,23 +125,23 @@ const To = 32, _o = 16, yo = 5, Eo = {
         R
     ];
 }, H = (param)=>{
-    let { icons: i = V, count: e = yo, icon: I = Eo, size: a = To, type: n = "quantitative", dataAttributes: p, onChangeValue: A, defaultValue: F, value: R, disabled: l, role: N, valueLabels: O, withHalfValue: Q, "aria-label": f, "aria-labelledby": S } = param;
+    let { icons: i = V, count: e = yo, icon: I = Eo, size: a = To, type: n = "quantitative", dataAttributes: p, onChangeValue: A, defaultValue: F, value: R, disabled: l, role: S, valueLabels: O, withHalfValue: Q, "aria-label": f, "aria-labelledby": L } = param;
     const { texts: v, t: u } = ho(), $ = [
         v.ratingVeryBadLabel || u(Ao),
         v.ratingBadLabel || u(Fo),
         v.ratingRegularLabel || u(Ro),
-        v.ratingGoodLabel || u(No),
-        v.ratingVeryGoodLabel || u(So)
+        v.ratingGoodLabel || u(So),
+        v.ratingVeryGoodLabel || u(Lo)
     ], B = Array.from({
         length: e
-    }, (o, t)=>(v.ratingQuantitativeLabel || u(Lo)).replace("1$s", String(t + 1)).replace("2$s", String(e))), m = n === "qualitative" ? i : Array.from({
+    }, (o, t)=>(v.ratingQuantitativeLabel || u(No)).replace("1$s", String(t + 1)).replace("2$s", String(e))), m = n === "qualitative" ? i : Array.from({
         length: e
-    }, ()=>I), g = O !== null && O !== void 0 ? O : n === "qualitative" && no(m, V) ? $ : B, b = N === "radiogroup", _ = b ? 16 : a <= 16 ? 2 : a <= 24 ? 4 : 8, y = P(), [L, E] = T.useState(void 0), C = eo(), [s, M] = Go({
+    }, ()=>I), g = O !== null && O !== void 0 ? O : n === "qualitative" && no(m, V) ? $ : B, b = S === "radiogroup", _ = b ? 16 : a <= 16 ? 2 : a <= 24 ? 4 : 8, y = P(), [N, E] = T.useState(void 0), C = eo(), [s, M] = Go({
         value: R,
         defaultValue: F,
         iconsCount: m.length,
         onChangeValue: A
-    }), j = (o)=>L !== void 0 && !l ? n === "qualitative" && o === L || n === "quantitative" && o <= L ? "active" : "inactive" : n === "qualitative" ? o === s ? "active" : "inactive" : b ? o <= s ? "active" : "inactive" : Q ? o - 0.75 <= s && s < o - 0.25 ? "half" : o - 0.25 <= s ? "active" : "inactive" : o - 0.5 < s ? "active" : "inactive", w = (o, t)=>{
+    }), j = (o)=>N !== void 0 && !l ? n === "qualitative" && o === N || n === "quantitative" && o <= N ? "active" : "inactive" : n === "qualitative" ? o === s ? "active" : "inactive" : b ? o <= s ? "active" : "inactive" : Q ? o - 0.75 <= s && s < o - 0.25 ? "half" : o - 0.25 <= s ? "active" : "inactive" : o - 0.5 < s ? "active" : "inactive", w = (o, t)=>{
         const d = y === "inverse" ? c.colors.inverse : m[t].color, h = y === "inverse" ? c.colors.inverse : b ? c.colors.control : m[0].color;
         switch(j(t + 1)){
             case "active":
@@ -207,17 +207,17 @@ const To = 32, _o = 16, yo = 5, Eo = {
             }
         }, t) : d;
     };
-    return N === "img" ? /* @__PURE__ */ r(U, {
+    return S === "img" ? /* @__PURE__ */ r(U, {
         space: _,
         dataAttributes: p,
-        role: N,
-        "aria-label": f !== null && f !== void 0 ? f : S ? void 0 : `${s} de ${e}`,
-        "aria-labelledby": f ? void 0 : S,
+        role: S,
+        "aria-label": f !== null && f !== void 0 ? f : L ? void 0 : `${s} de ${e}`,
+        "aria-labelledby": f ? void 0 : L,
         children: m.map(G)
     }) : /* @__PURE__ */ r(io, {
         name: "info-rating",
         "aria-label": f,
-        "aria-labelledby": f ? void 0 : S,
+        "aria-labelledby": f ? void 0 : L,
         disabled: l,
         onChange: (o)=>{
             M(g.findIndex((t)=>t === o) + 1);

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

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
-var v = 16, e = 32, o = {
-    inverse: "v16_36_1_1y2v1nf4l",
-    media: "v16_36_1_1y2v1nf8k",
-    alternative: "v16_36_1_1y2v1nf4q"
-}, a = "v16_36_1_17lofg77", n = "v16_36_1_17lofg78", t = "v16_36_1_17lofg7a", i = "v16_36_1_17lofg7g v16_36_1_1y2v1nfjf", f = "v16_36_1_17lofg79", l = "v16_36_1_17lofg73", g = "v16_36_1_17lofg72", s = "v16_36_1_17lofg75", p = "v16_36_1_17lofg74", M = "v16_36_1_17lofg7e", C = "v16_36_1_17lofg76";
-export { v as MOBILE_SIDE_MARGIN, e as TABLET_SIDE_MARGIN, o as backgroundVariant, a as desktopContainer, n as forcedMarginDesktopContainer, t as forcedMarginMobileContainer, i as fullWidth, f as mobileContainer, l as resetContainerDesktop, g as resetContainerMobile, s as resetDesktop, p as resetMobile, M as responsiveLayout, C as responsiveLayoutContainer };
+var e = 16, o = 32, _ = {
+    inverse: "v16_37_1y2v1nf53",
+    media: "v16_37_1y2v1nf9k",
+    alternative: "v16_37_1y2v1nf58"
+}, a = "v16_37_17lofg77", n = "v16_37_17lofg78", t = "v16_37_17lofg7a", i = "v16_37_17lofg7g v16_37_1y2v1nfkf", f = "v16_37_17lofg79", l = "v16_37_17lofg73", g = "v16_37_17lofg72", s = "v16_37_17lofg75", p = "v16_37_17lofg74", M = "v16_37_17lofg7e", k = "v16_37_17lofg76";
+export { e as MOBILE_SIDE_MARGIN, o as TABLET_SIDE_MARGIN, _ as backgroundVariant, a as desktopContainer, n as forcedMarginDesktopContainer, t as forcedMarginMobileContainer, i as fullWidth, f as mobileContainer, l as resetContainerDesktop, g as resetContainerMobile, s as resetDesktop, p as resetMobile, M as responsiveLayout, k as responsiveLayoutContainer };

package/dist-es/responsive-layout.js

@@ -79,27 +79,27 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as t } from "react/jsx-runtime";
-import s from "classnames";
+import o from "classnames";
 import { getPrefixedDataAttributes as f } from "./utils/dom.js";
-import { backgroundVariant as v, desktopContainer as p, forcedMarginDesktopContainer as y, mobileContainer as h, forcedMarginMobileContainer as C, responsiveLayoutContainer as L, fullWidth as b, responsiveLayout as N, resetContainerMobile as R, resetContainerDesktop as V, resetMobile as g, resetDesktop as M } from "./responsive-layout.css-mistica.js";
+import { backgroundVariant as v, desktopContainer as p, forcedMarginDesktopContainer as y, mobileContainer as h, forcedMarginMobileContainer as C, responsiveLayoutContainer as L, fullWidth as b, responsiveLayout as R, resetContainerMobile as V, resetContainerDesktop as g, resetMobile as M, resetDesktop as N } from "./responsive-layout.css-mistica.js";
 import { useThemeVariant as x, ThemeVariant as D } from "./theme-variant-context.js";
 const k = (param)=>{
-    let { children: a, isInverse: e = !1, variant: r, backgroundColor: n, className: d, fullWidth: i, dataAttributes: m, shouldExpandWhenNested: l = !1, innerDivClassName: c } = param;
-    const u = x(), o = r || e && "inverse" || void 0;
+    let { children: a, isInverse: e = !1, variant: r, backgroundColor: s, className: d, fullWidth: i, dataAttributes: m, shouldExpandWhenNested: l = !1, innerDivClassName: c } = param;
+    const u = x(), n = r || e && "inverse" || void 0;
     return /* @__PURE__ */ t(D, {
-        variant: o !== null && o !== void 0 ? o : u,
+        variant: n !== null && n !== void 0 ? n : u,
         children: /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-            className: s(d, o && o !== "default" && v[o], ...i ? [] : [
+            className: o(d, n && n !== "default" && v[n], ...i ? [] : [
                 l ? p : y,
                 l === !0 ? h : C,
                 L
             ]),
-            style: n ? {
-                background: n
+            style: s ? {
+                background: s
             } : void 0
         }, f(m)), {
             children: /* @__PURE__ */ t("div", {
-                className: s(i ? b : N, c),
+                className: o(i ? b : R, c),
                 children: a
             })
         }))
@@ -115,14 +115,14 @@ const k = (param)=>{
 }, q = (param)=>{
     let { children: a, skipMobile: e = !1, skipDesktop: r = !1 } = param;
     return /* @__PURE__ */ t("div", {
-        className: s({
-            [R]: !e,
-            [V]: !r
+        className: o({
+            [V]: !e,
+            [g]: !r
         }),
         children: /* @__PURE__ */ t("div", {
-            className: s({
-                [g]: !e,
-                [M]: !r
+            className: o({
+                [M]: !e,
+                [N]: !r
             }),
             children: a
         })

package/dist-es/screen-reader-only.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./screen-reader-only.css.ts.vanilla.css-mistica.js";
-var n = "v16_36_1_gwdgwo1 v16_36_1_1y2v1nf8l v16_36_1_1y2v1nf9u v16_36_1_1y2v1nfb3 v16_36_1_1y2v1nfcc v16_36_1_1y2v1nfin v16_36_1_1y2v1nflu v16_36_1_1y2v1nfla";
+var n = "v16_37_gwdgwo1 v16_37_1y2v1nf9l v16_37_1y2v1nfau v16_37_1y2v1nfc3 v16_37_1y2v1nfdc v16_37_1y2v1nfjn v16_37_1y2v1nfmu v16_37_1y2v1nfma";
 export { n as screenReaderOnly };

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

@@ -2,23 +2,23 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
 import "./text-field-base.css.ts.vanilla.css-mistica.js";
 import "./select.css.ts.vanilla.css-mistica.js";
-var f = "v16_36_1_1sqpivvo v16_36_1_1y2v1nfin", y = "v16_36_1_1sqpivvp", a = "v16_36_1_1sqpivvr v16_36_1_1y2v1nfbi v16_36_1_1y2v1nfcr v16_36_1_1y2v1nf8u v16_36_1_1y2v1nfa3 v16_36_1_1y2v1nf2c v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nflt", s = "v16_36_1_1y2v1nf4q", r = {
-    show: "v16_36_1_1sqpivv7",
-    hide: "v16_36_1_1sqpivv8"
-}, t = "v16_36_1_1sqpivv6 v16_36_1_1y2v1nf8l v16_36_1_1y2v1nf9u v16_36_1_1y2v1nfb3 v16_36_1_1y2v1nfcc v16_36_1_1y2v1nfio v16_36_1_1y2v1nflj v16_36_1_1y2v1nf4c", p = {
-    default: "v16_36_1_1sqpivvd v16_36_1_1sqpivvc v16_36_1_1y2v1nfim v16_36_1_1y2v1nflt",
-    fullWidth: "v16_36_1_1sqpivve v16_36_1_1sqpivvc v16_36_1_1y2v1nfim v16_36_1_1y2v1nflt"
-}, l = {
-    default: "v16_36_1_1sqpivvl v16_36_1_1sqpivvk v16_36_1_1y2v1nfin v16_36_1_1y2v1nflu v16_36_1_1y2v1nfl7 v16_36_1_1y2v1nf2c",
-    disabled: "v16_36_1_1sqpivvm v16_36_1_1sqpivvk v16_36_1_1y2v1nfin v16_36_1_1y2v1nflu v16_36_1_1y2v1nfl7 v16_36_1_1y2v1nf2c"
+var i = "v16_37_1sqpivvo v16_37_1y2v1nfjn", y = "v16_37_1sqpivvp", a = "v16_37_1sqpivvr v16_37_1y2v1nfci v16_37_1y2v1nfdr v16_37_1y2v1nf9u v16_37_1y2v1nfb3 v16_37_1y2v1nf2n v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfmt", s = "v16_37_1y2v1nf58", r = {
+    show: "v16_37_1sqpivv7",
+    hide: "v16_37_1sqpivv8"
+}, t = "v16_37_1sqpivv6 v16_37_1y2v1nf9l v16_37_1y2v1nfau v16_37_1y2v1nfc3 v16_37_1y2v1nfdc v16_37_1y2v1nfjo v16_37_1y2v1nfmj v16_37_1y2v1nf4u", p = {
+    default: "v16_37_1sqpivvd v16_37_1sqpivvc v16_37_1y2v1nfjm v16_37_1y2v1nfmt",
+    fullWidth: "v16_37_1sqpivve v16_37_1sqpivvc v16_37_1y2v1nfjm v16_37_1y2v1nfmt"
+}, m = {
+    default: "v16_37_1sqpivvl v16_37_1sqpivvk v16_37_1y2v1nfjn v16_37_1y2v1nfmu v16_37_1y2v1nfm7 v16_37_1y2v1nf2n",
+    disabled: "v16_37_1sqpivvm v16_37_1sqpivvk v16_37_1y2v1nfjn v16_37_1y2v1nfmu v16_37_1y2v1nfm7 v16_37_1y2v1nf2n"
 }, e = {
-    default: "v16_36_1_1sqpivvh v16_36_1_1sqpivvg v16_36_1_1y2v1nf8l v16_36_1_1y2v1nf9u v16_36_1_1y2v1nfla v16_36_1_1y2v1nflu v16_36_1_1y2v1nf2c v16_36_1_1y2v1nf8k v16_36_1_1y2v1nfjf v16_36_1_1y2v1nflj",
-    disabled: "v16_36_1_1sqpivvi v16_36_1_1sqpivvg v16_36_1_1y2v1nf8l v16_36_1_1y2v1nf9u v16_36_1_1y2v1nfla v16_36_1_1y2v1nflu v16_36_1_1y2v1nf2c v16_36_1_1y2v1nf8k v16_36_1_1y2v1nfjf v16_36_1_1y2v1nflj"
+    default: "v16_37_1sqpivvh v16_37_1sqpivvg v16_37_1y2v1nf9l v16_37_1y2v1nfau v16_37_1y2v1nfma v16_37_1y2v1nfmu v16_37_1y2v1nf2n v16_37_1y2v1nf9k v16_37_1y2v1nfkf v16_37_1y2v1nfmj",
+    disabled: "v16_37_1sqpivvi v16_37_1sqpivvg v16_37_1y2v1nf9l v16_37_1y2v1nfau v16_37_1y2v1nfma v16_37_1y2v1nfmu v16_37_1y2v1nf2n v16_37_1y2v1nf9k v16_37_1y2v1nfkf v16_37_1y2v1nfmj"
 }, q = {
-    top: "var(--v16_36_1_1sqpivv0)",
-    left: "var(--v16_36_1_1sqpivv1)",
-    transformOrigin: "var(--v16_36_1_1sqpivv2)",
-    minWidth: "var(--v16_36_1_1sqpivv3)",
-    maxHeight: "var(--v16_36_1_1sqpivv4)"
+    top: "var(--v16_37_1sqpivv0)",
+    left: "var(--v16_37_1sqpivv1)",
+    transformOrigin: "var(--v16_37_1sqpivv2)",
+    minWidth: "var(--v16_37_1sqpivv3)",
+    maxHeight: "var(--v16_37_1sqpivv4)"
 };
-export { f as arrowDown, y as iconContainer, a as menuItem, s as menuItemSelected, r as optionsAnimationsVariants, t as optionsContainer, p as selectContainerVariants, l as selectTextVariants, e as selectVariants, q as vars };
+export { i as arrowDown, y as iconContainer, a as menuItem, s as menuItemSelected, r as optionsAnimationsVariants, t as optionsContainer, p as selectContainerVariants, m as selectTextVariants, e as selectVariants, q as vars };

package/dist-es/select.js

@@ -64,7 +64,7 @@ import je from "./overlay.js";
 import { isAndroid as Ke, isIos as Ue } from "./utils/platform.js";
 import { cancelEvent as m } from "./utils/dom.js";
 import { Text3 as Xe } from "./text.js";
-import { selectVariants as Je, arrowDown as Qe, iconContainer as ce, selectContainerVariants as Ye, selectTextVariants as et, vars as b, optionsContainer as tt, optionsAnimationsVariants as ae, menuItem as nt, menuItemSelected as rt } from "./select.css-mistica.js";
+import { selectVariants as Je, arrowDown as Qe, iconContainer as ce, selectContainerVariants as Ye, selectTextVariants as et, vars as N, optionsContainer as tt, optionsAnimationsVariants as ae, menuItem as nt, menuItemSelected as rt } from "./select.css-mistica.js";
 import { inputWithLabel as le, inputWithoutLabel as ue } from "./text-field-base.css-mistica.js";
 import { Portal as ot } from "./portal.js";
 import { pxToRem as st, applyCssVars as it } from "./utils/css.js";
@@ -73,8 +73,8 @@ import { vars as de } from "./skins/skin-contract.css-mistica.js";
 const at = (param)=>{
     let { id: fe, label: u, helperText: pe, value: me, defaultValue: he, onChangeValue: C, name: i, fullWidth: M, options: d, optional: P, showOptionalLabel: Se, disabled: ve, error: ge, onBlur: D, autoFocus: z = !1, native: Te, dataAttributes: j } = param;
     var re;
-    const h = n.useRef(null), f = n.useRef(null), S = n.useRef(null), v = n.useRef(null), R = n.useRef(/* @__PURE__ */ new Map()), [Ie, we] = n.useState(!0), [g, Ee] = n.useState(he), [H, K] = n.useState(!1), [U, X] = n.useState(!1), [J, O] = n.useState(!1), [a, F] = n.useState({}), [T, W] = n.useState(), G = n.useRef(null), xe = n.useId(), L = fe || xe, { rawValues: Oe, setRawValue: Z, setValue: $, formStatus: ye, formErrors: Q, setFormError: Ne, register: B } = He(), { platformOverrides: Y } = Fe(), be = Te || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Ke(Y) || Ue(Y), I = ve || ye === "sending", A = ge || !!Q[i], ee = Q[i] || pe, l = me !== null && me !== void 0 ? me : Oe[i], te = (e)=>{
-        C == null || C(e), Ne({
+    const h = n.useRef(null), f = n.useRef(null), S = n.useRef(null), v = n.useRef(null), R = n.useRef(/* @__PURE__ */ new Map()), [Ie, we] = n.useState(!0), [g, Ee] = n.useState(he), [H, K] = n.useState(!1), [U, X] = n.useState(!1), [J, O] = n.useState(!1), [a, F] = n.useState({}), [T, W] = n.useState(), G = n.useRef(null), xe = n.useId(), L = fe || xe, { rawValues: Oe, setRawValue: Z, setValue: $, formStatus: ye, formErrors: Q, setFormError: be, register: B } = He(), { platformOverrides: Y } = Fe(), Ne = Te || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Ke(Y) || Ue(Y), I = ve || ye === "sending", A = ge || !!Q[i], ee = Q[i] || pe, l = me !== null && me !== void 0 ? me : Oe[i], te = (e)=>{
+        C == null || C(e), be({
             name: i,
             error: ""
         }), Z({
@@ -87,9 +87,9 @@ const at = (param)=>{
     }, w = (e)=>{
         if (e) {
             if (S != null && S.current) {
-                const s = S.current.getBoundingClientRect(), p = s.top, x = s.width, y = s.left, Ce = s.height, N = p + Ce, V = Math.min(d.length, 8) * 48 + 16;
-                if (N + V + 12 > window.innerHeight) {
-                    const Me = window.innerHeight - N;
+                const s = S.current.getBoundingClientRect(), p = s.top, x = s.width, y = s.left, Ce = s.height, b = p + Ce, V = Math.min(d.length, 8) * 48 + 16;
+                if (b + V + 12 > window.innerHeight) {
+                    const Me = window.innerHeight - b;
                     if (p > Me) {
                         const Pe = p - V;
                         F({
@@ -101,14 +101,14 @@ const at = (param)=>{
                         });
                     } else F({
                         minWidth: x,
-                        top: N,
+                        top: b,
                         left: y,
-                        maxHeight: window.innerHeight - N - 12,
+                        maxHeight: window.innerHeight - b - 12,
                         transformOrigin: "center top"
                     });
                 } else F({
                     minWidth: x,
-                    top: N,
+                    top: b,
                     left: y,
                     maxHeight: V,
                     transformOrigin: "center top"
@@ -228,7 +228,7 @@ const at = (param)=>{
     var _a_transformOrigin;
     return /* @__PURE__ */ r(ct, {
         variant: "default",
-        children: be || Ie ? /* @__PURE__ */ _($e, {
+        children: Ne || Ie ? /* @__PURE__ */ _($e, {
             disabled: I,
             helperText: /* @__PURE__ */ r(Be, {
                 error: A,
@@ -372,11 +372,11 @@ const at = (param)=>{
                     children: /* @__PURE__ */ r(ot, {
                         children: /* @__PURE__ */ r("ul", {
                             style: it({
-                                [b.top]: a.top ? `${a.top}px` : "",
-                                [b.left]: a.left ? `${a.left}px` : "",
-                                [b.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
-                                [b.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
-                                [b.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
+                                [N.top]: a.top ? `${a.top}px` : "",
+                                [N.left]: a.left ? `${a.left}px` : "",
+                                [N.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
+                                [N.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
+                                [N.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
                             }),
                             onPointerDown: m,
                             className: k(tt, U ? ae.show : ae.hide),

package/dist-es/sheet-action-row.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./sheet-action-row.css.ts.vanilla.css-mistica.js";
-var n = "v16_36_1_4k81wx1 v16_36_1_1y2v1nf90 v16_36_1_1y2v1nfa9 v16_36_1_1y2v1nfbi v16_36_1_1y2v1nfcr v16_36_1_1y2v1nfis v16_36_1_1y2v1nfl5 v16_36_1_1y2v1nfj7";
+var n = "v16_37_4k81wx1 v16_37_1y2v1nfa0 v16_37_1y2v1nfb9 v16_37_1y2v1nfci v16_37_1y2v1nfdr v16_37_1y2v1nfjs v16_37_1y2v1nfm5 v16_37_1y2v1nfk7";
 export { n as sheetActionRow };

package/dist-es/sheet-common.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./sheet-common.css.ts.vanilla.css-mistica.js";
-var n = "v16_36_1_pidemf6 v16_36_1_1y2v1nf4b", f = "v16_36_1_pidemf4 v16_36_1_1y2v1nfio v16_36_1_1y2v1nfmf v16_36_1_1y2v1nfmu v16_36_1_1y2v1nfn9", y = "v16_36_1_pidemf9 v16_36_1_1y2v1nf99 v16_36_1_1y2v1nfis v16_36_1_1y2v1nfiy", e = "v16_36_1_pidemfu", i = "v16_36_1_1y2v1nflz v16_36_1_1y2v1nfje v16_36_1_1y2v1nfis v16_36_1_1y2v1nfiy", a = "v16_36_1_pidemfp", r = "v16_36_1_pidemf7", m = "v16_36_1_1y2v1nf5m v16_36_1_1y2v1nfjf v16_36_1_1y2v1nfjw v16_36_1_1y2v1nfld", t = "v16_36_1_pidemfe v16_36_1_1y2v1nfir", o = "v16_36_1_1y2v1nfjo v16_36_1_1y2v1nfjz", d = "v16_36_1_pidemfj v16_36_1_1y2v1nf96 v16_36_1_1y2v1nfaf v16_36_1_1y2v1nfbo v16_36_1_1y2v1nfcx v16_36_1_1y2v1nfin v16_36_1_1y2v1nfm0 v16_36_1_1y2v1nfmu", p = "v16_36_1_pidemfo v16_36_1_1y2v1nfio v16_36_1_1y2v1nf4n v16_36_1_1y2v1nfm0 v16_36_1_1y2v1nfmf v16_36_1_1y2v1nfmu v16_36_1_1y2v1nfn9", l = "v16_36_1_pidemfc v16_36_1_1y2v1nf8u v16_36_1_1y2v1nfa3 v16_36_1_1y2v1nfin v16_36_1_1y2v1nfm0 v16_36_1_1y2v1nfk9 v16_36_1_1y2v1nfjf v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj1", s = "v16_36_1_pidemft v16_36_1_1y2v1nfiq v16_36_1_1y2v1nfn9 v16_36_1_1y2v1nf4b", h = "v16_36_1_pidemfr v16_36_1_1y2v1nfiq v16_36_1_1y2v1nfm0 v16_36_1_1y2v1nf4b", u = 400;
-export { n as Sheet, f as SheetContainer, y as SheetContent, e as bodyContent, i as children, a as closingOverlay, r as closingSheet, m as handleBar, t as handleContainer, o as handleTouchable, d as modalCloseButton, p as overlay, l as sheetTopDraggingArea, s as stickyButtons, h as stickyTitle, u as transitionDuration };
+var n = "v16_37_pidemf6 v16_37_1y2v1nf4t", f = "v16_37_pidemf4 v16_37_1y2v1nfjo v16_37_1y2v1nfnf v16_37_1y2v1nfnu v16_37_1y2v1nfo9", y = "v16_37_pidemf9 v16_37_1y2v1nfa9 v16_37_1y2v1nfjs v16_37_1y2v1nfjy", e = "v16_37_pidemfu", a = "v16_37_1y2v1nfmz v16_37_1y2v1nfke v16_37_1y2v1nfjs v16_37_1y2v1nfjy", r = "v16_37_pidemfp", t = "v16_37_pidemf7", o = "v16_37_1y2v1nf6f v16_37_1y2v1nfkf v16_37_1y2v1nfkw v16_37_1y2v1nfmd", i = "v16_37_pidemfe v16_37_1y2v1nfjr", d = "v16_37_1y2v1nfko v16_37_1y2v1nfkz", m = "v16_37_pidemfj v16_37_1y2v1nfa6 v16_37_1y2v1nfbf v16_37_1y2v1nfco v16_37_1y2v1nfdx v16_37_1y2v1nfjn v16_37_1y2v1nfn0 v16_37_1y2v1nfnu", p = "v16_37_pidemfo v16_37_1y2v1nfjo v16_37_1y2v1nf55 v16_37_1y2v1nfn0 v16_37_1y2v1nfnf v16_37_1y2v1nfnu v16_37_1y2v1nfo9", j = "v16_37_pidemfc v16_37_1y2v1nf9u v16_37_1y2v1nfb3 v16_37_1y2v1nfjn v16_37_1y2v1nfn0 v16_37_1y2v1nfl9 v16_37_1y2v1nfkf v16_37_1y2v1nfjs v16_37_1y2v1nfk1", l = "v16_37_pidemft v16_37_1y2v1nfjq v16_37_1y2v1nfo9 v16_37_1y2v1nf4t", s = "v16_37_pidemfr v16_37_1y2v1nfjq v16_37_1y2v1nfn0 v16_37_1y2v1nf4t", h = 400;
+export { n as Sheet, f as SheetContainer, y as SheetContent, e as bodyContent, a as children, r as closingOverlay, t as closingSheet, o as handleBar, i as handleContainer, d as handleTouchable, m as modalCloseButton, p as overlay, j as sheetTopDraggingArea, l as stickyButtons, s as stickyTitle, h as transitionDuration };

package/dist-es/sheet-info.css-mistica.js

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var v = "v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfk4", n = "v16_36_1_1y2v1nfjw v16_36_1_1y2v1nfis", f = "v16_36_1_1y2v1nf90 v16_36_1_1y2v1nfa9 v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfl5";
-export { v as infoItemIcon, n as infoItemIconContainer, f as itemContainer };
+var _ = "v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfl4", n = "v16_37_1y2v1nfkw v16_37_1y2v1nfjs", f = "v16_37_1y2v1nfa0 v16_37_1y2v1nfb9 v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfm5";
+export { _ as infoItemIcon, n as infoItemIconContainer, f as itemContainer };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./skeletons.css.ts.vanilla.css-mistica.js";
-var n = "v16_36_1_zopolw6 v16_36_1_1y2v1nfiu", r = {
-    default: "v16_36_1_1y2v1nf4o",
-    inverse: "v16_36_1_1y2v1nf4p"
-}, a = "v16_36_1_1y2v1nfja v16_36_1_1y2v1nfjc", o = "v16_36_1_zopolwa v16_36_1_1y2v1nfjb", f = "v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfj1";
-export { n as animation, r as background, a as circle, o as line, f as row };
+var n = "v16_37_zopolw6 v16_37_1y2v1nfju", r = {
+    default: "v16_37_1y2v1nf56",
+    inverse: "v16_37_1y2v1nf57"
+}, a = "v16_37_1y2v1nfka v16_37_1y2v1nfkc", f = "v16_37_zopolwa v16_37_1y2v1nfkb", o = "v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1";
+export { n as animation, r as background, a as circle, f as line, o as row };

package/dist-es/skins/blau.js

@@ -75,34 +75,51 @@ const e = {
             buttonDangerBackground: e.blauRed,
             buttonDangerBackgroundPressed: e.blauRed70,
             buttonDangerBackgroundHover: e.blauRed70,
-            buttonLinkDangerBackgroundPressed: e.blauRed10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.blauRed10,
             buttonLinkDangerBackgroundInversePressed: e.blauRed10,
+            buttonLinkDangerBackgroundMediaPressed: e.blauRed10,
             buttonLinkBackgroundPressed: e.blauPurple10,
             buttonLinkBackgroundInversePressed: r(e.white, 0.15),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.15),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundInverseHover: e.blauBluePrimary20,
+            buttonPrimaryBackgroundMediaHover: e.blauBluePrimary20,
+            buttonPrimaryBackgroundPressed: e.blauBlueSecondary60,
             buttonPrimaryBackgroundInversePressed: e.blauBluePrimary30,
+            buttonPrimaryBackgroundMediaPressed: e.blauBluePrimary30,
             buttonSecondaryBorder: e.blauBlueSecondary,
-            buttonSecondaryBorderPressed: e.blauBlueSecondary60,
             buttonSecondaryBorderInverse: e.white,
-            buttonSecondaryBackgroundHover: e.blauBlueSecondary10,
-            buttonSecondaryBackgroundPressed: e.blauBlueSecondary10,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.blauBlueSecondary60,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.blauBlueSecondary10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.2),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.2),
+            buttonSecondaryBackgroundPressed: e.blauBlueSecondary10,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.2),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.2),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.blauBlueSecondary,
+            textButtonPrimaryMedia: e.blauBlueSecondary,
             textButtonPrimaryInversePressed: e.blauBlueSecondary60,
+            textButtonPrimaryMediaPressed: e.blauBlueSecondary60,
             textButtonSecondary: e.blauBlueSecondary,
-            textButtonSecondaryPressed: e.blauBlueSecondary60,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.blauBlueSecondary60,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.blauPurple,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.blauRed,
+            textLinkDangerMedia: e.blauRed,
             textLinkSnackbar: e.blauPurple30,
             textActivated: e.blauBlueSecondary,
             textBrand: e.blauBlueSecondary,
@@ -194,7 +211,8 @@ const e = {
             tagBackgroundSuccessInverse: e.blauGreen10,
             tagBackgroundWarningInverse: e.blauYellow10,
             tagBackgroundErrorInverse: e.blauRed10,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.grey6, 0.7)
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -229,34 +247,51 @@ const e = {
             buttonDangerBackground: e.blauRed,
             buttonDangerBackgroundPressed: e.blauRed70,
             buttonDangerBackgroundHover: e.blauRed70,
-            buttonLinkDangerBackgroundPressed: r(e.blauRed, 0.3),
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: r(e.blauRed, 0.3),
             buttonLinkDangerBackgroundInversePressed: r(e.blauPurple, 0.3),
+            buttonLinkDangerBackgroundMediaPressed: e.blauRed10,
             buttonLinkBackgroundPressed: r(e.blauPurple, 0.3),
             buttonLinkBackgroundInversePressed: r(e.blauPurple, 0.3),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.15),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
-            buttonPrimaryBackgroundPressed: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundInverseHover: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundMediaHover: e.blauBluePrimary20,
+            buttonPrimaryBackgroundPressed: e.blauBlueSecondary60,
             buttonPrimaryBackgroundInversePressed: e.blauBlueSecondary60,
+            buttonPrimaryBackgroundMediaPressed: e.blauBluePrimary30,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderPressed: e.white,
-            buttonSecondaryBackgroundHover: r(e.white, 0.15),
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.2),
+            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.2),
             textButtonPrimary: e.grey2,
             textButtonPrimaryInverse: e.grey2,
+            textButtonPrimaryMedia: e.blauBlueSecondary,
             textButtonPrimaryInversePressed: e.grey2,
+            textButtonPrimaryMediaPressed: e.blauBlueSecondary60,
             textButtonSecondary: e.grey2,
-            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInverse: e.grey2,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInversePressed: e.grey2,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.blauPurple30,
             textLinkInverse: e.blauPurple30,
+            textLinkMedia: e.white,
             textLinkDanger: e.blauRed40,
+            textLinkDangerMedia: e.blauRed,
             textLinkSnackbar: e.blauPurple30,
             textActivated: e.blauBluePrimary,
             textBrand: e.blauBluePrimary,
@@ -348,7 +383,8 @@ const e = {
             tagBackgroundSuccessInverse: e.darkModeGrey6,
             tagBackgroundWarningInverse: e.darkModeGrey6,
             tagBackgroundErrorInverse: e.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.grey6, 0)} 0%, ${r(e.grey6, 0.4)} 30%, ${r(e.grey6, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.grey6, 0.7)
         },
         borderRadii: {
             avatar: "50%",

package/dist-es/skins/esimflag.js

@@ -77,34 +77,51 @@ const e = {
             buttonDangerBackground: e.tomato55,
             buttonDangerBackgroundPressed: e.tomato65,
             buttonDangerBackgroundHover: e.tomato60,
-            buttonLinkDangerBackgroundPressed: e.tomato10,
             buttonLinkDangerBackgroundInverse: e.white,
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: e.tomato10,
             buttonLinkDangerBackgroundInversePressed: e.tomato10,
+            buttonLinkDangerBackgroundMediaPressed: e.tomato10,
             buttonLinkBackgroundPressed: r(e.purple55, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.blue,
             buttonPrimaryBackgroundInverse: e.white,
-            buttonPrimaryBackgroundPressed: e.blue65,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.blue55,
+            buttonPrimaryBackgroundInverseHover: e.blue15,
+            buttonPrimaryBackgroundMediaHover: e.blue15,
+            buttonPrimaryBackgroundPressed: e.blue65,
             buttonPrimaryBackgroundInversePressed: e.blue15,
+            buttonPrimaryBackgroundMediaPressed: e.blue15,
             buttonSecondaryBorder: e.blue,
-            buttonSecondaryBorderPressed: e.blue55,
-            buttonSecondaryBackgroundHover: e.blue10,
-            buttonSecondaryBackgroundPressed: e.blue15,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.blue55,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
+            buttonSecondaryBackgroundHover: e.blue10,
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: e.blue15,
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.blue,
+            textButtonPrimaryMedia: e.blue,
             textButtonPrimaryInversePressed: e.blue55,
+            textButtonPrimaryMediaPressed: e.blue55,
             textButtonSecondary: e.blue,
-            textButtonSecondaryPressed: e.blue55,
             textButtonSecondaryInverse: e.white,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.blue55,
             textButtonSecondaryInversePressed: e.white,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.purple,
             textLinkInverse: e.white,
+            textLinkMedia: e.white,
             textLinkDanger: e.tomato55,
+            textLinkDangerMedia: e.tomato55,
             textLinkSnackbar: e.blue30,
             textActivated: e.blue,
             textBrand: e.blue,
@@ -198,7 +215,8 @@ const e = {
             tagBackgroundSuccessInverse: e.grass10,
             tagBackgroundWarningInverse: e.peach10,
             tagBackgroundErrorInverse: e.tomato10,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         darkModeColors: {
             background: e.darkModeBlack,
@@ -231,34 +249,51 @@ const e = {
             buttonDangerBackground: e.tomato,
             buttonDangerBackgroundPressed: e.tomato55,
             buttonDangerBackgroundHover: e.tomato55,
-            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInverse: r(e.white, 0),
+            buttonLinkDangerBackgroundMedia: e.white,
+            buttonLinkDangerBackgroundPressed: r(e.white, 0.08),
             buttonLinkDangerBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkDangerBackgroundMediaPressed: e.tomato10,
             buttonLinkBackgroundPressed: r(e.white, 0.08),
             buttonLinkBackgroundInversePressed: r(e.white, 0.08),
+            buttonLinkBackgroundMediaPressed: r(e.white, 0.08),
             buttonPrimaryBackground: e.blue,
             buttonPrimaryBackgroundInverse: e.blue,
-            buttonPrimaryBackgroundPressed: e.blue55,
+            buttonPrimaryBackgroundMedia: e.white,
             buttonPrimaryBackgroundHover: e.blue55,
+            buttonPrimaryBackgroundInverseHover: e.blue55,
+            buttonPrimaryBackgroundMediaHover: e.blue15,
+            buttonPrimaryBackgroundPressed: e.blue55,
             buttonPrimaryBackgroundInversePressed: e.blue55,
-            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
+            buttonPrimaryBackgroundMediaPressed: e.blue15,
             buttonSecondaryBorder: e.white,
-            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInverse: e.white,
+            buttonSecondaryBorderMedia: e.white,
+            buttonSecondaryBorderPressed: e.white,
             buttonSecondaryBorderInversePressed: e.white,
+            buttonSecondaryBorderMediaPressed: e.white,
             buttonSecondaryBackgroundHover: r(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaHover: r(e.white, 0.15),
+            buttonSecondaryBackgroundPressed: r(e.white, 0.15),
             buttonSecondaryBackgroundInversePressed: r(e.white, 0.15),
+            buttonSecondaryBackgroundMediaPressed: r(e.white, 0.15),
             textButtonPrimary: e.white,
             textButtonPrimaryInverse: e.white,
+            textButtonPrimaryMedia: e.blue,
             textButtonPrimaryInversePressed: e.white,
+            textButtonPrimaryMediaPressed: e.blue55,
             textButtonSecondary: e.grey2,
-            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInverse: e.grey2,
+            textButtonSecondaryMedia: e.white,
+            textButtonSecondaryPressed: e.grey2,
             textButtonSecondaryInversePressed: e.grey2,
+            textButtonSecondaryMediaPressed: e.white,
             textLink: e.purple30,
             textLinkInverse: e.purple30,
+            textLinkMedia: e.white,
             textLinkDanger: e.chili,
+            textLinkDangerMedia: e.tomato55,
             textLinkSnackbar: e.blue30,
             textActivated: e.blue30,
             textBrand: e.blue30,
@@ -352,7 +387,8 @@ const e = {
             tagBackgroundSuccessInverse: e.darkModeGrey6,
             tagBackgroundWarningInverse: e.darkModeGrey6,
             tagBackgroundErrorInverse: e.darkModeGrey6,
-            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`
+            cardContentOverlay: `linear-gradient(180deg, ${r(e.black, 0)} 0%, ${r(e.black, 0.4)} 30%, ${r(e.black, 0.7)} 100%)`,
+            cardFooterOverlay: r(e.black, 0.7)
         },
         borderRadii: {
             avatar: "50%",