@redvars/peacock 3.1.1 → 3.1.2

package/dist/divider.js

@@ -0,0 +1,123 @@
+import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
+import { r } from './state-CxzmLNIi.js';
+import { e } from './class-map-DpvLRi0h.js';
+import { o as observerSlotChangesWithCallback } from './utils-_5no4mk7.js';
+import './directive-BKuZRRPO.js';
+
+const styles = i `
+  :host {
+    display: block;
+
+    --divider-color: var(--color-outline-variant);
+    --divider-padding: var(--spacing-200);
+  }
+
+  .divider {
+    display: flex;
+    margin: 0;
+    @include get-typography(body-small-emphasized);
+    color: var(--divider-color);
+
+    &:not(.vertical) {
+      width: 100%;
+      padding: var(--divider-padding) 0;
+      align-items: center;
+      justify-content: center;
+
+      .line {
+        width: 100%;
+        border-top: 1px solid var(--divider-color);
+      }
+
+      &.slot-has-content .slot-container {
+        padding: 0 var(--spacing-200);
+      }
+    }
+
+    &.vertical {
+      height: 100%;
+      padding: 0 var(--divider-padding);
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .line {
+        height: 100%;
+        border-right: 1px solid var(--divider-color);
+      }
+
+      &.slot-has-content .slot-container {
+        padding: var(--spacing-200) 0;
+      }
+    }
+  }
+
+  :host(:not([vertical])) {
+    width: auto;
+  }
+
+  :host([vertical]) {
+    height: auto;
+  }
+`;
+
+var _Divider_instances;
+/**
+ * @label Divider
+ * @tag p-divider
+ * @rawTag divider
+ *
+ * @summary The divider component is used to visually separate content.
+ * @overview
+ *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.
+ *  - They can be oriented either vertically or horizontally, depending on the layout requirements.
+ *
+ * @cssprop --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <p-divider style="width: 12rem;">or</p-divider>
+ * ```
+ * @tags display
+ */
+class Divider extends i$1 {
+    constructor() {
+        super(...arguments);
+        _Divider_instances.add(this);
+        this.vertical = false;
+        this.slotHasContent = false;
+    }
+    firstUpdated() {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+            this.slotHasContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    render() {
+        return b `<div
+      class=${e({
+            divider: true,
+            vertical: this.vertical,
+            'slot-has-content': this.slotHasContent,
+        })}
+    >
+      <div class="line"></div>
+      <div class="slot-container">
+        <slot></slot>
+      </div>
+      <div class="line"></div>
+    </div>`;
+    }
+}
+_Divider_instances = new WeakSet();
+Divider.styles = [styles];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Divider.prototype, "vertical", void 0);
+__decorate([
+    r()
+], Divider.prototype, "slotHasContent", void 0);
+
+export { Divider };
+//# sourceMappingURL=divider.js.map

package/dist/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":["../../src/divider/divider.css.ts","../../src/divider/divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n\n    --divider-color: var(--color-outline-variant);\n    --divider-padding: var(--spacing-200);\n  }\n\n  .divider {\n    display: flex;\n    margin: 0;\n    @include get-typography(body-small-emphasized);\n    color: var(--divider-color);\n\n    &:not(.vertical) {\n      width: 100%;\n      padding: var(--divider-padding) 0;\n      align-items: center;\n      justify-content: center;\n\n      .line {\n        width: 100%;\n        border-top: 1px solid var(--divider-color);\n      }\n\n      &.slot-has-content .slot-container {\n        padding: 0 var(--spacing-200);\n      }\n    }\n\n    &.vertical {\n      height: 100%;\n      padding: 0 var(--divider-padding);\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n\n      .line {\n        height: 100%;\n        border-right: 1px solid var(--divider-color);\n      }\n\n      &.slot-has-content .slot-container {\n        padding: var(--spacing-200) 0;\n      }\n    }\n  }\n\n  :host(:not([vertical])) {\n    width: auto;\n  }\n\n  :host([vertical]) {\n    height: auto;\n  }\n`;\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './divider.css.js';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Divider\n * @tag p-divider\n * @rawTag divider\n *\n * @summary The divider component is used to visually separate content.\n * @overview\n *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.\n *  - They can be oriented either vertically or horizontally, depending on the layout requirements.\n *\n * @cssprop --divider-color - Controls the color of the divider.\n * @cssprop --divider-padding - Controls the padding of the divider.\n *\n * @example\n * ```html\n * <p-divider style=\"width: 12rem;\">or</p-divider>\n * ```\n * @tags display\n */\nexport class Divider extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  @state()\n  slotHasContent = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        divider: true,\n        vertical: this.vertical,\n        'slot-has-content': this.slotHasContent,\n      })}\n    >\n      <div class=\"line\"></div>\n      <div class=\"slot-container\">\n        <slot></slot>\n      </div>\n      <div class=\"line\"></div>\n    </div>`;\n  }\n\n  #handleSlotChange(event: { target: any }) {\n    const slot = event.target;\n    // Check assignedElements length\n    this.slotHasContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n}\n"],"names":["css","LitElement","html","classMap","property","state"],"mappings":";;;;;;AAEO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB;;;ACnDD;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,OAAQ,SAAQC,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;;QAG8C,IAAA,CAAA,QAAQ,GAAG,KAAK;QAG5D,IAAA,CAAA,cAAc,GAAG,KAAK;IAiCxB;IA/BE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;;;;;WAOG;IACT;;kCAMC;AArCM,OAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAmB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAG7D,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/{component/icon.js → icon.js}

@@ -1,10 +1,7 @@
-import { n, i, A, t as t$1, E, e as e$1, a as i$1, _ as __decorate, b as i$2, c as b } from '../directive-CKEA2P55.js';
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */function r(r){return n({...r,state:true,attribute:false})}
+import { A, E, i as i$1, _ as __decorate, n, a as i$2, b } from './property-D4Kn9TsY.js';
+import { r } from './state-CxzmLNIi.js';
+import { i, t as t$1, e as e$1 } from './directive-BKuZRRPO.js';
+import { c as createCacheFetch, s as sanitizeSvg } from './utils-_5no4mk7.js';
 
 /**
  * @license
@@ -18,100 +15,6 @@ import { n, i, A, t as t$1, E, e as e$1, a as i$1, _ as __decorate, b as i$2, c
  * SPDX-License-Identifier: BSD-3-Clause
  */class t extends e{}t.directiveName="unsafeSVG",t.resultType=2;const o=e$1(t);
 
-async function createCacheFetch(name) {
-    let cache = null;
-    // This map tracks requests currently being processed
-    const inFlightRequests = new Map();
-    try {
-        cache = await window.caches.open(name);
-    }
-    catch (e) {
-        console.warn('window.caches access not allowed');
-    }
-    return async (url) => {
-        // 1. Check if we are already fetching this URL
-        if (inFlightRequests.has(url)) {
-            // Return the existing promise instead of starting a new one
-            return inFlightRequests.get(url);
-        }
-        // 2. Create the main logic as a promise
-        const fetchPromise = (async () => {
-            const request = new Request(url);
-            // Check Cache first
-            if (cache) {
-                const cachedResponse = await cache.match(request);
-                if (cachedResponse) {
-                    return await cachedResponse.text();
-                }
-            }
-            // Prepare network request
-            const urlObj = new URL(request.url);
-            const isSameOrigin = urlObj.origin === window.location.origin;
-            const response = await fetch(request.url, {
-                method: 'GET',
-                mode: isSameOrigin ? 'no-cors' : 'cors',
-                credentials: isSameOrigin ? 'same-origin' : 'omit',
-            });
-            // --- Handle 404 ---
-            if (response.status === 404) {
-                console.error(`[Fetch Error] Resource not found (404): ${url}`);
-                return ''; // Return empty string as requested
-            }
-            const result = await response.text();
-            // Update Cache if applicable
-            if (cache && response.status === 200) {
-                // We clone the response logic by creating a new Response with the text body
-                await cache.put(request, new Response(result, {
-                    status: response.status,
-                    statusText: response.statusText,
-                    headers: response.headers,
-                }));
-            }
-            return result;
-        })();
-        // 3. Store the promise in the map
-        inFlightRequests.set(url, fetchPromise);
-        try {
-            // 4. Wait for the result
-            return await fetchPromise;
-        }
-        finally {
-            // 5. Clean up: Remove the promise from the map when done
-            // This ensures subsequent calls (after this one finishes) can start fresh
-            inFlightRequests.delete(url);
-        }
-    };
-}
-// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
-function sanitizeSvg(rawSvg) {
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
-        // remove script tags
-        const scripts = Array.from(doc.querySelectorAll('script'));
-        scripts.forEach(n => n.remove());
-        // remove foreignObject and iframe-like elements
-        const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
-        foreigns.forEach(n => n.remove());
-        // remove event handler attributes like onload, onclick, etc.
-        const all = Array.from(doc.querySelectorAll('*'));
-        all.forEach(el => {
-            const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
-            attrs.forEach(a => el.removeAttribute(a.name));
-        });
-        const el = doc.documentElement;
-        if (!el)
-            return '';
-        // serialize back to string
-        const serializer = new XMLSerializer();
-        return serializer.serializeToString(el);
-    }
-    catch (e) {
-        // parsing failed; fall back to empty content to avoid injecting unsafe content
-        return '';
-    }
-}
-
 const PROVIDERS = {
     'material-symbols': (name) => `https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@0.40.1/outlined/${name}.svg`,
     carbon: (name) => `https://cdn.jsdelivr.net/npm/@carbon/icons@11.41.0/svg/32/${name}.svg`,
@@ -152,6 +55,22 @@ const styles = i$1 `
   }
 `;
 
+/**
+ * @label Icon
+ * @tag p-icon
+ * @rawTag icon
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
+ * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
+ *
+ * @cssprop --icon-color - Controls the color of the icon.
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <p-icon name="home"></p-icon>
+ * ```
+ *
+ */
 class Icon extends i$2 {
     constructor() {
         super(...arguments);

package/dist/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../node_modules/lit-html/directives/unsafe-html.js","../node_modules/lit-html/directives/unsafe-svg.js","../../src/icon/datasource.ts","../../src/icon/icon.css.ts","../../src/icon/icon.ts"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n","import{directive as s}from\"../directive.js\";import{UnsafeHTMLDirective as e}from\"./unsafe-html.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class t extends e{}t.directiveName=\"unsafeSVG\",t.resultType=2;const o=s(t);export{o as unsafeSVG};\n//# sourceMappingURL=unsafe-svg.js.map\n","import { createCacheFetch } from '../utils.js';\n\nconst PROVIDERS: Record<string, (name: string) => string> = {\n  'material-symbols': (name: string) =>\n    `https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@0.40.1/outlined/${name}.svg`,\n  carbon: (name: string) =>\n    `https://cdn.jsdelivr.net/npm/@carbon/icons@11.41.0/svg/32/${name}.svg`,\n};\n\nconst cacheFetch = await createCacheFetch('svg-cache');\n\nexport async function fetchSVG(url: string) {\n  if (!url) return '';\n  return cacheFetch(url);\n}\n\nexport async function fetchIcon(\n  name: string,\n  provider: string = 'material-symbols',\n) {\n  if (!name) return '';\n\n  if (!PROVIDERS[provider]) {\n    throw new Error(`Provider '${provider}' not found`);\n  }\n\n  return fetchSVG(PROVIDERS[provider](name));\n}\n","import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-block;\n    line-height: 0;\n    --icon-size: inherit;\n    --icon-color: inherit;\n  }\n\n  .icon {\n    display: inline-block;\n    height: var(--icon-size, 1rem);\n    width: var(--icon-size, 1rem);\n\n    svg {\n      fill: var(--icon-color);\n      height: 100%;\n      width: 100%;\n    }\n  }\n`;\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { fetchIcon, fetchSVG } from './datasource.js';\nimport { sanitizeSvg } from '../utils.js';\nimport { styles } from './icon.css.js';\n\n/**\n * @label Icon\n * @tag p-icon\n * @rawTag icon\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to \"1rem\"\n *\n * @example\n * ```html\n * <p-icon name=\"home\"></p-icon>\n * ```\n *\n */\nexport class Icon extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The identifier for the icon.\n   * This name corresponds to a specific SVG asset in the icon set.\n   */\n  @property({ type: String, reflect: true }) name?: string;\n\n  @property({ type: String, reflect: true }) src?: string;\n\n  @property({ type: String }) provider: 'material-symbols' | 'carbon' =\n    'material-symbols';\n\n  @state()\n  private svgContent: string = '';\n\n  // loading + error states for consumers/tests\n  @state()\n  private loading: boolean = false;\n\n  @state()\n  private error: Error | null = null;\n\n  // token to avoid race conditions when multiple fetches overlap\n  private _fetchId = 0;\n\n  // optional debounce for rapid property changes\n  private _debounceTimer: number | undefined;\n\n  firstUpdated() {\n    // perform initial fetch once component is connected and rendered\n    this.__scheduleUpdate();\n  }\n\n  updated(changedProperties: any) {\n    // only refetch when name or src changed\n    if (changedProperties.has('name') || changedProperties.has('src')) {\n      this.__scheduleUpdate();\n    }\n  }\n\n  render() {\n    // accessible wrapper; consumers can provide a fallback via <slot name=\"fallback\">.\n    return html` <div class=\"icon\">\n      ${this.svgContent\n        ? unsafeSVG(this.svgContent)\n        : html`<slot name=\"fallback\"></slot>`}\n    </div>`;\n  }\n\n  // small debounce to coalesce rapid changes (50ms)\n  private __scheduleUpdate() {\n    if (this._debounceTimer) {\n      clearTimeout(this._debounceTimer as any);\n    }\n    // @ts-ignore - setTimeout in DOM returns number\n    this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);\n  }\n\n  /**\n   * @internal\n   */\n  private async __updateSvg() {\n    this._fetchId += 1;\n    const currentId = this._fetchId;\n    this.loading = true;\n    this.error = null;\n\n    try {\n      let raw: string | undefined;\n\n      if (this.name) {\n        raw = await fetchIcon(this.name, this.provider);\n      } else if (this.src) {\n        raw = await fetchSVG(this.src);\n      } else {\n        raw = '';\n      }\n\n      // If another fetch started after this one, ignore this result\n      if (currentId !== this._fetchId) return;\n\n      if (raw) {\n        this.svgContent = sanitizeSvg(raw);\n      } else {\n        this.svgContent = '';\n      }\n    } catch (err: any) {\n      // capture and surface error, but avoid throwing\n      this.error = err instanceof Error ? err : new Error(String(err));\n      this.svgContent = '';\n      // bubble an event so consumers can react\n      this.dispatchEvent(\n        new CustomEvent('icon-error', {\n          detail: { name: this.name, src: this.src, error: this.error },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    } finally {\n      // ensure loading is cleared unless another fetch started\n      if (currentId === this._fetchId) {\n        this.loading = false;\n      }\n    }\n  }\n}\n"],"names":["s","t","n","i","css","LitElement","html","unsafeSVG","property","state"],"mappings":";;;;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,GAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;;ACJvgB;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAACH,GAAC,CAAC,CAAC,CAAC;;ACH7E,MAAM,SAAS,GAA6C;IAC1D,kBAAkB,EAAE,CAAC,IAAY,KAC/B,CAAA,uEAAA,EAA0E,IAAI,CAAA,IAAA,CAAM;IACtF,MAAM,EAAE,CAAC,IAAY,KACnB,CAAA,0DAAA,EAA6D,IAAI,CAAA,IAAA,CAAM;CAC1E;AAED,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC,WAAW,CAAC;AAE/C,eAAe,QAAQ,CAAC,GAAW,EAAA;AACxC,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,OAAO,EAAE;AACnB,IAAA,OAAO,UAAU,CAAC,GAAG,CAAC;AACxB;AAEO,eAAe,SAAS,CAC7B,IAAY,EACZ,WAAmB,kBAAkB,EAAA;AAErC,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;AAEpB,IAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE;AACxB,QAAA,MAAM,IAAI,KAAK,CAAC,aAAa,QAAQ,CAAA,WAAA,CAAa,CAAC;IACrD;IAEA,OAAO,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5C;;ACzBO,MAAM,MAAM,GAAGI,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBxB;;ACdD;;;;;;;;;;;;;;;AAeG;AACG,MAAO,IAAK,SAAQC,GAAU,CAAA;AAApC,IAAA,WAAA,GAAA;;QAW8B,IAAA,CAAA,QAAQ,GAClC,kBAAkB;QAGZ,IAAA,CAAA,UAAU,GAAW,EAAE;;QAIvB,IAAA,CAAA,OAAO,GAAY,KAAK;QAGxB,IAAA,CAAA,KAAK,GAAiB,IAAI;;QAG1B,IAAA,CAAA,QAAQ,GAAG,CAAC;IAkFtB;IA7EE,YAAY,GAAA;;QAEV,IAAI,CAAC,gBAAgB,EAAE;IACzB;AAEA,IAAA,OAAO,CAAC,iBAAsB,EAAA;;AAE5B,QAAA,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACjE,IAAI,CAAC,gBAAgB,EAAE;QACzB;IACF;IAEA,MAAM,GAAA;;AAEJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACP,MAAA,EAAA,IAAI,CAAC;AACL,cAAEC,CAAS,CAAC,IAAI,CAAC,UAAU;cACzBD,CAAI,CAAA,CAAA,6BAAA,CAA+B;WAClC;IACT;;IAGQ,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,YAAY,CAAC,IAAI,CAAC,cAAqB,CAAC;QAC1C;;AAEA,QAAA,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC;IACvE;AAEA;;AAEG;AACK,IAAA,MAAM,WAAW,GAAA;AACvB,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;AAC/B,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AAEjB,QAAA,IAAI;AACF,YAAA,IAAI,GAAuB;AAE3B,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,GAAG,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC;YACjD;AAAO,iBAAA,IAAI,IAAI,CAAC,GAAG,EAAE;gBACnB,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC;iBAAO;gBACL,GAAG,GAAG,EAAE;YACV;;AAGA,YAAA,IAAI,SAAS,KAAK,IAAI,CAAC,QAAQ;gBAAE;YAEjC,IAAI,GAAG,EAAE;AACP,gBAAA,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC;YACpC;iBAAO;AACL,gBAAA,IAAI,CAAC,UAAU,GAAG,EAAE;YACtB;QACF;QAAE,OAAO,GAAQ,EAAE;;YAEjB,IAAI,CAAC,KAAK,GAAG,GAAG,YAAY,KAAK,GAAG,GAAG,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAChE,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;AAEpB,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;AAC5B,gBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AAC7D,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;QACH;gBAAU;;AAER,YAAA,IAAI,SAAS,KAAK,IAAI,CAAC,QAAQ,EAAE;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;YACtB;QACF;IACF;;AAzGO,IAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAMmB,UAAA,CAAA;IAA1CE,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgB,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAEd,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAE5B,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACL,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGb,UAAA,CAAA;AADP,IAAAC,CAAK;AAC0B,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAIxB,UAAA,CAAA;AADP,IAAAA,CAAK;AAC2B,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAGzB,UAAA,CAAA;AADP,IAAAA,CAAK;AAC6B,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;;;;","x_google_ignoreList":[0,1]}

package/dist/index.js

@@ -1,68 +1,12 @@
-import { g as getTypography, i, _ as __decorate, n, r, a as i$1, e, b as __classPrivateFieldGet, c as b } from './avatar-jfcIDB8G.js';
-export { A as Avatar, I as Icon } from './avatar-jfcIDB8G.js';
-
-const styles = i `
-  :host {
-    display: inline-block;
-    --badge-color: var(--global-badge-color);
-  }
-
-  .badge {
-    pointer-events: none;
-    z-index: var(--z-index-badge);
-    color: var(--color-white);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--badge-color);
-    border-radius: var(--shape-corner-full);
-
-    &.has-content {
-      height: 1rem;
-      min-width: 1rem;
-      padding-inline: var(--spacing-050);
-      ${getTypography('label-small')};
-      color: var(--color-on-error);
-    }
-
-    &:not(.has-content) {
-      height: 6px;
-      width: 6px;
-    }
-  }
-`;
-
-var _Badge_instances, _Badge_handleSlotChange;
-class Badge extends i$1 {
-    constructor() {
-        super(...arguments);
-        _Badge_instances.add(this);
-        this.name = '';
-        this.slotHasContent = false;
-    }
-    render() {
-        return b `<div
-      class=${e({ badge: true, 'has-content': this.slotHasContent })}
-    >
-      <slot @slotchange=${__classPrivateFieldGet(this, _Badge_instances, "m", _Badge_handleSlotChange)}></slot>
-    </div>`;
-    }
-}
-_Badge_instances = new WeakSet(), _Badge_handleSlotChange = function _Badge_handleSlotChange(event) {
-    const slot = event.target;
-    // Check assignedElements length
-    this.slotHasContent = slot.assignedElements().length > 0;
-};
-Badge.styles = [styles];
-__decorate([
-    n({ type: String, reflect: true })
-], Badge.prototype, "name", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Badge.prototype, "src", void 0);
-__decorate([
-    r()
-], Badge.prototype, "slotHasContent", void 0);
-
-export { Badge };
+export { Icon } from './icon.js';
+export { Avatar } from './avatar.js';
+export { Badge } from './badge.js';
+export { Divider } from './divider.js';
+export { Clock } from './clock.js';
+import './property-D4Kn9TsY.js';
+import './state-CxzmLNIi.js';
+import './directive-BKuZRRPO.js';
+import './utils-_5no4mk7.js';
+import './class-map-DpvLRi0h.js';
+import './styleMixins.css-CivfMYtB.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/badge/badge.css.ts","../../src/badge/badge.ts"],"sourcesContent":["import { css } from 'lit';\nimport { getTypography } from '../styleMixins.css.js';\n\nexport const styles = css`\n  :host {\n    display: inline-block;\n    --badge-color: var(--global-badge-color);\n  }\n\n  .badge {\n    pointer-events: none;\n    z-index: var(--z-index-badge);\n    color: var(--color-white);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: var(--badge-color);\n    border-radius: var(--shape-corner-full);\n\n    &.has-content {\n      height: 1rem;\n      min-width: 1rem;\n      padding-inline: var(--spacing-050);\n      ${getTypography('label-small')};\n      color: var(--color-on-error);\n    }\n\n    &:not(.has-content) {\n      height: 6px;\n      width: 6px;\n    }\n  }\n`;\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './badge.css.js';\n\nexport class Badge extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true }) name: string = '';\n\n  @property({ type: String, reflect: true }) src?: string;\n\n  @state()\n  slotHasContent = false;\n\n  render() {\n    return html`<div\n      class=${classMap({ badge: true, 'has-content': this.slotHasContent })}\n    >\n      <slot @slotchange=${this.#handleSlotChange}></slot>\n    </div>`;\n  }\n\n  #handleSlotChange(event: { target: any }) {\n    const slot = event.target;\n    // Check assignedElements length\n    this.slotHasContent = slot.assignedElements().length > 0;\n  }\n}\n"],"names":["css","LitElement","html","classMap","property","state"],"mappings":";;;AAGO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;QAoBjB,aAAa,CAAC,aAAa,CAAC,CAAA;;;;;;;;;CASnC;;;AC3BK,MAAO,KAAM,SAAQC,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;QAK5D,IAAA,CAAA,cAAc,GAAG,KAAK;IAexB;IAbE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;;AAEjD,wBAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,gBAAA,EAAA,GAAA,EAAA,uBAAA,CAAkB,CAAA;WACrC;IACT;;6FAEkB,KAAsB,EAAA;AACtC,IAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM;;IAEzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC;AAC1D,CAAC;AArBM,KAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAGxD,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/peacock-loader.js

@@ -1,4 +1,15 @@
-import { d as r, f as focusRing, i, g as getTypography, A as Avatar, I as Icon } from './avatar-jfcIDB8G.js';
+import { Icon } from './icon.js';
+import { Avatar } from './avatar.js';
+import { Badge } from './badge.js';
+import { Divider } from './divider.js';
+import { r, i } from './property-D4Kn9TsY.js';
+import { f as focusRing, g as getTypography } from './styleMixins.css-CivfMYtB.js';
+import './state-CxzmLNIi.js';
+import './directive-BKuZRRPO.js';
+import './utils-_5no4mk7.js';
+import './class-map-DpvLRi0h.js';
+
+var cssComponentsStyleSheet = "/* -------------------------------------------\n *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root {\n  --color-black: #000000;\n  --color-blue: #305cde;\n  --color-blue-0: #000000;\n  --color-blue-10: #001550;\n  --color-blue-20: #00277f;\n  --color-blue-30: #003ab2;\n  --color-blue-40: #2352d5;\n  --color-blue-50: #446def;\n  --color-blue-60: #6789ff;\n  --color-blue-70: #90a7ff;\n  --color-blue-80: #b6c4ff;\n  --color-blue-90: #dce1ff;\n  --color-blue-95: #eff0ff;\n  --color-blue-98: #faf8ff;\n  --color-blue-100: #ffffff;\n  --color-error: var(--color-red);\n  --color-error-0: var(--color-red-0);\n  --color-error-10: var(--color-red-10);\n  --color-error-20: var(--color-red-20);\n  --color-error-30: var(--color-red-30);\n  --color-error-40: var(--color-red-40);\n  --color-error-50: var(--color-red-50);\n  --color-error-60: var(--color-red-60);\n  --color-error-70: var(--color-red-70);\n  --color-error-80: var(--color-red-80);\n  --color-error-90: var(--color-red-90);\n  --color-error-95: var(--color-red-95);\n  --color-error-98: var(--color-red-98);\n  --color-error-100: var(--color-red-100);\n  --color-error-container: var(--color-error-90);\n  --color-green: #2e6f40;\n  --color-green-0: #000000;\n  --color-green-10: #00210b;\n  --color-green-20: #003917;\n  --color-green-30: #005225;\n  --color-green-40: #0f6d35;\n  --color-green-50: #31874b;\n  --color-green-60: #4da163;\n  --color-green-70: #68bd7b;\n  --color-green-80: #83d995;\n  --color-green-90: #9ff6af;\n  --color-green-95: #c4ffcb;\n  --color-green-98: #eaffe9;\n  --color-green-100: #ffffff;\n  --color-inverse-error: var(--color-error-80);\n  --color-inverse-on-surface: var(--color-neutral-95);\n  --color-inverse-primary: var(--color-primary-80);\n  --color-inverse-secondary: var(--color-secondary-80);\n  --color-inverse-surface: var(--color-neutral-20);\n  --color-inverse-tertiary: var(--color-tertiary-80);\n  --color-neutral: #747878;\n  --color-neutral-0: #000000;\n  --color-neutral-4: #0b0f0f;\n  --color-neutral-6: #101415;\n  --color-neutral-10: #191c1d;\n  --color-neutral-12: #1d2021;\n  --color-neutral-17: #272b2b;\n  --color-neutral-20: #2e3132;\n  --color-neutral-22: #323536;\n  --color-neutral-30: #444748;\n  --color-neutral-40: #5c5f5f;\n  --color-neutral-50: #747878;\n  --color-neutral-60: #8e9192;\n  --color-neutral-70: #a9acac;\n  --color-neutral-80: #c4c7c7;\n  --color-neutral-87: #d8dadb;\n  --color-neutral-90: #e1e3e3;\n  --color-neutral-92: #e6e8e9;\n  --color-neutral-94: #eceeef;\n  --color-neutral-95: #eff1f1;\n  --color-neutral-96: #f2f4f4;\n  --color-neutral-98: #f8fafa;\n  --color-neutral-99: #fafdfd;\n  --color-neutral-100: #ffffff;\n  --color-neutral-variant: #6f797a;\n  --color-neutral-variant-0: #000000;\n  --color-neutral-variant-4: #071011;\n  --color-neutral-variant-6: #0c1516;\n  --color-neutral-variant-10: #141d1f;\n  --color-neutral-variant-12: #182123;\n  --color-neutral-variant-17: #222b2d;\n  --color-neutral-variant-20: #293234;\n  --color-neutral-variant-22: #2d3638;\n  --color-neutral-variant-30: #3f484a;\n  --color-neutral-variant-40: #576062;\n  --color-neutral-variant-50: #6f797a;\n  --color-neutral-variant-60: #899294;\n  --color-neutral-variant-70: #a3adaf;\n  --color-neutral-variant-80: #bfc8ca;\n  --color-neutral-variant-87: #d2dcde;\n  --color-neutral-variant-90: #dbe4e6;\n  --color-neutral-variant-92: #e0eaec;\n  --color-neutral-variant-94: #e6f0f1;\n  --color-neutral-variant-95: #e9f2f4;\n  --color-neutral-variant-96: #ecf5f7;\n  --color-neutral-variant-98: #f2fbfd;\n  --color-neutral-variant-99: #f6feff;\n  --color-neutral-variant-100: #ffffff;\n  --color-on-error: var(--color-error-100);\n  --color-on-error-container: var(--color-error-10);\n  --color-on-primary: var(--color-primary-100);\n  --color-on-primary-container: var(--color-primary-10);\n  --color-on-secondary: var(--color-secondary-100);\n  --color-on-secondary-container: var(--color-secondary-10);\n  --color-on-surface: var(--color-neutral-10);\n  --color-on-surface-variant: var(--color-neutral-variant-30);\n  --color-on-tertiary: var(--color-tertiary-100);\n  --color-on-tertiary-container: var(--color-tertiary-10);\n  --color-orange: #ff7518;\n  --color-orange-0: #000000;\n  --color-orange-10: #341100;\n  --color-orange-20: #552100;\n  --color-orange-30: #783100;\n  --color-orange-40: #9e4300;\n  --color-orange-50: #c55500;\n  --color-orange-60: #ee6803;\n  --color-orange-70: #ff8d4c;\n  --color-orange-80: #ffb691;\n  --color-orange-90: #ffdbcb;\n  --color-orange-95: #ffede6;\n  --color-orange-98: #fff8f6;\n  --color-orange-100: #ffffff;\n  --color-outline: var(--color-neutral-variant-50);\n  --color-outline-variant: var(--color-neutral-variant-80);\n  --color-primary: var(--color-primary-40);\n  --color-primary-0: #000000;\n  --color-primary-10: #001a42;\n  --color-primary-20: #002e6b;\n  --color-primary-30: #004396;\n  --color-primary-40: #005ac4;\n  --color-primary-50: #2673e8;\n  --color-primary-60: #4f8eff;\n  --color-primary-70: #82aaff;\n  --color-primary-80: #aec6ff;\n  --color-primary-90: #d8e2ff;\n  --color-primary-95: #edf0ff;\n  --color-primary-98: #faf9ff;\n  --color-primary-100: #ffffff;\n  --color-primary-container: var(--color-primary-90);\n  --color-purple: #e40078;\n  --color-purple-0: #000000;\n  --color-purple-10: #3f001c;\n  --color-purple-20: #650032;\n  --color-purple-30: #8e0048;\n  --color-purple-40: #ba0061;\n  --color-purple-50: #e6067a;\n  --color-purple-60: #ff4993;\n  --color-purple-70: #ff84ad;\n  --color-purple-80: #ffb1c7;\n  --color-purple-90: #ffd9e2;\n  --color-purple-95: #ffecef;\n  --color-purple-98: #fff8f8;\n  --color-purple-100: #ffffff;\n  --color-red: #e73121;\n  --color-red-0: #000000;\n  --color-red-10: #410000;\n  --color-red-20: #690000;\n  --color-red-30: #930000;\n  --color-red-40: #be0c05;\n  --color-red-50: #e32e1f;\n  --color-red-60: #ff5541;\n  --color-red-70: #ff8a78;\n  --color-red-80: #ffb4a8;\n  --color-red-90: #ffdad4;\n  --color-red-95: #ffedea;\n  --color-red-98: #fff8f6;\n  --color-red-100: #ffffff;\n  --color-scrim: var(--color-neutral-0);\n  --color-secondary: var(--color-secondary-40);\n  --color-secondary-0: #000000;\n  --color-secondary-10: #141b2c;\n  --color-secondary-20: #293041;\n  --color-secondary-30: #3f4759;\n  --color-secondary-40: #575e71;\n  --color-secondary-50: #6f778b;\n  --color-secondary-60: #8990a5;\n  --color-secondary-70: #a4abc0;\n  --color-secondary-80: #bfc6dc;\n  --color-secondary-90: #dbe2f9;\n  --color-secondary-95: #edf0ff;\n  --color-secondary-98: #faf9ff;\n  --color-secondary-100: #ffffff;\n  --color-secondary-container: var(--color-secondary-90);\n  --color-shadow: var(--color-neutral-0);\n  --color-success: var(--color-green);\n  --color-success-0: var(--color-green-0);\n  --color-success-10: var(--color-green-10);\n  --color-success-20: var(--color-green-20);\n  --color-success-30: var(--color-green-30);\n  --color-success-40: var(--color-green-40);\n  --color-success-50: var(--color-green-50);\n  --color-success-60: var(--color-green-60);\n  --color-success-70: var(--color-green-70);\n  --color-success-80: var(--color-green-80);\n  --color-success-90: var(--color-green-90);\n  --color-success-95: var(--color-green-95);\n  --color-success-98: var(--color-green-98);\n  --color-success-100: var(--color-green-100);\n  --color-surface: var(--color-neutral-99);\n  --color-surface-container: var(--color-neutral-94);\n  --color-surface-container-high: var(--color-neutral-92);\n  --color-surface-container-highest: var(--color-neutral-90);\n  --color-surface-container-low: var(--color-neutral-96);\n  --color-surface-container-lowest: var(--color-neutral-100);\n  --color-surface-dim: var(--color-neutral-87);\n  --color-surface-variant: var(--color-neutral-variant-90);\n  --color-tertiary: var(--color-tertiary-40);\n  --color-tertiary-0: #000000;\n  --color-tertiary-10: #29132d;\n  --color-tertiary-20: #402843;\n  --color-tertiary-30: #583e5a;\n  --color-tertiary-40: #715573;\n  --color-tertiary-50: #8b6d8d;\n  --color-tertiary-60: #a686a7;\n  --color-tertiary-70: #c2a1c2;\n  --color-tertiary-80: #dfbcdf;\n  --color-tertiary-90: #fcd7fb;\n  --color-tertiary-95: #ffebfc;\n  --color-tertiary-98: #fff7fa;\n  --color-tertiary-100: #ffffff;\n  --color-tertiary-container: var(--color-tertiary-90);\n  --color-warning: var(--color-yellow);\n  --color-warning-0: var(--color-yellow-0);\n  --color-warning-10: var(--color-yellow-10);\n  --color-warning-20: var(--color-yellow-20);\n  --color-warning-30: var(--color-yellow-30);\n  --color-warning-40: var(--color-yellow-40);\n  --color-warning-50: var(--color-yellow-50);\n  --color-warning-60: var(--color-yellow-60);\n  --color-warning-70: var(--color-yellow-70);\n  --color-warning-80: var(--color-yellow-80);\n  --color-warning-90: var(--color-yellow-90);\n  --color-warning-95: var(--color-yellow-95);\n  --color-warning-98: var(--color-yellow-98);\n  --color-warning-100: var(--color-yellow-100);\n  --color-white: #ffffff;\n  --color-yellow: #ffed29;\n  --color-yellow-0: #000000;\n  --color-yellow-10: #1f1c00;\n  --color-yellow-20: #363100;\n  --color-yellow-30: #4e4800;\n  --color-yellow-40: #686000;\n  --color-yellow-50: #837900;\n  --color-yellow-60: #9f9300;\n  --color-yellow-70: #bcae00;\n  --color-yellow-80: #d9c900;\n  --color-yellow-90: #f7e61e;\n  --color-yellow-95: #fff392;\n  --color-yellow-98: #fff9e6;\n  --color-yellow-100: #ffffff;\n  --container-lg: 1056px; /* Large container width. Intended for standard desktop layouts with typical content density. */\n  --container-max: 1584px; /* Maximum container width. Use when constraining very wide layouts to maintain readable line lengths. */\n  --container-md: 672px; /* Medium container width. Suitable for tablet layouts and compact desktop content areas. */\n  --container-sm: 320px; /* Small container width. Use for narrow layouts and small screens such as mobile devices. */\n  --container-xl: 1312px; /* Extra large container width. Use for wide desktop displays and content-heavy pages. */\n  --duration-long1: 450ms; /* These durations are often paired with Emphasized easing. */\n  --duration-long2: 500ms; /* These durations are often paired with Emphasized easing. */\n  --duration-medium1: 250ms; /* These are used for medium duration transitions, like modal animations. */\n  --duration-medium2: 300ms; /* These are used for medium duration transitions, like modal animations. */\n  --duration-short1: 50ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short2: 100ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short3: 150ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short4: 200ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --easing-linear: cubic-bezier(0, 0, 1, 1);\n  --easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --font-family-brand: \"Noto Sans\", sans-serif; /* The font family used for brand headings and titles. */\n  --font-family-monospace: \"Noto Sans Mono\", monospace; /* The font family used for code snippets and monospaced text. */\n  --font-family-sans: \"Noto Sans\", sans-serif; /* The primary font family used for body text and general content. */\n  --font-weight-bold: 700; /* Bold weight for emphasis. 700 weight. */\n  --font-weight-medium: 500; /* Slightly heavier than regular weight. 500 weight. */\n  --font-weight-regular: 400; /* Standard weight for regular text. 400 weight. */\n  --font-weight-semi-bold: 600; /* Heavier than medium weight. 600 weight. */\n  --global-avatar-border-radius: var(--shape-corner-full);\n  --global-badge-color: var(--color-error-40);\n  --shape-corner-full: 9999px;\n  --shape-corner-large: 12px;\n  --shape-corner-medium: 8px;\n  --shape-corner-none: 0;\n  --shape-corner-small: 4px;\n  --spacing-000: 0; /* No spacing (base × 0). */\n  --spacing-025: 0.125rem; /* 2px - Smallest increment (base × 0.125). */\n  --spacing-050: 0.25rem; /* 4px - Extra small spacing (base × 0.25). */\n  --spacing-100: 0.5rem; /* 8px - Small spacing (base × 0.5). */\n  --spacing-150: 0.75rem; /* 12px - Small-medium spacing (base × 0.75). */\n  --spacing-200: 1rem; /* 16px - Base spacing unit (base × 1). */\n  --spacing-300: 1.5rem; /* 24px - Medium spacing (base × 1.5). */\n  --spacing-400: 2rem; /* 32px - Medium-large spacing (base × 2). */\n  --spacing-500: 2.5rem; /* 40px - Large spacing (base × 2.5). */\n  --spacing-600: 3rem; /* 48px - Extra large spacing (base × 3). */\n  --spacing-800: 4rem; /* 64px - Huge spacing (base × 4). */\n  --spacing-1000: 5rem; /* 80px - Massive spacing (base × 5). */\n  --spacing-1200: 6rem; /* 96px - Gigantic spacing (base × 6). */\n  --spacing-2000: 10rem; /* 160px - Maximum defined spacing (base × 10). */\n  --spacing-base: 1rem; /* Base spacing unit (1rem = 16px). */\n  --typography-body-large-emphasized-font-family: var(--font-family-sans);\n  --typography-body-large-emphasized-font-size: 1rem;\n  --typography-body-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-large-emphasized-letter-spacing: 0.5px;\n  --typography-body-large-emphasized-line-height: 1.5rem;\n  --typography-body-large-font-family: var(--font-family-sans);\n  --typography-body-large-font-size: 1rem;\n  --typography-body-large-font-weight: var(--font-weight-regular);\n  --typography-body-large-letter-spacing: 0.5px;\n  --typography-body-large-line-height: 1.5rem;\n  --typography-body-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-body-medium-emphasized-font-size: 0.875rem;\n  --typography-body-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-medium-emphasized-letter-spacing: 0.25px;\n  --typography-body-medium-emphasized-line-height: 1.25rem;\n  --typography-body-medium-font-family: var(--font-family-sans);\n  --typography-body-medium-font-size: 0.875rem;\n  --typography-body-medium-font-weight: var(--font-weight-regular);\n  --typography-body-medium-letter-spacing: 0.25px;\n  --typography-body-medium-line-height: 1.25rem;\n  --typography-body-small-emphasized-font-family: var(--font-family-sans);\n  --typography-body-small-emphasized-font-size: 0.75rem;\n  --typography-body-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-small-emphasized-letter-spacing: 0.4000000059604645px;\n  --typography-body-small-emphasized-line-height: 1rem;\n  --typography-body-small-font-family: var(--font-family-sans);\n  --typography-body-small-font-size: 0.75rem;\n  --typography-body-small-font-weight: var(--font-weight-regular);\n  --typography-body-small-letter-spacing: 0.4000000059604645px;\n  --typography-body-small-line-height: 1rem;\n  --typography-code-large-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-large-emphasized-font-size: 1rem;\n  --typography-code-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-large-emphasized-letter-spacing: 0.5px;\n  --typography-code-large-emphasized-line-height: 1.5rem;\n  --typography-code-large-font-family: var(--font-family-monospace);\n  --typography-code-large-font-size: 1rem;\n  --typography-code-large-font-weight: var(--font-weight-regular);\n  --typography-code-large-letter-spacing: 0.5px;\n  --typography-code-large-line-height: 1.5rem;\n  --typography-code-medium-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-medium-emphasized-font-size: 0.875rem;\n  --typography-code-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-medium-emphasized-letter-spacing: 0.25px;\n  --typography-code-medium-emphasized-line-height: 1.25rem;\n  --typography-code-medium-font-family: var(--font-family-monospace);\n  --typography-code-medium-font-size: 0.875rem;\n  --typography-code-medium-font-weight: var(--font-weight-regular);\n  --typography-code-medium-letter-spacing: 0.25px;\n  --typography-code-medium-line-height: 1.25rem;\n  --typography-code-small-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-small-emphasized-font-size: 0.75rem;\n  --typography-code-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-small-emphasized-letter-spacing: 0.4000000059604645px;\n  --typography-code-small-emphasized-line-height: 1rem;\n  --typography-code-small-font-family: var(--font-family-monospace);\n  --typography-code-small-font-size: 0.75rem;\n  --typography-code-small-font-weight: var(--font-weight-regular);\n  --typography-code-small-letter-spacing: 0.4000000059604645px;\n  --typography-code-small-line-height: 1rem;\n  --typography-display-large-emphasized-font-family: var(--font-family-sans);\n  --typography-display-large-emphasized-font-size: 3.5625rem;\n  --typography-display-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-large-emphasized-letter-spacing: -0.25px;\n  --typography-display-large-emphasized-line-height: 4rem;\n  --typography-display-large-font-family: var(--font-family-sans);\n  --typography-display-large-font-size: 3.5625rem;\n  --typography-display-large-font-weight: var(--font-weight-regular);\n  --typography-display-large-letter-spacing: -0.25px;\n  --typography-display-large-line-height: 4rem;\n  --typography-display-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-display-medium-emphasized-font-size: 2.8125rem;\n  --typography-display-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-medium-emphasized-letter-spacing: 0;\n  --typography-display-medium-emphasized-line-height: 3.25rem;\n  --typography-display-medium-font-family: var(--font-family-sans);\n  --typography-display-medium-font-size: 2.8125rem;\n  --typography-display-medium-font-weight: var(--font-weight-regular);\n  --typography-display-medium-letter-spacing: 0;\n  --typography-display-medium-line-height: 3.25rem;\n  --typography-display-small-emphasized-font-family: var(--font-family-sans);\n  --typography-display-small-emphasized-font-size: 2.25rem;\n  --typography-display-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-small-emphasized-letter-spacing: 0;\n  --typography-display-small-emphasized-line-height: 2.75rem;\n  --typography-display-small-font-family: var(--font-family-sans);\n  --typography-display-small-font-size: 2.25rem;\n  --typography-display-small-font-weight: var(--font-weight-regular);\n  --typography-display-small-letter-spacing: 0;\n  --typography-display-small-line-height: 2.75rem;\n  --typography-headline-large-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-large-emphasized-font-size: 2rem;\n  --typography-headline-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-large-emphasized-letter-spacing: 0;\n  --typography-headline-large-emphasized-line-height: 2.5rem;\n  --typography-headline-large-font-family: var(--font-family-sans);\n  --typography-headline-large-font-size: 2rem;\n  --typography-headline-large-font-weight: var(--font-weight-regular);\n  --typography-headline-large-letter-spacing: 0;\n  --typography-headline-large-line-height: 2.5rem;\n  --typography-headline-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-medium-emphasized-font-size: 1.75rem;\n  --typography-headline-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-medium-emphasized-letter-spacing: 0;\n  --typography-headline-medium-emphasized-line-height: 2.25rem;\n  --typography-headline-medium-font-family: var(--font-family-sans);\n  --typography-headline-medium-font-size: 1.75rem;\n  --typography-headline-medium-font-weight: var(--font-weight-regular);\n  --typography-headline-medium-letter-spacing: 0;\n  --typography-headline-medium-line-height: 2.25rem;\n  --typography-headline-small-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-small-emphasized-font-size: 1.5rem;\n  --typography-headline-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-small-emphasized-letter-spacing: 0;\n  --typography-headline-small-emphasized-line-height: 2rem;\n  --typography-headline-small-font-family: var(--font-family-sans);\n  --typography-headline-small-font-size: 1.5rem;\n  --typography-headline-small-font-weight: var(--font-weight-regular);\n  --typography-headline-small-letter-spacing: 0;\n  --typography-headline-small-line-height: 2rem;\n  --typography-label-large-emphasized-font-family: var(--font-family-sans);\n  --typography-label-large-emphasized-font-size: 0.875rem;\n  --typography-label-large-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-large-emphasized-letter-spacing: 0.10000000149011612px;\n  --typography-label-large-emphasized-line-height: 1.25rem;\n  --typography-label-large-font-family: var(--font-family-sans);\n  --typography-label-large-font-size: 0.875rem;\n  --typography-label-large-font-weight: var(--font-weight-medium);\n  --typography-label-large-letter-spacing: 0.10000000149011612px;\n  --typography-label-large-line-height: 1.25rem;\n  --typography-label-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-label-medium-emphasized-font-size: 0.75rem;\n  --typography-label-medium-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-medium-emphasized-letter-spacing: 0.5px;\n  --typography-label-medium-emphasized-line-height: 1rem;\n  --typography-label-medium-font-family: var(--font-family-sans);\n  --typography-label-medium-font-size: 0.75rem;\n  --typography-label-medium-font-weight: var(--font-weight-medium);\n  --typography-label-medium-letter-spacing: 0.5px;\n  --typography-label-medium-line-height: 1rem;\n  --typography-label-small-emphasized-font-family: var(--font-family-sans);\n  --typography-label-small-emphasized-font-size: 0.6875rem;\n  --typography-label-small-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-small-emphasized-letter-spacing: 0.5px;\n  --typography-label-small-emphasized-line-height: 1rem;\n  --typography-label-small-font-family: var(--font-family-sans);\n  --typography-label-small-font-size: 0.6875rem;\n  --typography-label-small-font-weight: var(--font-weight-medium);\n  --typography-label-small-letter-spacing: 0.5px;\n  --typography-label-small-line-height: 1rem;\n  --typography-title-large-emphasized-font-family: var(--font-family-sans);\n  --typography-title-large-emphasized-font-size: 1.375rem;\n  --typography-title-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-title-large-emphasized-letter-spacing: 0;\n  --typography-title-large-emphasized-line-height: 1.75rem;\n  --typography-title-large-font-family: var(--font-family-sans);\n  --typography-title-large-font-size: 1.375rem;\n  --typography-title-large-font-weight: var(--font-weight-regular);\n  --typography-title-large-letter-spacing: 0;\n  --typography-title-large-line-height: 1.75rem;\n  --typography-title-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-title-medium-emphasized-font-size: 1rem;\n  --typography-title-medium-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-title-medium-emphasized-letter-spacing: 0.15000000596046448px;\n  --typography-title-medium-emphasized-line-height: 1.5rem;\n  --typography-title-medium-font-family: var(--font-family-sans);\n  --typography-title-medium-font-size: 1rem;\n  --typography-title-medium-font-weight: var(--font-weight-medium);\n  --typography-title-medium-letter-spacing: 0.15000000596046448px;\n  --typography-title-medium-line-height: 1.5rem;\n  --typography-title-small-emphasized-font-family: var(--font-family-sans);\n  --typography-title-small-emphasized-font-size: 0.875rem;\n  --typography-title-small-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-title-small-emphasized-letter-spacing: 0.10000000149011612px;\n  --typography-title-small-emphasized-line-height: 1.25rem;\n  --typography-title-small-font-family: var(--font-family-sans);\n  --typography-title-small-font-size: 0.875rem;\n  --typography-title-small-font-weight: var(--font-weight-medium);\n  --typography-title-small-letter-spacing: 0.10000000149011612px;\n  --typography-title-small-line-height: 1.25rem;\n  color-scheme: light dark;\n}\n\n[data-theme='dark'] {\n  --color-error: var(--color-error-80);\n  --color-error-container: var(--color-error-30);\n  --color-inverse-error: var(--color-error-40);\n  --color-inverse-on-surface: var(--color-neutral-20);\n  --color-inverse-primary: var(--color-primary-40);\n  --color-inverse-secondary: var(--color-secondary-40);\n  --color-inverse-surface: var(--color-neutral-90);\n  --color-inverse-tertiary: var(--color-tertiary-40);\n  --color-on-error: var(--color-error-20);\n  --color-on-error-container: var(--color-error-90);\n  --color-on-primary: var(--color-primary-20);\n  --color-on-primary-container: var(--color-primary-90);\n  --color-on-secondary: var(--color-secondary-20);\n  --color-on-secondary-container: var(--color-secondary-90);\n  --color-on-surface: var(--color-neutral-90);\n  --color-on-surface-variant: var(--color-neutral-variant-80);\n  --color-on-tertiary: var(--color-tertiary-20);\n  --color-on-tertiary-container: var(--color-tertiary-90);\n  --color-outline: var(--color-neutral-variant-60);\n  --color-outline-variant: var(--color-neutral-variant-30);\n  --color-primary: var(--color-primary-80);\n  --color-primary-container: var(--color-primary-30);\n  --color-scrim: var(--color-neutral-0);\n  --color-secondary: var(--color-secondary-80);\n  --color-secondary-container: var(--color-secondary-30);\n  --color-shadow: var(--color-neutral-0);\n  --color-surface: var(--color-neutral-10);\n  --color-surface-container: var(--color-neutral-12);\n  --color-surface-container-high: var(--color-neutral-17);\n  --color-surface-container-highest: var(--color-neutral-22);\n  --color-surface-container-low: var(--color-neutral-10);\n  --color-surface-container-lowest: var(--color-neutral-4);\n  --color-surface-dim: var(--color-neutral-6);\n  --color-surface-variant: var(--color-neutral-variant-30);\n  --color-tertiary: var(--color-tertiary-80);\n  --color-tertiary-container: var(--color-tertiary-30);\n  --global-badge-color: var(--color-error-80);\n}\n\n";
 
 class LoaderUtils {
     constructor(loaderConfig) {
@@ -81,8 +92,6 @@ class LoaderUtils {
     }
 }
 
-var cssComponentsStyleSheet = "/* -------------------------------------------\n *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root {\n  --color-black: #000000;\n  --color-blue: #305cde;\n  --color-blue-0: #000000;\n  --color-blue-10: #001550;\n  --color-blue-20: #00277f;\n  --color-blue-30: #003ab2;\n  --color-blue-40: #2352d5;\n  --color-blue-50: #446def;\n  --color-blue-60: #6789ff;\n  --color-blue-70: #90a7ff;\n  --color-blue-80: #b6c4ff;\n  --color-blue-90: #dce1ff;\n  --color-blue-95: #eff0ff;\n  --color-blue-98: #faf8ff;\n  --color-blue-100: #ffffff;\n  --color-error: var(--color-red);\n  --color-error-0: var(--color-red-0);\n  --color-error-10: var(--color-red-10);\n  --color-error-20: var(--color-red-20);\n  --color-error-30: var(--color-red-30);\n  --color-error-40: var(--color-red-40);\n  --color-error-50: var(--color-red-50);\n  --color-error-60: var(--color-red-60);\n  --color-error-70: var(--color-red-70);\n  --color-error-80: var(--color-red-80);\n  --color-error-90: var(--color-red-90);\n  --color-error-95: var(--color-red-95);\n  --color-error-98: var(--color-red-98);\n  --color-error-100: var(--color-red-100);\n  --color-error-container: var(--color-error-90);\n  --color-green: #2e6f40;\n  --color-green-0: #000000;\n  --color-green-10: #00210b;\n  --color-green-20: #003917;\n  --color-green-30: #005225;\n  --color-green-40: #0f6d35;\n  --color-green-50: #31874b;\n  --color-green-60: #4da163;\n  --color-green-70: #68bd7b;\n  --color-green-80: #83d995;\n  --color-green-90: #9ff6af;\n  --color-green-95: #c4ffcb;\n  --color-green-98: #eaffe9;\n  --color-green-100: #ffffff;\n  --color-inverse-error: var(--color-error-80);\n  --color-inverse-on-surface: var(--color-neutral-95);\n  --color-inverse-primary: var(--color-primary-80);\n  --color-inverse-secondary: var(--color-secondary-80);\n  --color-inverse-surface: var(--color-neutral-20);\n  --color-inverse-tertiary: var(--color-tertiary-80);\n  --color-neutral: #747878;\n  --color-neutral-0: #000000;\n  --color-neutral-4: #0b0f0f;\n  --color-neutral-6: #101415;\n  --color-neutral-10: #191c1d;\n  --color-neutral-12: #1d2021;\n  --color-neutral-17: #272b2b;\n  --color-neutral-20: #2e3132;\n  --color-neutral-22: #323536;\n  --color-neutral-30: #444748;\n  --color-neutral-40: #5c5f5f;\n  --color-neutral-50: #747878;\n  --color-neutral-60: #8e9192;\n  --color-neutral-70: #a9acac;\n  --color-neutral-80: #c4c7c7;\n  --color-neutral-87: #d8dadb;\n  --color-neutral-90: #e1e3e3;\n  --color-neutral-92: #e6e8e9;\n  --color-neutral-94: #eceeef;\n  --color-neutral-95: #eff1f1;\n  --color-neutral-96: #f2f4f4;\n  --color-neutral-98: #f8fafa;\n  --color-neutral-99: #fafdfd;\n  --color-neutral-100: #ffffff;\n  --color-neutral-variant: #6f797a;\n  --color-neutral-variant-0: #000000;\n  --color-neutral-variant-4: #071011;\n  --color-neutral-variant-6: #0c1516;\n  --color-neutral-variant-10: #141d1f;\n  --color-neutral-variant-12: #182123;\n  --color-neutral-variant-17: #222b2d;\n  --color-neutral-variant-20: #293234;\n  --color-neutral-variant-22: #2d3638;\n  --color-neutral-variant-30: #3f484a;\n  --color-neutral-variant-40: #576062;\n  --color-neutral-variant-50: #6f797a;\n  --color-neutral-variant-60: #899294;\n  --color-neutral-variant-70: #a3adaf;\n  --color-neutral-variant-80: #bfc8ca;\n  --color-neutral-variant-87: #d2dcde;\n  --color-neutral-variant-90: #dbe4e6;\n  --color-neutral-variant-92: #e0eaec;\n  --color-neutral-variant-94: #e6f0f1;\n  --color-neutral-variant-95: #e9f2f4;\n  --color-neutral-variant-96: #ecf5f7;\n  --color-neutral-variant-98: #f2fbfd;\n  --color-neutral-variant-99: #f6feff;\n  --color-neutral-variant-100: #ffffff;\n  --color-on-error: var(--color-error-100);\n  --color-on-error-container: var(--color-error-10);\n  --color-on-primary: var(--color-primary-100);\n  --color-on-primary-container: var(--color-primary-10);\n  --color-on-secondary: var(--color-secondary-100);\n  --color-on-secondary-container: var(--color-secondary-10);\n  --color-on-surface: var(--color-neutral-10);\n  --color-on-surface-variant: var(--color-neutral-variant-30);\n  --color-on-tertiary: var(--color-tertiary-100);\n  --color-on-tertiary-container: var(--color-tertiary-10);\n  --color-orange: #ff7518;\n  --color-orange-0: #000000;\n  --color-orange-10: #341100;\n  --color-orange-20: #552100;\n  --color-orange-30: #783100;\n  --color-orange-40: #9e4300;\n  --color-orange-50: #c55500;\n  --color-orange-60: #ee6803;\n  --color-orange-70: #ff8d4c;\n  --color-orange-80: #ffb691;\n  --color-orange-90: #ffdbcb;\n  --color-orange-95: #ffede6;\n  --color-orange-98: #fff8f6;\n  --color-orange-100: #ffffff;\n  --color-outline: var(--color-neutral-variant-50);\n  --color-outline-variant: var(--color-neutral-variant-80);\n  --color-primary: var(--color-primary-40);\n  --color-primary-0: #000000;\n  --color-primary-10: #001a42;\n  --color-primary-20: #002e6b;\n  --color-primary-30: #004396;\n  --color-primary-40: #005ac4;\n  --color-primary-50: #2673e8;\n  --color-primary-60: #4f8eff;\n  --color-primary-70: #82aaff;\n  --color-primary-80: #aec6ff;\n  --color-primary-90: #d8e2ff;\n  --color-primary-95: #edf0ff;\n  --color-primary-98: #faf9ff;\n  --color-primary-100: #ffffff;\n  --color-primary-container: var(--color-primary-90);\n  --color-purple: #e40078;\n  --color-purple-0: #000000;\n  --color-purple-10: #3f001c;\n  --color-purple-20: #650032;\n  --color-purple-30: #8e0048;\n  --color-purple-40: #ba0061;\n  --color-purple-50: #e6067a;\n  --color-purple-60: #ff4993;\n  --color-purple-70: #ff84ad;\n  --color-purple-80: #ffb1c7;\n  --color-purple-90: #ffd9e2;\n  --color-purple-95: #ffecef;\n  --color-purple-98: #fff8f8;\n  --color-purple-100: #ffffff;\n  --color-red: #e73121;\n  --color-red-0: #000000;\n  --color-red-10: #410000;\n  --color-red-20: #690000;\n  --color-red-30: #930000;\n  --color-red-40: #be0c05;\n  --color-red-50: #e32e1f;\n  --color-red-60: #ff5541;\n  --color-red-70: #ff8a78;\n  --color-red-80: #ffb4a8;\n  --color-red-90: #ffdad4;\n  --color-red-95: #ffedea;\n  --color-red-98: #fff8f6;\n  --color-red-100: #ffffff;\n  --color-scrim: var(--color-neutral-0);\n  --color-secondary: var(--color-secondary-40);\n  --color-secondary-0: #000000;\n  --color-secondary-10: #141b2c;\n  --color-secondary-20: #293041;\n  --color-secondary-30: #3f4759;\n  --color-secondary-40: #575e71;\n  --color-secondary-50: #6f778b;\n  --color-secondary-60: #8990a5;\n  --color-secondary-70: #a4abc0;\n  --color-secondary-80: #bfc6dc;\n  --color-secondary-90: #dbe2f9;\n  --color-secondary-95: #edf0ff;\n  --color-secondary-98: #faf9ff;\n  --color-secondary-100: #ffffff;\n  --color-secondary-container: var(--color-secondary-90);\n  --color-shadow: var(--color-neutral-0);\n  --color-success: var(--color-green);\n  --color-success-0: var(--color-green-0);\n  --color-success-10: var(--color-green-10);\n  --color-success-20: var(--color-green-20);\n  --color-success-30: var(--color-green-30);\n  --color-success-40: var(--color-green-40);\n  --color-success-50: var(--color-green-50);\n  --color-success-60: var(--color-green-60);\n  --color-success-70: var(--color-green-70);\n  --color-success-80: var(--color-green-80);\n  --color-success-90: var(--color-green-90);\n  --color-success-95: var(--color-green-95);\n  --color-success-98: var(--color-green-98);\n  --color-success-100: var(--color-green-100);\n  --color-surface: var(--color-neutral-99);\n  --color-surface-container: var(--color-neutral-94);\n  --color-surface-container-high: var(--color-neutral-92);\n  --color-surface-container-highest: var(--color-neutral-90);\n  --color-surface-container-low: var(--color-neutral-96);\n  --color-surface-container-lowest: var(--color-neutral-100);\n  --color-surface-dim: var(--color-neutral-87);\n  --color-surface-variant: var(--color-neutral-variant-90);\n  --color-tertiary: var(--color-tertiary-40);\n  --color-tertiary-0: #000000;\n  --color-tertiary-10: #29132d;\n  --color-tertiary-20: #402843;\n  --color-tertiary-30: #583e5a;\n  --color-tertiary-40: #715573;\n  --color-tertiary-50: #8b6d8d;\n  --color-tertiary-60: #a686a7;\n  --color-tertiary-70: #c2a1c2;\n  --color-tertiary-80: #dfbcdf;\n  --color-tertiary-90: #fcd7fb;\n  --color-tertiary-95: #ffebfc;\n  --color-tertiary-98: #fff7fa;\n  --color-tertiary-100: #ffffff;\n  --color-tertiary-container: var(--color-tertiary-90);\n  --color-warning: var(--color-yellow);\n  --color-warning-0: var(--color-yellow-0);\n  --color-warning-10: var(--color-yellow-10);\n  --color-warning-20: var(--color-yellow-20);\n  --color-warning-30: var(--color-yellow-30);\n  --color-warning-40: var(--color-yellow-40);\n  --color-warning-50: var(--color-yellow-50);\n  --color-warning-60: var(--color-yellow-60);\n  --color-warning-70: var(--color-yellow-70);\n  --color-warning-80: var(--color-yellow-80);\n  --color-warning-90: var(--color-yellow-90);\n  --color-warning-95: var(--color-yellow-95);\n  --color-warning-98: var(--color-yellow-98);\n  --color-warning-100: var(--color-yellow-100);\n  --color-white: #ffffff;\n  --color-yellow: #ffed29;\n  --color-yellow-0: #000000;\n  --color-yellow-10: #1f1c00;\n  --color-yellow-20: #363100;\n  --color-yellow-30: #4e4800;\n  --color-yellow-40: #686000;\n  --color-yellow-50: #837900;\n  --color-yellow-60: #9f9300;\n  --color-yellow-70: #bcae00;\n  --color-yellow-80: #d9c900;\n  --color-yellow-90: #f7e61e;\n  --color-yellow-95: #fff392;\n  --color-yellow-98: #fff9e6;\n  --color-yellow-100: #ffffff;\n  --container-lg: 1056px; /* Large container width. Intended for standard desktop layouts with typical content density. */\n  --container-max: 1584px; /* Maximum container width. Use when constraining very wide layouts to maintain readable line lengths. */\n  --container-md: 672px; /* Medium container width. Suitable for tablet layouts and compact desktop content areas. */\n  --container-sm: 320px; /* Small container width. Use for narrow layouts and small screens such as mobile devices. */\n  --container-xl: 1312px; /* Extra large container width. Use for wide desktop displays and content-heavy pages. */\n  --duration-long1: 450ms; /* These durations are often paired with Emphasized easing. */\n  --duration-long2: 500ms; /* These durations are often paired with Emphasized easing. */\n  --duration-medium1: 250ms; /* These are used for medium duration transitions, like modal animations. */\n  --duration-medium2: 300ms; /* These are used for medium duration transitions, like modal animations. */\n  --duration-short1: 50ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short2: 100ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short3: 150ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short4: 200ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --easing-linear: cubic-bezier(0, 0, 1, 1);\n  --easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --font-family-brand: \"Noto Sans\", sans-serif; /* The font family used for brand headings and titles. */\n  --font-family-monospace: \"Noto Sans Mono\", monospace; /* The font family used for code snippets and monospaced text. */\n  --font-family-sans: \"Noto Sans\", sans-serif; /* The primary font family used for body text and general content. */\n  --font-weight-bold: 700; /* Bold weight for emphasis. 700 weight. */\n  --font-weight-medium: 500; /* Slightly heavier than regular weight. 500 weight. */\n  --font-weight-regular: 400; /* Standard weight for regular text. 400 weight. */\n  --font-weight-semi-bold: 600; /* Heavier than medium weight. 600 weight. */\n  --global-avatar-border-radius: var(--shape-corner-full);\n  --global-badge-color: var(--color-error-40);\n  --shape-corner-full: 9999px;\n  --shape-corner-large: 12px;\n  --shape-corner-medium: 8px;\n  --shape-corner-none: 0;\n  --shape-corner-small: 4px;\n  --spacing-000: 0; /* No spacing (base × 0). */\n  --spacing-025: 0.125rem; /* 2px - Smallest increment (base × 0.125). */\n  --spacing-050: 0.25rem; /* 4px - Extra small spacing (base × 0.25). */\n  --spacing-100: 0.5rem; /* 8px - Small spacing (base × 0.5). */\n  --spacing-150: 0.75rem; /* 12px - Small-medium spacing (base × 0.75). */\n  --spacing-200: 1rem; /* 16px - Base spacing unit (base × 1). */\n  --spacing-300: 1.5rem; /* 24px - Medium spacing (base × 1.5). */\n  --spacing-400: 2rem; /* 32px - Medium-large spacing (base × 2). */\n  --spacing-500: 2.5rem; /* 40px - Large spacing (base × 2.5). */\n  --spacing-600: 3rem; /* 48px - Extra large spacing (base × 3). */\n  --spacing-800: 4rem; /* 64px - Huge spacing (base × 4). */\n  --spacing-1000: 5rem; /* 80px - Massive spacing (base × 5). */\n  --spacing-1200: 6rem; /* 96px - Gigantic spacing (base × 6). */\n  --spacing-2000: 10rem; /* 160px - Maximum defined spacing (base × 10). */\n  --spacing-base: 1rem; /* Base spacing unit (1rem = 16px). */\n  --typography-body-large-emphasized-font-family: var(--font-family-sans);\n  --typography-body-large-emphasized-font-size: 1rem;\n  --typography-body-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-large-emphasized-letter-spacing: 0.5px;\n  --typography-body-large-emphasized-line-height: 1.5rem;\n  --typography-body-large-font-family: var(--font-family-sans);\n  --typography-body-large-font-size: 1rem;\n  --typography-body-large-font-weight: var(--font-weight-regular);\n  --typography-body-large-letter-spacing: 0.5px;\n  --typography-body-large-line-height: 1.5rem;\n  --typography-body-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-body-medium-emphasized-font-size: 0.875rem;\n  --typography-body-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-medium-emphasized-letter-spacing: 0.25px;\n  --typography-body-medium-emphasized-line-height: 1.25rem;\n  --typography-body-medium-font-family: var(--font-family-sans);\n  --typography-body-medium-font-size: 0.875rem;\n  --typography-body-medium-font-weight: var(--font-weight-regular);\n  --typography-body-medium-letter-spacing: 0.25px;\n  --typography-body-medium-line-height: 1.25rem;\n  --typography-body-small-emphasized-font-family: var(--font-family-sans);\n  --typography-body-small-emphasized-font-size: 0.75rem;\n  --typography-body-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-small-emphasized-letter-spacing: 0.4000000059604645px;\n  --typography-body-small-emphasized-line-height: 1rem;\n  --typography-body-small-font-family: var(--font-family-sans);\n  --typography-body-small-font-size: 0.75rem;\n  --typography-body-small-font-weight: var(--font-weight-regular);\n  --typography-body-small-letter-spacing: 0.4000000059604645px;\n  --typography-body-small-line-height: 1rem;\n  --typography-code-large-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-large-emphasized-font-size: 1rem;\n  --typography-code-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-large-emphasized-letter-spacing: 0.5px;\n  --typography-code-large-emphasized-line-height: 1.5rem;\n  --typography-code-large-font-family: var(--font-family-monospace);\n  --typography-code-large-font-size: 1rem;\n  --typography-code-large-font-weight: var(--font-weight-regular);\n  --typography-code-large-letter-spacing: 0.5px;\n  --typography-code-large-line-height: 1.5rem;\n  --typography-code-medium-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-medium-emphasized-font-size: 0.875rem;\n  --typography-code-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-medium-emphasized-letter-spacing: 0.25px;\n  --typography-code-medium-emphasized-line-height: 1.25rem;\n  --typography-code-medium-font-family: var(--font-family-monospace);\n  --typography-code-medium-font-size: 0.875rem;\n  --typography-code-medium-font-weight: var(--font-weight-regular);\n  --typography-code-medium-letter-spacing: 0.25px;\n  --typography-code-medium-line-height: 1.25rem;\n  --typography-code-small-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-small-emphasized-font-size: 0.75rem;\n  --typography-code-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-small-emphasized-letter-spacing: 0.4000000059604645px;\n  --typography-code-small-emphasized-line-height: 1rem;\n  --typography-code-small-font-family: var(--font-family-monospace);\n  --typography-code-small-font-size: 0.75rem;\n  --typography-code-small-font-weight: var(--font-weight-regular);\n  --typography-code-small-letter-spacing: 0.4000000059604645px;\n  --typography-code-small-line-height: 1rem;\n  --typography-display-large-emphasized-font-family: var(--font-family-sans);\n  --typography-display-large-emphasized-font-size: 3.5625rem;\n  --typography-display-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-large-emphasized-letter-spacing: -0.25px;\n  --typography-display-large-emphasized-line-height: 4rem;\n  --typography-display-large-font-family: var(--font-family-sans);\n  --typography-display-large-font-size: 3.5625rem;\n  --typography-display-large-font-weight: var(--font-weight-regular);\n  --typography-display-large-letter-spacing: -0.25px;\n  --typography-display-large-line-height: 4rem;\n  --typography-display-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-display-medium-emphasized-font-size: 2.8125rem;\n  --typography-display-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-medium-emphasized-letter-spacing: 0;\n  --typography-display-medium-emphasized-line-height: 3.25rem;\n  --typography-display-medium-font-family: var(--font-family-sans);\n  --typography-display-medium-font-size: 2.8125rem;\n  --typography-display-medium-font-weight: var(--font-weight-regular);\n  --typography-display-medium-letter-spacing: 0;\n  --typography-display-medium-line-height: 3.25rem;\n  --typography-display-small-emphasized-font-family: var(--font-family-sans);\n  --typography-display-small-emphasized-font-size: 2.25rem;\n  --typography-display-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-small-emphasized-letter-spacing: 0;\n  --typography-display-small-emphasized-line-height: 2.75rem;\n  --typography-display-small-font-family: var(--font-family-sans);\n  --typography-display-small-font-size: 2.25rem;\n  --typography-display-small-font-weight: var(--font-weight-regular);\n  --typography-display-small-letter-spacing: 0;\n  --typography-display-small-line-height: 2.75rem;\n  --typography-headline-large-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-large-emphasized-font-size: 2rem;\n  --typography-headline-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-large-emphasized-letter-spacing: 0;\n  --typography-headline-large-emphasized-line-height: 2.5rem;\n  --typography-headline-large-font-family: var(--font-family-sans);\n  --typography-headline-large-font-size: 2rem;\n  --typography-headline-large-font-weight: var(--font-weight-regular);\n  --typography-headline-large-letter-spacing: 0;\n  --typography-headline-large-line-height: 2.5rem;\n  --typography-headline-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-medium-emphasized-font-size: 1.75rem;\n  --typography-headline-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-medium-emphasized-letter-spacing: 0;\n  --typography-headline-medium-emphasized-line-height: 2.25rem;\n  --typography-headline-medium-font-family: var(--font-family-sans);\n  --typography-headline-medium-font-size: 1.75rem;\n  --typography-headline-medium-font-weight: var(--font-weight-regular);\n  --typography-headline-medium-letter-spacing: 0;\n  --typography-headline-medium-line-height: 2.25rem;\n  --typography-headline-small-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-small-emphasized-font-size: 1.5rem;\n  --typography-headline-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-small-emphasized-letter-spacing: 0;\n  --typography-headline-small-emphasized-line-height: 2rem;\n  --typography-headline-small-font-family: var(--font-family-sans);\n  --typography-headline-small-font-size: 1.5rem;\n  --typography-headline-small-font-weight: var(--font-weight-regular);\n  --typography-headline-small-letter-spacing: 0;\n  --typography-headline-small-line-height: 2rem;\n  --typography-label-large-emphasized-font-family: var(--font-family-sans);\n  --typography-label-large-emphasized-font-size: 0.875rem;\n  --typography-label-large-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-large-emphasized-letter-spacing: 0.10000000149011612px;\n  --typography-label-large-emphasized-line-height: 1.25rem;\n  --typography-label-large-font-family: var(--font-family-sans);\n  --typography-label-large-font-size: 0.875rem;\n  --typography-label-large-font-weight: var(--font-weight-medium);\n  --typography-label-large-letter-spacing: 0.10000000149011612px;\n  --typography-label-large-line-height: 1.25rem;\n  --typography-label-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-label-medium-emphasized-font-size: 0.75rem;\n  --typography-label-medium-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-medium-emphasized-letter-spacing: 0.5px;\n  --typography-label-medium-emphasized-line-height: 1rem;\n  --typography-label-medium-font-family: var(--font-family-sans);\n  --typography-label-medium-font-size: 0.75rem;\n  --typography-label-medium-font-weight: var(--font-weight-medium);\n  --typography-label-medium-letter-spacing: 0.5px;\n  --typography-label-medium-line-height: 1rem;\n  --typography-label-small-emphasized-font-family: var(--font-family-sans);\n  --typography-label-small-emphasized-font-size: 0.6875rem;\n  --typography-label-small-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-small-emphasized-letter-spacing: 0.5px;\n  --typography-label-small-emphasized-line-height: 1rem;\n  --typography-label-small-font-family: var(--font-family-sans);\n  --typography-label-small-font-size: 0.6875rem;\n  --typography-label-small-font-weight: var(--font-weight-medium);\n  --typography-label-small-letter-spacing: 0.5px;\n  --typography-label-small-line-height: 1rem;\n  --typography-title-large-emphasized-font-family: var(--font-family-sans);\n  --typography-title-large-emphasized-font-size: 1.375rem;\n  --typography-title-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-title-large-emphasized-letter-spacing: 0;\n  --typography-title-large-emphasized-line-height: 1.75rem;\n  --typography-title-large-font-family: var(--font-family-sans);\n  --typography-title-large-font-size: 1.375rem;\n  --typography-title-large-font-weight: var(--font-weight-regular);\n  --typography-title-large-letter-spacing: 0;\n  --typography-title-large-line-height: 1.75rem;\n  --typography-title-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-title-medium-emphasized-font-size: 1rem;\n  --typography-title-medium-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-title-medium-emphasized-letter-spacing: 0.15000000596046448px;\n  --typography-title-medium-emphasized-line-height: 1.5rem;\n  --typography-title-medium-font-family: var(--font-family-sans);\n  --typography-title-medium-font-size: 1rem;\n  --typography-title-medium-font-weight: var(--font-weight-medium);\n  --typography-title-medium-letter-spacing: 0.15000000596046448px;\n  --typography-title-medium-line-height: 1.5rem;\n  --typography-title-small-emphasized-font-family: var(--font-family-sans);\n  --typography-title-small-emphasized-font-size: 0.875rem;\n  --typography-title-small-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-title-small-emphasized-letter-spacing: 0.10000000149011612px;\n  --typography-title-small-emphasized-line-height: 1.25rem;\n  --typography-title-small-font-family: var(--font-family-sans);\n  --typography-title-small-font-size: 0.875rem;\n  --typography-title-small-font-weight: var(--font-weight-medium);\n  --typography-title-small-letter-spacing: 0.10000000149011612px;\n  --typography-title-small-line-height: 1.25rem;\n  color-scheme: light dark;\n}\n\n[data-theme='dark'] {\n  --color-error: var(--color-error-80);\n  --color-error-container: var(--color-error-30);\n  --color-inverse-error: var(--color-error-40);\n  --color-inverse-on-surface: var(--color-neutral-20);\n  --color-inverse-primary: var(--color-primary-40);\n  --color-inverse-secondary: var(--color-secondary-40);\n  --color-inverse-surface: var(--color-neutral-90);\n  --color-inverse-tertiary: var(--color-tertiary-40);\n  --color-on-error: var(--color-error-20);\n  --color-on-error-container: var(--color-error-90);\n  --color-on-primary: var(--color-primary-20);\n  --color-on-primary-container: var(--color-primary-90);\n  --color-on-secondary: var(--color-secondary-20);\n  --color-on-secondary-container: var(--color-secondary-90);\n  --color-on-surface: var(--color-neutral-90);\n  --color-on-surface-variant: var(--color-neutral-variant-80);\n  --color-on-tertiary: var(--color-tertiary-20);\n  --color-on-tertiary-container: var(--color-tertiary-90);\n  --color-outline: var(--color-neutral-variant-60);\n  --color-outline-variant: var(--color-neutral-variant-30);\n  --color-primary: var(--color-primary-80);\n  --color-primary-container: var(--color-primary-30);\n  --color-scrim: var(--color-neutral-0);\n  --color-secondary: var(--color-secondary-80);\n  --color-secondary-container: var(--color-secondary-30);\n  --color-shadow: var(--color-neutral-0);\n  --color-surface: var(--color-neutral-10);\n  --color-surface-container: var(--color-neutral-12);\n  --color-surface-container-high: var(--color-neutral-17);\n  --color-surface-container-highest: var(--color-neutral-22);\n  --color-surface-container-low: var(--color-neutral-10);\n  --color-surface-container-lowest: var(--color-neutral-4);\n  --color-surface-dim: var(--color-neutral-6);\n  --color-surface-variant: var(--color-neutral-variant-30);\n  --color-tertiary: var(--color-tertiary-80);\n  --color-tertiary-container: var(--color-tertiary-30);\n  --global-badge-color: var(--color-error-80);\n}\n\n";
-
 const createLinkStyles = (prefix) => i `
   .${r(prefix)}-link {
     border-radius: inherit;
@@ -200,15 +209,6 @@ if (linkStylesheet)
 const textStylesheet = createTextStyles(libraryPrefix).styleSheet;
 if (textStylesheet)
     styleSheets.push(textStylesheet);
-function stringifyStyleSheet(stylesheet) {
-    // Use Array.from() to convert the CSSRuleList to an array
-    return (Array.from(stylesheet.cssRules)
-        // Map each rule to its cssText property
-        .map((rule) => rule.cssText || '')
-        // Join all the rules with a newline character
-        .join('\\n'));
-}
-console.log(stringifyStyleSheet(textStylesheet));
 document.adoptedStyleSheets = styleSheets;
 const loaderConfig = {
     prefix: libraryPrefix,
@@ -220,6 +220,15 @@ const loaderConfig = {
         avatar: {
             CustomElementClass: Avatar,
         },
+        badge: {
+            CustomElementClass: Badge,
+        },
+        divider: {
+            CustomElementClass: Divider,
+        },
+        clock: {
+            importPath: '.' + '/clock.js',
+        },
     },
 };
 new LoaderUtils(loaderConfig).start();