@fiscozen/card 3.0.1 → 3.0.2

package/dist/card.js

@@ -1,1120 +1,1763 @@
-import { defineComponent as E, computed as r, createBlock as d, openBlock as n, resolveDynamicComponent as T, normalizeClass as s, withCtx as F, renderSlot as g, ref as B, onMounted as R, onUnmounted as Q, useSlots as Y, watch as q, createElementBlock as b, createCommentVNode as p, withDirectives as N, createElementVNode as w, toDisplayString as G, unref as i, withModifiers as P, vShow as $, createVNode as U } from "vue";
-import { FzIconButton as k, FzButton as H } from "@fiscozen/button";
-const J = /* @__PURE__ */ E({
-  __name: "FzContainer",
-  props: {
-    main: { type: Boolean, default: !1 },
-    gap: { default: "base" },
-    tag: { default: "div" },
-    alignItems: { default: void 0 },
-    horizontal: { type: Boolean, default: !1 },
-    layout: {}
-  },
-  setup(e) {
-    const a = e, l = r(() => a.alignItems ?? (a.horizontal ? "center" : "stretch"));
-    if (!a.horizontal && "layout" in a) {
-      const o = a.layout;
-      o && o !== "default" && console.error(
-        `[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${a.horizontal}, layout: "${o}".`
-      );
-    }
-    const t = r(() => {
-      const o = a.main ? "main-content" : "section-content", y = [
-        a.horizontal ? "fz-container--horizontal" : "fz-container--vertical",
-        `gap-${o}-${a.gap}`,
-        `align-items-${l.value}`
-      ];
-      if (a.horizontal) {
-        const v = ("layout" in a ? a.layout : void 0) || "default";
-        y.push(`layout-${v}`);
-      }
-      return y;
-    });
-    return (o, c) => (n(), d(T(a.tag), {
-      class: s(["fz-container", t.value])
-    }, {
-      default: F(() => [
-        g(o.$slots, "default", {}, void 0, !0)
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
-}), K = (e, a) => {
-  const l = e.__vccOpts || e;
-  for (const [t, o] of a)
-    l[t] = o;
-  return l;
-}, X = /* @__PURE__ */ K(J, [["__scopeId", "data-v-8c40daeb"]]);
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, onMounted as c, onUnmounted as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useSlots as g, vShow as _, watch as v, withCtx as y, withDirectives as b, withModifiers as x } from "vue";
+import { FzButton as S, FzIconButton as C } from "@fiscozen/button";
+//#endregion
+//#region ../container/src/FzContainer.vue
+var w = /* @__PURE__ */ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ o({
+	__name: "FzContainer",
+	props: {
+		main: {
+			type: Boolean,
+			default: !1
+		},
+		gap: { default: "base" },
+		tag: { default: "div" },
+		alignItems: { default: void 0 },
+		horizontal: {
+			type: Boolean,
+			default: !1
+		},
+		layout: {}
+	},
+	setup(n) {
+		let r = n, i = e(() => r.alignItems ?? (r.horizontal ? "center" : "stretch"));
+		if (!r.horizontal && "layout" in r) {
+			let e = r.layout;
+			e && e !== "default" && console.error(`[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${r.horizontal}, layout: "${e}".`);
+		}
+		let a = e(() => {
+			let e = r.main ? "main-content" : "section-content", t = [
+				r.horizontal ? "fz-container--horizontal" : "fz-container--vertical",
+				`gap-${e}-${r.gap}`,
+				`align-items-${i.value}`
+			];
+			if (r.horizontal) {
+				let e = ("layout" in r ? r.layout : void 0) || "default";
+				t.push(`layout-${e}`);
+			}
+			return t;
+		});
+		return (e, n) => (u(), t(p(r.tag), { class: s(["fz-container", a.value]) }, {
+			default: y(() => [f(e.$slots, "default", {}, void 0, !0)]),
+			_: 3
+		}, 8, ["class"]));
+	}
+}), [["__scopeId", "data-v-8c40daeb"]]);
 new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-function Z(e) {
-  const a = window.matchMedia(e), l = B(a.matches);
-  function t(o) {
-    l.value = o.matches;
-  }
-  return R(() => {
-    a.addEventListener("change", t);
-  }), Q(() => {
-    a.removeEventListener("change", t);
-  }), r(() => l.value);
+//#endregion
+//#region ../composables/src/composables/useMediaQuery.ts
+function T(t) {
+	let n = window.matchMedia(t), r = d(n.matches);
+	function i(e) {
+		r.value = e.matches;
+	}
+	return c(() => {
+		n.addEventListener("change", i);
+	}), l(() => {
+		n.removeEventListener("change", i);
+	}), e(() => r.value);
 }
-const _ = {
-  blue: {
-    50: {
-      value: "#eff1ff",
-      type: "color"
-    },
-    100: {
-      value: "#dee2ff",
-      type: "color"
-    },
-    200: {
-      value: "#bdc5ff",
-      type: "color"
-    },
-    300: {
-      value: "#9ca8ff",
-      type: "color"
-    },
-    400: {
-      value: "#7b8bff",
-      type: "color"
-    },
-    500: {
-      value: "#5a6eff",
-      type: "color"
-    },
-    600: {
-      value: "#4858cc",
-      type: "color"
-    },
-    700: {
-      value: "#364299",
-      type: "color"
-    },
-    800: {
-      value: "#242c66",
-      type: "color"
-    },
-    900: {
-      value: "#1b214c",
-      type: "color"
-    }
-  },
-  purple: {
-    50: {
-      value: "#f8f4ff",
-      type: "color"
-    },
-    100: {
-      value: "#f0e9ff",
-      type: "color"
-    },
-    200: {
-      value: "#e1d3ff",
-      type: "color"
-    },
-    300: {
-      value: "#d2bdff",
-      type: "color"
-    },
-    400: {
-      value: "#c3a7ff",
-      type: "color"
-    },
-    500: {
-      value: "#b491ff",
-      type: "color"
-    },
-    600: {
-      value: "#9074cc",
-      type: "color"
-    },
-    700: {
-      value: "#6c5799",
-      type: "color"
-    },
-    800: {
-      value: "#483a66",
-      type: "color"
-    },
-    900: {
-      value: "#241d33",
-      type: "color"
-    }
-  },
-  orange: {
-    50: {
-      value: "#fff2ef",
-      type: "color"
-    },
-    100: {
-      value: "#ffe4de",
-      type: "color"
-    },
-    200: {
-      value: "#ffc9bd",
-      type: "color"
-    },
-    300: {
-      value: "#ffae9c",
-      type: "color"
-    },
-    400: {
-      value: "#ff937b",
-      type: "color"
-    },
-    500: {
-      value: "#ff785a",
-      type: "color"
-    },
-    600: {
-      value: "#cc6048",
-      type: "color"
-    },
-    700: {
-      value: "#994836",
-      type: "color"
-    },
-    800: {
-      value: "#663024",
-      type: "color"
-    },
-    900: {
-      value: "#331812",
-      type: "color"
-    }
-  },
-  pink: {
-    50: {
-      value: "#fff5f5",
-      type: "color"
-    },
-    100: {
-      value: "#ffe0e0",
-      type: "color"
-    },
-    200: {
-      value: "#ffcbcb",
-      type: "color"
-    },
-    300: {
-      value: "#ffc0c0",
-      type: "color"
-    },
-    400: {
-      value: "#ffabab",
-      type: "color"
-    },
-    500: {
-      value: "#ff9696",
-      type: "color"
-    },
-    600: {
-      value: "#cc7878",
-      type: "color"
-    },
-    700: {
-      value: "#995a5a",
-      type: "color"
-    },
-    800: {
-      value: "#663c3c",
-      type: "color"
-    },
-    900: {
-      value: "#331e1e",
-      type: "color"
-    }
-  },
-  yellow: {
-    50: {
-      value: "#fffbf4",
-      type: "color"
-    },
-    100: {
-      value: "#fff3de",
-      type: "color"
-    },
-    200: {
-      value: "#ffebc8",
-      type: "color"
-    },
-    300: {
-      value: "#ffe7bd",
-      type: "color"
-    },
-    400: {
-      value: "#ffdfa7",
-      type: "color"
-    },
-    500: {
-      value: "#ffd791",
-      type: "color"
-    },
-    600: {
-      value: "#ccac74",
-      type: "color"
-    },
-    700: {
-      value: "#998157",
-      type: "color"
-    },
-    800: {
-      value: "#806c49",
-      type: "color"
-    },
-    900: {
-      value: "#4c402b",
-      type: "color"
-    }
-  },
-  semantic: {
-    error: {
-      50: {
-        value: "#fef3f3",
-        type: "color"
-      },
-      100: {
-        value: "#f8baba",
-        type: "color"
-      },
-      200: {
-        value: "#f04242",
-        type: "color"
-      },
-      300: {
-        value: "#aa2f2f",
-        type: "color"
-      }
-    },
-    warning: {
-      50: {
-        value: "#fff8f3",
-        type: "color"
-      },
-      100: {
-        value: "#ffdabd",
-        type: "color"
-      },
-      200: {
-        value: "#ffae4f",
-        type: "color"
-      },
-      300: {
-        value: "#b47b38",
-        type: "color"
-      }
-    },
-    success: {
-      50: {
-        value: "#f2f8f6",
-        type: "color"
-      },
-      100: {
-        value: "#b5d8ce",
-        type: "color"
-      },
-      200: {
-        value: "#0fa88c",
-        type: "color"
-      },
-      300: {
-        value: "#0b7763",
-        type: "color"
-      }
-    },
-    info: {
-      50: {
-        value: "#f3f7ff",
-        type: "color"
-      },
-      100: {
-        value: "#b4c8e1",
-        type: "color"
-      },
-      200: {
-        value: "#4e9fff",
-        type: "color"
-      },
-      300: {
-        value: "#3770b4",
-        type: "color"
-      }
-    }
-  },
-  background: {
-    "white-smoke": {
-      value: "#f7f6f3",
-      type: "color"
-    },
-    seashell: {
-      value: "#f8ece7",
-      type: "color"
-    },
-    "pale-purple": {
-      value: "#f2e6ff",
-      type: "color"
-    },
-    "alice-blue": {
-      value: "#ecf2fc",
-      type: "color"
-    }
-  },
-  grey: {
-    100: {
-      value: "#e9edf0",
-      type: "color"
-    },
-    200: {
-      value: "#d1dde6",
-      type: "color"
-    },
-    300: {
-      value: "#9da9b2",
-      type: "color"
-    },
-    400: {
-      value: "#6e777e",
-      type: "color"
-    },
-    500: {
-      value: "#596167",
-      type: "color"
-    }
-  },
-  core: {
-    white: {
-      value: "#ffffff",
-      type: "color"
-    },
-    black: {
-      value: "#2c282f",
-      type: "color"
-    }
-  },
-  "font-sans": {
-    "sharp-grotesk": {
-      value: '"Sharp Grotesk", sans-serif',
-      type: "fontFamilies"
-    },
-    inter: {
-      value: '"Inter", sans-serif',
-      type: "fontFamilies"
-    }
-  },
-  font: {
-    light: {
-      value: "300",
-      type: "fontWeights"
-    },
-    normal: {
-      value: "400",
-      type: "fontWeights"
-    },
-    medium: {
-      value: "500",
-      type: "fontWeights"
-    }
-  },
-  spacing: {
-    0: {
-      value: "0px",
-      type: "spacing"
-    },
-    1: {
-      value: "1px",
-      type: "spacing"
-    },
-    2: {
-      value: "2px",
-      type: "spacing"
-    },
-    4: {
-      value: "4px",
-      type: "spacing"
-    },
-    6: {
-      value: "6px",
-      type: "spacing"
-    },
-    8: {
-      value: "8px",
-      type: "spacing"
-    },
-    10: {
-      value: "10px",
-      type: "spacing"
-    },
-    12: {
-      value: "12px",
-      type: "spacing"
-    },
-    14: {
-      value: "14px",
-      type: "spacing"
-    },
-    16: {
-      value: "16px",
-      type: "spacing"
-    },
-    20: {
-      value: "20px",
-      type: "spacing"
-    },
-    24: {
-      value: "24px",
-      type: "spacing"
-    },
-    28: {
-      value: "28px",
-      type: "spacing"
-    },
-    32: {
-      value: "32px",
-      type: "spacing"
-    },
-    36: {
-      value: "36px",
-      type: "spacing"
-    },
-    40: {
-      value: "40px",
-      type: "spacing"
-    },
-    44: {
-      value: "44px",
-      type: "spacing"
-    },
-    48: {
-      value: "48px",
-      type: "spacing"
-    },
-    56: {
-      value: "56px",
-      type: "spacing"
-    },
-    64: {
-      value: "64px",
-      type: "spacing"
-    },
-    80: {
-      value: "80px",
-      type: "spacing"
-    },
-    96: {
-      value: "96px",
-      type: "spacing"
-    },
-    112: {
-      value: "112px",
-      type: "spacing"
-    },
-    128: {
-      value: "128px",
-      type: "spacing"
-    },
-    144: {
-      value: "144px",
-      type: "spacing"
-    },
-    160: {
-      value: "160px",
-      type: "spacing"
-    },
-    176: {
-      value: "176px",
-      type: "spacing"
-    },
-    192: {
-      value: "192px",
-      type: "spacing"
-    },
-    208: {
-      value: "208px",
-      type: "spacing"
-    },
-    224: {
-      value: "224px",
-      type: "spacing"
-    },
-    240: {
-      value: "240px",
-      type: "spacing"
-    },
-    256: {
-      value: "256px",
-      type: "spacing"
-    },
-    288: {
-      value: "288px",
-      type: "spacing"
-    },
-    320: {
-      value: "320px",
-      type: "spacing"
-    },
-    384: {
-      value: "384px",
-      type: "spacing"
-    }
-  },
-  border: {
-    0: {
-      value: "0px",
-      type: "borderWidth"
-    },
-    1: {
-      value: "1px",
-      type: "borderWidth"
-    },
-    2: {
-      value: "2px",
-      type: "borderWidth"
-    },
-    4: {
-      value: "4px",
-      type: "borderWidth"
-    },
-    8: {
-      value: "8px",
-      type: "borderWidth"
-    }
-  },
-  rounded: {
-    none: {
-      value: "0px",
-      type: "borderRadius"
-    },
-    sm: {
-      value: "2px",
-      type: "borderRadius"
-    },
-    base: {
-      value: "4px",
-      type: "borderRadius"
-    },
-    md: {
-      value: "6px",
-      type: "borderRadius"
-    },
-    lg: {
-      value: "8px",
-      type: "borderRadius"
-    },
-    xl: {
-      value: "12px",
-      type: "borderRadius"
-    },
-    "2xl": {
-      value: "16px",
-      type: "borderRadius"
-    },
-    "3xl": {
-      value: "24px",
-      type: "borderRadius"
-    },
-    full: {
-      value: "9999px",
-      type: "borderRadius"
-    }
-  },
-  breakpoint: {
-    xs: {
-      value: "376px",
-      type: "sizing"
-    },
-    sm: {
-      value: "640px",
-      type: "sizing"
-    },
-    md: {
-      value: "768px",
-      type: "sizing"
-    },
-    lg: {
-      value: "1024px",
-      type: "sizing"
-    },
-    xl: {
-      value: "1280px",
-      type: "sizing"
-    },
-    "2xl": {
-      value: "1440px",
-      type: "sizing"
-    },
-    "3xl": {
-      value: "1536px",
-      type: "sizing"
-    }
-  },
-  shadow: {
-    none: {
-      value: {
-        color: "#000000",
-        type: "dropShadow",
-        x: "0",
-        y: "0",
-        blur: "0",
-        spread: "0"
-      },
-      type: "boxShadow"
-    },
-    sm: {
-      value: {
-        color: "#0000000d",
-        type: "dropShadow",
-        x: "0",
-        y: "1",
-        blur: "2",
-        spread: "0"
-      },
-      type: "boxShadow"
-    },
-    base: {
-      value: [
-        {
-          color: "#0000000f",
-          type: "dropShadow",
-          x: "0",
-          y: "1",
-          blur: "2",
-          spread: "0"
-        },
-        {
-          color: "#0000001a",
-          type: "dropShadow",
-          x: "0",
-          y: "1",
-          blur: "3",
-          spread: "0"
-        }
-      ],
-      type: "boxShadow"
-    },
-    md: {
-      value: [
-        {
-          color: "#0000000f",
-          type: "dropShadow",
-          x: "0",
-          y: "2",
-          blur: "4",
-          spread: "-1"
-        },
-        {
-          color: "#0000001a",
-          type: "dropShadow",
-          x: "0",
-          y: "4",
-          blur: "6",
-          spread: "-1"
-        }
-      ],
-      type: "boxShadow"
-    },
-    lg: {
-      value: [
-        {
-          color: "#0000000d",
-          type: "dropShadow",
-          x: "0",
-          y: "4",
-          blur: "6",
-          spread: "-2"
-        },
-        {
-          color: "#0000001a",
-          type: "dropShadow",
-          x: "0",
-          y: "10",
-          blur: "15",
-          spread: "-3"
-        }
-      ],
-      type: "boxShadow"
-    },
-    xl: {
-      value: [
-        {
-          color: "#0000000a",
-          type: "dropShadow",
-          x: "0",
-          y: "10",
-          blur: "10",
-          spread: "-5"
-        },
-        {
-          color: "#0000001a",
-          type: "dropShadow",
-          x: "0",
-          y: "20",
-          blur: "25",
-          spread: "-5"
-        }
-      ],
-      type: "boxShadow"
-    },
-    "2xl": {
-      value: {
-        color: "#00000040",
-        type: "dropShadow",
-        x: "0",
-        y: "25",
-        blur: "50",
-        spread: "-12"
-      },
-      type: "boxShadow"
-    },
-    inner: {
-      value: {
-        color: "#0000000f",
-        type: "innerShadow",
-        x: "0",
-        y: "2",
-        blur: "4",
-        spread: "0"
-      },
-      type: "boxShadow"
-    }
-  },
-  underline: {
-    value: "underline",
-    type: "textDecoration"
-  },
-  text: {
-    xs: {
-      value: "12px",
-      type: "fontSizes"
-    },
-    sm: {
-      value: "14px",
-      type: "fontSizes"
-    },
-    base: {
-      value: "16px",
-      type: "fontSizes"
-    },
-    lg: {
-      value: "18px",
-      type: "fontSizes"
-    },
-    xl: {
-      value: "20px",
-      type: "fontSizes"
-    },
-    "2xl": {
-      value: "24px",
-      type: "fontSizes"
-    },
-    "3xl": {
-      value: "30px",
-      type: "fontSizes"
-    },
-    "4xl": {
-      value: "36px",
-      type: "fontSizes"
-    },
-    "5xl": {
-      value: "48px",
-      type: "fontSizes"
-    },
-    "6xl": {
-      value: "60px",
-      type: "fontSizes"
-    },
-    "7xl": {
-      value: "72px",
-      type: "fontSizes"
-    },
-    "8xl": {
-      value: "96px",
-      type: "fontSizes"
-    },
-    "9xl": {
-      value: "128px",
-      type: "fontSizes"
-    }
-  },
-  leading: {
-    xs: {
-      value: "16px",
-      type: "lineHeights"
-    },
-    sm: {
-      value: "18px",
-      type: "lineHeights"
-    },
-    base: {
-      value: "20px",
-      type: "lineHeights"
-    },
-    lg: {
-      value: "24px",
-      type: "lineHeights"
-    },
-    xl: {
-      value: "28px",
-      type: "lineHeights"
-    },
-    "2xl": {
-      value: "32px",
-      type: "lineHeights"
-    },
-    "3xl": {
-      value: "36px",
-      type: "lineHeights"
-    },
-    "4xl": {
-      value: "40px",
-      type: "lineHeights"
-    },
-    "5xl": {
-      value: "48px",
-      type: "lineHeights"
-    },
-    "6xl": {
-      value: "60px",
-      type: "lineHeights"
-    },
-    "7xl": {
-      value: "72px",
-      type: "lineHeights"
-    },
-    "8xl": {
-      value: "96px",
-      type: "lineHeights"
-    },
-    "9xl": {
-      value: "128px",
-      type: "lineHeights"
-    }
-  }
-}, z = {
-  global: _
-}, ee = [
-  "blue",
-  "purple",
-  "orange",
-  "pink",
-  "yellow",
-  "grey",
-  "core"
-], oe = {
-  safeColorNames: ee
-}, ae = [
-  "error",
-  "warning",
-  "success",
-  "info"
-], le = {
-  semanticColorNames: ae
-}, te = oe.safeColorNames, re = le.semanticColorNames, x = {};
-te.forEach((e) => {
-  const a = z.global[e];
-  a && Object.keys(a).forEach((l) => {
-    var o;
-    const t = (o = a[l]) == null ? void 0 : o.value;
-    t && (x[e] || (x[e] = {}), x[e][l] = t);
-  });
+var E = {
+	global: {
+		blue: {
+			50: {
+				value: "#eff1ff",
+				type: "color"
+			},
+			100: {
+				value: "#dee2ff",
+				type: "color"
+			},
+			200: {
+				value: "#bdc5ff",
+				type: "color"
+			},
+			300: {
+				value: "#9ca8ff",
+				type: "color"
+			},
+			400: {
+				value: "#7b8bff",
+				type: "color"
+			},
+			500: {
+				value: "#5a6eff",
+				type: "color"
+			},
+			600: {
+				value: "#4858cc",
+				type: "color"
+			},
+			700: {
+				value: "#364299",
+				type: "color"
+			},
+			800: {
+				value: "#242c66",
+				type: "color"
+			},
+			900: {
+				value: "#1b214c",
+				type: "color"
+			}
+		},
+		purple: {
+			50: {
+				value: "#f8f4ff",
+				type: "color"
+			},
+			100: {
+				value: "#f0e9ff",
+				type: "color"
+			},
+			200: {
+				value: "#e1d3ff",
+				type: "color"
+			},
+			300: {
+				value: "#d2bdff",
+				type: "color"
+			},
+			400: {
+				value: "#c3a7ff",
+				type: "color"
+			},
+			500: {
+				value: "#b491ff",
+				type: "color"
+			},
+			600: {
+				value: "#9074cc",
+				type: "color"
+			},
+			700: {
+				value: "#6c5799",
+				type: "color"
+			},
+			800: {
+				value: "#483a66",
+				type: "color"
+			},
+			900: {
+				value: "#241d33",
+				type: "color"
+			}
+		},
+		orange: {
+			50: {
+				value: "#fff2ef",
+				type: "color"
+			},
+			100: {
+				value: "#ffe4de",
+				type: "color"
+			},
+			200: {
+				value: "#ffc9bd",
+				type: "color"
+			},
+			300: {
+				value: "#ffae9c",
+				type: "color"
+			},
+			400: {
+				value: "#ff937b",
+				type: "color"
+			},
+			500: {
+				value: "#ff785a",
+				type: "color"
+			},
+			600: {
+				value: "#cc6048",
+				type: "color"
+			},
+			700: {
+				value: "#994836",
+				type: "color"
+			},
+			800: {
+				value: "#663024",
+				type: "color"
+			},
+			900: {
+				value: "#331812",
+				type: "color"
+			}
+		},
+		pink: {
+			50: {
+				value: "#fff5f5",
+				type: "color"
+			},
+			100: {
+				value: "#ffe0e0",
+				type: "color"
+			},
+			200: {
+				value: "#ffcbcb",
+				type: "color"
+			},
+			300: {
+				value: "#ffc0c0",
+				type: "color"
+			},
+			400: {
+				value: "#ffabab",
+				type: "color"
+			},
+			500: {
+				value: "#ff9696",
+				type: "color"
+			},
+			600: {
+				value: "#cc7878",
+				type: "color"
+			},
+			700: {
+				value: "#995a5a",
+				type: "color"
+			},
+			800: {
+				value: "#663c3c",
+				type: "color"
+			},
+			900: {
+				value: "#331e1e",
+				type: "color"
+			}
+		},
+		yellow: {
+			50: {
+				value: "#fffbf4",
+				type: "color"
+			},
+			100: {
+				value: "#fff3de",
+				type: "color"
+			},
+			200: {
+				value: "#ffebc8",
+				type: "color"
+			},
+			300: {
+				value: "#ffe7bd",
+				type: "color"
+			},
+			400: {
+				value: "#ffdfa7",
+				type: "color"
+			},
+			500: {
+				value: "#ffd791",
+				type: "color"
+			},
+			600: {
+				value: "#ccac74",
+				type: "color"
+			},
+			700: {
+				value: "#998157",
+				type: "color"
+			},
+			800: {
+				value: "#806c49",
+				type: "color"
+			},
+			900: {
+				value: "#4c402b",
+				type: "color"
+			}
+		},
+		semantic: {
+			error: {
+				50: {
+					value: "#fef3f3",
+					type: "color"
+				},
+				100: {
+					value: "#f8baba",
+					type: "color"
+				},
+				200: {
+					value: "#f04242",
+					type: "color"
+				},
+				300: {
+					value: "#aa2f2f",
+					type: "color"
+				}
+			},
+			warning: {
+				50: {
+					value: "#fff8f3",
+					type: "color"
+				},
+				100: {
+					value: "#ffdabd",
+					type: "color"
+				},
+				200: {
+					value: "#ffae4f",
+					type: "color"
+				},
+				300: {
+					value: "#b47b38",
+					type: "color"
+				}
+			},
+			success: {
+				50: {
+					value: "#f2f8f6",
+					type: "color"
+				},
+				100: {
+					value: "#b5d8ce",
+					type: "color"
+				},
+				200: {
+					value: "#0fa88c",
+					type: "color"
+				},
+				300: {
+					value: "#0b7763",
+					type: "color"
+				}
+			},
+			info: {
+				50: {
+					value: "#f3f7ff",
+					type: "color"
+				},
+				100: {
+					value: "#b4c8e1",
+					type: "color"
+				},
+				200: {
+					value: "#4e9fff",
+					type: "color"
+				},
+				300: {
+					value: "#3770b4",
+					type: "color"
+				}
+			}
+		},
+		background: {
+			"white-smoke": {
+				value: "#f7f6f3",
+				type: "color"
+			},
+			seashell: {
+				value: "#f8ece7",
+				type: "color"
+			},
+			"pale-purple": {
+				value: "#f2e6ff",
+				type: "color"
+			},
+			"alice-blue": {
+				value: "#ecf2fc",
+				type: "color"
+			}
+		},
+		grey: {
+			100: {
+				value: "#e9edf0",
+				type: "color"
+			},
+			200: {
+				value: "#d1dde6",
+				type: "color"
+			},
+			300: {
+				value: "#9da9b2",
+				type: "color"
+			},
+			400: {
+				value: "#6e777e",
+				type: "color"
+			},
+			500: {
+				value: "#596167",
+				type: "color"
+			}
+		},
+		core: {
+			white: {
+				value: "#ffffff",
+				type: "color"
+			},
+			black: {
+				value: "#2c282f",
+				type: "color"
+			}
+		},
+		"font-sans": {
+			"sharp-grotesk": {
+				value: "\"Sharp Grotesk\", sans-serif",
+				type: "fontFamilies"
+			},
+			inter: {
+				value: "\"Inter\", sans-serif",
+				type: "fontFamilies"
+			}
+		},
+		font: {
+			light: {
+				value: "300",
+				type: "fontWeights"
+			},
+			normal: {
+				value: "400",
+				type: "fontWeights"
+			},
+			medium: {
+				value: "500",
+				type: "fontWeights"
+			}
+		},
+		spacing: {
+			0: {
+				value: "0px",
+				type: "spacing"
+			},
+			1: {
+				value: "1px",
+				type: "spacing"
+			},
+			2: {
+				value: "2px",
+				type: "spacing"
+			},
+			4: {
+				value: "4px",
+				type: "spacing"
+			},
+			6: {
+				value: "6px",
+				type: "spacing"
+			},
+			8: {
+				value: "8px",
+				type: "spacing"
+			},
+			10: {
+				value: "10px",
+				type: "spacing"
+			},
+			12: {
+				value: "12px",
+				type: "spacing"
+			},
+			14: {
+				value: "14px",
+				type: "spacing"
+			},
+			16: {
+				value: "16px",
+				type: "spacing"
+			},
+			20: {
+				value: "20px",
+				type: "spacing"
+			},
+			24: {
+				value: "24px",
+				type: "spacing"
+			},
+			28: {
+				value: "28px",
+				type: "spacing"
+			},
+			32: {
+				value: "32px",
+				type: "spacing"
+			},
+			36: {
+				value: "36px",
+				type: "spacing"
+			},
+			40: {
+				value: "40px",
+				type: "spacing"
+			},
+			44: {
+				value: "44px",
+				type: "spacing"
+			},
+			48: {
+				value: "48px",
+				type: "spacing"
+			},
+			56: {
+				value: "56px",
+				type: "spacing"
+			},
+			64: {
+				value: "64px",
+				type: "spacing"
+			},
+			80: {
+				value: "80px",
+				type: "spacing"
+			},
+			96: {
+				value: "96px",
+				type: "spacing"
+			},
+			112: {
+				value: "112px",
+				type: "spacing"
+			},
+			128: {
+				value: "128px",
+				type: "spacing"
+			},
+			144: {
+				value: "144px",
+				type: "spacing"
+			},
+			160: {
+				value: "160px",
+				type: "spacing"
+			},
+			176: {
+				value: "176px",
+				type: "spacing"
+			},
+			192: {
+				value: "192px",
+				type: "spacing"
+			},
+			208: {
+				value: "208px",
+				type: "spacing"
+			},
+			224: {
+				value: "224px",
+				type: "spacing"
+			},
+			240: {
+				value: "240px",
+				type: "spacing"
+			},
+			256: {
+				value: "256px",
+				type: "spacing"
+			},
+			288: {
+				value: "288px",
+				type: "spacing"
+			},
+			320: {
+				value: "320px",
+				type: "spacing"
+			},
+			384: {
+				value: "384px",
+				type: "spacing"
+			}
+		},
+		border: {
+			0: {
+				value: "0px",
+				type: "borderWidth"
+			},
+			1: {
+				value: "1px",
+				type: "borderWidth"
+			},
+			2: {
+				value: "2px",
+				type: "borderWidth"
+			},
+			4: {
+				value: "4px",
+				type: "borderWidth"
+			},
+			8: {
+				value: "8px",
+				type: "borderWidth"
+			}
+		},
+		rounded: {
+			none: {
+				value: "0px",
+				type: "borderRadius"
+			},
+			sm: {
+				value: "2px",
+				type: "borderRadius"
+			},
+			base: {
+				value: "4px",
+				type: "borderRadius"
+			},
+			md: {
+				value: "6px",
+				type: "borderRadius"
+			},
+			lg: {
+				value: "8px",
+				type: "borderRadius"
+			},
+			xl: {
+				value: "12px",
+				type: "borderRadius"
+			},
+			"2xl": {
+				value: "16px",
+				type: "borderRadius"
+			},
+			"3xl": {
+				value: "24px",
+				type: "borderRadius"
+			},
+			full: {
+				value: "9999px",
+				type: "borderRadius"
+			}
+		},
+		breakpoint: {
+			xs: {
+				value: "376px",
+				type: "sizing"
+			},
+			sm: {
+				value: "640px",
+				type: "sizing"
+			},
+			md: {
+				value: "768px",
+				type: "sizing"
+			},
+			lg: {
+				value: "1024px",
+				type: "sizing"
+			},
+			xl: {
+				value: "1280px",
+				type: "sizing"
+			},
+			"2xl": {
+				value: "1440px",
+				type: "sizing"
+			},
+			"3xl": {
+				value: "1536px",
+				type: "sizing"
+			}
+		},
+		shadow: {
+			none: {
+				value: {
+					color: "#000000",
+					type: "dropShadow",
+					x: "0",
+					y: "0",
+					blur: "0",
+					spread: "0"
+				},
+				type: "boxShadow"
+			},
+			sm: {
+				value: {
+					color: "#0000000d",
+					type: "dropShadow",
+					x: "0",
+					y: "1",
+					blur: "2",
+					spread: "0"
+				},
+				type: "boxShadow"
+			},
+			base: {
+				value: [{
+					color: "#0000000f",
+					type: "dropShadow",
+					x: "0",
+					y: "1",
+					blur: "2",
+					spread: "0"
+				}, {
+					color: "#0000001a",
+					type: "dropShadow",
+					x: "0",
+					y: "1",
+					blur: "3",
+					spread: "0"
+				}],
+				type: "boxShadow"
+			},
+			md: {
+				value: [{
+					color: "#0000000f",
+					type: "dropShadow",
+					x: "0",
+					y: "2",
+					blur: "4",
+					spread: "-1"
+				}, {
+					color: "#0000001a",
+					type: "dropShadow",
+					x: "0",
+					y: "4",
+					blur: "6",
+					spread: "-1"
+				}],
+				type: "boxShadow"
+			},
+			lg: {
+				value: [{
+					color: "#0000000d",
+					type: "dropShadow",
+					x: "0",
+					y: "4",
+					blur: "6",
+					spread: "-2"
+				}, {
+					color: "#0000001a",
+					type: "dropShadow",
+					x: "0",
+					y: "10",
+					blur: "15",
+					spread: "-3"
+				}],
+				type: "boxShadow"
+			},
+			xl: {
+				value: [{
+					color: "#0000000a",
+					type: "dropShadow",
+					x: "0",
+					y: "10",
+					blur: "10",
+					spread: "-5"
+				}, {
+					color: "#0000001a",
+					type: "dropShadow",
+					x: "0",
+					y: "20",
+					blur: "25",
+					spread: "-5"
+				}],
+				type: "boxShadow"
+			},
+			"2xl": {
+				value: {
+					color: "#00000040",
+					type: "dropShadow",
+					x: "0",
+					y: "25",
+					blur: "50",
+					spread: "-12"
+				},
+				type: "boxShadow"
+			},
+			inner: {
+				value: {
+					color: "#0000000f",
+					type: "innerShadow",
+					x: "0",
+					y: "2",
+					blur: "4",
+					spread: "0"
+				},
+				type: "boxShadow"
+			}
+		},
+		underline: {
+			value: "underline",
+			type: "textDecoration"
+		},
+		text: {
+			xs: {
+				value: "12px",
+				type: "fontSizes"
+			},
+			sm: {
+				value: "14px",
+				type: "fontSizes"
+			},
+			base: {
+				value: "16px",
+				type: "fontSizes"
+			},
+			lg: {
+				value: "18px",
+				type: "fontSizes"
+			},
+			xl: {
+				value: "20px",
+				type: "fontSizes"
+			},
+			"2xl": {
+				value: "24px",
+				type: "fontSizes"
+			},
+			"3xl": {
+				value: "30px",
+				type: "fontSizes"
+			},
+			"4xl": {
+				value: "36px",
+				type: "fontSizes"
+			},
+			"5xl": {
+				value: "48px",
+				type: "fontSizes"
+			},
+			"6xl": {
+				value: "60px",
+				type: "fontSizes"
+			},
+			"7xl": {
+				value: "72px",
+				type: "fontSizes"
+			},
+			"8xl": {
+				value: "96px",
+				type: "fontSizes"
+			},
+			"9xl": {
+				value: "128px",
+				type: "fontSizes"
+			}
+		},
+		leading: {
+			xs: {
+				value: "16px",
+				type: "lineHeights"
+			},
+			sm: {
+				value: "18px",
+				type: "lineHeights"
+			},
+			base: {
+				value: "20px",
+				type: "lineHeights"
+			},
+			lg: {
+				value: "24px",
+				type: "lineHeights"
+			},
+			xl: {
+				value: "28px",
+				type: "lineHeights"
+			},
+			"2xl": {
+				value: "32px",
+				type: "lineHeights"
+			},
+			"3xl": {
+				value: "36px",
+				type: "lineHeights"
+			},
+			"4xl": {
+				value: "40px",
+				type: "lineHeights"
+			},
+			"5xl": {
+				value: "48px",
+				type: "lineHeights"
+			},
+			"6xl": {
+				value: "60px",
+				type: "lineHeights"
+			},
+			"7xl": {
+				value: "72px",
+				type: "lineHeights"
+			},
+			"8xl": {
+				value: "96px",
+				type: "lineHeights"
+			},
+			"9xl": {
+				value: "128px",
+				type: "lineHeights"
+			}
+		}
+	},
+	alias: {
+		avatar: {
+			initials: {
+				"background-color": {
+					value: "{core.black}",
+					type: "color"
+				},
+				color: {
+					value: "{core.white}",
+					type: "color"
+				},
+				spacing: {
+					value: "{spacing.32}",
+					type: "spacing"
+				},
+				"border-radius": {
+					value: "{rounded.full}",
+					type: "borderRadius"
+				},
+				"font-family": {
+					value: "{font-sans.inter}",
+					type: "fontFamilies"
+				},
+				"font-weight": {
+					value: "{font.normal}",
+					type: "fontWeights"
+				},
+				"font-size": {
+					value: "{text.sm}",
+					type: "fontSizes"
+				},
+				"line-height": {
+					value: "{leading.sm}",
+					type: "lineHeights"
+				}
+			},
+			image: {
+				"border-radius": {
+					value: "{rounded.full}",
+					type: "borderRadius"
+				},
+				sm: {
+					value: "{spacing.16}",
+					type: "spacing"
+				},
+				md: {
+					value: "{spacing.24}",
+					type: "spacing"
+				},
+				lg: {
+					value: "{spacing.32}",
+					type: "spacing"
+				},
+				xl: {
+					value: "{spacing.40}",
+					type: "spacing"
+				}
+			}
+		},
+		"nav-link": {
+			spacing: {
+				value: "{spacing.32}",
+				type: "spacing"
+			},
+			"border-radius": {
+				value: "{rounded.base}",
+				type: "borderRadius"
+			},
+			"font-family": {
+				value: "{font-sans.inter}",
+				type: "fontFamilies"
+			},
+			"font-weight": {
+				value: "{font.medium}",
+				type: "fontWeights"
+			},
+			"line-height": {
+				value: "{leading.sm}",
+				type: "lineHeights"
+			},
+			"font-size": {
+				value: "{text.sm}",
+				type: "fontSizes"
+			},
+			"background-color": {
+				default: {
+					value: "none",
+					type: "color"
+				},
+				hover: {
+					value: "{background.alice-blue}",
+					type: "color"
+				},
+				pressed: {
+					value: "{background.alice-blue}",
+					type: "color"
+				},
+				focus: {
+					value: "{background.alice-blue}",
+					type: "color"
+				},
+				disabled: {
+					value: "none",
+					type: "color"
+				}
+			},
+			color: {
+				default: {
+					value: "{grey.500}",
+					type: "color"
+				},
+				hover: {
+					value: "{blue.500}",
+					type: "color"
+				},
+				pressed: {
+					value: "{blue.500}",
+					type: "color"
+				},
+				focus: {
+					value: "{blue.500}",
+					type: "color"
+				},
+				disabled: {
+					value: "{grey.100}",
+					type: "color"
+				}
+			},
+			border: {
+				default: {
+					value: "none",
+					type: "color"
+				},
+				hover: {
+					value: "none",
+					type: "color"
+				},
+				pressed: {
+					value: "none",
+					type: "color"
+				},
+				focus: {
+					value: "{blue.500}",
+					type: "color"
+				},
+				disabled: {
+					value: "none",
+					type: "color"
+				}
+			},
+			"border-width": {
+				default: {
+					value: "none",
+					type: "borderWidth"
+				},
+				hover: {
+					value: "none",
+					type: "borderWidth"
+				},
+				pressed: {
+					value: "none",
+					type: "borderWidth"
+				},
+				focus: {
+					value: "{border.1}",
+					type: "borderWidth"
+				},
+				disabled: {
+					value: "none",
+					type: "borderWidth"
+				}
+			},
+			"box-shadow": {
+				default: {
+					value: "{shadow.none}",
+					type: "boxShadow"
+				},
+				hover: {
+					value: "{shadow.none}",
+					type: "boxShadow"
+				},
+				pressed: {
+					value: "{shadow.inner}",
+					type: "boxShadow"
+				},
+				focus: {
+					value: "none",
+					type: "boxShadow"
+				},
+				disabled: {
+					value: "none",
+					type: "boxShadow"
+				}
+			}
+		},
+		"icon-button": {
+			button: {
+				sm: {
+					value: "{spacing.28}",
+					type: "spacing"
+				},
+				md: {
+					value: "{spacing.32}",
+					type: "spacing"
+				},
+				lg: {
+					value: "{spacing.40}",
+					type: "spacing"
+				}
+			},
+			icon: {
+				sm: {
+					value: "{spacing.16}",
+					type: "spacing"
+				},
+				md: {
+					value: "{spacing.20}",
+					type: "spacing"
+				}
+			},
+			primary: {
+				"background-color": {
+					default: {
+						value: "{blue.500}",
+						type: "color"
+					},
+					hover: {
+						value: "{blue.600}",
+						type: "color"
+					},
+					pressed: {
+						value: "{blue.600}",
+						type: "color"
+					},
+					focus: {
+						value: "{blue.500}",
+						type: "color"
+					},
+					disabled: {
+						value: "{blue.200}",
+						type: "color"
+					}
+				},
+				color: {
+					default: {
+						value: "{core.white}",
+						type: "color"
+					},
+					hover: {
+						value: "{core.white}",
+						type: "color"
+					},
+					pressed: {
+						value: "{core.white}",
+						type: "color"
+					},
+					focus: {
+						value: "{core.white}",
+						type: "color"
+					},
+					disabled: {
+						value: "{core.white}",
+						type: "color"
+					}
+				},
+				border: {
+					default: {
+						value: "none",
+						type: "color"
+					},
+					hover: {
+						value: "none",
+						type: "color"
+					},
+					pressed: {
+						value: "none",
+						type: "color"
+					},
+					focus: {
+						value: "{blue.600}",
+						type: "color"
+					},
+					disabled: {
+						value: "none",
+						type: "color"
+					}
+				},
+				"border-width": {
+					default: {
+						value: "none",
+						type: "borderWidth"
+					},
+					hover: {
+						value: "none",
+						type: "borderWidth"
+					},
+					pressed: {
+						value: "none",
+						type: "borderWidth"
+					},
+					focus: {
+						value: "{border.1}",
+						type: "borderWidth"
+					},
+					disabled: {
+						value: "none",
+						type: "borderWidth"
+					}
+				}
+			},
+			secondary: {
+				"background-color": {
+					default: {
+						value: "none",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.100}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.100}",
+						type: "color"
+					},
+					focus: {
+						value: "none",
+						type: "color"
+					},
+					disabled: {
+						value: "none",
+						type: "color"
+					}
+				},
+				color: {
+					default: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					focus: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					disabled: {
+						value: "{grey.100}",
+						type: "color"
+					}
+				},
+				border: {
+					default: {
+						value: "{grey.200}",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.200}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.200}",
+						type: "color"
+					},
+					focus: {
+						value: "{blue.600}",
+						type: "color"
+					},
+					disabled: {
+						value: "{grey.100}",
+						type: "color"
+					}
+				},
+				"border-width": {
+					value: "{border.1}",
+					type: "borderWidth"
+				}
+			},
+			notification: {
+				"background-color": {
+					default: {
+						value: "none",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.100}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.100}",
+						type: "color"
+					}
+				},
+				color: {
+					default: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					focus: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					disabled: {
+						value: "{grey.100}",
+						type: "color"
+					}
+				},
+				border: {
+					default: {
+						value: "{grey.200}",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.200}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.200}",
+						type: "color"
+					},
+					focus: {
+						value: "{grey.200}",
+						type: "color"
+					},
+					disabled: {
+						value: "{grey.100}",
+						type: "color"
+					}
+				},
+				"border-width": {
+					value: "{border.1}",
+					type: "borderWidth"
+				}
+			},
+			"notification-badge": {
+				"background-color": {
+					default: {
+						value: "{blue.500}",
+						type: "color"
+					},
+					hover: {
+						value: "{blue.500}",
+						type: "color"
+					},
+					pressed: {
+						value: "{blue.500}",
+						type: "color"
+					},
+					focus: {
+						value: "{blue.500}",
+						type: "color"
+					},
+					disabled: {
+						value: "{grey.200}",
+						type: "color"
+					}
+				},
+				border: {
+					default: {
+						value: "{core.white}",
+						type: "color"
+					},
+					hover: {
+						value: "{core.white}",
+						type: "color"
+					},
+					pressed: {
+						value: "{core.white}",
+						type: "color"
+					},
+					focus: {
+						value: "{core.white}",
+						type: "color"
+					},
+					disabled: {
+						value: "{core.white}",
+						type: "color"
+					}
+				},
+				sm: {
+					value: "{spacing.6}",
+					type: "spacing"
+				},
+				md: {
+					value: "{spacing.8}",
+					type: "spacing"
+				},
+				lg: {
+					value: "{spacing.10}",
+					type: "spacing"
+				},
+				"border-width": {
+					value: "{border.1}",
+					type: "borderWidth"
+				}
+			},
+			invisible: {
+				"background-color": {
+					default: {
+						value: "none",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.100}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.100}",
+						type: "color"
+					},
+					focus: {
+						value: "none",
+						type: "color"
+					},
+					disabled: {
+						value: "none",
+						type: "color"
+					}
+				},
+				color: {
+					default: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					hover: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					pressed: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					focus: {
+						value: "{grey.500}",
+						type: "color"
+					},
+					disabled: {
+						value: "{grey.100}",
+						type: "color"
+					}
+				},
+				border: {
+					default: {
+						value: "none",
+						type: "color"
+					},
+					hover: {
+						value: "none",
+						type: "color"
+					},
+					pressed: {
+						value: "none",
+						type: "color"
+					},
+					focus: {
+						value: "{blue.600}",
+						type: "color"
+					},
+					disabled: {
+						value: "{grey.100}",
+						type: "color"
+					}
+				},
+				"border-width": {
+					default: {
+						value: "none",
+						type: "borderWidth"
+					},
+					hover: {
+						value: "none",
+						type: "borderWidth"
+					},
+					pressed: {
+						value: "none",
+						type: "borderWidth"
+					},
+					focus: {
+						value: "{border.1}",
+						type: "borderWidth"
+					},
+					disabled: {
+						value: "{border.1}",
+						type: "borderWidth"
+					}
+				}
+			},
+			"border-radius": {
+				value: "{rounded.base}",
+				type: "borderRadius"
+			},
+			"box-shadow": {
+				default: {
+					value: "{shadow.none}",
+					type: "boxShadow"
+				},
+				hover: {
+					value: "{shadow.none}",
+					type: "boxShadow"
+				},
+				pressed: {
+					value: "{shadow.inner}",
+					type: "boxShadow"
+				},
+				focus: {
+					value: "none",
+					type: "boxShadow"
+				},
+				disabled: {
+					value: "none",
+					type: "boxShadow"
+				}
+			}
+		},
+		breadcrumbs: {
+			color: {
+				"previous-page": {
+					value: "{blue.500}",
+					type: "color"
+				},
+				divider: {
+					value: "{grey.300}",
+					type: "color"
+				},
+				"current-page": {
+					value: "{grey.500}",
+					type: "color"
+				}
+			},
+			"font-family": {
+				value: "{font-sans.inter}",
+				type: "fontFamilies"
+			},
+			"font-weight": {
+				value: "{font.normal}",
+				type: "fontWeights"
+			},
+			"line-height": {
+				value: "{leading.sm}",
+				type: "lineHeights"
+			},
+			"font-size": {
+				value: "{text.sm}",
+				type: "fontSizes"
+			}
+		},
+		"main-content": {
+			sm: {
+				value: "{spacing.32}",
+				type: "spacing"
+			},
+			base: {
+				value: "{spacing.48}",
+				type: "spacing"
+			},
+			lg: {
+				value: "{spacing.64}",
+				type: "spacing"
+			}
+		},
+		"section-content": {
+			none: {
+				value: "{spacing.0}",
+				type: "spacing"
+			},
+			xs: {
+				value: "{spacing.8}",
+				type: "spacing"
+			},
+			sm: {
+				value: "{spacing.16}",
+				type: "spacing"
+			},
+			base: {
+				value: "{spacing.24}",
+				type: "spacing"
+			},
+			lg: {
+				value: "{spacing.32}",
+				type: "spacing"
+			}
+		}
+	},
+	$themes: [],
+	$metadata: { tokenSetOrder: ["global", "alias"] }
+}, D = {
+	$schema: "http://json-schema.org/draft-07/schema#",
+	description: "Lista dei colori da includere nella safelist di Tailwind. Per aggiungere un nuovo colore, aggiungi il suo nome qui e rigenera il build con 'pnpm run build'.",
+	safeColorNames: [
+		"blue",
+		"purple",
+		"orange",
+		"pink",
+		"yellow",
+		"grey",
+		"core"
+	]
+}, O = {
+	$schema: "http://json-schema.org/draft-07/schema#",
+	description: "Lista dei colori semantici da includere nella safelist di Tailwind. Per aggiungere un nuovo colore semantico, aggiungi il suo nome qui e rigenera il build con 'pnpm run build'.",
+	semanticColorNames: [
+		"error",
+		"warning",
+		"success",
+		"info"
+	]
+}, k = D.safeColorNames, A = O.semanticColorNames, j = {};
+k.forEach((e) => {
+	let t = E.global[e];
+	t && Object.keys(t).forEach((n) => {
+		let r = t[n]?.value;
+		r && (j[e] || (j[e] = {}), j[e][n] = r);
+	});
 });
-const O = z.global.semantic;
-O && re.forEach((e) => {
-  const a = O[e];
-  a && typeof a == "object" && Object.keys(a).forEach((l) => {
-    var o;
-    const t = (o = a[l]) == null ? void 0 : o.value;
-    if (t) {
-      const c = `semantic-${e}`;
-      x[c] || (x[c] = {}), x[c][l] = t;
-    }
-  });
+var M = E.global.semantic;
+M && A.forEach((e) => {
+	let t = M[e];
+	t && typeof t == "object" && Object.keys(t).forEach((n) => {
+		let r = t[n]?.value;
+		if (r) {
+			let t = `semantic-${e}`;
+			j[t] || (j[t] = {}), j[t][n] = r;
+		}
+	});
 });
-const ne = Object.entries(z.global.breakpoint).reduce(
-  (e, [a, l]) => (e[a] = l.value, e),
-  {}
-), ce = ["title"], ie = { class: "flex flex-row gap-8 items-start" }, se = "border-1 border-solid rounded flex flex-col", pe = "border-solid pt-16 px-16 flex flex-row justify-between", ue = "border-solid pt-0 px-16 pb-16 flex gap-12 items-center", fe = /* @__PURE__ */ E({
-  __name: "FzCard",
-  props: {
-    title: {},
-    color: {},
-    primaryAction: {},
-    secondaryAction: {},
-    tertiaryAction: {},
-    contentClass: {},
-    collapsible: { type: Boolean },
-    defaultExpanded: { type: Boolean },
-    alwaysAlive: { type: Boolean },
-    hasInfoIcon: { type: Boolean },
-    environment: { default: "frontoffice" }
-  },
-  emits: ["fzprimary:click", "fzsecondary:click", "fztertiary:click", "fzcard:click-info"],
-  setup(e, { expose: a, emit: l }) {
-    const t = Z(`(max-width: ${ne.sm})`), o = e, c = l, y = Y(), v = B(o.defaultExpanded ?? !1);
-    q(
-      () => o.color === "aliceblue",
-      (f) => {
-        f && console.warn(
-          "[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now."
-        );
-      },
-      { immediate: !0 }
-    );
-    const C = r(() => o.color === "aliceblue" ? "blue" : o.color), m = r(() => v.value || !o.collapsible), S = r(() => o.alwaysAlive || m.value), I = r(
-      () => o.title || y.header || y["header-content"]
-    ), W = r(() => [
-      o.collapsible ? "cursor-pointer" : ""
-    ]), j = r(() => o.environment === "backoffice" ? "py-2" : "py-8"), M = r(() => {
-      switch (C.value) {
-        case "blue":
-          return "bg-background-alice-blue";
-        case "orange":
-          return "bg-background-seashell";
-        case "purple":
-          return "bg-background-pale-purple";
-        case "grey":
-          return "bg-background-white-smoke";
-        case "yellow":
-          return "bg-semantic-warning-50";
-        case "red":
-          return "bg-semantic-error-50";
-        default:
-          return "bg-core-white";
-      }
-    }), D = r(() => "text-core-black"), L = r(() => {
-      switch (C.value) {
-        case "blue":
-          return "border-background-alice-blue";
-        case "orange":
-          return "border-background-seashell";
-        case "purple":
-          return "border-background-pale-purple";
-        case "grey":
-          return "border-background-white-smoke";
-        case "yellow":
-          return "border-semantic-warning-50";
-        case "red":
-          return "border-semantic-error-50";
-        default:
-          return "border-grey-100";
-      }
-    }), V = r(
-      () => o.primaryAction !== void 0 || o.secondaryAction !== void 0 || o.tertiaryAction !== void 0
-    );
-    function A() {
-      o.collapsible && (v.value = !v.value);
-    }
-    return R(() => {
-      o.tertiaryAction && !o.secondaryAction && !o.primaryAction ? console.warn(
-        "[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"
-      ) : o.secondaryAction && !o.primaryAction && console.warn(
-        "[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction"
-      );
-    }), a({
-      /**
-       * Method to toggle the card open/closed state
-       */
-      toggleOpen: A
-    }), (f, u) => (n(), b("section", {
-      class: s([
-        se,
-        M.value,
-        D.value,
-        L.value,
-        { "pb-16": !m.value }
-      ])
-    }, [
-      I.value ? (n(), b("header", {
-        key: 0,
-        class: s([W.value]),
-        onClick: A
-      }, [
-        w("div", {
-          class: s(pe)
-        }, [
-          w("div", {
-            class: s(["flex flex-row gap-12 items-start", j.value])
-          }, [
-            e.title ? (n(), b("h2", {
-              key: 0,
-              class: "text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink",
-              title: e.title
-            }, G(e.title), 9, ce)) : p("", !0),
-            g(f.$slots, "header")
-          ], 2),
-          w("div", ie, [
-            e.hasInfoIcon ? (n(), d(i(k), {
-              key: 0,
-              iconName: "circle-question",
-              variant: "invisible",
-              environment: e.environment,
-              onClick: u[0] || (u[0] = P((h) => c("fzcard:click-info"), ["stop"]))
-            }, null, 8, ["environment"])) : p("", !0),
-            e.collapsible ? (n(), d(i(k), {
-              key: 1,
-              iconName: v.value ? "chevron-up" : "chevron-down",
-              variant: "invisible",
-              environment: e.environment
-            }, null, 8, ["iconName", "environment"])) : p("", !0)
-          ])
-        ]),
-        g(f.$slots, "header-content")
-      ], 2)) : p("", !0),
-      S.value ? N((n(), b("article", {
-        key: 1,
-        class: s(["p-16", e.contentClass])
-      }, [
-        g(f.$slots, "default")
-      ], 2)), [
-        [$, m.value]
-      ]) : p("", !0),
-      (y.footer || V.value) && S.value ? N((n(), b("footer", {
-        key: 2,
-        class: s([ue, { "justify-end": !i(t) }])
-      }, [
-        g(f.$slots, "footer", {}, () => [
-          U(i(X), {
-            horizontal: "",
-            gap: "sm",
-            class: s({ "w-full": i(t) })
-          }, {
-            default: F(() => [
-              e.tertiaryAction ? (n(), d(i(k), {
-                key: 0,
-                onClick: u[1] || (u[1] = (h) => c("fztertiary:click")),
-                iconName: e.tertiaryAction.icon,
-                variant: "invisible",
-                environment: e.environment,
-                disabled: e.tertiaryAction.disabled
-              }, null, 8, ["iconName", "environment", "disabled"])) : p("", !0),
-              e.secondaryAction ? (n(), d(i(H), {
-                key: 1,
-                class: s({ "flex-grow": i(t) }),
-                onClick: u[2] || (u[2] = (h) => c("fzsecondary:click")),
-                label: e.secondaryAction.label,
-                variant: "secondary",
-                environment: e.environment,
-                disabled: e.secondaryAction.disabled
-              }, null, 8, ["class", "label", "environment", "disabled"])) : p("", !0),
-              e.primaryAction ? (n(), d(i(H), {
-                key: 2,
-                class: s({ "flex-grow": i(t) }),
-                onClick: u[3] || (u[3] = (h) => c("fzprimary:click")),
-                label: e.primaryAction.label,
-                variant: "primary",
-                environment: e.environment,
-                disabled: e.primaryAction.disabled
-              }, null, 8, ["class", "label", "environment", "disabled"])) : p("", !0)
-            ]),
-            _: 1
-          }, 8, ["class"])
-        ])
-      ], 2)), [
-        [$, m.value]
-      ]) : p("", !0)
-    ], 2));
-  }
+//#endregion
+//#region ../style/src/constants.ts
+var N = Object.entries(E.global.breakpoint).reduce((e, [t, n]) => (e[t] = n.value, e), {}), P = ["title"], F = { class: "flex flex-row gap-8 items-start" }, I = "border-1 border-solid rounded flex flex-col", L = "border-solid pt-16 px-16 flex flex-row justify-between", R = "border-solid pt-0 px-16 pb-16 flex gap-12 items-center", z = /* @__PURE__ */ o({
+	__name: "FzCard",
+	props: {
+		title: {},
+		color: {},
+		primaryAction: {},
+		secondaryAction: {},
+		tertiaryAction: {},
+		contentClass: {},
+		collapsible: { type: Boolean },
+		defaultExpanded: { type: Boolean },
+		alwaysAlive: { type: Boolean },
+		hasInfoIcon: { type: Boolean },
+		environment: { default: "frontoffice" }
+	},
+	emits: [
+		"fzprimary:click",
+		"fzsecondary:click",
+		"fztertiary:click",
+		"fzcard:click-info"
+	],
+	setup(o, { expose: l, emit: p }) {
+		let E = T(`(max-width: ${N.sm})`), D = o, O = p, k = g(), A = d(D.defaultExpanded ?? !1);
+		v(() => D.color === "aliceblue", (e) => {
+			e && console.warn("[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now.");
+		}, { immediate: !0 });
+		let j = e(() => D.color === "aliceblue" ? "blue" : D.color), M = e(() => A.value || !D.collapsible), z = e(() => D.alwaysAlive || M.value), B = e(() => D.title || k.header || k["header-content"]), V = e(() => [D.collapsible ? "cursor-pointer" : ""]), H = e(() => D.environment === "backoffice" ? "py-2" : "py-8"), U = e(() => {
+			switch (j.value) {
+				case "blue": return "bg-background-alice-blue";
+				case "orange": return "bg-background-seashell";
+				case "purple": return "bg-background-pale-purple";
+				case "grey": return "bg-background-white-smoke";
+				case "yellow": return "bg-semantic-warning-50";
+				case "red": return "bg-semantic-error-50";
+				default: return "bg-core-white";
+			}
+		}), W = e(() => "text-core-black"), G = e(() => {
+			switch (j.value) {
+				case "blue": return "border-background-alice-blue";
+				case "orange": return "border-background-seashell";
+				case "purple": return "border-background-pale-purple";
+				case "grey": return "border-background-white-smoke";
+				case "yellow": return "border-semantic-warning-50";
+				case "red": return "border-semantic-error-50";
+				default: return "border-grey-100";
+			}
+		}), K = e(() => D.primaryAction !== void 0 || D.secondaryAction !== void 0 || D.tertiaryAction !== void 0);
+		function q() {
+			D.collapsible && (A.value = !A.value);
+		}
+		return c(() => {
+			D.tertiaryAction && !D.secondaryAction && !D.primaryAction ? console.warn("[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction") : D.secondaryAction && !D.primaryAction && console.warn("[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction");
+		}), l({ toggleOpen: q }), (e, c) => (u(), r("section", { class: s([
+			I,
+			U.value,
+			W.value,
+			G.value,
+			{ "pb-16": !M.value }
+		]) }, [
+			B.value ? (u(), r("header", {
+				key: 0,
+				class: s([V.value]),
+				onClick: q
+			}, [i("div", { class: s(L) }, [i("div", { class: s(["flex flex-row gap-12 items-start", H.value]) }, [o.title ? (u(), r("h2", {
+				key: 0,
+				class: "text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink",
+				title: o.title
+			}, m(o.title), 9, P)) : n("", !0), f(e.$slots, "header")], 2), i("div", F, [o.hasInfoIcon ? (u(), t(h(C), {
+				key: 0,
+				iconName: "circle-question",
+				variant: "invisible",
+				environment: o.environment,
+				onClick: c[0] ||= x((e) => O("fzcard:click-info"), ["stop"])
+			}, null, 8, ["environment"])) : n("", !0), o.collapsible ? (u(), t(h(C), {
+				key: 1,
+				iconName: A.value ? "chevron-up" : "chevron-down",
+				variant: "invisible",
+				environment: o.environment
+			}, null, 8, ["iconName", "environment"])) : n("", !0)])]), f(e.$slots, "header-content")], 2)) : n("", !0),
+			z.value ? b((u(), r("article", {
+				key: 1,
+				class: s(["p-16", o.contentClass])
+			}, [f(e.$slots, "default")], 2)), [[_, M.value]]) : n("", !0),
+			(k.footer || K.value) && z.value ? b((u(), r("footer", {
+				key: 2,
+				class: s([R, { "justify-end": !h(E) }])
+			}, [f(e.$slots, "footer", {}, () => [a(h(w), {
+				horizontal: "",
+				gap: "sm",
+				class: s({ "w-full": h(E) })
+			}, {
+				default: y(() => [
+					o.tertiaryAction ? (u(), t(h(C), {
+						key: 0,
+						onClick: c[1] ||= (e) => O("fztertiary:click"),
+						iconName: o.tertiaryAction.icon,
+						variant: "invisible",
+						environment: o.environment,
+						disabled: o.tertiaryAction.disabled
+					}, null, 8, [
+						"iconName",
+						"environment",
+						"disabled"
+					])) : n("", !0),
+					o.secondaryAction ? (u(), t(h(S), {
+						key: 1,
+						class: s({ "flex-grow": h(E) }),
+						onClick: c[2] ||= (e) => O("fzsecondary:click"),
+						label: o.secondaryAction.label,
+						variant: "secondary",
+						environment: o.environment,
+						disabled: o.secondaryAction.disabled
+					}, null, 8, [
+						"class",
+						"label",
+						"environment",
+						"disabled"
+					])) : n("", !0),
+					o.primaryAction ? (u(), t(h(S), {
+						key: 2,
+						class: s({ "flex-grow": h(E) }),
+						onClick: c[3] ||= (e) => O("fzprimary:click"),
+						label: o.primaryAction.label,
+						variant: "primary",
+						environment: o.environment,
+						disabled: o.primaryAction.disabled
+					}, null, 8, [
+						"class",
+						"label",
+						"environment",
+						"disabled"
+					])) : n("", !0)
+				]),
+				_: 1
+			}, 8, ["class"])])], 2)), [[_, M.value]]) : n("", !0)
+		], 2));
+	}
 });
-export {
-  fe as FzCard
-};
+//#endregion
+export { z as FzCard };