@ebrains/components 0.0.1-alpha.0

package/dist/components/token-ratios.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-section-core2.js';
+import { d as defineCustomElement$2 } from './eds-section-heading2.js';
+
+const ratios = {
+  '1x1': '1/1',
+  '21x9': '21/9',
+  '16x9': '16/9',
+  '3x2': '3/2',
+  '4x3': '4/3',
+  '4x5': '4/5'
+};
+
+const TokenRatios$1 = /*@__PURE__*/ proxyCustomElement(class TokenRatios extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h("section", { key: '5e6ad389cf71ef5d70b7c4a92314b25ef7272f62', class: "w-full" }, h("eds-section-core", { key: '5dd2339752eddd0826987245e7b80edc64816a32', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'd71c41ed6a9d8f6b45c03fb8fa7070810f3fe6ba', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+                aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
+                width: '100%', // Full width to show the aspect ratio correctly
+                maxWidth: '300px'
+            } }, h("span", { class: "text-default font-bold mr-auto" }, "aspect-", key), h("span", { class: "mt-2 text-sm ml-auto" }, value)))))))));
+    }
+}, [0, "token-ratios"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["token-ratios", "eds-section-core", "eds-section-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "token-ratios":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TokenRatios$1);
+            }
+            break;
+        case "eds-section-core":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-section-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const TokenRatios = TokenRatios$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TokenRatios, defineCustomElement };

package/dist/components/token-shadows.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TokenShadows extends Components.TokenShadows, HTMLElement {}
+export const TokenShadows: {
+    prototype: TokenShadows;
+    new (): TokenShadows;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/token-shadows.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const shadows = {
+  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);'
+};
+
+const dropShadows = {
+  small: '0px 0px 16px rgba(0, 0, 0, 0.3)'
+};
+
+const shadowTokens = {
+  shadows,
+  dropShadows
+};
+
+const TokenShadows = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("section", { key: '019be87dca82cd1edd392ef0758b8a2e37d09ff6', class: "w-full mt-28" }, h("ul", { key: 'ade136beb8b25087e26c3f2300b463aa3fda1e41', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+    }
+};
+
+export { TokenShadows as token_shadows };

package/dist/components/token-shadows.js

@@ -0,0 +1,6 @@
+import { T as TokenShadows$1, d as defineCustomElement$1 } from './token-shadows2.js';
+
+const TokenShadows = TokenShadows$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TokenShadows, defineCustomElement };

package/dist/components/token-shadows2.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-code-block2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
+
+const shadows = {
+  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);'
+};
+
+const dropShadows = {
+  small: '0px 0px 16px rgba(0, 0, 0, 0.3)'
+};
+
+const shadowTokens = {
+  shadows,
+  dropShadows
+};
+
+const TokenShadows = /*@__PURE__*/ proxyCustomElement(class TokenShadows extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h("section", { key: '019be87dca82cd1edd392ef0758b8a2e37d09ff6', class: "w-full mt-28" }, h("ul", { key: 'ade136beb8b25087e26c3f2300b463aa3fda1e41', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+    }
+}, [0, "token-shadows"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["token-shadows", "eds-code-block", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "token-shadows":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TokenShadows);
+            }
+            break;
+        case "eds-code-block":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { TokenShadows as T, defineCustomElement as d };

package/dist/components/token-spacing.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TokenSpacing extends Components.TokenSpacing, HTMLElement {}
+export const TokenSpacing: {
+    prototype: TokenSpacing;
+    new (): TokenSpacing;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/token-spacing.entry.js

@@ -0,0 +1,12 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const TokenSpacing = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: 'a5ba01206487d07014bfd41fbed4f2f80f7d067e', class: "w-full" }, h("ul", { key: 'be6eb0bbe85f40b123ea04e02d839412401e0e0d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1617719d10e11cc1e36df8cdc368fb3f55536d9a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '3510583e1adc5029a2562b96f33e9f6453240da5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b01170621405035c36efe8e5858201b6d12b23e9', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'ce9639400a99d478a5e31f95c9482cec914e90af', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '96dd43d6786acdcb5cf9c911ce39efce00b09a77', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd8d9178f9f700eb5e752c87333d894a2392d72e9', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'f357493cdad00a69ec48dc3fb7854ba4b25579ab', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '6e5e8b20be76970dead72ca485fb5cc9a6e7c1f1', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '22fec87f6102e0577bf912508128c12716b48cb4', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'dee21a637d965b41cbdd9b4131ae7e6fc241d39a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '43b150abac42ee2e189ec5fe8de64f5b43fba2c8', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: '3789c91cd7db3332af5df28308c4d69ccda4623d', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '07e7c1b44d09a873df7f4488381b561bd952b65f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '898be718773fee0d091424178ff4302f2fbc137b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '60ce8427ee0c6deeda95b385c6342ca1b6215bba', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '97913f64a9c0b15b200811e59214e0d0b3d8837d', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: '01ba17c02dc6fb806a23ce4429091e0417d094c5', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '559de3d223e040d0e1edbff121b99e6218773917', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'a857560b3ad4d7a5a670d5db5baae3fcfbf18d21', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '5fff31ad7de22d84df6741c0f9a611164bbe5cc9', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '6ac602257cb50ac1a05d78b477bc84fb25e89b4c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a087fa3b78537b2c0e35b7e9c2693e972092d407', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '76265dd76d79f8eb33f20ae85794c70cf41dd38b', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: 'fe6a57a3977218cb6f9ea10560650634080d0931', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+    }
+};
+
+export { TokenSpacing as token_spacing };

package/dist/components/token-spacing.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const TokenSpacing$1 = /*@__PURE__*/ proxyCustomElement(class TokenSpacing extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h("div", { key: 'a5ba01206487d07014bfd41fbed4f2f80f7d067e', class: "w-full" }, h("ul", { key: 'be6eb0bbe85f40b123ea04e02d839412401e0e0d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1617719d10e11cc1e36df8cdc368fb3f55536d9a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '3510583e1adc5029a2562b96f33e9f6453240da5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b01170621405035c36efe8e5858201b6d12b23e9', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'ce9639400a99d478a5e31f95c9482cec914e90af', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '96dd43d6786acdcb5cf9c911ce39efce00b09a77', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd8d9178f9f700eb5e752c87333d894a2392d72e9', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'f357493cdad00a69ec48dc3fb7854ba4b25579ab', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '6e5e8b20be76970dead72ca485fb5cc9a6e7c1f1', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '22fec87f6102e0577bf912508128c12716b48cb4', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'dee21a637d965b41cbdd9b4131ae7e6fc241d39a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '43b150abac42ee2e189ec5fe8de64f5b43fba2c8', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: '3789c91cd7db3332af5df28308c4d69ccda4623d', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '07e7c1b44d09a873df7f4488381b561bd952b65f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '898be718773fee0d091424178ff4302f2fbc137b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '60ce8427ee0c6deeda95b385c6342ca1b6215bba', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '97913f64a9c0b15b200811e59214e0d0b3d8837d', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: '01ba17c02dc6fb806a23ce4429091e0417d094c5', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '559de3d223e040d0e1edbff121b99e6218773917', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'a857560b3ad4d7a5a670d5db5baae3fcfbf18d21', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '5fff31ad7de22d84df6741c0f9a611164bbe5cc9', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '6ac602257cb50ac1a05d78b477bc84fb25e89b4c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a087fa3b78537b2c0e35b7e9c2693e972092d407', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '76265dd76d79f8eb33f20ae85794c70cf41dd38b', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: 'fe6a57a3977218cb6f9ea10560650634080d0931', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+    }
+}, [0, "token-spacing"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["token-spacing"];
+    components.forEach(tagName => { switch (tagName) {
+        case "token-spacing":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TokenSpacing$1);
+            }
+            break;
+    } });
+}
+
+const TokenSpacing = TokenSpacing$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TokenSpacing, defineCustomElement };

package/dist/components/token-typography.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TokenTypography extends Components.TokenTypography, HTMLElement {}
+export const TokenTypography: {
+    prototype: TokenTypography;
+    new (): TokenTypography;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/token-typography.entry.js

@@ -0,0 +1,226 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const headings = {
+  '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%'
+    }
+  }
+};
+
+const bodies = {
+  '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%'
+    }
+  }
+};
+
+const uis = {
+  '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%'
+    }
+  }
+};
+
+const displays = {
+  'display-01': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '120px',
+      lineHeight: '100%',
+      letterSpacing: '-0.01em'
+    },
+    lg: {
+      fontSize: '150px'
+    }
+  }
+};
+
+const typography = {
+  families: {
+    sans: 'Inter, Helvetica, Arial, sans-serif'
+  },
+  typesets: {
+    ...headings,
+    ...bodies,
+    ...uis,
+    ...displays
+  }
+};
+
+const TokenTypography = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("section", { key: '8a5867f30800adcc1e5ef9438f01b3a031110402', class: "w-full" }, h("ul", { key: 'd1fc83712676e6524bddc2e5d1bc50f0266b05eb', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+            .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
+            .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
+                fontFamily: typography.families.sans,
+                fontWeight: style.fontWeight,
+                fontSize: style.fontSize,
+                lineHeight: style.lineHeight,
+                letterSpacing: style.letterSpacing
+            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: [
+                style.fontSize && `font-size: ${style.fontSize};`,
+                style.lineHeight && `line-height: ${style.lineHeight};`,
+                style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
+                style.fontWeight && `font-weight: ${style.fontWeight};`,
+                style.fontFamily && `font-family: ${style.fontFamily};`
+            ]
+                .filter(Boolean) // Remove any falsy values (e.g., undefined, null)
+                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }))))))))));
+    }
+};
+
+export { TokenTypography as token_typography };