@cupra/ui-kit 1.0.0-canary.8 → 1.0.0

package/dist/utils/componentFactory.js

@@ -0,0 +1,167 @@
+import "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a } 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 { ifDefined as e } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+const m = {
+  createIcon: (t) => (i("ds-icon", () => import("../components/ds-icon/ds-icon.js")), a`
+            <ds-icon
+                class=${e(t == null ? void 0 : t.class)}
+                data-testid=${e(t == null ? void 0 : t["data-testid"])}
+                @click=${t == null ? void 0 : t["@click"]}
+                @keydown=${t == null ? void 0 : t["@keydown"]}
+                icon-name=${t == null ? void 0 : t["icon-name"]}
+                color=${e(t == null ? void 0 : t.color)}
+                background-color=${e(t == null ? void 0 : t["background-color"])}
+                size=${e(t == null ? void 0 : t.size)}
+                aria-label=${e(t == null ? void 0 : t["aria-label"])}
+                aria-hidden=${e(t == null ? void 0 : t["aria-hidden"])}
+                role=${e(t == null ? void 0 : t.role)}
+                tabindex=${e(t == null ? void 0 : t.tabindex)}
+            >
+                ${t.children}
+            </ds-icon>
+        `),
+  createButton: (t = {}) => (i("ds-button", () => import("../components/ds-button/ds-button.js")), a`
+            <ds-button
+                class=${t == null ? void 0 : t.class}
+                @click=${t == null ? void 0 : t["@click"]}
+                .size=${e(t == null ? void 0 : t.size)}
+                type=${t == null ? void 0 : t.type}
+                icon-position=${t == null ? void 0 : t["icon-position"]}
+                .rounded=${t == null ? void 0 : t.rounded}
+                .full-width=${t == null ? void 0 : t["full-width"]}
+                variant=${(t == null ? void 0 : t.variant) ?? "primary"}
+                mode=${(t == null ? void 0 : t.mode) ?? "light"}
+                .disabled=${t == null ? void 0 : t.disabled}
+                icon-name=${t == null ? void 0 : t["icon-name"]}
+                html-tag-name=${t == null ? void 0 : t["html-tag-name"]}
+                href=${t == null ? void 0 : t.href}
+                rel=${t == null ? void 0 : t.rel}
+                target=${t == null ? void 0 : t.target}
+                data-testid=${t == null ? void 0 : t["data-testid"]}
+            >
+                ${t.children}
+            </ds-button>
+        `),
+  createIconButton: (t = {}) => (i("ds-icon-button", () => import("../components/ds-icon-button/ds-icon-button.js")), a`
+            <ds-icon-button
+                class=${t == null ? void 0 : t.class}
+                @click=${t == null ? void 0 : t["@click"]}
+                size=${e(t == null ? void 0 : t.size)}
+                variant=${(t == null ? void 0 : t.variant) ?? "primary"}
+                mode=${(t == null ? void 0 : t.mode) ?? "light"}
+                .disabled=${t == null ? void 0 : t.disabled}
+                icon-name=${t == null ? void 0 : t["icon-name"]}
+                html-tag-name=${t == null ? void 0 : t["html-tag-name"]}
+                href=${t == null ? void 0 : t.href}
+                rel=${t == null ? void 0 : t.rel}
+                target=${t == null ? void 0 : t.target}
+                data-testid=${t == null ? void 0 : t["data-testid"]}
+                data-aria-label=${t == null ? void 0 : t["data-aria-label"]}
+            >
+                ${t.children}
+            </ds-icon-button>
+        `),
+  createLoaderSpinner: (t = {}) => (i("ds-loader-spinner", () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), a`
+            <ds-loader-spinner
+                ?show=${t == null ? void 0 : t.show}
+                orientation=${(t == null ? void 0 : t.orientation) ?? "row"}
+                mode=${(t == null ? void 0 : t.mode) ?? "light"}
+            ></ds-loader-spinner>
+        `),
+  createToastMessage: (t) => (i("ds-toast-message", () => import("../components/ds-toast-message/ds-toast-message.js")), a`
+            <ds-toast-message
+                data-id="${t["data-id"]}"
+                data-template="${t["data-template"]}"
+                title="${t.title}"
+                text="${t.text}"
+                status="${t.status}"
+            ></ds-toast-message>
+        `)
+}, u = {
+  createIcon: (t) => (i("ds-icon-react", () => import("../components/ds-icon/ds-icon.js")), a`
+            <ds-icon-react
+                class=${e(t == null ? void 0 : t.class)}
+                data-testid=${e(t == null ? void 0 : t["data-testid"])}
+                @click=${t == null ? void 0 : t["@click"]}
+                @keydown=${t == null ? void 0 : t["@keydown"]}
+                icon-name=${t == null ? void 0 : t["icon-name"]}
+                color=${e(t == null ? void 0 : t.color)}
+                background-color=${e(t == null ? void 0 : t["background-color"])}
+                size=${e(t == null ? void 0 : t.size)}
+                aria-label=${e(t == null ? void 0 : t["aria-label"])}
+                aria-hidden=${e(t == null ? void 0 : t["aria-hidden"])}
+                role=${e(t == null ? void 0 : t.role)}
+                tabindex=${e(t == null ? void 0 : t.tabindex)}
+            >
+                ${t.children}
+            </ds-icon-react>
+        `),
+  createButton: (t = {}) => (i("ds-button-react", () => import("../components/ds-button/ds-button.js")), a`
+            <ds-button-react
+                class=${t == null ? void 0 : t.class}
+                @click=${t == null ? void 0 : t["@click"]}
+                .size=${e(t == null ? void 0 : t.size)}
+                type=${t == null ? void 0 : t.type}
+                icon-position=${t == null ? void 0 : t["icon-position"]}
+                .rounded=${t == null ? void 0 : t.rounded}
+                .full-width=${t == null ? void 0 : t["full-width"]}
+                variant=${(t == null ? void 0 : t.variant) ?? "primary"}
+                mode=${(t == null ? void 0 : t.mode) ?? "light"}
+                .disabled=${t == null ? void 0 : t.disabled}
+                icon-name=${t == null ? void 0 : t["icon-name"]}
+                html-tag-name=${t == null ? void 0 : t["html-tag-name"]}
+                href=${t == null ? void 0 : t.href}
+                rel=${t == null ? void 0 : t.rel}
+                target=${t == null ? void 0 : t.target}
+                data-testid=${t == null ? void 0 : t["data-testid"]}
+            >
+                ${t.children}
+            </ds-button-react>
+        `),
+  createIconButton: (t = {}) => (i("ds-icon-button-react", () => import("../components/ds-icon-button/ds-icon-button.js")), a`
+            <ds-icon-button-react
+                class=${t == null ? void 0 : t.class}
+                @click=${t == null ? void 0 : t["@click"]}
+                size=${e(t == null ? void 0 : t.size)}
+                variant=${(t == null ? void 0 : t.variant) ?? "primary"}
+                mode=${(t == null ? void 0 : t.mode) ?? "light"}
+                .disabled=${t == null ? void 0 : t.disabled}
+                icon-name=${t == null ? void 0 : t["icon-name"]}
+                html-tag-name=${t == null ? void 0 : t["html-tag-name"]}
+                href=${t == null ? void 0 : t.href}
+                rel=${t == null ? void 0 : t.rel}
+                target=${t == null ? void 0 : t.target}
+                data-testid=${t == null ? void 0 : t["data-testid"]}
+                data-aria-label=${t == null ? void 0 : t["data-aria-label"]}
+            >
+                ${t.children}
+            </ds-icon-button-react>
+        `),
+  createLoaderSpinner: (t = {}) => (i("ds-loader-spinner-react", () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), a`
+            <ds-loader-spinner-react
+                ?show=${t == null ? void 0 : t.show}
+                orientation=${(t == null ? void 0 : t.orientation) ?? "row"}
+                mode=${(t == null ? void 0 : t.mode) ?? "light"}
+            ></ds-loader-spinner-react>
+        `),
+  createToastMessage: (t) => (i("ds-toast-message-react", () => import("../components/ds-toast-message/ds-toast-message.js")), a`
+            <ds-toast-message-react
+                data-id="${t["data-id"]}"
+                data-template="${t["data-template"]}"
+                title="${t.title}"
+                text="${t.text}"
+                status="${t.status}"
+            ></ds-toast-message-react>
+        `)
+};
+function i(t, n) {
+  try {
+    typeof window < "u" && typeof customElements < "u" && !customElements.get(t) && n();
+  } catch {
+  }
+}
+export {
+  u as reactFactory,
+  m as standardFactory
+};

package/dist/utils/cssQueries.js

@@ -0,0 +1,16 @@
+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 { breakpoints as i } from "./breakpoints.js";
+import { css as m } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const e = {
+  xs: m`@media(min-width: ${i.xs}px)`,
+  s: m`@media(min-width: ${i.s}px)`,
+  m: m`@media(min-width: ${i.m}px)`,
+  l: m`@media(min-width: ${i.l}px)`,
+  xl: m`@media(min-width: ${i.xl}px)`,
+  xxl: m`@media(min-width: ${i.xxl}px)`
+};
+export {
+  e as cssQueries
+};

package/dist/utils/cssWithTokens.js

@@ -0,0 +1,11 @@
+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 { unsafeCSS as o, css as n } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+function x(t, ...r) {
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0"), i = o(e);
+  return n`${i}`;
+}
+export {
+  x as cssWithTokens
+};

package/dist/utils/formatNumber/formatNumber.js

@@ -0,0 +1,54 @@
+function y({
+  value: i,
+  locale: l,
+  style: n,
+  unit: s,
+  currency: u,
+  localeMatcher: m = "lookup",
+  minimumIntegerDigits: f = 1,
+  minimumFractionDigits: b = 0,
+  maximumFractionDigits: g = 20,
+  thousandSeparator: S,
+  fractionSeparator: p,
+  useGrouping: k = "auto"
+}) {
+  let t = "", a, o;
+  const r = new Intl.NumberFormat(l, {
+    ...n && { style: n },
+    ...s && { unit: s },
+    ...u && { currency: u },
+    localeMatcher: m,
+    minimumIntegerDigits: f,
+    minimumFractionDigits: b,
+    maximumFractionDigits: g,
+    useGrouping: k
+  }).formatToParts(i ?? 0);
+  return r.forEach((e, c) => {
+    switch (e.type) {
+      case "unit":
+      case "currency":
+      case "percentSign":
+        a = e.value, o = c === 0 || (r[0].type === "minusSign" || r[0].type === "plusSign") && c === 1 ? "left" : "right";
+        break;
+      case "group":
+        t += S ?? e.value;
+        break;
+      case "decimal":
+        t += p ?? e.value;
+        break;
+      case "integer":
+      case "fraction":
+      case "plusSign":
+      case "minusSign":
+        t += e.value;
+        break;
+    }
+  }), {
+    formattedValue: t,
+    ...a && { unitSymbol: a },
+    ...o && { unitSymbolPosition: o }
+  };
+}
+export {
+  y as formatNumber
+};

package/dist/utils/htmlWithTokens.js

@@ -0,0 +1,11 @@
+import "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as i } 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 { unsafeHTML as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+function T(t, ...o) {
+  const r = String.raw({ raw: t }, ...o).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0"), e = n(r);
+  return i`${e}`;
+}
+export {
+  T as htmlWithTokens
+};

package/dist/utils/objectConverter.js

@@ -0,0 +1,11 @@
+const t = (r) => {
+  if (typeof r != "string") return r;
+  try {
+    return JSON.parse(r);
+  } catch {
+    return r;
+  }
+};
+export {
+  t as objectConverter
+};

package/dist/utils/validateMaxLength.js

@@ -0,0 +1,6 @@
+function e(r) {
+  return !r || typeof r != "string" && typeof r != "number" ? !1 : (typeof r == "string" ? Number(r) : r) > 0;
+}
+export {
+  e as validateMaxLength
+};

package/dist-react/components/base/DsUiElement.js

@@ -0,0 +1,47 @@
+import { themeContext as n } from "../ds-theme-provider/themeContext.js";
+import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { pubSub as l } from "../../utils/PubSub.js";
+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 { LitElement as c } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { adoptStyles as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.defineProperty, h = (m, e, s, o) => {
+  for (var t = void 0, r = m.length - 1, i; r >= 0; r--)
+    (i = m[r]) && (t = i(e, s, t) || t);
+  return t && f(e, s, t), t;
+};
+class p extends c {
+  constructor() {
+    super(), this.handleChangeTheme = (e) => {
+      this.pubSubTheme = e;
+    }, this.pubSubTheme = l.subscribe("theme", this.handleChangeTheme);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.applyTheme();
+  }
+  updated(e) {
+    super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && (this.theme = this.contextTheme ?? this.pubSubTheme, this.applyTheme());
+  }
+  applyTheme() {
+    var r;
+    const e = this.constructor, s = (r = e.themesStyles) == null ? void 0 : r[this.theme], o = Array.isArray(s) ? s : [s];
+    if (!(o != null && o.length)) return;
+    const t = Array.isArray(e.styles) ? e.styles : [e.styles];
+    y(this.shadowRoot, [...t, ...o].filter(Boolean));
+  }
+}
+h([
+  b({ attribute: !1 }),
+  u({ context: n, subscribe: !0 })
+], p.prototype, "contextTheme");
+h([
+  a()
+], p.prototype, "pubSubTheme");
+h([
+  a()
+], p.prototype, "theme");
+export {
+  p as DsUiElement
+};

package/dist-react/components/base/UiKitElement.js

@@ -0,0 +1,82 @@
+import { themeContext as m } from "../ds-theme-provider/themeContext.js";
+import { THEME_STORAGE_KEY as d } from "../../core/theme.constants.js";
+import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { pubSub as p } from "../../utils/PubSub.js";
+import { stylesRegistry as S } from "../../utils/StylesRegistry/StylesRegistry.js";
+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 { LitElement as y } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { css as C, adoptStyles as T } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, l = (n, e, t, i) => {
+  for (var o = void 0, a = n.length - 1, s; a >= 0; a--)
+    (s = n[a]) && (o = s(e, t, o) || o);
+  return o && g(e, t, o), o;
+};
+const E = C`:host([unresolved]){visibility:hidden}`, h = class c extends y {
+  constructor() {
+    super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
+      this.pubSubTheme = e;
+    }, this.pubSubTheme = p.subscribe("theme", this.handleChangeTheme);
+  }
+  get theme() {
+    const e = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(d) : null;
+    return this.contextTheme ?? this.pubSubTheme ?? e;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.setAttribute("unresolved", "");
+    const e = this.constructor, t = Array.isArray(e.styles) ? e.styles : [e.styles].filter(Boolean);
+    T(this.shadowRoot, [...t, E]), this.applyThemeStyles();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), p.unsubscribe("theme", this.handleChangeTheme);
+  }
+  updated(e) {
+    super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && this.applyThemeStyles();
+  }
+  getComponentNames() {
+    const e = /* @__PURE__ */ new Set();
+    let t = this.constructor;
+    for (; t && t !== c; )
+      Array.isArray(t.componentName) && t.componentName.forEach((i) => e.add(i)), t = Object.getPrototypeOf(t);
+    return Array.from(e).reverse();
+  }
+  supportsAdoptedSheets() {
+    return "adoptedStyleSheets" in ((ShadowRoot == null ? void 0 : ShadowRoot.prototype) || {}) && "replace" in CSSStyleSheet.prototype;
+  }
+  async applyThemeStyles() {
+    const e = this.getComponentNames();
+    if (!(!this.theme || !(e != null && e.length)))
+      try {
+        const t = await Promise.all(
+          e.map((s) => S.getStyles({ componentName: s, theme: this.theme }))
+        ), i = this.supportsAdoptedSheets(), o = this.shadowRoot.adoptedStyleSheets || [], a = this.appliedConstructables ? o.filter((s) => !this.appliedConstructables.includes(s)) : o;
+        this.appliedConstructables = [], this.appliedStyleTags.forEach((s) => s.remove()), this.appliedStyleTags = [], t.forEach((s) => {
+          if (s)
+            if (i) {
+              const r = new CSSStyleSheet();
+              r.replaceSync(s), this.appliedConstructables.push(r);
+            } else {
+              const r = document.createElement("style");
+              r.textContent = s, this.shadowRoot.appendChild(r), this.appliedStyleTags.push(r);
+            }
+        }), i && (this.shadowRoot.adoptedStyleSheets = [...a, ...this.appliedConstructables]);
+      } catch (t) {
+        console.error(t);
+      } finally {
+        this.removeAttribute("unresolved"), this.requestUpdate();
+      }
+  }
+};
+l([
+  b({ attribute: !1 }),
+  u({ context: m, subscribe: !0 })
+], h.prototype, "contextTheme");
+l([
+  f()
+], h.prototype, "pubSubTheme");
+let N = h;
+export {
+  N as UiKitElement
+};

package/dist-react/components/base/ds-base-input/ds-base-input.js

@@ -0,0 +1,112 @@
+import { DsUiElement as d } from "../DsUiElement.js";
+import { FormAssociatedMixin as m } from "../../../mixins/FormAssociatedMixin.js";
+import { booleanConverter as n } from "../../../utils/booleanConverter.js";
+import { htmlWithTokens as c } from "../../../utils/htmlWithTokens.js";
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as f } 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 r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as u } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as y } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as v } from "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as x, inputStyles as b } from "./styles/common.styles.js";
+import { cupraStyles as T } from "./styles/cupra.styles.js";
+var g = Object.defineProperty, t = (p, i, a, $) => {
+  for (var s = void 0, l = p.length - 1, h; l >= 0; l--)
+    (h = p[l]) && (s = h(i, a, s) || s);
+  return s && g(i, a, s), s;
+};
+const o = class o extends m(d) {
+  constructor() {
+    super(...arguments), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.focused = !1, this.handleFocus = () => {
+      this.focused = !0;
+    }, this.handleBlur = () => {
+      this.focused = !1;
+    };
+  }
+  firstUpdated() {
+    this._value = this.initialValue;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(i) {
+    this._value = i;
+  }
+  get classes() {
+    return {
+      container: !0,
+      focused: this.focused,
+      error: !!this.errorText,
+      success: this.success,
+      disabled: this.disabled,
+      [this.size]: !0,
+      [this.mode]: !0
+    };
+  }
+  get styleTokens() {
+    return c`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return f`
+            ${this.styleTokens}
+            <div class=${v(this.classes)}>
+                <div class="inner-container">
+                    ${this.labelTemplate}
+                    ${this.inputTemplate}
+                    ${this.iconTemplate}
+                </div>
+                <div class="helper-text">${this.helperText}</div>
+                <div class="error-text">${this.errorText}</div>
+                ${this.dropdownTemplate}
+            </div>
+        `;
+  }
+};
+o.styles = [x, b], o.themesStyles = {
+  cupra: T
+};
+let e = o;
+t([
+  r({ type: String, reflect: !0, attribute: "initial-value" })
+], e.prototype, "initialValue");
+t([
+  r({ type: String })
+], e.prototype, "label");
+t([
+  r({ type: String, attribute: "helper-text" })
+], e.prototype, "helperText");
+t([
+  r({ type: String, attribute: "error-text" })
+], e.prototype, "errorText");
+t([
+  r({ type: Boolean, converter: n })
+], e.prototype, "disabled");
+t([
+  r({ type: Boolean, converter: n })
+], e.prototype, "success");
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "mode");
+t([
+  r({ type: String })
+], e.prototype, "size");
+t([
+  u()
+], e.prototype, "_value");
+t([
+  u()
+], e.prototype, "focused");
+t([
+  y(".input-field")
+], e.prototype, "inputField");
+export {
+  e as DsBaseInput
+};

package/dist-react/components/base/ds-base-input/styles/common.styles.js

@@ -0,0 +1,63 @@
+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 e } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = e`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .label,
+    .error-text,
+    .helper-text {
+        user-select: none;
+    }
+
+    .label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform-origin: top left;
+        pointer-events: none;
+        transition:
+            transform 0.2s,
+            font-size 0.2s;
+        white-space: nowrap;
+    }
+`, s = e`
+    .container {
+        position: relative;
+    }
+
+    .input-field::-webkit-search-decoration,
+    .input-field::-webkit-search-cancel-button,
+    .input-field::-webkit-search-results-button,
+    .input-field::-webkit-search-results-decoration,
+    .input-field:not(.number)::-webkit-inner-spin-button,
+    .input-field::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+
+    .input-field {
+        box-sizing: border-box;
+        width: 100%;
+        border: none;
+        outline: none;
+        background-color: transparent;
+    }
+
+    .inner-container {
+        align-items: center;
+        display: flex;
+        position: relative;
+    }
+
+    .input-field:focus {
+        outline: none;
+    }
+`;
+export {
+  r as commonStyles,
+  s as inputStyles
+};