@redvars/peacock 3.2.6 → 3.2.8

package/dist/chip.js

@@ -1,303 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b, A } from './lit-element-CA46RFZ_.js';
-import { e } from './class-map-BmCohX9p.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z$2 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: inline-block;
-  --chip-container-color: var(--color-surface);
-  --chip-label-text-color: var(--color-on-surface);
-  --chip-outline-color: var(--color-outline);
-  --chip-container-shape: var(--shape-corner-small);
-}
-
-:host-context([data-theme=dark]) {
-  --chip-hover-color: var(--color-primary-30);
-}
-
-.chip {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: var(--chip-height, var(--_chip-height, 2rem));
-  padding: 0 var(--_container-padding, 1rem);
-  width: 100%;
-  border-radius: var(--chip-container-shape);
-}
-.chip .tag-content {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--chip-label-text-color);
-  font-family: var(--typography-label-small-font-family) !important;
-  font-size: var(--typography-label-small-font-size) !important;
-  font-weight: var(--typography-label-small-font-weight) !important;
-  line-height: var(--typography-label-small-line-height) !important;
-  letter-spacing: var(--typography-label-small-letter-spacing) !important;
-  gap: 0.5rem;
-}
-.chip .tag-content .tag-image {
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 100%;
-  background: var(--chip-hover-color);
-}
-.chip .close-btn {
-  border-radius: 12px;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: transparent;
-  line-height: 0;
-  cursor: pointer;
-  --icon-size: 1rem;
-}
-.chip .close-btn .close-btn-icon {
-  --icon-size: 1rem;
-}
-.chip .close-btn:hover {
-  background: var(--chip-hover-color);
-}
-.chip .close-btn:hover .close-btn-icon {
-  color: var(--background);
-}
-.chip {
-  /**
-   * Tag background layers
-   */
-}
-.chip .background {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--chip-container-color);
-  pointer-events: none;
-}
-.chip .outline {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  border: 1px solid var(--chip-outline-color);
-}
-.chip .elevation {
-  --elevation-level: 0;
-  transition-duration: 280ms;
-  border-radius: inherit;
-}
-.chip.dismissible .tag-content {
-  padding-inline-end: 0.25rem;
-}
-.chip.selected {
-  color: var(--background);
-  background: var(--chip-hover-color);
-}
-.chip.selected .close-btn-icon {
-  color: var(--background);
-}`;
-
-var css_248z$1 = i`:host([color=red]) {
-  --chip-container-color: var(--color-red-container);
-  --chip-outline-color: var(--color-on-red-container);
-}
-
-:host([color=green]) {
-  --chip-container-color: var(--color-green-container);
-  --chip-label-text-color: var(--color-on-green-container);
-  --chip-outline-color: var(--color-on-green-container);
-}
-
-:host([color=blue]) {
-  --chip-container-color: var(--color-blue-container);
-  --chip-label-text-color: var(--color-on-blue-container);
-  --chip-outline-color: var(--color-on-blue-container);
-}
-
-:host([color=yellow]) {
-  --chip-container-color: var(--color-yellow-container);
-  --chip-label-text-color: var(--color-on-yellow-container);
-  --chip-outline-color: var(--color-on-yellow-container);
-}
-
-:host([color=purple]) {
-  --chip-container-color: var(--color-purple-container);
-  --chip-label-text-color: var(--color-on-purple-container);
-  --chip-outline-color: var(--color-on-purple-container);
-}`;
-
-var css_248z = i`.tag {
-  font-family: var(--font-family-sans) !important;
-}
-
-.tag.size-xs,
-.tag.size-extra-small {
-  --_button-height: 2rem;
-  --_button-icon-size: 1.25rem;
-  --_container-padding: 0.75rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-.tag.size-sm,
-.tag.size-small {
-  --_button-height: 2.5rem;
-  --_button-icon-size: 1.25rem;
-  --_container-padding: 1rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
-  --_button-icon-size: 1.5rem;
-  --_container-padding: 1.5rem;
-  font-size: 1rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.5rem !important;
-  letter-spacing: 0.15px !important;
-}
-
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
-  --_button-icon-size: 2rem;
-  --_container-padding: 3rem;
-  font-size: 1.5rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2rem !important;
-  letter-spacing: 0 !important;
-}
-
-.button.size-xl {
-  --_button-height: 8.5rem;
-  --_button-icon-size: 2.5rem;
-  --_container-padding: 4rem;
-  font-size: 2rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2.5rem !important;
-  letter-spacing: 0 !important;
-}`;
-
-/**
- * @label Chip
- * @tag base-chip
- * @rawTag chip
- * @summary
- *
- * @example
- * ```html
- * <base-tag>Link</base-tag>
- * ```
- * @tags display
- */
-class Chip extends i$1 {
-    constructor() {
-        super(...arguments);
-        /** If true, the tag will have a close icon. */
-        this.dismissible = false;
-        /** Tag color. */
-        this.color = 'default';
-        /** Tag value. */
-        this.value = '';
-        /** If true, the tag will be selected. */
-        this.selected = false;
-    }
-    _dismissClickHandler(e) {
-        e.stopPropagation();
-        const detail = { value: this.value || this.textContent?.trim() };
-        // Custom Event: tag--dismiss
-        this.dispatchEvent(new CustomEvent('tag--dismiss', {
-            detail,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _renderCloseButton() {
-        if (!this.dismissible)
-            return null;
-        return b `
-      <button
-        class="close-btn"
-        @click=${this._dismissClickHandler}
-        aria-label="Dismiss"
-      >
-        <base-icon class="close-btn-icon" name="close"></base-icon>
-      </button>
-    `;
-    }
-    _renderImage() {
-        if (this.imageSrc)
-            return b `<img
-        src=${this.imageSrc}
-        class="tag-image"
-        alt="Tag Logo"
-      />`;
-        return A;
-    }
-    render() {
-        const classes = {
-            chip: true,
-            selected: this.selected,
-            dismissible: this.dismissible,
-            [`color-${this.color}`]: true,
-        };
-        return b `
-      <div class="${e(classes)}">
-        <base-elevation class="elevation"></base-elevation>
-        <div class="background"></div>
-        <div class="outline"></div>
-
-        <div class="tag-content">
-          <slot name="icon"></slot>
-          <slot></slot>
-          ${this._renderCloseButton()}
-        </div>
-      </div>
-    `;
-    }
-}
-// Define styles (Lit handles Scoping via Shadow DOM by default)
-// You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$2, css_248z$1, css_248z];
-__decorate([
-    n({ type: Boolean })
-], Chip.prototype, "dismissible", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "color", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "value", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Chip.prototype, "selected", void 0);
-__decorate([
-    n({ type: String })
-], Chip.prototype, "imageSrc", void 0);
-
-export { Chip };
-//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chip.js","sources":["../../src/chip/chip/chip.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './chip.scss';\nimport colorStyles from './chip-colors.scss';\nimport sizeStyles from './chip-sizes.scss';\n\n/**\n * @label Chip\n * @tag base-chip\n * @rawTag chip\n * @summary\n *\n * @example\n * ```html\n * <base-tag>Link</base-tag>\n * ```\n * @tags display\n */\nexport class Chip extends LitElement {\n  // Define styles (Lit handles Scoping via Shadow DOM by default)\n  // You would typically import your tag.scss.js here or use the css tag\n  static styles = [styles, colorStyles, sizeStyles];\n\n  /** If true, the tag will have a close icon. */\n  @property({ type: Boolean }) dismissible = false;\n\n  /** Tag color. */\n  @property({ type: String, reflect: true }) color?:\n    | 'default'\n    | 'blue'\n    | 'green'\n    | 'red'\n    | 'yellow' = 'default';\n\n  /** Tag value. */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** If true, the tag will be selected. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Image source. */\n  @property({ type: String }) imageSrc?: string;\n\n  private _dismissClickHandler(e: MouseEvent) {\n    e.stopPropagation();\n    const detail = { value: this.value || this.textContent?.trim() };\n\n    // Custom Event: tag--dismiss\n    this.dispatchEvent(\n      new CustomEvent('tag--dismiss', {\n        detail,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderCloseButton() {\n    if (!this.dismissible) return null;\n\n    return html`\n      <button\n        class=\"close-btn\"\n        @click=${this._dismissClickHandler}\n        aria-label=\"Dismiss\"\n      >\n        <base-icon class=\"close-btn-icon\" name=\"close\"></base-icon>\n      </button>\n    `;\n  }\n\n  private _renderImage() {\n    if (this.imageSrc)\n      return html`<img\n        src=${this.imageSrc}\n        class=\"tag-image\"\n        alt=\"Tag Logo\"\n      />`;\n    return nothing;\n  }\n\n  render() {\n    const classes = {\n      chip: true,\n      selected: this.selected,\n      dismissible: this.dismissible,\n      [`color-${this.color}`]: true,\n    };\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <base-elevation class=\"elevation\"></base-elevation>\n        <div class=\"background\"></div>\n        <div class=\"outline\"></div>\n\n        <div class=\"tag-content\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n          ${this._renderCloseButton()}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","styles","colorStyles","sizeStyles","property"],"mappings":"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"}

package/dist/class-map-BmCohX9p.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"class-map-BmCohX9p.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/clock.js

@@ -1,83 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: inline-block;
-}
-
-.current-time {
-  font-family: var(--typography-body-medium-font-family) !important;
-  font-size: var(--typography-body-medium-font-size) !important;
-  font-weight: var(--typography-body-medium-font-weight) !important;
-  line-height: var(--typography-body-medium-line-height) !important;
-  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
-}`;
-
-class ClockController {
-    constructor(host, timeout = 1000) {
-        this.value = new Date();
-        this.host = host;
-        this.host.addController(this);
-        this.timeout = timeout;
-    }
-    hostConnected() {
-        // Start a timer when the host is connected
-        this._timerID = setInterval(() => {
-            this.value = new Date();
-            // Update the host with new value
-            this.host.requestUpdate();
-        }, this.timeout);
-    }
-    hostDisconnected() {
-        // Clear the timer when the host is disconnected
-        clearInterval(this._timerID);
-        this._timerID = undefined;
-    }
-}
-
-/**
- * @label Clock
- * @tag base-clock
- * @rawTag clock
- *
- * @summary Displays the current time in a given timezone.
- * @overview
- *  - Clocks are used to display the current time in a specified timezone.
- *  - They can be displayed in various formats, including 12-hour and 24-hour time.
- *
- * @example
- * ```html
- * <base-clock></base-clock>
- * ```
- * @tags display
- */
-class Clock extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.clockController = new ClockController(this, 100);
-    }
-    __formatDate(date) {
-        return date.toLocaleTimeString('en-US', {
-            timeZone: this.timezone,
-        });
-    }
-    render() {
-        const currentDate = this.__formatDate(this.clockController.value);
-        return b `<div class="current-time">${currentDate}</div>`;
-    }
-}
-Clock.styles = [css_248z];
-__decorate([
-    n()
-], Clock.prototype, "timezone", void 0);
-
-export { Clock };
-//# sourceMappingURL=clock.js.map

package/dist/clock.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clock.js","sources":["../../src/clock/ClockController.ts","../../src/clock/clock.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class ClockController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  value = new Date();\n\n  timeout: number;\n\n  private _timerID?: any;\n\n  constructor(host: ReactiveControllerHost, timeout = 1000) {\n    this.host = host;\n    this.host.addController(this);\n    this.timeout = timeout;\n  }\n\n  hostConnected() {\n    // Start a timer when the host is connected\n    this._timerID = setInterval(() => {\n      this.value = new Date();\n      // Update the host with new value\n      this.host.requestUpdate();\n    }, this.timeout);\n  }\n\n  hostDisconnected() {\n    // Clear the timer when the host is disconnected\n    clearInterval(this._timerID);\n    this._timerID = undefined;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './clock.scss';\nimport { ClockController } from './ClockController.js';\n\n/**\n * @label Clock\n * @tag base-clock\n * @rawTag clock\n *\n * @summary Displays the current time in a given timezone.\n * @overview\n *  - Clocks are used to display the current time in a specified timezone.\n *  - They can be displayed in various formats, including 12-hour and 24-hour time.\n *\n * @example\n * ```html\n * <base-clock></base-clock>\n * ```\n * @tags display\n */\nexport class Clock extends LitElement {\n  static styles = [styles];\n\n  clockController = new ClockController(this, 100);\n\n  @property() timezone?: string;\n\n  __formatDate(date: Date) {\n    return date.toLocaleTimeString('en-US', {\n      timeZone: this.timezone,\n    });\n  }\n\n  render() {\n    const currentDate = this.__formatDate(this.clockController.value);\n    return html`<div class=\"current-time\">${currentDate}</div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAEa,eAAe,CAAA;AAS1B,IAAA,WAAA,CAAY,IAA4B,EAAE,OAAO,GAAG,IAAI,EAAA;AANxD,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,IAAI,EAAE;AAOhB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IACxB;IAEA,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;;AAEvB,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;IAClB;IAEA,gBAAgB,GAAA;;AAEd,QAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;AACD;;AC1BD;;;;;;;;;;;;;;;AAeG;AACG,MAAO,KAAM,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QAGE,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC;IAclD;AAVE,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AACjE,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,WAAW,QAAQ;IAC7D;;AAfO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/container.js

@@ -1,135 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
-import { e } from './class-map-BmCohX9p.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-}
-
-.container-wrapper {
-  container: containerwrapper/inline-size;
-}
-.container-wrapper.size-max .container {
-  max-width: var(--container-max);
-}
-.container-wrapper.size-xl .container {
-  max-width: var(--container-xl);
-}
-.container-wrapper.size-sm .container {
-  max-width: var(--container-sm);
-}
-.container-wrapper.size-md .container {
-  max-width: var(--container-md);
-}
-.container-wrapper.size-lg .container {
-  max-width: var(--container-lg);
-}
-
-.container {
-  margin: auto;
-  width: 100%;
-}
-.container .content {
-  padding: v(--spacing-200);
-}
-
-:host(.debug) {
-  border-width: 0 1px;
-  border-color: var(--color-red);
-  border-style: solid;
-  background: var(--color-red-50);
-}
-:host(.debug) .container {
-  border-width: 0 1px;
-  border-color: var(--color-blue);
-  border-style: solid;
-  background: var(--color-blue-100);
-}
-:host(.debug) .container .content {
-  border-width: 0 1px;
-  border-color: var(--color-green);
-  border-style: solid;
-  background: var(--color-green-100);
-}
-
-.content {
-  margin-inline: 0;
-}
-
-@container containerwrapper (min-width: 672px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
-}
-@container containerwrapper (min-width: 1056px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
-}
-@container containerwrapper (min-width: 1312px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
-}
-@container containerwrapper (min-width: 1584px) {
-  .content {
-    margin-inline: var(--spacing-300);
-  }
-}`;
-
-/**
- * @label Container
- * @tag base-container
- * @rawTag container
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
- *
- * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
- * @cssprop --avatar-background-color - Controls the color of the avatar.
- * @cssprop --avatar-size - Controls the size of the avatar.
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
- *
- *
- * @example
- * ```html
- * <base-container>Container</base-avatar>
- * ```
- *
- * @tags display
- */
-class Container extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.size = 'full';
-    }
-    render() {
-        const wrapperClasses = {
-            'container-wrapper': true,
-            [`size-${this.size}`]: true,
-        };
-        return b `
-      <div class=${e(wrapperClasses)}>
-        <div class="container">
-          <div class="content">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-}
-Container.styles = [css_248z];
-__decorate([
-    n({ type: String, reflect: true })
-], Container.prototype, "size", void 0);
-
-export { Container };
-//# sourceMappingURL=container.js.map

package/dist/container.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"container.js","sources":["../../src/container/container.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './container.scss';\n\ntype ContainerSize = 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';\n\n/**\n * @label Container\n * @tag base-container\n * @rawTag container\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <base-container>Container</base-avatar>\n * ```\n *\n * @tags display\n */\nexport class Container extends LitElement {\n  @property({ type: String, reflect: true })\n  size: ContainerSize = 'full';\n\n  static styles = [styles];\n\n  render() {\n    const wrapperClasses = {\n      'container-wrapper': true,\n      [`size-${this.size}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        <div class=\"container\">\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,SAAU,SAAQA,GAAU,CAAA;AAAzC,IAAA,WAAA,GAAA;;QAEE,IAAA,CAAA,IAAI,GAAkB,MAAM;IAoB9B;IAhBE,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,cAAc,CAAC,CAAA;;;;;;;KAOtC;IACH;;AAjBO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAFxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACZ,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/directive-Cuw6h7YA.js

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t={ATTRIBUTE:1,CHILD:2,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
-
-export { e, i, t };
-//# sourceMappingURL=directive-Cuw6h7YA.js.map

package/dist/directive-Cuw6h7YA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"directive-Cuw6h7YA.js","sources":["../node_modules/lit-html/directive.js"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};\n//# sourceMappingURL=directive.js.map\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACK,MAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAwC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/divider.js

@@ -1,126 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
-import { r } from './state-CV1fRmOT.js';
-import { e } from './class-map-BmCohX9p.js';
-import { observerSlotChangesWithCallback } from './utils.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-  --divider-color: var(--color-outline-variant);
-  --divider-spacing: var(--spacing-200);
-  --divider-line-thinkness: 2px;
-}
-
-.divider {
-  display: flex;
-  margin: 0;
-  font-family: var(--typography-body-medium-font-family) !important;
-  font-size: var(--typography-body-medium-font-size) !important;
-  font-weight: var(--typography-body-medium-font-weight) !important;
-  line-height: var(--typography-body-medium-line-height) !important;
-  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
-  color: var(--divider-color);
-  --_line-border: var(--divider-line-thinkness) solid var(--divider-color);
-}
-.divider:not(.vertical) {
-  width: 100%;
-  padding: var(--divider-spacing) 0;
-  align-items: center;
-  justify-content: center;
-}
-.divider:not(.vertical) .line {
-  width: 100%;
-  border-top: var(--_line-border);
-}
-.divider:not(.vertical).slot-has-content .slot-container {
-  padding: 0 var(--spacing-200);
-}
-.divider.vertical {
-  height: 100%;
-  padding: 0 var(--divider-spacing);
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.divider.vertical .line {
-  height: 100%;
-  border-right: var(--_line-border);
-}
-.divider.vertical.slot-has-content .slot-container {
-  padding: var(--spacing-200) 0;
-}
-
-:host(:not([vertical])) {
-  width: auto;
-}
-
-:host([vertical]) {
-  height: auto;
-}`;
-
-/**
- * @label Divider
- * @tag base-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
- * <base-divider style="width: 12rem;">or</base-divider>
- * ```
- * @tags display
- */
-class Divider extends i$1 {
-    constructor() {
-        super(...arguments);
-        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.styles = [css_248z];
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Divider.prototype, "vertical", void 0);
-__decorate([
-    r()
-], Divider.prototype, "slotHasContent", void 0);
-
-export { Divider };
-//# sourceMappingURL=divider.js.map