@ebrains/components 0.0.1-alpha.0

package/dist/esm/token-list.entry.js

@@ -0,0 +1,249 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const colors = {
+  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'
+  }
+};
+
+const TokenList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.show = undefined;
+    }
+    getTextColor(value) {
+        if (value.startsWith('rgba') || value.startsWith('rgb')) {
+            const rgba = value
+                .replace(/rgba?\(/, '')
+                .replace(')', '')
+                .split(',')
+                .map((v) => parseFloat(v.trim()));
+            const r = rgba[0];
+            const g = rgba[1];
+            const b = rgba[2];
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        else if (value.startsWith('#')) {
+            const color = value.replace('#', '');
+            const r = parseInt(color.substring(0, 2), 16);
+            const g = parseInt(color.substring(2, 4), 16);
+            const b = parseInt(color.substring(4, 6), 16);
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        return 'text-default';
+    }
+    resolveColor(value) {
+        if (colors.tokens[value]) {
+            return colors.tokens[value];
+        }
+        return value;
+    }
+    renderSection(sectionName, sectionContent) {
+        if (sectionName === 'tokens') {
+            const groupedTokens = this.groupTokensByCategory(sectionContent);
+            return Object.entries(groupedTokens).map(([, tokens]) => (h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, tokens.map((token) => {
+                const tokenName = Object.keys(token)[0];
+                const tokenValue = this.resolveColor(token[tokenName]);
+                const textColorClass = this.getTextColor(tokenValue);
+                return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height items-center justify-between p-16 hidden lg:flex", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline-flex" }, h("eds-code-block", { code: tokenValue, language: "hex", class: "min-w-[210px] mr-4" }), h("eds-code-block", { language: "css", code: `var(--${tokenName})`, class: "min-w-[210px]" }))), h("div", { class: "effect-height items-center justify-between p-16 block lg:hidden", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline block" }, h("eds-code-block", { code: tokenValue, class: "min-w-[210px] mb-4" }), h("eds-code-block", { code: `var(--${tokenName})`, class: "min-w-[210px]" })))));
+            }))));
+        }
+        return (h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(sectionContent).map(([key, value]) => {
+            const resolvedValue = this.resolveColor(value);
+            const textColorClass = this.getTextColor(resolvedValue);
+            const style = resolvedValue.startsWith('#') || resolvedValue.startsWith('rgb')
+                ? { backgroundColor: resolvedValue }
+                : { border: `2px solid ${resolvedValue}` };
+            return (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col" }, h("div", { class: "effect-height block lg:flex items-center justify-between p-16", style: style }, h("div", { class: "w-full flex" }, h("span", { class: `${textColorClass} mr-auto font-bold` }, key), h("span", { class: `${textColorClass} ml-auto  mr-4 font-bold` }, value)), h("span", { class: `${textColorClass}` }, sectionName === 'background' ? (h("eds-code-block", { code: `bg-${key}`, class: "min-w-[210px] mr-4" })) : (h("eds-code-block", { code: `${sectionName}-${key}`, class: sectionName === 'border' ? 'min-w-[250px] mr-4' : 'min-w-[210px] mr-4' }))))));
+        })));
+    }
+    groupTokensByCategory(tokens) {
+        const grouped = {};
+        Object.entries(tokens).forEach(([key, value]) => {
+            const category = key.split('-')[0];
+            if (!grouped[category]) {
+                grouped[category] = [];
+            }
+            grouped[category].push({ [key]: value });
+        });
+        return grouped;
+    }
+    render() {
+        // Check if `show` prop is provided; if not, display all sections
+        const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
+        return (h("section", { key: '3e1da1cf339496fb351d4ab2c6238ac389bccc10', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        // Only render sections that exist in `colors`
+        sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
+    }
+};
+
+export { TokenList as token_list };

package/dist/esm/token-list_3.entry.js

@@ -0,0 +1,294 @@
+import { r as registerInstance, h } from './index-f1426055.js';
+
+const colors = {
+  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'
+  }
+};
+
+const TokenList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.show = undefined;
+    }
+    getTextColor(value) {
+        if (value.startsWith('rgba') || value.startsWith('rgb')) {
+            const rgba = value
+                .replace(/rgba?\(/, '')
+                .replace(')', '')
+                .split(',')
+                .map((v) => parseFloat(v.trim()));
+            const r = rgba[0];
+            const g = rgba[1];
+            const b = rgba[2];
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        else if (value.startsWith('#')) {
+            const color = value.replace('#', '');
+            const r = parseInt(color.substring(0, 2), 16);
+            const g = parseInt(color.substring(2, 4), 16);
+            const b = parseInt(color.substring(4, 6), 16);
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        return 'text-default';
+    }
+    resolveColor(value) {
+        if (colors.tokens[value]) {
+            return colors.tokens[value];
+        }
+        return value;
+    }
+    renderSection(sectionName, sectionContent) {
+        if (sectionName === 'tokens') {
+            const groupedTokens = this.groupTokensByCategory(sectionContent);
+            return Object.entries(groupedTokens).map(([, tokens]) => (h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, tokens.map((token) => {
+                const tokenName = Object.keys(token)[0];
+                const tokenValue = this.resolveColor(token[tokenName]);
+                const textColorClass = this.getTextColor(tokenValue);
+                return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height items-center justify-between p-16 hidden lg:flex", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline-flex" }, h("eds-code-block", { code: tokenValue, language: "hex", class: "min-w-[210px] mr-4" }), h("eds-code-block", { language: "css", code: `var(--${tokenName})`, class: "min-w-[210px]" }))), h("div", { class: "effect-height items-center justify-between p-16 block lg:hidden", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline block" }, h("eds-code-block", { code: tokenValue, class: "min-w-[210px] mb-4" }), h("eds-code-block", { code: `var(--${tokenName})`, class: "min-w-[210px]" })))));
+            }))));
+        }
+        return (h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(sectionContent).map(([key, value]) => {
+            const resolvedValue = this.resolveColor(value);
+            const textColorClass = this.getTextColor(resolvedValue);
+            const style = resolvedValue.startsWith('#') || resolvedValue.startsWith('rgb')
+                ? { backgroundColor: resolvedValue }
+                : { border: `2px solid ${resolvedValue}` };
+            return (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col" }, h("div", { class: "effect-height block lg:flex items-center justify-between p-16", style: style }, h("div", { class: "w-full flex" }, h("span", { class: `${textColorClass} mr-auto font-bold` }, key), h("span", { class: `${textColorClass} ml-auto  mr-4 font-bold` }, value)), h("span", { class: `${textColorClass}` }, sectionName === 'background' ? (h("eds-code-block", { code: `bg-${key}`, class: "min-w-[210px] mr-4" })) : (h("eds-code-block", { code: `${sectionName}-${key}`, class: sectionName === 'border' ? 'min-w-[250px] mr-4' : 'min-w-[210px] mr-4' }))))));
+        })));
+    }
+    groupTokensByCategory(tokens) {
+        const grouped = {};
+        Object.entries(tokens).forEach(([key, value]) => {
+            const category = key.split('-')[0];
+            if (!grouped[category]) {
+                grouped[category] = [];
+            }
+            grouped[category].push({ [key]: value });
+        });
+        return grouped;
+    }
+    render() {
+        // Check if `show` prop is provided; if not, display all sections
+        const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
+        return (h("section", { key: '3e1da1cf339496fb351d4ab2c6238ac389bccc10', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        // Only render sections that exist in `colors`
+        sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
+    }
+};
+
+const radii = {
+  xxs: '2px',
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  pill: '100px'
+};
+
+const TokenRadii = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("section", { key: '16cab4ed90701a89fe7586cb29e85e01156a2f9a', class: "w-full mt-28" }, h("ul", { key: 'e997b51855eb94a8cda474ce537ab81c88938ca9', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).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: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+    }
+};
+
+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 { TokenList as token_list, TokenRadii as token_radii, TokenShadows as token_shadows };

package/dist/esm/token-radii.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const radii = {
+  xxs: '2px',
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  pill: '100px'
+};
+
+const TokenRadii = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("section", { key: '16cab4ed90701a89fe7586cb29e85e01156a2f9a', class: "w-full mt-28" }, h("ul", { key: 'e997b51855eb94a8cda474ce537ab81c88938ca9', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).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: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+    }
+};
+
+export { TokenRadii as token_radii };

package/dist/esm/token-ratios.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const ratios = {
+  '1x1': '1/1',
+  '21x9': '21/9',
+  '16x9': '16/9',
+  '3x2': '3/2',
+  '4x3': '4/3',
+  '4x5': '4/5'
+};
+
+const TokenRatios = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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)))))))));
+    }
+};
+
+export { TokenRatios as token_ratios };

package/dist/esm/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/esm/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 };