@redvars/peacock 3.2.6 → 3.2.8

package/dist/divider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"divider.js","sources":["../../src/divider/divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './divider.scss';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Divider\n * @tag base-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 * <base-divider style=\"width: 12rem;\">or</base-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"],"names":["LitElement","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,OAAQ,SAAQA,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;QAG8C,IAAA,CAAA,QAAQ,GAAG,KAAK;QAG5D,IAAA,CAAA,cAAc,GAAG,KAAK;IA2BxB;IAzBE,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;;AA/BO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,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/elevation.js

@@ -1,79 +0,0 @@
-import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
-
-var css_248z = i`/**
- * Derived from Material Design Elevation
- * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
- */
-:host,
-.shadow,
-.shadow::before,
-.shadow::after {
-  border-start-start-radius: var(--elevation-container-shape-start-start, var(--elevation-container-shape));
-  border-start-end-radius: var(--elevation-container-shape-start-end, var(--elevation-container-shape));
-  border-end-start-radius: var(--elevation-container-shape-end-start, var(--elevation-container-shape));
-  border-end-end-radius: var(--elevation-container-shape-end-end, var(--elevation-container-shape));
-  corner-shape: var(--elevation-container-shape-variant);
-  inset: 0;
-  position: absolute;
-  transition-duration: inherit;
-  transition-property: inherit;
-  transition-timing-function: inherit;
-}
-
-:host {
-  display: flex;
-  pointer-events: none;
-  transition-property: box-shadow, opacity;
-  --elevation-level: 0;
-  --elevation-color: var(--elevation-color-default, black);
-}
-
-.shadow::before,
-.shadow::after {
-  content: "";
-  transition-property: box-shadow, opacity;
-  --_level: var(--elevation-level);
-  --_shadow-color: var(--elevation-color);
-}
-
-.shadow::before {
-  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);
-  opacity: 0.3;
-}
-
-.shadow::after {
-  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
-  opacity: 0.15;
-}`;
-
-/**
- * @label Elevation
- * @tag base-elevation
- * @rawTag elevation
- *
- * @summary Adds elevation to an element.
- * @overview
- *  - Elevation adds a shadow effect to an element to give it depth.
- *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.
- *
- * @cssprop --elevation-level - Controls the elevation level of the shadow.
- * @cssprop --elevation-color - Controls the color of the shadow.
- *
- * @example
- * ```html
- *   <div style="position: relative; padding: var(--spacing-200);">
- *     <base-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></base-elevation>
- *     Level 2
- *   </div>
- * ```
- * @tags display
- */
-class Elevation extends i$1 {
-    render() {
-        return b `<span class="shadow"></span>`;
-    }
-}
-Elevation.styles = [css_248z];
-
-export { Elevation };
-//# sourceMappingURL=elevation.js.map

package/dist/elevation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"elevation.js","sources":["../../src/elevation/elevation.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\n\n/**\n * @label Elevation\n * @tag base-elevation\n * @rawTag elevation\n *\n * @summary Adds elevation to an element.\n * @overview\n *  - Elevation adds a shadow effect to an element to give it depth.\n *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.\n *\n * @cssprop --elevation-level - Controls the elevation level of the shadow.\n * @cssprop --elevation-color - Controls the color of the shadow.\n *\n * @example\n * ```html\n *   <div style=\"position: relative; padding: var(--spacing-200);\">\n *     <base-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></base-elevation>\n *     Level 2\n *   </div>\n * ```\n * @tags display\n */\nexport class Elevation extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG,MAAO,SAAU,SAAQA,GAAU,CAAA;IAGvC,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,CAA8B;IAC3C;;AAJO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;;;;"}

package/dist/empty-state.js

@@ -1,171 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, A, b } from './lit-element-CA46RFZ_.js';
-import { r } from './state-CV1fRmOT.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;
-}
-
-.empty-state {
-  container: emptystate/inline-size;
-  padding: var(--spacing-100);
-  height: 100%;
-  max-width: var(--container-lg);
-  margin: auto;
-}
-
-.empty-state-container {
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  gap: var(--spacing-500);
-  align-items: center;
-}
-
-.illustration {
-  height: 100%;
-  display: flex;
-}
-.illustration base-icon {
-  --icon-size: 100%;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.content .title {
-  font-family: var(--typography-headline-medium-emphasized-font-family) !important;
-  font-size: var(--typography-headline-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-emphasized-letter-spacing) !important;
-  margin-bottom: var(--spacing-200);
-  color: var(--color-on-surface);
-}
-.content .description {
-  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;
-  margin-bottom: var(--spacing-400);
-  color: var(--color-on-surface-variant);
-}
-
-:host(.content-center) .content {
-  align-items: center;
-}
-
-@container emptystate (min-width: 672px) {
-  .empty-state .illustration {
-    width: 50%;
-  }
-  .empty-state .content {
-    width: 50%;
-  }
-}
-@container emptystate (max-width: 671px) {
-  .empty-state .empty-state-container {
-    flex-direction: column;
-    gap: var(--spacing-200);
-  }
-  .empty-state .empty-state-container .illustration {
-    height: auto;
-    width: 100%;
-    justify-content: center;
-  }
-}`;
-
-/**
- * @label Empty State
- * @name empty-state
- * @description A message that displays when there is no information to display.
- */
-class EmptyState extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.illustration = 'no-document';
-        this.headline = '';
-        this.description = '';
-        this.vertical = false;
-        this.handleResize = () => {
-            // Logic equivalent to Stencil's clientWidth check
-            this.vertical = this.offsetWidth < 768;
-        };
-    }
-    connectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
-        super.connectedCallback();
-        window.addEventListener('resize', this.handleResize);
-        // Initial check
-        this.handleResize();
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize);
-        // eslint-disable-next-line wc/guard-super-call
-        super.disconnectedCallback();
-    }
-    __renderTitle() {
-        if (!this.headline)
-            return A;
-        return b `<div class="title">${this.headline}</div>`;
-    }
-    __renderDescription() {
-        if (!this.description)
-            return A;
-        return b `<div class="description">${this.description}</div>`;
-    }
-    render() {
-        const classes = {
-            'empty-state': true,
-            vertical: this.vertical,
-        };
-        // Resolving asset paths in Lit typically uses import.meta.url or absolute paths
-        const illustrationPath = new URL(`./assets/images/empty-state/${this.illustration}.svg`, import.meta.url).href;
-        return b `
-      <div class="${e(classes)}">
-        <div class="empty-state-container">
-          <div class="illustration">
-            <base-icon src="${illustrationPath}"></base-icon>
-          </div>
-
-          <div class="content">
-            ${this.__renderTitle()} ${this.__renderDescription()}
-            <div class="actions">
-              <slot name="actions"></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-}
-// Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z];
-__decorate([
-    n({ type: String, reflect: true })
-], EmptyState.prototype, "illustration", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], EmptyState.prototype, "headline", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], EmptyState.prototype, "description", void 0);
-__decorate([
-    r()
-], EmptyState.prototype, "vertical", void 0);
-
-export { EmptyState };
-//# sourceMappingURL=empty-state.js.map

package/dist/empty-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"empty-state.js","sources":["../../src/empty-state/empty-state.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './empty-state.scss';\n\n/**\n * @label Empty State\n * @name empty-state\n * @description A message that displays when there is no information to display.\n */\nexport class EmptyState extends LitElement {\n  // Lit handles styles in a static property for better performance\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  illustration: 'no-document' | 'page' | 'search' = 'no-document';\n\n  @property({ type: String, reflect: true })\n  headline = '';\n\n  @property({ type: String, reflect: true })\n  description = '';\n\n  @state()\n  private vertical = false;\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    window.addEventListener('resize', this.handleResize);\n    // Initial check\n    this.handleResize();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n    // eslint-disable-next-line wc/guard-super-call\n    super.disconnectedCallback();\n  }\n\n  private handleResize = () => {\n    // Logic equivalent to Stencil's clientWidth check\n    this.vertical = this.offsetWidth < 768;\n  };\n\n  __renderTitle() {\n    if (!this.headline) return nothing;\n    return html`<div class=\"title\">${this.headline}</div>`;\n  }\n\n  __renderDescription() {\n    if (!this.description) return nothing;\n    return html`<div class=\"description\">${this.description}</div>`;\n  }\n\n  protected render() {\n    const classes = {\n      'empty-state': true,\n      vertical: this.vertical,\n    };\n\n    // Resolving asset paths in Lit typically uses import.meta.url or absolute paths\n    const illustrationPath = new URL(\n      `./assets/images/empty-state/${this.illustration}.svg`,\n      import.meta.url,\n    ).href;\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <div class=\"empty-state-container\">\n          <div class=\"illustration\">\n            <base-icon src=\"${illustrationPath}\"></base-icon>\n          </div>\n\n          <div class=\"content\">\n            ${this.__renderTitle()} ${this.__renderDescription()}\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;AAIG;AACG,MAAO,UAAW,SAAQA,GAAU,CAAA;AAA1C,IAAA,WAAA,GAAA;;QAKE,IAAA,CAAA,YAAY,GAAsC,aAAa;QAG/D,IAAA,CAAA,QAAQ,GAAG,EAAE;QAGb,IAAA,CAAA,WAAW,GAAG,EAAE;QAGR,IAAA,CAAA,QAAQ,GAAG,KAAK;QAgBhB,IAAA,CAAA,YAAY,GAAG,MAAK;;YAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG;AACxC,QAAA,CAAC;IAyCH;IA1DE,iBAAiB,GAAA;;QAEf,KAAK,CAAC,iBAAiB,EAAE;QACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEpD,IAAI,CAAC,YAAY,EAAE;IACrB;IAEA,oBAAoB,GAAA;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEvD,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAOA,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAOC,CAAO;AAClC,QAAA,OAAOC,CAAI,CAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,QAAQ,QAAQ;IACxD;IAEA,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,WAAW;AAAE,YAAA,OAAOD,CAAO;AACrC,QAAA,OAAOC,CAAI,CAAA,CAAA,yBAAA,EAA4B,IAAI,CAAC,WAAW,QAAQ;IACjE;IAEU,MAAM,GAAA;AACd,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;AAGD,QAAA,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAC9B,CAAA,4BAAA,EAA+B,IAAI,CAAC,YAAY,MAAM,EACtD,MAAM,CAAC,IAAI,CAAC,GAAG,CAChB,CAAC,IAAI;AAEN,QAAA,OAAOA,CAAI,CAAA;oBACKC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;8BAGP,gBAAgB,CAAA;;;;AAIhC,YAAA,EAAA,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE;;;;;;;KAO3D;IACH;;AAxEA;AACO,UAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACuB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAGhE,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC3B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGd,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACxB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAGT,UAAA,CAAA;AADP,IAAAC,CAAK;AACmB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/field.js

@@ -1,416 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b, A } 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 {
-  --field-height: unset;
-  --field-padding-block: unset;
-}
-
-.field {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  --_container-shape-start-start: var(--field-container-shape-start-start, var(--shape-corner-extra-small));
-  --_container-shape-start-end: var(--field-container-shape-start-end, var(--shape-corner-extra-small));
-  --_container-shape-end-start: var(--field-container-shape-end-start, var(--shape-corner-extra-small));
-  --_container-shape-end-end: var(--field-container-shape-end-end, var(--shape-corner-extra-small));
-  --_container-color: var(--field-container-color);
-  --_outline-width: var(--field-outline-width, 0.0675rem);
-  --_outline-color: var(--field-outline-color, var(--color-outline));
-  --_input-text-color: var(--field-label-text-color, var(--color-on-surface));
-  --_helper-text-color: var(--field-helper-text-color, var(--color-on-surface-variant));
-  --_helper-text-opacity: unset;
-  --_label-text-color: var(--field-label-text-color, var(--color-primary));
-}
-.field .field-header {
-  display: flex;
-  align-items: center;
-  margin-block-end: var(--spacing-100);
-  justify-content: space-between;
-  gap: var(--spacing-100);
-}
-.field .field-header .label {
-  position: relative;
-  font-family: var(--typography-body-small-font-family) !important;
-  font-size: var(--typography-body-small-font-size) !important;
-  font-weight: var(--typography-body-small-font-weight) !important;
-  line-height: var(--typography-body-small-line-height) !important;
-  letter-spacing: var(--typography-body-small-letter-spacing) !important;
-  color: var(--_label-text-color);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.field .field-header .label .required {
-  color: var(--color-error);
-  padding-inline-start: var(--spacing-025);
-}
-.field .field-body {
-  position: relative;
-  display: flex;
-  cursor: text;
-}
-.field .field-body .outline {
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--_outline-width) solid var(--_outline-color);
-  opacity: var(--_outline-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-}
-.field .field-body .background {
-  position: absolute;
-  z-index: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-}
-.field .field-body .field-content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  height: var(--field-height, 3.5rem);
-  padding-block: var(--field-padding-block);
-  z-index: 1;
-}
-.field .field-body .field-content .input-wrapper {
-  flex: 1;
-  padding-inline: var(--spacing-200);
-  position: relative;
-}
-.field .field-body .field-content .input-wrapper .outlined-label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  padding-inline: var(--spacing-200);
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_input-text-color);
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-}
-.field .field-body .field-content .input-wrapper .outlined-slot-container {
-  opacity: 0;
-}
-.field .field-body .field-content slot::slotted(*) {
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_input-text-color);
-  --icon-size: 1.25rem;
-  --icon-color: var(--_input-text-color);
-}
-.field .field-body .field-content slot::slotted(input::placeholder) {
-  color: var(--color-on-surface-variant);
-}
-.field .field-body .field-content .slot-start-wrapper.has-content {
-  margin-inline-start: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.field .field-body .field-content .slot-end-wrapper.has-content {
-  margin-inline-end: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.field .field-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-200);
-  margin-block-start: var(--spacing-050);
-  padding-inline: var(--spacing-200);
-}
-.field .field-footer .helper, .field .field-footer .text-count {
-  position: relative;
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  color: var(--_helper-text-color);
-  opacity: var(--_helper-text-opacity);
-}
-.field.focused {
-  --_outline-color: var(--color-primary);
-  --_outline-width: 0.125rem;
-}
-.field.has-error {
-  --_label-text-color: var(--color-error);
-  --_outline-color: var(--color-error);
-  --_helper-text-color: var(--color-error);
-  --_input-text-color: var(--color-error);
-}
-.field.has-warning {
-  --_label-text-color: var(--color-warning);
-  --_outline-color: var(--color-warning);
-  --_helper-text-color: var(--color-warning);
-  --_input-text-color: var(--color-warning);
-}
-.field.disabled .label {
-  opacity: 0.38;
-}
-.field.disabled {
-  --_input-text-color: var(--color-on-surface-variant);
-  --_outline-opacity: 0.38;
-  --_helper-text-opacity: 0.38;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  cursor: not-allowed;
-}
-.field.readonly {
-  cursor: initial;
-  --_input-text-color: var(--color-on-surface-variant);
-  --_outline-opacity: 0.38;
-  --_helper-text-opacity: 0.38;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.38;
-}
-.field.show-skeleton .skeleton {
-  display: block;
-}
-
-.skeleton {
-  display: none;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  left: 0;
-  --skeleton-shape-start-start: var(--shape-corner-extra-small);
-  --skeleton-shape-start-end: var(--shape-corner-extra-small);
-  --skeleton-shape-end-start: var(--shape-corner-extra-small);
-  --skeleton-shape-end-end: var(--shape-corner-extra-small);
-}`;
-
-class Field extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.help = '';
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.skeleton = false;
-        this.helperText = '';
-        this.error = false;
-        this.errorText = '';
-        this.warning = false;
-        this.warningText = '';
-        this.textCount = '';
-        this.focused = false;
-        this.populated = false;
-        this.variant = 'default';
-        this.slotStartHasContent = false;
-        this.slotEndHasContent = false;
-    }
-    firstUpdated() {
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-start-wrapper slot'), hasContent => {
-            this.slotStartHasContent = hasContent;
-            this.requestUpdate();
-        });
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('.slot-end-wrapper slot'), hasContent => {
-            this.slotEndHasContent = hasContent;
-            this.requestUpdate();
-        });
-    }
-    __handleClick() {
-        // @ts-ignore
-        this.host?.focus?.();
-    }
-    __renderInputSlot() {
-        if (this.variant === 'outlined') {
-            if (this.populated || this.focused)
-                return b `<slot></slot>`;
-            return b `
-        <label class="outlined-label">${this.label}</label>
-        <div class="outlined-slot-container">
-          <slot></slot>
-        </div>
-      `;
-        }
-        return b `<slot></slot>`;
-    }
-    __renderFieldHeader() {
-        if (!this.label)
-            return A;
-        if (this.variant === 'outlined' && !this.populated && !this.focused) {
-            return A;
-        }
-        return b `<div class="field-header">
-      <label class="label">
-        ${this.label}${this.required
-            ? b `<span class="required">*</span>`
-            : A}
-        <base-skeleton class="skeleton"></base-skeleton>
-      </label>
-    </div>`;
-    }
-    render() {
-        const classes = {
-            field: true,
-            required: this.required,
-            disabled: this.disabled,
-            'show-skeleton': this.skeleton,
-            'has-error': this.error,
-            'has-warning': this.warning,
-            focused: this.focused,
-            readonly: this.readonly,
-            [`variant-${this.variant}`]: true,
-            populated: this.populated,
-        };
-        return b `
-      <div class=${e(classes)}>
-        ${this.__renderFieldHeader()}
-
-        <div class="field-body" @click=${this.__handleClick}>
-          <div class="outline"></div>
-          <div class="background"></div>
-          <base-skeleton class="skeleton"></base-skeleton>
-
-          <div class="field-content">
-            <div
-              class=${e({
-            'slot-start-wrapper': true,
-            'has-content': this.slotStartHasContent,
-        })}
-            >
-              <slot name="field-start"></slot>
-            </div>
-
-            <div class="input-wrapper">${this.__renderInputSlot()}</div>
-
-            <div
-              class=${e({
-            'slot-end-wrapper': true,
-            'has-content': this.slotEndHasContent,
-        })}
-            >
-              <slot name="field-end"></slot>
-            </div>
-          </div>
-        </div>
-
-        ${this.__renderFieldFooter()}
-      </div>
-    `;
-    }
-    __renderFieldFooter() {
-        if (!this.textCount &&
-            !this.helperText &&
-            !this.errorText &&
-            !this.warningText)
-            return A;
-        return b `<div class="field-footer">
-      ${this.__renderHelperText()} ${this.__renderWordCount()}
-    </div>`;
-    }
-    __renderHelperText() {
-        if (this.error)
-            return b `<div class="helper">${this.errorText}</div>`;
-        if (this.warning)
-            return b `<div class="helper">${this.warningText}</div>`;
-        if (this.helperText || this.helperText === '')
-            return b `<div class="helper">${this.helperText}</div>`;
-        return A;
-    }
-    __renderWordCount() {
-        if (!this.textCount)
-            return A;
-        return b `<div class="text-count">${this.textCount}</div>`;
-    }
-}
-Field.styles = [css_248z];
-__decorate([
-    n({ type: String })
-], Field.prototype, "label", void 0);
-__decorate([
-    n({ type: String })
-], Field.prototype, "help", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "required", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Field.prototype, "disabled", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Field.prototype, "readonly", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "skeleton", void 0);
-__decorate([
-    n({ type: String, attribute: 'helper-text' })
-], Field.prototype, "helperText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "error", void 0);
-__decorate([
-    n({ type: String, attribute: 'error-text' })
-], Field.prototype, "errorText", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "warning", void 0);
-__decorate([
-    n({ type: String, attribute: 'warning-text' })
-], Field.prototype, "warningText", void 0);
-__decorate([
-    n({ type: String, attribute: 'text-count' })
-], Field.prototype, "textCount", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "focused", void 0);
-__decorate([
-    n({ type: Boolean })
-], Field.prototype, "populated", void 0);
-__decorate([
-    n({ type: String })
-], Field.prototype, "variant", void 0);
-__decorate([
-    n({ type: Object })
-], Field.prototype, "host", void 0);
-__decorate([
-    r()
-], Field.prototype, "slotStartHasContent", void 0);
-__decorate([
-    r()
-], Field.prototype, "slotEndHasContent", void 0);
-
-export { Field };
-//# sourceMappingURL=field.js.map