@ebrains/vue 0.9.2-beta → 0.9.3-beta

package/token-list_3.entry-CQ9aUIVd.mjs

@@ -0,0 +1,247 @@
+import { r as d, h as e } from "./index-l365C9dI.mjs";
+const l = {
+  tokens: {
+    // grey
+    "grey-100": "#f8f8f8",
+    "grey-200": "#f2f2f2",
+    "grey-300": "#e6e6e6",
+    "grey-400": "#d8d8d8",
+    "grey-500": "#8c8c8c",
+    "grey-600": "#6e6e6e",
+    "grey-700": "#666666",
+    "grey-800": "#4d4d4d",
+    "grey-900": "#242424",
+    // green
+    "green-100": "#eaffee",
+    "green-200": "#d3ffdc",
+    "green-300": "#9dffb4",
+    "green-400": "#63fb92",
+    "green-500": "#00e766",
+    "green-600": "#00c959",
+    "green-700": "#009d45",
+    "green-800": "#007734",
+    "green-900": "#004f23",
+    // yellow
+    "yellow-100": "#fefee5",
+    "yellow-200": "#ffffcb",
+    "yellow-300": "#fdfdaa",
+    "yellow-400": "#ffff8b",
+    "yellow-500": "#ffff51",
+    "yellow-600": "#f3f30a",
+    "yellow-700": "#d7d72b",
+    "yellow-800": "#9a9a1e",
+    "yellow-900": "#636313",
+    // orange
+    "orange-100": "#fff4ee",
+    "orange-200": "#ffeade",
+    "orange-300": "#ffdcc5",
+    "orange-400": "#ffcca9",
+    "orange-500": "#ffb87e",
+    "orange-600": "#ffa543",
+    "orange-700": "#cb7f28",
+    "orange-800": "#995f1e",
+    "orange-900": "#653f14",
+    // red
+    "red-100": "#feefef",
+    "red-200": "#ffe0e1",
+    "red-300": "#ffc7c9",
+    "red-400": "#ff9ea2",
+    "red-500": "#ff7a7f",
+    "red-600": "#ff4d68",
+    "red-700": "#d01111",
+    "red-800": "#a3001a",
+    "red-900": "#6f0011",
+    // purple
+    "purple-100": "#f9f3ff",
+    "purple-200": "#f4e8ff",
+    "purple-300": "#e9ceff",
+    "purple-400": "#ddb1ff",
+    "purple-500": "#d18fff",
+    "purple-600": "#c461ff",
+    "purple-700": "#af56e4",
+    "purple-800": "#8337b1",
+    "purple-900": "#3d1e4f",
+    // blue
+    "blue-100": "#eff0ff",
+    "blue-200": "#dee0ff",
+    "blue-300": "#caceff",
+    "blue-400": "#b2b8ff",
+    "blue-500": "#7a89f5",
+    "blue-600": "#2b69fc",
+    "blue-700": "#0034cb",
+    "blue-800": "#002799",
+    "blue-900": "#001a65",
+    // cyan
+    "cyan-100": "#E0EEFF",
+    "cyan-200": "#D3E6FF",
+    "cyan-300": "#B5D8FF",
+    "cyan-400": "#92C8FF",
+    "cyan-500": "#6CBFFE",
+    "cyan-600": "#3FA9F5",
+    "cyan-700": "#267FBE",
+    "cyan-800": "#1F689B",
+    "cyan-900": "#15496D",
+    // Generics
+    black: "#000000",
+    white: "#ffffff",
+    transparent: "transparent",
+    current: "currentColor"
+  },
+  border: {
+    default: "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",
+    error: "red-700",
+    current: "currentColor",
+    transparent: "transparent"
+  },
+  text: {
+    inverse: "white",
+    default: "black",
+    current: "currentColor",
+    transparent: "transparent",
+    light: "grey-700",
+    lighter: "grey-600",
+    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)"
+  },
+  background: {
+    default: "grey-200",
+    inverse: "white",
+    "inverse-soft": "rgba(255, 255, 255, .2)",
+    "inverse-softer": "rgba(255, 255, 255, .15)",
+    dark: "grey-300",
+    darker: "grey-400",
+    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",
+    success: "green-200",
+    warning: "yellow-200",
+    error: "red-200",
+    current: "currentColor",
+    transparent: "transparent",
+    overlay: "rgba(0, 0, 0, 0.25)",
+    "on-gradient": "rgba(0, 0, 0, 0.1)",
+    "on-dark": "rgba(255, 255, 255, 0.2)"
+  },
+  underline: {
+    accent: "green-500",
+    light: "grey-700",
+    lighter: "grey-600",
+    lightest: "grey-500",
+    "extra-light": "grey-300"
+  },
+  outline: { default: "black", accent: "green-500" },
+  /**
+   * Gradients token are created manually inside gradients.css utility file.
+   * This mapping is here to generate gradients view inside storybook
+   * @file: ui-components/src/assets/styles/utilities/gradient.css
+   */
+  gradients: {
+    "gradient-01-top": "gradient-01-top",
+    "gradient-02-top": "gradient-02-top",
+    "gradient-03-top": "gradient-03-top",
+    "gradient-04-top": "gradient-04-top",
+    "gradient-01-bottom": "gradient-01-bottom",
+    "gradient-02-bottom": "gradient-02-bottom",
+    "gradient-03-bottom": "gradient-03-bottom",
+    "gradient-04-bottom": "gradient-04-bottom"
+  }
+}, x = class {
+  constructor(r) {
+    d(this, r), this.show = void 0;
+  }
+  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";
+    } 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";
+    }
+    return "text-default";
+  }
+  resolveColor(r) {
+    return l.tokens[r] ? l.tokens[r] : r;
+  }
+  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]" }))));
+      })));
+    }
+    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" }))));
+    }));
+  }
+  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 });
+    }), t;
+  }
+  render() {
+    const r = this.show ? { [this.show]: l[this.show] } : l;
+    return e("section", { key: "61b0561443787bdc5d1fdf6db0bed0bebe8ba6cb", class: "w-full mt-28" }, Object.entries(r).map(([t, s]) => (
+      // Only render sections that exist in `colors`
+      s ? this.renderSection(t, s) : null
+    )));
+  }
+}, f = {
+  xxs: "2px",
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  pill: "100px"
+}, y = class {
+  constructor(r) {
+    d(this, r);
+  }
+  render() {
+    return e("section", { key: "f6e277d8d84957ad05f027a7a151f2dd0b5c6e21", class: "w-full mt-28" }, e("ul", { key: "feeef0a573d704dc010b76fc94a5ac9a9a05f0da", 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" }))))));
+  }
+}, 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)"
+}, b = {
+  shadows: i,
+  dropShadows: p
+}, m = class {
+  constructor(r) {
+    d(this, r);
+  }
+  render() {
+    return e("section", { key: "0d61c0eee38fbcffe111031da0829b3a9050bc8d", class: "w-full mt-28" }, e("ul", { key: "587c263280d086c23351c6bbeaf01f37c307ce65", 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]" })))))));
+  }
+};
+export {
+  x as token_list,
+  y as token_radii,
+  m as token_shadows
+};

package/token-ratios.entry-DkgSpwqw.mjs

@@ -0,0 +1,25 @@
+import { r as s, h as e } from "./index-l365C9dI.mjs";
+const c = {
+  "1x1": "1/1",
+  "21x9": "21/9",
+  "16x9": "16/9",
+  "3x2": "3/2",
+  "4x3": "4/3",
+  "4x5": "4/5"
+}, r = class {
+  constructor(t) {
+    s(this, t);
+  }
+  render() {
+    return e("section", { key: "c4348ae18a2c7644f7a191aa5190ac3b98b5ccb9", class: "w-full" }, e("eds-section-core", { key: "6f148fc0c0ebbaef05761fa1a773cf026e308517", tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, e("ul", { key: "eb932db069683046fcda8ea950bac277e1387c33", 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" }, a)))))));
+  }
+};
+export {
+  r as token_ratios
+};

package/token-ratios.entry-Dtrkv16c.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-7ljGsgwC.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:"c4348ae18a2c7644f7a191aa5190ac3b98b5ccb9",class:"w-full"},e.h("eds-section-core",{key:"6f148fc0c0ebbaef05761fa1a773cf026e308517",tag:"div","section-title":"Aspect Ratios","heading-level":"h3"},e.h("ul",{key:"eb932db069683046fcda8ea950bac277e1387c33",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-typography.entry-CgJdJgCR.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-7ljGsgwC.js"),s={"heading-01":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"42px",lineHeight:"100%",letterSpacing:"-0.01em"},md:{fontSize:"48px"},lg:{fontSize:"72px"},xl:{fontSize:"83px"}},"heading-02":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"36px",lineHeight:"100%",letterSpacing:"-0.01em"},lg:{fontSize:"48px"},xl:{fontSize:"60px"}},"heading-03":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"36px",lineHeight:"100%",letterSpacing:"-0.01em"},xl:{fontSize:"42px"}},"heading-04":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"28px",lineHeight:"100%",letterSpacing:"-0.01em"},xl:{fontSize:"36px"}},"heading-05":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"28px",lineHeight:"110%",letterSpacing:"-0.01em"}},"heading-06":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"22px",lineHeight:"120%"}}},l={"body-01":{sm:{fontFamily:"var(--sans)",fontWeight:600,fontSize:"20px",lineHeight:"140%",letterSpacing:"-0.01em"}},"body-02":{sm:{fontFamily:"var(--sans)",fontWeight:600,fontSize:"17px",lineHeight:"150%"}}},f={"ui-01":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"18px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-02":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"16px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-02-light":{sm:{fontFamily:"var(--sans)",fontWeight:600,fontSize:"16px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-03":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"14px",lineHeight:"110%",letterSpacing:"-0.01em"}},"ui-03-light":{sm:{fontFamily:"var(--sans)",fontWeight:600,fontSize:"14px",lineHeight:"130%",letterSpacing:"-0.01em"}},"ui-04":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"12px",lineHeight:"100%",letterSpacing:"-0.01em"}},"ui-05":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"10px",lineHeight:"110%",letterSpacing:"-0.01em"}},caption:{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"12px",lineHeight:"120%"}}},g={"display-01":{sm:{fontFamily:"var(--sans)",fontWeight:800,fontSize:"120px",lineHeight:"100%",letterSpacing:"-0.01em"},lg:{fontSize:"150px"}}},a={families:{sans:"Inter, Helvetica, Arial, sans-serif"},typesets:{...s,...l,...f,...g}},c=class{constructor(t){e.registerInstance(this,t)}render(){return e.h("section",{key:"2448267dd93e815f2def0a4b711f28325d906d61",class:"w-full"},e.h("ul",{key:"ac73af17e45045d2122d54dd357f1141b3a5bad7",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,i])=>e.h("li",{class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},e.h("div",{class:"w-full p-4 block lg:flex items-center border border-soft rounded"},e.h("div",{class:"mr-auto hidden lg:block",style:{fontFamily:a.families.sans,fontWeight:i.fontWeight,fontSize:i.fontSize,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing}},e.h("span",{class:"text-default font-bold"},`${t} (${n})`)),e.h("div",{class:"mr-auto block lg:hidden p-4"},e.h("span",{class:"text-default f-heading-05"},`${t} (${n})`)),e.h("div",{class:"ml-auto"},e.h("eds-code-block",{code:[i.fontSize&&`font-size: ${i.fontSize};`,i.lineHeight&&`line-height: ${i.lineHeight};`,i.letterSpacing&&`letter-spacing: ${i.letterSpacing};`,i.fontWeight&&`font-weight: ${i.fontWeight};`,i.fontFamily&&`font-family: ${i.fontFamily};`].filter(Boolean).join(`
+`),language:"css",class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:`f-${t}`,language:"Utility Class",class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:`${n}:f-${t}`,language:"Screen",class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:`--var(--f-${t}-fontFamily)`,class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:`--var(--f-${t}-fontWeight)`,class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:`--var(--f-${t}-fontSize)`,class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:`--var(--f-${t}-lineHeight)`,class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:`--var(--f-${t}-letterSpacing)`,class:"min-w-[250px] mb-4"}),e.h("eds-code-block",{code:"--sans: Inter, Helvetica, Arial, sans-serif;",class:"min-w-[250px] mb-4"}))))))))}};exports.token_typography=c;

package/token-typography.entry-CrMCS1R0.mjs

@@ -0,0 +1,213 @@
+import { r as s, h as e } from "./index-l365C9dI.mjs";
+const l = {
+  "heading-01": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "42px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    md: {
+      fontSize: "48px"
+    },
+    lg: {
+      fontSize: "72px"
+    },
+    xl: {
+      fontSize: "83px"
+    }
+  },
+  "heading-02": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "36px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    lg: {
+      fontSize: "48px"
+    },
+    xl: {
+      fontSize: "60px"
+    }
+  },
+  "heading-03": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "36px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    xl: {
+      fontSize: "42px"
+    }
+  },
+  "heading-04": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "28px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    xl: {
+      fontSize: "36px"
+    }
+  },
+  "heading-05": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "28px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "heading-06": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "22px",
+      lineHeight: "120%"
+    }
+  }
+}, f = {
+  "body-01": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 600,
+      fontSize: "20px",
+      lineHeight: "140%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "body-02": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 600,
+      fontSize: "17px",
+      lineHeight: "150%"
+    }
+  }
+}, g = {
+  "ui-01": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "18px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-02": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "16px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-02-light": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 600,
+      fontSize: "16px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-03": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "14px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-03-light": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 600,
+      fontSize: "14px",
+      lineHeight: "130%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-04": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "12px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  "ui-05": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "10px",
+      lineHeight: "110%",
+      letterSpacing: "-0.01em"
+    }
+  },
+  caption: {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "12px",
+      lineHeight: "120%"
+    }
+  }
+}, c = {
+  "display-01": {
+    sm: {
+      fontFamily: "var(--sans)",
+      fontWeight: 800,
+      fontSize: "120px",
+      lineHeight: "100%",
+      letterSpacing: "-0.01em"
+    },
+    lg: {
+      fontSize: "150px"
+    }
+  }
+}, a = {
+  families: {
+    sans: "Inter, Helvetica, Arial, sans-serif"
+  },
+  typesets: {
+    ...l,
+    ...f,
+    ...g,
+    ...c
+  }
+}, r = class {
+  constructor(t) {
+    s(this, t);
+  }
+  render() {
+    return e("section", { key: "2448267dd93e815f2def0a4b711f28325d906d61", class: "w-full" }, e("ul", { key: "ac73af17e45045d2122d54dd357f1141b3a5bad7", 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, i]) => 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-4 block lg:flex items-center border border-soft rounded" }, e("div", { class: "mr-auto hidden lg:block", style: {
+      fontFamily: a.families.sans,
+      fontWeight: i.fontWeight,
+      fontSize: i.fontSize,
+      lineHeight: i.lineHeight,
+      letterSpacing: i.letterSpacing
+    } }, e("span", { class: "text-default font-bold" }, `${t} (${n})`)), e("div", { class: "mr-auto block lg:hidden p-4" }, e("span", { class: "text-default f-heading-05" }, `${t} (${n})`)), e("div", { class: "ml-auto" }, e("eds-code-block", { code: [
+      i.fontSize && `font-size: ${i.fontSize};`,
+      i.lineHeight && `line-height: ${i.lineHeight};`,
+      i.letterSpacing && `letter-spacing: ${i.letterSpacing};`,
+      i.fontWeight && `font-weight: ${i.fontWeight};`,
+      i.fontFamily && `font-family: ${i.fontFamily};`
+    ].filter(Boolean).join(`
+`), language: "css", class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: `f-${t}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: `${n}:f-${t}`, language: "Screen", class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: `--var(--f-${t}-fontFamily)`, class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: `--var(--f-${t}-fontWeight)`, class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: `--var(--f-${t}-fontSize)`, class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: `--var(--f-${t}-lineHeight)`, class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: `--var(--f-${t}-letterSpacing)`, class: "min-w-[250px] mb-4" }), e("eds-code-block", { code: "--sans: Inter, Helvetica, Arial, sans-serif;", class: "min-w-[250px] mb-4" }))))))));
+  }
+};
+export {
+  r as token_typography
+};

package/tutotial-150ee1fd-DFdyoHVA.mjs

@@ -0,0 +1,28 @@
+const t = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 7.5L10 3L17 7.5L10 12L3 7.5Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M5 8.5V13.2L10 16.5L15 13.6667V8.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.8896 13.4492V7.5H18.3896V12.6081L16.8896 13.4492Z"
+      fill="currentColor"
+    />
+  </svg>`;
+export {
+  t
+};

package/tutotial-150ee1fd-DjN_JBL5.js

@@ -0,0 +1,25 @@
+"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="M3 7.5L10 3L17 7.5L10 12L3 7.5Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M5 8.5V13.2L10 16.5L15 13.6667V8.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.8896 13.4492V7.5H18.3896V12.6081L16.8896 13.4492Z"
+      fill="currentColor"
+    />
+  </svg>`;exports.tutorial=t;

package/twitter-ac21b505-CGWVGWM9.mjs

@@ -0,0 +1,15 @@
+const C = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.03188 17C13.07 17 16.3718 11.999 16.3718 7.66246C16.3718 7.52041 16.3689 7.37901 16.3625 7.23824C17.0035 6.775 17.5606 6.1969 18 5.53882C17.4118 5.80019 16.7789 5.97615 16.1149 6.05549C16.7926 5.64919 17.313 5.00647 17.5584 4.24026C16.9242 4.61617 16.2217 4.88938 15.4739 5.03686C14.8748 4.39894 14.022 4 13.0777 4C11.2649 4 9.7948 5.46972 9.7948 7.28143C9.7948 7.53897 9.8236 7.78947 9.87992 8.02973C7.15157 7.89248 4.73235 6.58656 3.11345 4.60081C2.83153 5.08581 2.66897 5.64919 2.66897 6.25032C2.66897 7.38893 3.2485 8.39412 4.12978 8.98213C3.59122 8.9655 3.08529 8.81769 2.64305 8.57167C2.64257 8.58544 2.64257 8.59887 2.64257 8.61358C2.64257 10.203 3.7741 11.53 5.27619 11.8307C5.00035 11.9059 4.71011 11.9462 4.41059 11.9462C4.19938 11.9462 3.99362 11.9254 3.79362 11.887C4.21154 13.191 5.42339 14.1399 6.86021 14.1665C5.73668 15.0469 4.3213 15.5712 2.78305 15.5712C2.51841 15.5712 2.25696 15.5562 2 15.5258C3.45281 16.4568 5.17795 17 7.03205 17"
+      fill="currentColor"
+    />
+  </svg>`;
+export {
+  C as t
+};

package/twitter-ac21b505-DDdHS4hB.js

@@ -0,0 +1,12 @@
+"use strict";const C=`  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.03188 17C13.07 17 16.3718 11.999 16.3718 7.66246C16.3718 7.52041 16.3689 7.37901 16.3625 7.23824C17.0035 6.775 17.5606 6.1969 18 5.53882C17.4118 5.80019 16.7789 5.97615 16.1149 6.05549C16.7926 5.64919 17.313 5.00647 17.5584 4.24026C16.9242 4.61617 16.2217 4.88938 15.4739 5.03686C14.8748 4.39894 14.022 4 13.0777 4C11.2649 4 9.7948 5.46972 9.7948 7.28143C9.7948 7.53897 9.8236 7.78947 9.87992 8.02973C7.15157 7.89248 4.73235 6.58656 3.11345 4.60081C2.83153 5.08581 2.66897 5.64919 2.66897 6.25032C2.66897 7.38893 3.2485 8.39412 4.12978 8.98213C3.59122 8.9655 3.08529 8.81769 2.64305 8.57167C2.64257 8.58544 2.64257 8.59887 2.64257 8.61358C2.64257 10.203 3.7741 11.53 5.27619 11.8307C5.00035 11.9059 4.71011 11.9462 4.41059 11.9462C4.19938 11.9462 3.99362 11.9254 3.79362 11.887C4.21154 13.191 5.42339 14.1399 6.86021 14.1665C5.73668 15.0469 4.3213 15.5712 2.78305 15.5712C2.51841 15.5712 2.25696 15.5562 2 15.5258C3.45281 16.4568 5.17795 17 7.03205 17"
+      fill="currentColor"
+    />
+  </svg>`;exports.twitter=C;

package/unknown-ed01a24c-B0AcMuip.js

@@ -0,0 +1,20 @@
+"use strict";const C=`<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10.0001"
+      cy="10.0001"
+      r="9.00007"
+      fill="white"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+    <path
+      d="M8.78976 12.086V11.9135C8.79306 11.3215 8.8442 10.8495 8.94319 10.4977C9.04547 10.1458 9.19395 9.86167 9.38863 9.64515C9.5833 9.42864 9.81757 9.23242 10.0914 9.0565C10.296 8.92118 10.4791 8.78078 10.6408 8.63531C10.8025 8.48984 10.9312 8.32915 11.0268 8.15323C11.1225 7.97392 11.1704 7.77433 11.1704 7.55443C11.1704 7.321 11.1159 7.11632 11.0071 6.9404C10.8982 6.76448 10.7513 6.62916 10.5666 6.53444C10.3851 6.43971 10.1838 6.39235 9.96275 6.39235C9.74828 6.39235 9.54536 6.4414 9.35398 6.53951C9.16261 6.63424 9.00588 6.77632 8.8838 6.96578C8.76171 7.15184 8.69572 7.38358 8.68582 7.66099H6.6665C6.683 6.98438 6.84138 6.42618 7.14164 5.98638C7.4419 5.5432 7.83949 5.21336 8.33442 4.99684C8.82935 4.77694 9.37543 4.66699 9.97265 4.66699C10.6293 4.66699 11.21 4.77863 11.7148 5.00191C12.2196 5.22181 12.6156 5.54151 12.9026 5.96101C13.1897 6.38051 13.3332 6.88627 13.3332 7.47831C13.3332 7.87412 13.2689 8.22596 13.1402 8.53382C13.0148 8.83829 12.8383 9.10894 12.6106 9.34575C12.383 9.57918 12.114 9.79062 11.8039 9.98007C11.5432 10.1391 11.3288 10.3048 11.1605 10.4774C10.9955 10.6499 10.8718 10.8495 10.7893 11.0762C10.7101 11.3028 10.6688 11.5819 10.6655 11.9135V12.086H8.78976ZM9.76972 15.3338C9.43977 15.3338 9.15766 15.2153 8.92339 14.9785C8.69242 14.7383 8.57859 14.4508 8.58189 14.1159C8.57859 13.7843 8.69242 13.5001 8.92339 13.2633C9.15766 13.0265 9.43977 12.9081 9.76972 12.9081C10.0832 12.9081 10.3587 13.0265 10.5963 13.2633C10.8338 13.5001 10.9543 13.7843 10.9576 14.1159C10.9543 14.3391 10.8965 14.5438 10.7843 14.7299C10.6754 14.9126 10.5319 15.0597 10.3537 15.1714C10.1756 15.2796 9.98089 15.3338 9.76972 15.3338Z"
+      fill="currentColor"
+    />
+  </svg>`;exports.unknown=C;

package/unknown-ed01a24c-DonOUpIC.mjs

@@ -0,0 +1,23 @@
+const C = `<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10.0001"
+      cy="10.0001"
+      r="9.00007"
+      fill="white"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+    <path
+      d="M8.78976 12.086V11.9135C8.79306 11.3215 8.8442 10.8495 8.94319 10.4977C9.04547 10.1458 9.19395 9.86167 9.38863 9.64515C9.5833 9.42864 9.81757 9.23242 10.0914 9.0565C10.296 8.92118 10.4791 8.78078 10.6408 8.63531C10.8025 8.48984 10.9312 8.32915 11.0268 8.15323C11.1225 7.97392 11.1704 7.77433 11.1704 7.55443C11.1704 7.321 11.1159 7.11632 11.0071 6.9404C10.8982 6.76448 10.7513 6.62916 10.5666 6.53444C10.3851 6.43971 10.1838 6.39235 9.96275 6.39235C9.74828 6.39235 9.54536 6.4414 9.35398 6.53951C9.16261 6.63424 9.00588 6.77632 8.8838 6.96578C8.76171 7.15184 8.69572 7.38358 8.68582 7.66099H6.6665C6.683 6.98438 6.84138 6.42618 7.14164 5.98638C7.4419 5.5432 7.83949 5.21336 8.33442 4.99684C8.82935 4.77694 9.37543 4.66699 9.97265 4.66699C10.6293 4.66699 11.21 4.77863 11.7148 5.00191C12.2196 5.22181 12.6156 5.54151 12.9026 5.96101C13.1897 6.38051 13.3332 6.88627 13.3332 7.47831C13.3332 7.87412 13.2689 8.22596 13.1402 8.53382C13.0148 8.83829 12.8383 9.10894 12.6106 9.34575C12.383 9.57918 12.114 9.79062 11.8039 9.98007C11.5432 10.1391 11.3288 10.3048 11.1605 10.4774C10.9955 10.6499 10.8718 10.8495 10.7893 11.0762C10.7101 11.3028 10.6688 11.5819 10.6655 11.9135V12.086H8.78976ZM9.76972 15.3338C9.43977 15.3338 9.15766 15.2153 8.92339 14.9785C8.69242 14.7383 8.57859 14.4508 8.58189 14.1159C8.57859 13.7843 8.69242 13.5001 8.92339 13.2633C9.15766 13.0265 9.43977 12.9081 9.76972 12.9081C10.0832 12.9081 10.3587 13.0265 10.5963 13.2633C10.8338 13.5001 10.9543 13.7843 10.9576 14.1159C10.9543 14.3391 10.8965 14.5438 10.7843 14.7299C10.6754 14.9126 10.5319 15.0597 10.3537 15.1714C10.1756 15.2796 9.98089 15.3338 9.76972 15.3338Z"
+      fill="currentColor"
+    />
+  </svg>`;
+export {
+  C as u
+};

package/up-and-down-d747abee-CWoZjUyq.js

@@ -0,0 +1,10 @@
+"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 3L15 8L5 8L10 3Z" fill="currentColor" />
+    <path d="M10 17L5 12L15 12L10 17Z" fill="currentColor" />
+  </svg>`;exports.upDonw=t;

package/up-and-down-d747abee-D7g6H0T0.mjs

@@ -0,0 +1,13 @@
+const o = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M10 3L15 8L5 8L10 3Z" fill="currentColor" />
+    <path d="M10 17L5 12L15 12L10 17Z" fill="currentColor" />
+  </svg>`;
+export {
+  o as u
+};