@cupra/ui-kit 1.1.0-canary.8 → 2.0.0-canary.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.1.0-canary.8",
+  "version": "2.0.0-canary.16",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -18,28 +18,60 @@
   },
   "homepage": "",
   "type": "module",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs"
     },
+    "./*": {
+      "types": "./dist/types/components/*/*.d.ts",
+      "import": "./dist/esm/components/*/*.js",
+      "require": "./dist/cjs/components/*/*.cjs"
+    },
+    "./utils/*": {
+      "types": [
+        "./dist/types/utils/*.d.ts",
+        "./dist/types/utils/*/*.d.ts"
+      ],
+      "import": [
+        "./dist/esm/utils/*.js",
+        "./dist/esm/utils/*/*.js"
+      ],
+      "require": [
+        "./dist/cjs/utils/*.cjs",
+        "./dist/cjs/utils/*/*.cjs"
+      ]
+    },
+    "./types/*": "./dist/types/components/*/*.types.d.ts",
     "./react": {
-      "import": "./dist-react/index.js",
-      "types": "./dist-react/index.d.ts"
+      "types": "./dist-react/types/index.d.ts",
+      "import": "./dist-react/esm/index.js",
+      "require": "./dist-react/cjs/index.cjs"
     },
     "./react/*": {
-      "import": "./dist-react/components/*/*.js",
-      "types": "./dist-react/components/*/*.d.ts"
+      "types": "./dist-react/types/components/*/*.d.ts",
+      "import": "./dist-react/esm/components/*/*.js",
+      "require": "./dist-react/cjs/components/*/*.cjs"
     },
-    "./*": {
-      "import": "./dist/components/*/*.js",
-      "types": "./dist/components/*/*.d.ts"
+    "./react/utils/*": {
+      "types": [
+        "./dist-react/types/utils/*.d.ts",
+        "./dist-react/types/utils/*/*.d.ts"
+      ],
+      "import": [
+        "./dist-react/esm/utils/*.js",
+        "./dist-react/esm/utils/*/*.js"
+      ],
+      "require": [
+        "./dist-react/cjs/utils/*.cjs",
+        "./dist-react/cjs/utils/*/*.cjs"
+      ]
     },
-    "./types/*": "./dist/components/*/*.types.d.ts",
-    "./utils/*": "./dist/utils/*.js",
-    "./react/types/*": "./dist-react/components/*/*.types.d.ts",
-    "./react/utils/*": "./dist-react/utils/*.js"
+    "./react/types/*": "./dist-react/types/components/*/*.types.d.ts"
   },
   "files": [
     "LICENSE",
@@ -110,9 +142,9 @@
     "build-ts": "tsc -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.json",
     "build-ts:react": "tsc -p tsconfig.react.json && tsc-alias -p tsconfig.react.json",
     "build-assets": "postcss src/styles/**/theme.css --dir public/assets/styles --base src/styles && node scripts/build-component-styles/build-component-styles.js",
-    "build": "pnpm build-assets && pnpm clean-dist && pnpm build-ts && vite build --mode production",
+    "build": "pnpm build-assets && pnpm clean-dist && pnpm build-ts && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false",
     "build-cdn": "pnpm build-assets && pnpm clean-dist-cdn && vite build --config vite.cdn.config.js --mode production",
-    "build:react": "pnpm build-assets && pnpm clean-dist:react && pnpm build-ts:react && vite build --config vite.react.config.js --mode production",
+    "build:react": "pnpm build-assets && pnpm clean-dist:react && pnpm build-ts:react && BUILD_FORMAT=esm vite build --config vite.react.config.js --emptyOutDir false && BUILD_FORMAT=cjs vite build --config vite.react.config.js --emptyOutDir false",
     "analyze": "pnpm clean-dist && pnpm build-ts && ANALYZE=true  vite build --mode production",
     "analyze:react": "pnpm clean-dist:react && pnpm build-ts:react && ANALYZE=true vite build --config vite.react.config.js --mode production",
     "build-storybook": "storybook build",

package/dist/components/ds-button/styles/common.styles.js

@@ -1,116 +0,0 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const e = t`
-    :host {
-        display: contents;
-    }
-
-    .button {
-        text-decoration: none;
-        user-select: none;
-        display: inline-flex;
-        box-sizing: border-box;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        outline-style: solid;
-        max-width: 100%;
-    }
-
-    .button.full-width {
-        width: 100%;
-    }
-`, s = t`
-    .text.container {
-        display: inline-flex;
-    }
-
-    .container {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-`, l = t`
-    .loading-dots {
-        display: inline-flex;
-        align-items: baseline;
-    }
-
-    .loading-dots span {
-        animation-duration: 1.5s;
-        animation-iteration-count: infinite;
-    }
-
-    .loading-dots span:nth-child(1) {
-        animation-name: dot1;
-    }
-
-    .loading-dots span:nth-child(2) {
-        animation-name: dot2;
-    }
-
-    .loading-dots span:nth-child(3) {
-        animation-name: dot3;
-    }
-
-    @keyframes dot1 {
-        0% {
-            opacity: 0;
-        }
-
-        20% {
-            opacity: 0;
-        }
-
-        30% {
-            opacity: 1;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-
-    @keyframes dot2 {
-        0% {
-            opacity: 0;
-        }
-
-        45% {
-            opacity: 0;
-        }
-
-        55% {
-            opacity: 1;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-
-    @keyframes dot3 {
-        0% {
-            opacity: 0;
-        }
-
-        70% {
-            opacity: 0;
-        }
-
-        80% {
-            opacity: 1;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-`;
-export {
-  e as buttonStyles,
-  l as loadingDotsStyles,
-  s as textStyles
-};

package/dist/components/ds-chips/ds-chips.js

@@ -1,143 +0,0 @@
-import { UiKitElement as p } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { arrayConverter as m } from "../../utils/arrayConverter.js";
-import { booleanConverter as u } from "../../utils/booleanConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as C, html as v } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as y } from "./styles/common.styles.js";
-var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? z(t, s) : t, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
-  return i && r && g(t, s, r), r;
-};
-let l = class extends p {
-  constructor() {
-    super(...arguments), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
-      this.handleScrollNav();
-    }), this.handleScrollNav = () => {
-      var t, s, i, r;
-      const e = ((t = this.chipsContainer) == null ? void 0 : t.scrollLeft) + ((s = this.chipsContainer) == null ? void 0 : s.clientWidth);
-      this.hasScrollLeft = ((i = this.chipsContainer) == null ? void 0 : i.scrollLeft) > 0, this.hasScrollRight = e < ((r = this.chipsContainer) == null ? void 0 : r.scrollWidth);
-    }, this.handleScrollLeft = () => {
-      this.chipsContainer.scrollBy({ left: -150, behavior: "smooth" });
-    }, this.handleScrollRight = () => {
-      this.chipsContainer.scrollBy({ left: 150, behavior: "smooth" });
-    };
-  }
-  firstUpdated() {
-    this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), this.chipsContainer.removeEventListener("scroll", this.handleScrollNav);
-  }
-  getScrollButtonTemplate(e, t) {
-    if (e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight)
-      return C;
-    const s = `arrow-${e}`;
-    return this.componentFactory.createIconButton({
-      class: `scroll-button ${e}`,
-      "data-testid": `scroll-button-${e}`,
-      "data-aria-label": `scroll-button-${e}`,
-      "@click": t,
-      size: this.size || "large",
-      "icon-name": s,
-      variant: "standard",
-      mode: this.mode
-    });
-  }
-  updated(e) {
-    super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
-  }
-  updateChildChips() {
-    var e;
-    (e = this.chips) == null || e.forEach((t) => {
-      var s, i;
-      t.size = this.size, t.selected = (i = (s = this.selectedChips) == null ? void 0 : s.includes) == null ? void 0 : i.call(s, t.value), t.deselectable = !!this.multiChoice, t.mode = this.mode;
-    });
-  }
-  get chipsContainerClasses() {
-    return {
-      "chips-container": !0,
-      "scroll-left": this.hasScrollLeft,
-      "scroll-right": this.hasScrollRight
-    };
-  }
-  handleSelect(e) {
-    var s, i;
-    let t;
-    this.multiChoice && !((i = (s = this.selectedChips) == null ? void 0 : s.includes) != null && i.call(s, e.detail.value)) ? t = [...this.selectedChips || [], e.detail.value] : t = [e.detail.value], this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
-      new CustomEvent("ds-chips:change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          selectedChips: t
-        }
-      })
-    );
-  }
-  handleDeselect(e) {
-    const t = [...(this.selectedChips || []).filter((s) => s !== e.detail.value)];
-    this.selectedChips = t, this.updateChildChips(), this.dispatchEvent(
-      new CustomEvent("ds-chips:change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          selectedChips: t
-        }
-      })
-    );
-  }
-  render() {
-    return v`
-            <div
-                class="container"
-                data-testid="ds-chips-container"
-                @select=${this.handleSelect}
-                @deselect=${this.handleDeselect}
-            >
-                ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
-                <nav tabindex="0" class=${b(this.chipsContainerClasses)}>
-                    <slot @slotchange=${this.updateChildChips}></slot>
-                </nav>
-                ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
-            </div>
-        `;
-  }
-};
-l.styles = [y];
-h([
-  o({ type: Array, attribute: "selected-chips", converter: m, reflect: !0 })
-], l.prototype, "selectedChips", 2);
-h([
-  o({ type: Boolean, attribute: "multi-choice", converter: u })
-], l.prototype, "multiChoice", 2);
-h([
-  o({ type: String })
-], l.prototype, "size", 2);
-h([
-  o({ type: String, reflect: !0 })
-], l.prototype, "mode", 2);
-h([
-  n()
-], l.prototype, "hasScrollLeft", 2);
-h([
-  n()
-], l.prototype, "hasScrollRight", 2);
-h([
-  S({ slot: "" })
-], l.prototype, "chips", 2);
-h([
-  f(".chips-container")
-], l.prototype, "chipsContainer", 2);
-l = h([
-  d("ds-chips")
-], l);
-export {
-  l as DsChips
-};

package/dist/components/ds-password-input/ds-password-input.js

@@ -1,43 +0,0 @@
-import { DsTextInput as u } from "../ds-text-input/ds-text-input.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { property as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, r = (e, a, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? c(a, o) : a, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (t = (s ? l(a, o, t) : l(t)) || t);
-  return s && t && h(a, o, t), t;
-};
-let i = class extends u {
-  constructor() {
-    super(...arguments), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
-      this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
-    };
-  }
-  get iconTemplate() {
-    var e;
-    return this.componentFactory.createIconButton({
-      class: "icon-button",
-      "icon-name": this.visible ? "eye-crossed-out" : "eye",
-      disabled: !!((e = this.nativeInput) != null && e.disabled),
-      size: this.size,
-      variant: "standard",
-      "@click": this.handleClickIcon,
-      "data-aria-label": this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"
-    });
-  }
-};
-r([
-  p({ type: String, attribute: "data-aria-label-hide-button" })
-], i.prototype, "dataAriaLabelHideButton", 2);
-r([
-  p({ type: String, attribute: "data-aria-label-show-button" })
-], i.prototype, "dataAriaLabelShowButton", 2);
-r([
-  b()
-], i.prototype, "visible", 2);
-i = r([
-  d("ds-password-input", { extendComponentNames: ["ds-text-input"] })
-], i);
-export {
-  i as DsPasswordInput
-};

package/dist/components/ds-search-input/ds-search-input.js

@@ -1,158 +0,0 @@
-import { UiKitElement as d } from "../base/UiKitElement.js";
-import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
-import { inputStatesMixin as v } from "../../mixins/inputStatesMixin.js";
-import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { validateMaxLength as f } from "../../utils/validateMaxLength.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as l, nothing as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as g } from "./styles/common.styles.js";
-var y = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, e, o, a) => {
-  for (var s = a > 1 ? void 0 : a ? E(e, o) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (s = (a ? u(e, o, s) : u(s)) || s);
-  return a && s && y(e, o, s), s;
-};
-let i = class extends v(d) {
-  constructor() {
-    super(...arguments), this.size = "medium", this.variant = "primary", this.loading = !1, this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.dataAriaLabelPositionButton = "", this.withPositionButton = !0, this.handleRemove = () => {
-      this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
-        (t) => this.nativeInput.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
-      );
-    }, this.handleClickPositionButton = () => {
-      this.dispatchEvent(
-        new Event("ds-search-input:click-position-button", {
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    };
-  }
-  get classes() {
-    return {
-      container: !0,
-      error: !!this.forcedError,
-      loading: this.loading,
-      [this.size]: !!this.size,
-      [this.variant]: !!this.variant,
-      disabled: this.inputStates.disabled,
-      filled: this.inputStates.filled,
-      invalid: this.inputStates.invalid,
-      focus: this.inputStates.focus,
-      "focus-visible": this.inputStates.focusVisible
-    };
-  }
-  render() {
-    return l`
-            <div part="container" class=${b(this.classes)}>
-                <div part="input-container" class="input-container">
-                    ${this.searchIconTemplate}
-                    <slot></slot>
-                    <span class="buttons-container">
-                        ${this.removeTemplate}
-                        ${this.positionTemplate}
-                        ${this.loaderSpinnerTemplate}
-                    </span>
-                </div>
-                ${this.footerTemplate}
-            </div>
-        `;
-  }
-  get searchIconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": "magnifying-glass",
-      variant: "standard"
-    });
-  }
-  get removeTemplate() {
-    var t, e, o;
-    return !((e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length) || this.loading ? p : this.componentFactory.createIconButton({
-      class: "remove-icon-button",
-      "icon-name": "cross",
-      disabled: !!((o = this.nativeInput) != null && o.disabled),
-      size: this.size,
-      variant: "standard",
-      "@click": this.handleRemove,
-      "data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
-    });
-  }
-  get positionTemplate() {
-    var t;
-    return this.loading || !this.withPositionButton ? p : this.componentFactory.createIconButton({
-      class: "position-icon-button",
-      "icon-name": "position",
-      disabled: !!((t = this.nativeInput) != null && t.disabled),
-      size: this.size,
-      variant: "standard",
-      "@click": this.handleClickPositionButton,
-      "data-aria-label": this.dataAriaLabelPositionButton || "position button"
-    });
-  }
-  get loaderSpinnerTemplate() {
-    return this.componentFactory.createLoaderSpinner({
-      show: this.loading
-    });
-  }
-  get footerTemplate() {
-    var t, e;
-    return !((t = this.helperText) != null && t.length) && !this.forcedError && (!this.inputStates.invalid || !this.invalidError) && Number((e = this.nativeInput) == null ? void 0 : e.maxLength) < 0 ? p : l`
-            <div class="footer">
-                ${this.helperTextTemplate}
-                ${this.forcedErrorTemplate}
-                ${this.invalidErrorTemplate}
-                ${this.lengthTemplate}
-            </div>
-        `;
-  }
-  get helperTextTemplate() {
-    var t;
-    return this.forcedError || this.inputStates.invalid && this.invalidError || !((t = this.helperText) != null && t.length) ? p : l`<span class="support-text helper-text">${this.helperText}</span>`;
-  }
-  get forcedErrorTemplate() {
-    return this.forcedError ? l`<span class="support-text error-text forced-error">${this.forcedError}</span>` : p;
-  }
-  get invalidErrorTemplate() {
-    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? p : l`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
-  }
-  get lengthTemplate() {
-    var e, o, a;
-    const t = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
-    return f(t) ? l`<span class="char-counter">${((a = this.inputStates.currentValue) == null ? void 0 : a.length) || 0}/${t}</span>` : p;
-  }
-};
-i.styles = [g];
-r([
-  n({ type: String })
-], i.prototype, "size", 2);
-r([
-  n({ type: String })
-], i.prototype, "variant", 2);
-r([
-  n({ type: Boolean, converter: c })
-], i.prototype, "loading", 2);
-r([
-  n({ type: String, attribute: "helper-text" })
-], i.prototype, "helperText", 2);
-r([
-  n({ type: String, attribute: "forced-error" })
-], i.prototype, "forcedError", 2);
-r([
-  n({ type: String, attribute: "invalid-error" })
-], i.prototype, "invalidError", 2);
-r([
-  n({ type: String, attribute: "data-aria-label-remove-button" })
-], i.prototype, "dataAriaLabelRemoveButton", 2);
-r([
-  n({ type: String, attribute: "data-aria-label-position-button" })
-], i.prototype, "dataAriaLabelPositionButton", 2);
-r([
-  n({ type: Boolean, converter: c, attribute: "with-position-button" })
-], i.prototype, "withPositionButton", 2);
-i = r([
-  m("ds-search-input")
-], i);
-export {
-  i as DsSearchInput
-};

package/dist/components/ds-tabs/theme-config.js

@@ -1,14 +0,0 @@
-const a = {
-  cupra: {
-    "icon-button-variant": "primary"
-  },
-  "cupra-diagonal": {
-    "icon-button-variant": "standard"
-  },
-  seat: {
-    "icon-button-variant": "primary"
-  }
-};
-export {
-  a as themeConfig
-};

package/dist/components/ds-text-input/ds-text-input.js

@@ -1,100 +0,0 @@
-import { UiKitElement as c } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { inputStatesMixin as m } from "../../mixins/inputStatesMixin.js";
-import { validateMaxLength as v } from "../../utils/validateMaxLength.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as n, nothing as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as b } from "./styles/common.styles.js";
-var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, e, r, s) => {
-  for (var a = s > 1 ? void 0 : s ? E(e, r) : e, u = t.length - 1, h; u >= 0; u--)
-    (h = t[u]) && (a = (s ? h(e, r, a) : h(a)) || a);
-  return s && a && g(e, r, a), a;
-};
-let i = class extends m(c) {
-  constructor() {
-    super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
-      this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
-        (t) => this.nativeInput.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
-      );
-    };
-  }
-  get classes() {
-    return {
-      container: !0,
-      error: !!this.forcedError,
-      [this.size]: !!this.size,
-      disabled: this.inputStates.disabled,
-      filled: this.inputStates.filled,
-      invalid: this.inputStates.invalid,
-      focus: this.inputStates.focus,
-      "focus-visible": this.inputStates.focusVisible
-    };
-  }
-  render() {
-    return n`
-            <div class=${f(this.classes)}>
-                <div class="input-container">
-                    <div><slot></slot></div>
-                    ${this.iconTemplate}
-                </div>
-                <div class="footer">
-                    ${this.helperTextTemplate}
-                    ${this.forcedErrorTemplate}
-                    ${this.invalidErrorTemplate}
-                    ${this.lengthTemplate}
-                </div>
-            </div>
-        `;
-  }
-  get iconTemplate() {
-    var t, e, r;
-    return (e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length ? this.componentFactory.createIconButton({
-      class: "icon-button",
-      "icon-name": "cross",
-      size: this.size,
-      disabled: !!((r = this.nativeInput) != null && r.disabled),
-      variant: "standard",
-      "@click": this.handleClickIcon,
-      "data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
-    }) : p;
-  }
-  get lengthTemplate() {
-    var e, r, s;
-    const t = (r = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : r.toString();
-    return v(t) ? n`<span class="char-counter">${((s = this.inputStates.currentValue) == null ? void 0 : s.length) || 0}/${t}</span>` : p;
-  }
-  get helperTextTemplate() {
-    return this.forcedError || this.inputStates.invalid && this.invalidError ? p : n`<span class="support-text helper-text">${this.helperText}</span>`;
-  }
-  get forcedErrorTemplate() {
-    return this.forcedError ? n`<span class="support-text error-text forced-error">${this.forcedError}</span>` : p;
-  }
-  get invalidErrorTemplate() {
-    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? p : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
-  }
-};
-i.styles = [b];
-o([
-  l({ type: String })
-], i.prototype, "size", 2);
-o([
-  l({ type: String, attribute: "helper-text" })
-], i.prototype, "helperText", 2);
-o([
-  l({ type: String, attribute: "forced-error" })
-], i.prototype, "forcedError", 2);
-o([
-  l({ type: String, attribute: "invalid-error" })
-], i.prototype, "invalidError", 2);
-o([
-  l({ type: String, attribute: "data-aria-label-remove-button" })
-], i.prototype, "dataAriaLabelRemoveButton", 2);
-i = o([
-  d("ds-text-input")
-], i);
-export {
-  i as DsTextInput
-};