@ebrains/components 0.0.1-alpha.0 → 0.2.0-alpha.0

package/dist/components/p-f04946a5.entry.js

@@ -1 +0,0 @@
-import{r as s,h as e}from"./p-e9a1fb1e.js";import{c as r}from"./p-8983de37.js";const a=class{constructor(e){s(this,e),this.class=""}render(){return e("span",{key:"365ad476b1be9c708e73598cad1dd42a908fa1cd",class:this.class,innerHTML:r})}};export{a as eds_icon_close}

package/dist/components/shadow-css-423dab2c.js

@@ -1,332 +0,0 @@
-// src/utils/regular-expression.ts
-var escapeRegExpSpecialCharacters = (text) => {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-};
-
-// src/utils/shadow-css.ts
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- *
- * This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
- */
-var safeSelector = (selector) => {
-  const placeholders = [];
-  let index = 0;
-  selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
-    const replaceBy = `__ph-${index}__`;
-    placeholders.push(keep);
-    index++;
-    return replaceBy;
-  });
-  const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
-    const replaceBy = `__ph-${index}__`;
-    placeholders.push(exp);
-    index++;
-    return pseudo + replaceBy;
-  });
-  const ss = {
-    content,
-    placeholders
-  };
-  return ss;
-};
-var restoreSafeSelector = (placeholders, content) => {
-  return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
-};
-var _polyfillHost = "-shadowcsshost";
-var _polyfillSlotted = "-shadowcssslotted";
-var _polyfillHostContext = "-shadowcsscontext";
-var _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
-var _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
-var _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
-var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
-var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
-var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
-var _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
-var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
-var _polyfillHostRe = /-shadowcsshost/gim;
-var createSupportsRuleRe = (selector) => new RegExp(`((?<!(^@supports(.*)))|(?<={.*))(${selector}\\b)`, "gim");
-var _colonSlottedRe = createSupportsRuleRe("::slotted");
-var _colonHostRe = createSupportsRuleRe(":host");
-var _colonHostContextRe = createSupportsRuleRe(":host-context");
-var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
-var stripComments = (input) => {
-  return input.replace(_commentRe, "");
-};
-var _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
-var extractCommentsWithHash = (input) => {
-  return input.match(_commentWithHashRe) || [];
-};
-var _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
-var _curlyRe = /([{}])/g;
-var _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
-var OPEN_CURLY = "{";
-var CLOSE_CURLY = "}";
-var BLOCK_PLACEHOLDER = "%BLOCK%";
-var processRules = (input, ruleCallback) => {
-  const inputWithEscapedBlocks = escapeBlocks(input);
-  let nextBlockIndex = 0;
-  return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
-    const selector = m[2];
-    let content = "";
-    let suffix = m[4];
-    let contentPrefix = "";
-    if (suffix && suffix.startsWith("{" + BLOCK_PLACEHOLDER)) {
-      content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
-      suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
-      contentPrefix = "{";
-    }
-    const cssRule = {
-      selector,
-      content
-    };
-    const rule = ruleCallback(cssRule);
-    return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
-  });
-};
-var escapeBlocks = (input) => {
-  const inputParts = input.split(_curlyRe);
-  const resultParts = [];
-  const escapedBlocks = [];
-  let bracketCount = 0;
-  let currentBlockParts = [];
-  for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
-    const part = inputParts[partIndex];
-    if (part === CLOSE_CURLY) {
-      bracketCount--;
-    }
-    if (bracketCount > 0) {
-      currentBlockParts.push(part);
-    } else {
-      if (currentBlockParts.length > 0) {
-        escapedBlocks.push(currentBlockParts.join(""));
-        resultParts.push(BLOCK_PLACEHOLDER);
-        currentBlockParts = [];
-      }
-      resultParts.push(part);
-    }
-    if (part === OPEN_CURLY) {
-      bracketCount++;
-    }
-  }
-  if (currentBlockParts.length > 0) {
-    escapedBlocks.push(currentBlockParts.join(""));
-    resultParts.push(BLOCK_PLACEHOLDER);
-  }
-  const strEscapedBlocks = {
-    escapedString: resultParts.join(""),
-    blocks: escapedBlocks
-  };
-  return strEscapedBlocks;
-};
-var insertPolyfillHostInCssText = (cssText) => {
-  cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
-  return cssText;
-};
-var convertColonRule = (cssText, regExp, partReplacer) => {
-  return cssText.replace(regExp, (...m) => {
-    if (m[2]) {
-      const parts = m[2].split(",");
-      const r = [];
-      for (let i = 0; i < parts.length; i++) {
-        const p = parts[i].trim();
-        if (!p) break;
-        r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
-      }
-      return r.join(",");
-    } else {
-      return _polyfillHostNoCombinator + m[3];
-    }
-  });
-};
-var colonHostPartReplacer = (host, part, suffix) => {
-  return host + part.replace(_polyfillHost, "") + suffix;
-};
-var convertColonHost = (cssText) => {
-  return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
-};
-var colonHostContextPartReplacer = (host, part, suffix) => {
-  if (part.indexOf(_polyfillHost) > -1) {
-    return colonHostPartReplacer(host, part, suffix);
-  } else {
-    return host + part + suffix + ", " + part + " " + host + suffix;
-  }
-};
-var convertColonSlotted = (cssText, slotScopeId) => {
-  const slotClass = "." + slotScopeId + " > ";
-  const selectors = [];
-  cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
-    if (m[2]) {
-      const compound = m[2].trim();
-      const suffix = m[3];
-      const slottedSelector = slotClass + compound + suffix;
-      let prefixSelector = "";
-      for (let i = m[4] - 1; i >= 0; i--) {
-        const char = m[5][i];
-        if (char === "}" || char === ",") {
-          break;
-        }
-        prefixSelector = char + prefixSelector;
-      }
-      const orgSelector = (prefixSelector + slottedSelector).trim();
-      const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
-      if (orgSelector !== addedSelector) {
-        const updatedSelector = `${addedSelector}, ${orgSelector}`;
-        selectors.push({
-          orgSelector,
-          updatedSelector
-        });
-      }
-      return slottedSelector;
-    } else {
-      return _polyfillHostNoCombinator + m[3];
-    }
-  });
-  return {
-    selectors,
-    cssText
-  };
-};
-var convertColonHostContext = (cssText) => {
-  return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
-};
-var convertShadowDOMSelectors = (cssText) => {
-  return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
-};
-var makeScopeMatcher = (scopeSelector2) => {
-  const lre = /\[/g;
-  const rre = /\]/g;
-  scopeSelector2 = scopeSelector2.replace(lre, "\\[").replace(rre, "\\]");
-  return new RegExp("^(" + scopeSelector2 + ")" + _selectorReSuffix, "m");
-};
-var selectorNeedsScoping = (selector, scopeSelector2) => {
-  const re = makeScopeMatcher(scopeSelector2);
-  return !re.test(selector);
-};
-var injectScopingSelector = (selector, scopingSelector) => {
-  return selector.replace(_selectorPartsRe, (_, before = "", _colonGroup, colon = "", after = "") => {
-    return before + scopingSelector + colon + after;
-  });
-};
-var applySimpleSelectorScope = (selector, scopeSelector2, hostSelector) => {
-  _polyfillHostRe.lastIndex = 0;
-  if (_polyfillHostRe.test(selector)) {
-    const replaceBy = `.${hostSelector}`;
-    return selector.replace(_polyfillHostNoCombinatorRe, (_, selector2) => injectScopingSelector(selector2, replaceBy)).replace(_polyfillHostRe, replaceBy + " ");
-  }
-  return scopeSelector2 + " " + selector;
-};
-var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
-  const isRe = /\[is=([^\]]*)\]/g;
-  scopeSelector2 = scopeSelector2.replace(isRe, (_, ...parts) => parts[0]);
-  const className = "." + scopeSelector2;
-  const _scopeSelectorPart = (p) => {
-    let scopedP = p.trim();
-    if (!scopedP) {
-      return "";
-    }
-    if (p.indexOf(_polyfillHostNoCombinator) > -1) {
-      scopedP = applySimpleSelectorScope(p, scopeSelector2, hostSelector);
-    } else {
-      const t = p.replace(_polyfillHostRe, "");
-      if (t.length > 0) {
-        scopedP = injectScopingSelector(t, className);
-      }
-    }
-    return scopedP;
-  };
-  const safeContent = safeSelector(selector);
-  selector = safeContent.content;
-  let scopedSelector = "";
-  let startIndex = 0;
-  let res;
-  const sep = /( |>|\+|~(?!=))\s*/g;
-  const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
-  let shouldScope = !hasHost;
-  while ((res = sep.exec(selector)) !== null) {
-    const separator = res[1];
-    const part2 = selector.slice(startIndex, res.index).trim();
-    shouldScope = shouldScope || part2.indexOf(_polyfillHostNoCombinator) > -1;
-    const scopedPart = shouldScope ? _scopeSelectorPart(part2) : part2;
-    scopedSelector += `${scopedPart} ${separator} `;
-    startIndex = sep.lastIndex;
-  }
-  const part = selector.substring(startIndex);
-  shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
-  scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
-  return restoreSafeSelector(safeContent.placeholders, scopedSelector);
-};
-var scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
-  return selector.split(",").map((shallowPart) => {
-    if (slotSelector && shallowPart.indexOf("." + slotSelector) > -1) {
-      return shallowPart.trim();
-    }
-    if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
-      return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
-    } else {
-      return shallowPart.trim();
-    }
-  }).join(", ");
-};
-var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector) => {
-  return processRules(cssText, (rule) => {
-    let selector = rule.selector;
-    let content = rule.content;
-    if (rule.selector[0] !== "@") {
-      selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
-    } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
-      content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
-    }
-    const cssRule = {
-      selector: selector.replace(/\s{2,}/g, " ").trim(),
-      content
-    };
-    return cssRule;
-  });
-};
-var scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId) => {
-  cssText = insertPolyfillHostInCssText(cssText);
-  cssText = convertColonHost(cssText);
-  cssText = convertColonHostContext(cssText);
-  const slotted = convertColonSlotted(cssText, slotScopeId);
-  cssText = slotted.cssText;
-  cssText = convertShadowDOMSelectors(cssText);
-  if (scopeId) {
-    cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
-  }
-  cssText = replaceShadowCssHost(cssText, hostScopeId);
-  cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
-  return {
-    cssText: cssText.trim(),
-    // We need to replace the shadow CSS host string in each of these selectors since we created
-    // them prior to the replacement happening in the components CSS text.
-    slottedSelectors: slotted.selectors.map((ref) => ({
-      orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
-      updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId)
-    }))
-  };
-};
-var replaceShadowCssHost = (cssText, hostScopeId) => {
-  return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
-};
-var scopeCss = (cssText, scopeId) => {
-  const hostScopeId = scopeId + "-h";
-  const slotScopeId = scopeId + "-s";
-  const commentsWithHash = extractCommentsWithHash(cssText);
-  cssText = stripComments(cssText);
-  const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
-  cssText = [scoped.cssText, ...commentsWithHash].join("\n");
-  scoped.slottedSelectors.forEach((slottedSelector) => {
-    const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), "g");
-    cssText = cssText.replace(regex, slottedSelector.updatedSelector);
-  });
-  return cssText;
-};
-
-export { scopeCss };

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

@@ -1,249 +0,0 @@
-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/components/token-radii.entry.js

@@ -1,21 +0,0 @@
-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/components/token-ratios.entry.js

@@ -1,25 +0,0 @@
-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/components/token-shadows.entry.js

@@ -1,30 +0,0 @@
-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 };