@ebrains/vue 2.4.0 → 3.0.0

package/{token-list_3.entry-_-blcolT.mjs → token-list_3.entry-DIqXhT6s.mjs}

@@ -1,7 +1,19 @@
-import { r as d, h as e } from "./index-N8k1JVST.mjs";
+import { r as d, h as e } from "./index-QMzHaXvm.mjs";
 const l = {
   tokens: {
-    // grey
+    // Brand Colors - New EBRAINS Visual System
+    "brand-black": "#07140D",
+    "brand-green": "#00FF9D",
+    "brand-green-dark": "#00C87B",
+    // Neutrals
+    "grey-light": "#ECECEC",
+    "grey-dark": "#7A7B7A",
+    // Base
+    black: "#000000",
+    white: "#FFFFFF",
+    transparent: "transparent",
+    current: "currentColor",
+    // Legacy grey scale (keeping for gradual migration)
     "grey-100": "#f8f8f8",
     "grey-200": "#f2f2f2",
     "grey-300": "#e6e6e6",
@@ -11,7 +23,8 @@ const l = {
     "grey-700": "#666666",
     "grey-800": "#4d4d4d",
     "grey-900": "#242424",
-    // green
+    // Secondary colors (de-emphasized but available if needed)
+    // Green variants
     "green-100": "#eaffee",
     "green-200": "#d3ffdc",
     "green-300": "#9dffb4",
@@ -21,7 +34,7 @@ const l = {
     "green-700": "#009d45",
     "green-800": "#007734",
     "green-900": "#004f23",
-    // yellow
+    // Yellow
     "yellow-100": "#fefee5",
     "yellow-200": "#ffffcb",
     "yellow-300": "#fdfdaa",
@@ -31,7 +44,7 @@ const l = {
     "yellow-700": "#d7d72b",
     "yellow-800": "#9a9a1e",
     "yellow-900": "#636313",
-    // orange
+    // Orange
     "orange-100": "#fff4ee",
     "orange-200": "#ffeade",
     "orange-300": "#ffdcc5",
@@ -41,7 +54,7 @@ const l = {
     "orange-700": "#cb7f28",
     "orange-800": "#995f1e",
     "orange-900": "#653f14",
-    // red
+    // Red
     "red-100": "#feefef",
     "red-200": "#ffe0e1",
     "red-300": "#ffc7c9",
@@ -51,7 +64,7 @@ const l = {
     "red-700": "#d01111",
     "red-800": "#a3001a",
     "red-900": "#6f0011",
-    // purple
+    // Purple
     "purple-100": "#f9f3ff",
     "purple-200": "#f4e8ff",
     "purple-300": "#e9ceff",
@@ -61,7 +74,7 @@ const l = {
     "purple-700": "#af56e4",
     "purple-800": "#8337b1",
     "purple-900": "#3d1e4f",
-    // blue
+    // Blue
     "blue-100": "#eff0ff",
     "blue-200": "#dee0ff",
     "blue-300": "#caceff",
@@ -71,7 +84,7 @@ const l = {
     "blue-700": "#0034cb",
     "blue-800": "#002799",
     "blue-900": "#001a65",
-    // cyan
+    // Cyan
     "cyan-100": "#E0EEFF",
     "cyan-200": "#D3E6FF",
     "cyan-300": "#B5D8FF",
@@ -80,56 +93,53 @@ const l = {
     "cyan-600": "#3FA9F5",
     "cyan-700": "#267FBE",
     "cyan-800": "#1F689B",
-    "cyan-900": "#15496D",
-    // Generics
-    black: "#000000",
-    white: "#ffffff",
-    transparent: "transparent",
-    current: "currentColor"
+    "cyan-900": "#15496D"
   },
   border: {
-    default: "black",
+    default: "brand-black",
     inverse: "white",
     "inverse-soft": "rgba(255, 255, 255, 0.3)",
     "inverse-softer": "rgba(255, 255, 255, 0.15)",
-    soft: "rgba(0, 0, 0, .15 )",
-    softer: "rgba(0, 0, 0, .1 )",
-    softest: "rgba(0, 0, 0, .05 )",
-    accent: "green-500",
+    soft: "rgba(0, 0, 0, .15)",
+    softer: "rgba(0, 0, 0, .1)",
+    softest: "rgba(0, 0, 0, .05)",
+    accent: "brand-green",
+    "accent-dark": "brand-green-dark",
     error: "red-700",
     current: "currentColor",
-    transparent: "transparent"
+    transparent: "transparent",
+    grey: "grey-light",
+    "grey-dark": "grey-dark"
   },
   text: {
+    default: "brand-black",
     inverse: "white",
-    default: "black",
     current: "currentColor",
     transparent: "transparent",
-    light: "grey-700",
-    lighter: "grey-600",
+    light: "grey-dark",
+    lighter: "grey-light",
     lightest: "grey-500",
     "extra-light": "grey-300",
     success: "green-800",
     warning: "yellow-900",
     error: "red-700",
-    accent: "green-500",
-    "on-gradient": "rgba(0, 0, 0, 0.55)"
+    accent: "brand-green",
+    "accent-dark": "brand-green-dark",
+    "on-gradient": "rgba(0, 0, 0, 0.55)",
+    "on-dark": "white"
   },
   background: {
-    default: "grey-200",
+    default: "brand-black",
     inverse: "white",
-    "inverse-soft": "rgba(255, 255, 255, .2)",
-    "inverse-softer": "rgba(255, 255, 255, .15)",
-    dark: "grey-300",
-    darker: "grey-400",
+    "inverse-soft": "rgba(0, 0, 0, .05)",
+    dark: "grey-light",
+    darker: "grey-dark",
     strong: "grey-700",
     "strong-dark": "grey-800",
     stronger: "grey-900",
-    strongest: "black",
-    "strongest-soft": "rgba(0, 0, 0, .05)",
-    accent: "green-500",
-    "accent-dark": "green-600",
-    "accent-darker": "green-800",
+    strongest: "brand-black",
+    accent: "brand-green",
+    "accent-dark": "brand-green-dark",
     success: "green-200",
     warning: "yellow-200",
     error: "red-200",
@@ -140,13 +150,18 @@ const l = {
     "on-dark": "rgba(255, 255, 255, 0.2)"
   },
   underline: {
-    accent: "green-500",
-    light: "grey-700",
+    accent: "brand-green",
+    "accent-dark": "brand-green-dark",
+    light: "grey-dark",
     lighter: "grey-600",
     lightest: "grey-500",
     "extra-light": "grey-300"
   },
-  outline: { default: "black", accent: "green-500" },
+  outline: {
+    default: "brand-black",
+    accent: "brand-green",
+    "accent-dark": "brand-green-dark"
+  },
   /**
    * Gradients token are created manually inside gradients.css utility file.
    * This mapping is here to generate gradients view inside storybook
@@ -168,11 +183,11 @@ const l = {
   }
   getTextColor(r) {
     if (r.startsWith("rgba") || r.startsWith("rgb")) {
-      const t = r.replace(/rgba?\(/, "").replace(")", "").split(",").map((c) => parseFloat(c.trim())), s = t[0], a = t[1], o = t[2];
-      return (0.299 * s + 0.587 * a + 0.114 * o) / 255 > 0.5 ? "text-default" : "text-inverse";
+      const t = r.replace(/rgba?\(/, "").replace(")", "").split(",").map((c) => parseFloat(c.trim())), a = t[0], n = t[1], s = t[2];
+      return (0.299 * a + 0.587 * n + 0.114 * s) / 255 > 0.5 ? "text-default" : "text-inverse";
     } else if (r.startsWith("#")) {
-      const t = r.replace("#", ""), s = parseInt(t.substring(0, 2), 16), a = parseInt(t.substring(2, 4), 16), o = parseInt(t.substring(4, 6), 16);
-      return (0.299 * s + 0.587 * a + 0.114 * o) / 255 > 0.5 ? "text-default" : "text-inverse";
+      const t = r.replace("#", ""), a = parseInt(t.substring(0, 2), 16), n = parseInt(t.substring(2, 4), 16), s = parseInt(t.substring(4, 6), 16);
+      return (0.299 * a + 0.587 * n + 0.114 * s) / 255 > 0.5 ? "text-default" : "text-inverse";
     }
     return "text-default";
   }
@@ -181,32 +196,32 @@ const l = {
   }
   renderSection(r, t) {
     if (r === "tokens") {
-      const s = this.groupTokensByCategory(t);
-      return Object.entries(s).map(([, a]) => e("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, a.map((o) => {
-        const n = Object.keys(o)[0], c = this.resolveColor(o[n]), g = this.getTextColor(c);
-        return e("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, e("div", { class: "effect-height items-center justify-between p-16 hidden lg:flex", style: { backgroundColor: c } }, e("span", { class: `${g} f-body-02` }, n), e("div", { class: "inline-flex" }, e("eds-code-block", { code: c, language: "hex", class: "min-w-[210px] mr-4" }), e("eds-code-block", { language: "css", code: `var(--${n})`, class: "min-w-[210px]" }))), e("div", { class: "effect-height items-center justify-between p-16 block lg:hidden", style: { backgroundColor: c } }, e("span", { class: `${g} f-body-02` }, n), e("div", { class: "inline block" }, e("eds-code-block", { code: c, class: "min-w-[210px] mb-4" }), e("eds-code-block", { code: `var(--${n})`, class: "min-w-[210px]" }))));
+      const a = this.groupTokensByCategory(t);
+      return Object.entries(a).map(([, n]) => e("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, n.map((s) => {
+        const o = Object.keys(s)[0], c = this.resolveColor(s[o]), g = this.getTextColor(c);
+        return e("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, e("div", { class: "effect-height items-center justify-between p-16 hidden lg:flex", style: { backgroundColor: c } }, e("span", { class: `${g} f-body-02` }, o), e("div", { class: "inline-flex" }, e("eds-code-block", { code: c, language: "hex", class: "min-w-[210px] mr-4" }), e("eds-code-block", { language: "css", code: `var(--${o})`, class: "min-w-[210px]" }))), e("div", { class: "effect-height items-center justify-between p-16 block lg:hidden", style: { backgroundColor: c } }, e("span", { class: `${g} f-body-02` }, o), e("div", { class: "inline block" }, e("eds-code-block", { code: c, class: "min-w-[210px] mb-4" }), e("eds-code-block", { code: `var(--${o})`, class: "min-w-[210px]" }))));
       })));
     }
-    return e("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(t).map(([s, a]) => {
-      const o = this.resolveColor(a), n = this.getTextColor(o), c = o.startsWith("#") || o.startsWith("rgb") ? { backgroundColor: o } : { border: `2px solid ${o}` };
-      return e("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col" }, e("div", { class: "effect-height block lg:flex items-center justify-between p-16", style: c }, e("div", { class: "w-full flex" }, e("span", { class: `${n} mr-auto font-bold` }, s), e("span", { class: `${n} ml-auto  mr-4 font-bold` }, a)), e("span", { class: `${n}` }, r === "background" ? e("eds-code-block", { code: `bg-${s}`, class: "min-w-[210px] mr-4" }) : e("eds-code-block", { code: `${r}-${s}`, class: r === "border" ? "min-w-[250px] mr-4" : "min-w-[210px] mr-4" }))));
+    return e("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(t).map(([a, n]) => {
+      const s = this.resolveColor(n), o = this.getTextColor(s), c = s.startsWith("#") || s.startsWith("rgb") ? { backgroundColor: s } : { border: `2px solid ${s}` };
+      return e("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col" }, e("div", { class: "effect-height block lg:flex items-center justify-between p-16", style: c }, e("div", { class: "w-full flex" }, e("span", { class: `${o} mr-auto font-bold` }, a), e("span", { class: `${o} ml-auto  mr-4 font-bold` }, n)), e("span", { class: `${o}` }, r === "background" ? e("eds-code-block", { code: `bg-${a}`, class: "min-w-[210px] mr-4" }) : e("eds-code-block", { code: `${r}-${a}`, class: r === "border" ? "min-w-[250px] mr-4" : "min-w-[210px] mr-4" }))));
     }));
   }
   groupTokensByCategory(r) {
     const t = {};
-    return Object.entries(r).forEach(([s, a]) => {
-      const o = s.split("-")[0];
-      t[o] || (t[o] = []), t[o].push({ [s]: a });
+    return Object.entries(r).forEach(([a, n]) => {
+      const s = a.split("-")[0];
+      t[s] || (t[s] = []), t[s].push({ [a]: n });
     }), t;
   }
   render() {
     const r = this.show ? { [this.show]: l[this.show] } : l;
-    return e("section", { key: "2fcc5dd08b84b47b561c6f32f49c65b90560069f", class: "w-full mt-28" }, Object.entries(r).map(([t, s]) => (
+    return e("section", { key: "b95825988f64556481b66203bcd8fb281b88d2a9", class: "w-full mt-28" }, Object.entries(r).map(([t, a]) => (
       // Only render sections that exist in `colors`
-      s ? this.renderSection(t, s) : null
+      a ? this.renderSection(t, a) : null
     )));
   }
-}, f = {
+}, i = {
   xxs: "2px",
   xs: "4px",
   sm: "8px",
@@ -218,26 +233,42 @@ const l = {
     d(this, r);
   }
   render() {
-    return e("section", { key: "2afbed04fa53695bfc13275ab6d6f77d314e4d14", class: "w-full mt-28" }, e("ul", { key: "87490ba0d46027993d10cdf5f5deef419cc147c1", class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(f).map(([r, t]) => e("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${r}` }, e("eds-code-block", { language: "Utility Class", code: `rounded-${r}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), e("eds-code-block", { code: `border-radius:${t}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))));
+    return e("section", { key: "8b1c08f1c32236156eea1d1d1f78a9bad3a202cb", class: "w-full mt-28" }, e("ul", { key: "b995ce086b3c9b7796f161c29bd206534a3e5316", class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(i).map(([r, t]) => e("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${r}` }, e("eds-code-block", { language: "Utility Class", code: `rounded-${r}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), e("eds-code-block", { code: `border-radius:${t}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))));
   }
-}, i = {
-  small: "0px 1.5px 2px rgba(0, 0, 0, 0.1)",
-  hover: "0px 0px 16px rgba(0, 0, 0, 0.2)",
-  accent: "0px 0px 12px rgba(0, 201, 89, 0.6)",
-  podium: "0px 0px 8px 8px rgb(0 0 0 / 25%);",
-  border: "0 10px 10px rgba(0, 0, 0, 0.15);",
-  "border-top": "0 -10px 10px rgba(0, 0, 0, 0.15);"
-}, p = {
-  small: "0px 0px 16px rgba(0, 0, 0, 0.3)"
+}, f = {
+  // Subtle elevation for cards and containers
+  small: "0px 1px 3px rgba(7, 20, 13, 0.1)",
+  // Medium elevation for dropdowns, modals
+  medium: "0px 4px 12px rgba(7, 20, 13, 0.15)",
+  // Hover state for interactive elements
+  hover: "0px 8px 24px rgba(7, 20, 13, 0.2)",
+  // Accent shadow with brand green glow
+  accent: "0px 0px 16px rgba(0, 255, 157, 0.5)",
+  // Green accent for focus states
+  "accent-focus": "0 0 0 3px rgba(0, 255, 157, 0.3)",
+  // Subtle border-like shadow
+  border: "0 1px 3px rgba(7, 20, 13, 0.1)",
+  "border-top": "0 -1px 3px rgba(7, 20, 13, 0.1)",
+  // For elevated components (navigation, sticky headers)
+  elevated: "0px 2px 8px rgba(7, 20, 13, 0.12)",
+  // Strong shadow for modals/overlays
+  overlay: "0px 16px 48px rgba(7, 20, 13, 0.3)",
+  // None - for flat design elements
+  none: "none"
 }, b = {
-  shadows: i,
-  dropShadows: p
+  small: "0px 2px 8px rgba(7, 20, 13, 0.15)",
+  medium: "0px 4px 16px rgba(7, 20, 13, 0.2)",
+  // Green glow for images/icons
+  "accent-glow": "0px 0px 24px rgba(0, 255, 157, 0.6)"
+}, p = {
+  shadows: f,
+  dropShadows: b
 }, m = class {
   constructor(r) {
     d(this, r);
   }
   render() {
-    return e("section", { key: "56dcf320ff3ee79c493757a3cfe27c1f7bca33d9", class: "w-full mt-28" }, e("ul", { key: "8113c23d2eaab9abd28acb618c9599d5be1262a6", class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(b).map(([r, t]) => Object.entries(t).map(([s, a]) => e("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, e("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: a } }, e("eds-code-block", { code: `${r}-${s}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), e("eds-code-block", { code: `${a}`, language: "css", class: "ml-auto min-w-[200px]" })))))));
+    return e("section", { key: "60745a5eb31e7ce043c3d69cd8246b752cd66520", class: "w-full mt-28" }, e("ul", { key: "4c8ce259916cf36fc240c0ae3f22d32571a919f8", class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(p).map(([r, t]) => Object.entries(t).map(([a, n]) => e("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, e("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: n } }, e("eds-code-block", { code: `${r}-${a}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), e("eds-code-block", { code: `${n}`, language: "css", class: "ml-auto min-w-[200px]" })))))));
   }
 };
 export {

package/token-ratios.entry-03PH7eEF.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CoItic1X.js"),s={"1x1":"1/1","21x9":"21/9","16x9":"16/9","3x2":"3/2","4x3":"4/3","4x5":"4/5"},c=class{constructor(t){e.registerInstance(this,t)}render(){return e.h("section",{key:"9ab666342a801e51b3a75c979bceadccf4d9736e",class:"w-full"},e.h("eds-section-core",{key:"4eea7a8b3b8e3b0404108345756d11806ea2805d",tag:"div","section-title":"Aspect Ratios","heading-level":"h3"},e.h("ul",{key:"faa065acac9bce28073f709d147c9b2725150da5",class:"gap-y-8 md:gap-y-12 lg:gap-y-16"},Object.entries(s).map(([t,a])=>e.h("li",{class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{class:"container ratio-box flex items-center justify-center text-center border-2 border-soft",style:{aspectRatio:a.replace("/",":"),width:"100%",maxWidth:"300px"}},e.h("span",{class:"text-default font-bold mr-auto"},"aspect-",t),e.h("span",{class:"mt-2 text-sm ml-auto"},a)))))))}};exports.token_ratios=c;

package/{token-ratios.entry-Dc9r_eDH.mjs → token-ratios.entry-B-MEgjhN.mjs}

@@ -1,5 +1,5 @@
-import { r as c, h as e } from "./index-N8k1JVST.mjs";
-const a = {
+import { r as s, h as e } from "./index-QMzHaXvm.mjs";
+const c = {
   "1x1": "1/1",
   "21x9": "21/9",
   "16x9": "16/9",
@@ -8,16 +8,16 @@ const a = {
   "4x5": "4/5"
 }, r = class {
   constructor(t) {
-    c(this, t);
+    s(this, t);
   }
   render() {
-    return e("section", { key: "4dcf52cac610208030db8af7681cfee611f02a62", class: "w-full" }, e("eds-section-core", { key: "cb571aba92bc59c7b458281258362ca91becc09b", tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, e("ul", { key: "734f5db424dce811f5b6508c49c9f4c9ea4f4474", class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(a).map(([t, s]) => e("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
-      aspectRatio: s.replace("/", ":"),
+    return e("section", { key: "9ab666342a801e51b3a75c979bceadccf4d9736e", class: "w-full" }, e("eds-section-core", { key: "4eea7a8b3b8e3b0404108345756d11806ea2805d", tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, e("ul", { key: "faa065acac9bce28073f709d147c9b2725150da5", class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(c).map(([t, a]) => e("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+      aspectRatio: a.replace("/", ":"),
       // Cast to string to resolve TypeScript error
       width: "100%",
       // Full width to show the aspect ratio correctly
       maxWidth: "300px"
-    } }, e("span", { class: "text-default font-bold mr-auto" }, "aspect-", t), e("span", { class: "mt-2 text-sm ml-auto" }, s)))))));
+    } }, e("span", { class: "text-default font-bold mr-auto" }, "aspect-", t), e("span", { class: "mt-2 text-sm ml-auto" }, a)))))));
   }
 };
 export {

package/token-spacing.entry-BuCJkSnv.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CoItic1X.js"),c=class{constructor(a){e.registerInstance(this,a)}render(){return e.h("div",{key:"8ebe0d888150e5fefd1d3047cc82548f12f47f9f",class:"w-full"},e.h("ul",{key:"c57af77dfb437bafaf060a6c6ebece84c4683409",class:"not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"},e.h("li",{key:"6ca948268bd07e50409334b84eeeb362287f131e",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{key:"0f33f8feec6657d21a4e4a1973d4c46cf4f6c526",class:"container p-8 item-center border-2 border-soft"},e.h("div",{key:"194c9d5367c75c35f021d0b5c64601a72d1141fd",class:"spacing-sample m-16 bg-strong"},e.h("span",{key:"252af2371d58a8364718210563b7aa9a76a551a6",class:"f-body-01 text-inverse"},"Margin: 1rem / m-16")))),e.h("li",{key:"833a8373bbe4db4514c84d4e299e2103b37bc75e",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{key:"d364398230aca7af47273a654a8f138d70361c75",class:"container p-8 item-center border-2 border-soft"},e.h("div",{key:"707e0b62f500c16dc2d72da8e0bd85adabd7280b",class:"spacing-sample ml-64 bg-strong"},e.h("span",{key:"846c07af2613e90c3acd1fa66aa422db14a95526",class:"f-body-01 text-inverse"},"Margin Left: 4rem / ml-64")))),e.h("li",{key:"107899eab78bbb70f62b0aa2df8573f7a940024c",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{key:"fb007ac46524cfda56c1033869b3fd7edeec96b8",class:"container p-8 item-center border-2 border-soft"},e.h("div",{key:"4312aaa901f7ad1075056517b2d8b0902e708aec",class:"spacing-sample mt-32 bg-strong"},e.h("span",{key:"62a87119afea530831e3bcbb45da16f3a3cfb1b8",class:"f-body-01 text-inverse"},"Margin Top: 2rem / mt-32")))),e.h("li",{key:"279e6f5af470cf3f969c37f715def542e4d13140",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{key:"057bcacd976a4d7f0a69ccba3b469e79f6e8c86a",class:"container p-8 item-center border-2 border-soft"},e.h("div",{key:"379423e5ef1b3f5be2a322493266305f2cf46b9d",class:"spacing-sample p-32 bg-strong"},e.h("span",{key:"a3bd9db6ab5dd4f6204d5009c4328f617f44b78c",class:"f-body-01 text-inverse"},"Padding: 2rem / p-32")))),e.h("li",{key:"526411b8ab854f67873964446dee7191949f5d54",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{key:"c30d0c423a4d3104ca8736fbd2c0de5159ac8f2d",class:"container p-8 item-center border-2 border-soft"},e.h("div",{key:"93e0422c2304a0d3a158ba086aa9235a05d621f0",class:"spacing-sample pt-32 bg-strong"},e.h("span",{key:"dca707847134a421d60930307613a6528a009f9d",class:"f-body-01 text-inverse"},"Padding Top: 2rem / pt-32")))),e.h("li",{key:"a132977bdf19ba79401ccc05f248711eb2793497",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{key:"2fad0e796528bce6c021cbb9d3036d4a23226b82",class:"container p-8 item-center border-2 border-soft"},e.h("div",{key:"be02958fc44ca651c348078dfc84fabbe92afaa1",class:"spacing-sample pl-32 bg-strong"},e.h("span",{key:"6c94b77b470a1dd9de4dad7a6900d2e053236f52",class:"f-body-01 text-inverse"},"Padding Left: 2rem / pl-32"))))))}};exports.token_spacing=c;

package/token-spacing.entry-RNrQaZlP.mjs

@@ -0,0 +1,12 @@
+import { r as c, h as e } from "./index-QMzHaXvm.mjs";
+const s = class {
+  constructor(a) {
+    c(this, a);
+  }
+  render() {
+    return e("div", { key: "8ebe0d888150e5fefd1d3047cc82548f12f47f9f", class: "w-full" }, e("ul", { key: "c57af77dfb437bafaf060a6c6ebece84c4683409", class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, e("li", { key: "6ca948268bd07e50409334b84eeeb362287f131e", class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { key: "0f33f8feec6657d21a4e4a1973d4c46cf4f6c526", class: "container p-8 item-center border-2 border-soft" }, e("div", { key: "194c9d5367c75c35f021d0b5c64601a72d1141fd", class: "spacing-sample m-16 bg-strong" }, e("span", { key: "252af2371d58a8364718210563b7aa9a76a551a6", class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), e("li", { key: "833a8373bbe4db4514c84d4e299e2103b37bc75e", class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { key: "d364398230aca7af47273a654a8f138d70361c75", class: "container p-8 item-center border-2 border-soft" }, e("div", { key: "707e0b62f500c16dc2d72da8e0bd85adabd7280b", class: "spacing-sample ml-64 bg-strong" }, e("span", { key: "846c07af2613e90c3acd1fa66aa422db14a95526", class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), e("li", { key: "107899eab78bbb70f62b0aa2df8573f7a940024c", class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { key: "fb007ac46524cfda56c1033869b3fd7edeec96b8", class: "container p-8 item-center border-2 border-soft" }, e("div", { key: "4312aaa901f7ad1075056517b2d8b0902e708aec", class: "spacing-sample mt-32 bg-strong" }, e("span", { key: "62a87119afea530831e3bcbb45da16f3a3cfb1b8", class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), e("li", { key: "279e6f5af470cf3f969c37f715def542e4d13140", class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { key: "057bcacd976a4d7f0a69ccba3b469e79f6e8c86a", class: "container p-8 item-center border-2 border-soft" }, e("div", { key: "379423e5ef1b3f5be2a322493266305f2cf46b9d", class: "spacing-sample p-32 bg-strong" }, e("span", { key: "a3bd9db6ab5dd4f6204d5009c4328f617f44b78c", class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), e("li", { key: "526411b8ab854f67873964446dee7191949f5d54", class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { key: "c30d0c423a4d3104ca8736fbd2c0de5159ac8f2d", class: "container p-8 item-center border-2 border-soft" }, e("div", { key: "93e0422c2304a0d3a158ba086aa9235a05d621f0", class: "spacing-sample pt-32 bg-strong" }, e("span", { key: "dca707847134a421d60930307613a6528a009f9d", class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), e("li", { key: "a132977bdf19ba79401ccc05f248711eb2793497", class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, e("div", { key: "2fad0e796528bce6c021cbb9d3036d4a23226b82", class: "container p-8 item-center border-2 border-soft" }, e("div", { key: "be02958fc44ca651c348078dfc84fabbe92afaa1", class: "spacing-sample pl-32 bg-strong" }, e("span", { key: "6c94b77b470a1dd9de4dad7a6900d2e053236f52", class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32"))))));
+  }
+};
+export {
+  s as token_spacing
+};

package/token-typography.entry-CbJsBpq0.mjs

@@ -0,0 +1,244 @@
+import { r as l, h as i } from "./index-QMzHaXvm.mjs";
+const f = {
+  "heading-01": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "42px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    md: {
+      fontSize: "48px"
+    },
+    lg: {
+      fontSize: "72px"
+    },
+    xl: {
+      fontSize: "83px"
+    }
+  },
+  "heading-02": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "36px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    lg: {
+      fontSize: "48px"
+    },
+    xl: {
+      fontSize: "60px"
+    }
+  },
+  "heading-03": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "36px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    xl: {
+      fontSize: "42px"
+    }
+  },
+  "heading-04": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "28px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    xl: {
+      fontSize: "36px"
+    }
+  },
+  "heading-05": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "28px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "heading-06": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "22px",
+      lineHeight: "120%"
+    }
+  }
+}, s = {
+  "body-01": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "20px",
+      lineHeight: "140%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "body-02": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "17px",
+      lineHeight: "150%"
+    }
+  },
+  "body-03": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "17px",
+      lineHeight: "150%"
+    }
+  }
+}, g = {
+  "ui-01": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "18px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-02": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "16px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-02-light": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "16px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-03": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-03-light": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: "130%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-04": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "12px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-05": {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "10px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  caption: {
+    sm: {
+      fontFamily: "var(--plex-sans)",
+      fontWeight: 400,
+      fontSize: "12px",
+      lineHeight: "120%"
+    }
+  },
+  code: {
+    sm: {
+      fontFamily: "var(--plex-mono)",
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: "140%"
+    }
+  }
+}, r = {
+  "display-01": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "120px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    lg: {
+      fontSize: "150px"
+    }
+  },
+  "display-02": {
+    sm: {
+      fontFamily: "var(--inter)",
+      fontWeight: 300,
+      fontSize: "120px",
+      lineHeight: "100%",
+      letterSpacing: "-0.02em"
+    },
+    lg: {
+      fontSize: "150px"
+    }
+  }
+}, a = {
+  families: {
+    inter: "Inter, Helvetica, Arial, sans-serif",
+    "plex-sans": '"IBM Plex Sans", Inter, Helvetica, Arial, sans-serif',
+    "plex-mono": '"IBM Plex Mono", "Courier New", Courier, monospace'
+  },
+  typesets: {
+    ...f,
+    ...s,
+    ...g,
+    ...r
+  }
+}, m = class {
+  constructor(t) {
+    l(this, t);
+  }
+  render() {
+    return i("section", { key: "a3698b57da5e26052bf013daef956ff5f9e0bd1c", class: "w-full" }, i("ul", { key: "924a82c721a636370a15e7a47ca73264c8e1d30e", class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(a.typesets).filter(([t]) => t !== "displays").flatMap(([t, o]) => Object.entries(o).map(([n, e]) => i("li", { class: "grid-col-span-12 flex flex-col mt-16" }, i("div", { class: "w-full p-16 border border-soft rounded", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", alignItems: "center" } }, i("div", { style: {
+      fontFamily: e.fontFamily || a.families["plex-sans"],
+      fontWeight: e.fontWeight,
+      fontSize: e.fontSize,
+      lineHeight: e.lineHeight,
+      letterSpacing: e.letterSpacing
+    } }, i("span", { class: "text-default" }, `${t}`), i("div", { style: { fontSize: "12px", fontWeight: "400", color: "#7A7B7A", marginTop: "4px", fontFamily: '"IBM Plex Mono", monospace' } }, n, " · class: f-", t)), i("div", null, i("eds-code-block", { code: [
+      `/* Utility: f-${t} | Screen: ${n}:f-${t} */`,
+      e.fontSize && `font-size: ${e.fontSize};`,
+      e.lineHeight && `line-height: ${e.lineHeight};`,
+      e.letterSpacing && `letter-spacing: ${e.letterSpacing};`,
+      e.fontWeight && `font-weight: ${e.fontWeight};`,
+      'font-family: "IBM Plex Sans", sans-serif;'
+    ].filter(Boolean).join(`
+`), language: "css" }))))))));
+  }
+};
+export {
+  m as token_typography
+};

package/token-typography.entry-D0MsaU6A.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-CoItic1X.js"),l={"heading-01":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"42px",lineHeight:"100%",letterSpacing:"-0.01em"},md:{fontSize:"48px"},lg:{fontSize:"72px"},xl:{fontSize:"83px"}},"heading-02":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"36px",lineHeight:"100%",letterSpacing:"-0.01em"},lg:{fontSize:"48px"},xl:{fontSize:"60px"}},"heading-03":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"36px",lineHeight:"100%",letterSpacing:"-0.01em"},xl:{fontSize:"42px"}},"heading-04":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"28px",lineHeight:"100%",letterSpacing:"-0.01em"},xl:{fontSize:"36px"}},"heading-05":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"28px",lineHeight:"110%",letterSpacing:"-0.01em"}},"heading-06":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"22px",lineHeight:"120%"}}},f={"body-01":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"20px",lineHeight:"140%",letterSpacing:"-0.01em"}},"body-02":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"17px",lineHeight:"150%"}},"body-03":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"17px",lineHeight:"150%"}}},s={"ui-01":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"18px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-02":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"16px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-02-light":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"16px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-03":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"14px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-03-light":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"14px",lineHeight:"130%",letterSpacing:"-0.01em"}},"ui-04":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"12px",lineHeight:"100%",letterSpacing:"-0.01em"}},"ui-05":{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"10px",lineHeight:"110%",letterSpacing:"-0.01em"}},caption:{sm:{fontFamily:"var(--plex-sans)",fontWeight:400,fontSize:"12px",lineHeight:"120%"}},code:{sm:{fontFamily:"var(--plex-mono)",fontWeight:400,fontSize:"14px",lineHeight:"140%"}}},g={"display-01":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"120px",lineHeight:"100%",letterSpacing:"-0.01em"},lg:{fontSize:"150px"}},"display-02":{sm:{fontFamily:"var(--inter)",fontWeight:300,fontSize:"120px",lineHeight:"100%",letterSpacing:"-0.02em"},lg:{fontSize:"150px"}}},o={families:{inter:"Inter, Helvetica, Arial, sans-serif","plex-sans":'"IBM Plex Sans", Inter, Helvetica, Arial, sans-serif',"plex-mono":'"IBM Plex Mono", "Courier New", Courier, monospace'},typesets:{...l,...f,...s,...g}},r=class{constructor(t){i.registerInstance(this,t)}render(){return i.h("section",{key:"a3698b57da5e26052bf013daef956ff5f9e0bd1c",class:"w-full"},i.h("ul",{key:"924a82c721a636370a15e7a47ca73264c8e1d30e",class:"not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"},Object.entries(o.typesets).filter(([t])=>t!=="displays").flatMap(([t,a])=>Object.entries(a).map(([n,e])=>i.h("li",{class:"grid-col-span-12 flex flex-col mt-16"},i.h("div",{class:"w-full p-16 border border-soft rounded",style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"1.5rem",alignItems:"center"}},i.h("div",{style:{fontFamily:e.fontFamily||o.families["plex-sans"],fontWeight:e.fontWeight,fontSize:e.fontSize,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}},i.h("span",{class:"text-default"},`${t}`),i.h("div",{style:{fontSize:"12px",fontWeight:"400",color:"#7A7B7A",marginTop:"4px",fontFamily:'"IBM Plex Mono", monospace'}},n," · class: f-",t)),i.h("div",null,i.h("eds-code-block",{code:[`/* Utility: f-${t} | Screen: ${n}:f-${t} */`,e.fontSize&&`font-size: ${e.fontSize};`,e.lineHeight&&`line-height: ${e.lineHeight};`,e.letterSpacing&&`letter-spacing: ${e.letterSpacing};`,e.fontWeight&&`font-weight: ${e.fontWeight};`,'font-family: "IBM Plex Sans", sans-serif;'].filter(Boolean).join(`
+`),language:"css"}))))))))}};exports.token_typography=r;

package/arrow-diagonal-black-8f0494c3-CYl9yYTl.mjs

@@ -1,4 +0,0 @@
-const t = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5858 3H17V9.41421L14.5 6.91421L8.70712 12.7071L7.29291 11.2929L13.0858 5.5L10.5858 3Z" fill="currentColor"></path><path d="M8 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17H14C15.1046 17 16 16.1046 16 15V12H14V15H5V6H8V4Z" fill="currentColor"></path></svg>';
-export {
-  t as a
-};

package/arrow-diagonal-black-8f0494c3-DqsB6ni-.js

@@ -1 +0,0 @@
-"use strict";const t='<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5858 3H17V9.41421L14.5 6.91421L8.70712 12.7071L7.29291 11.2929L13.0858 5.5L10.5858 3Z" fill="currentColor"></path><path d="M8 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17H14C15.1046 17 16 16.1046 16 15V12H14V15H5V6H8V4Z" fill="currentColor"></path></svg>';exports.arrowDiagonal=t;

package/arrow-right-9322ba8a-DBcxNU_p.js

@@ -1,3 +0,0 @@
-"use strict";const t=`<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-  <path fill="currentColor" d="M2 8.5h9V3l7 7-7 7v-5.5H2v-3Z" />
-</svg>`;exports.arrowRight=t;