@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.232

package/dist-react/esm/components/ds-modal/styles/seat.styles.js

@@ -0,0 +1,26 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-modal/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        background-color: var(--ds-color-bg-overlay);
+    }
+    :host([data-ui-kit-theme='seat']) .backdrop {
+        background-color: var(--ds-color-surface-elevated);
+    }
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='title']) {
+        font: 350 1.375rem / 1.5rem 'cupra-screen';
+        color: var(--ds-color-text-default);
+    }
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='content']) {
+        font: 350 0.875rem / 1.25rem 'cupra-screen';
+        color: var(--ds-color-text-default-subtlest);
+    }
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='title']) {
+            font: 400 1.875rem / 2.25rem 'cupra-screen';
+        }
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-navigation-controls/ds-navigation-controls.js

@@ -1,14 +1,14 @@
 import { html as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as t } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { queryAssignedElements as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { queryAssignedElements as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import n from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
 import { ViewportMixin as a } from "../../mixins/ViewportMixin.js";
 import { commonStyles as o } from "./styles/common.styles.js";
 //#region src/components/ds-navigation-controls/ds-navigation-controls.ts
-var s, c = ["DS-ICON-BUTTON", "DS-ICON-BUTTON-REACT"], l = (s = class extends a(r) {
+var s, c = ["DS-ICON-BUTTON", "DS-ICON-BUTTON-REACT"], l = (s = class extends a(t) {
 	constructor(...e) {
 		super(...e), this.handleSlotChange = () => {
 			this.updateIconButtonSizes();
@@ -41,6 +41,6 @@ var s, c = ["DS-ICON-BUTTON", "DS-ICON-BUTTON-REACT"], l = (s = class extends a(
         `;
 	}
 }, s.styles = [o], s);
-n([t({ flatten: !0 })], l.prototype, "slottedElements", void 0), l = n([i("ds-navigation-controls")], l);
+r([n({ flatten: !0 })], l.prototype, "slottedElements", void 0), l = r([i("ds-navigation-controls")], l);
 //#endregion
 export { l as DsNavigationControls };

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

@@ -36,6 +36,6 @@ n([e({
 })], l.prototype, "dataAriaLabelHideButton", void 0), n([e({
 	type: String,
 	attribute: "data-aria-label-show-button"
-})], l.prototype, "dataAriaLabelShowButton", void 0), n([t()], l.prototype, "visible", void 0), l = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], l);
+})], l.prototype, "dataAriaLabelShowButton", void 0), n([t()], l.prototype, "visible", void 0), l = n([r("ds-password-input")], l);
 //#endregion
 export { l as DsPasswordInput };

package/dist-react/esm/components/ds-picker-item/ds-picker-item.js

@@ -1,9 +1,9 @@
 import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as n } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as i } from "../base/UiKitElement.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
 import { classMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
@@ -12,7 +12,7 @@ import { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
 import { objectConverter as l } from "../../utils/objectConverter.js";
 import { pickerItemStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-picker-item/ds-picker-item.ts
-var d = class extends c(i) {
+var d = class extends c(n) {
 	constructor(...e) {
 		super(...e), this.variant = "without-border", this.size = "medium", this.loading = !1, this.selected = !1;
 	}
@@ -64,15 +64,15 @@ var d = class extends c(i) {
         `;
 	}
 }, f = (d.styles = [u], d);
-r([n({ type: String })], f.prototype, "variant", void 0), r([n({
+i([r({ type: String })], f.prototype, "variant", void 0), i([r({
 	type: String,
 	converter: l
-})], f.prototype, "size", void 0), r([n({
+})], f.prototype, "size", void 0), i([r({
 	type: Boolean,
 	converter: o
-})], f.prototype, "loading", void 0), r([n({
+})], f.prototype, "loading", void 0), i([r({
 	type: Boolean,
 	converter: o
-})], f.prototype, "selected", void 0), f = r([a("ds-picker-item")], f);
+})], f.prototype, "selected", void 0), f = i([a("ds-picker-item")], f);
 //#endregion
 export { f as DsPickerItem };

package/dist-react/esm/components/ds-portal/ds-portal.js

@@ -31,6 +31,6 @@ var a = class extends t {
 r([n({
 	type: String,
 	attribute: "query-selector-text"
-})], a.prototype, "querySelectorText", void 0), a = r([i("ds-portal", { skipTagAsComponentName: !0 })], a);
+})], a.prototype, "querySelectorText", void 0), a = r([i("ds-portal")], a);
 //#endregion
 export { a as DsPortal };

package/dist-react/esm/components/ds-progress-bar/ds-progress-bar.js

@@ -23,6 +23,6 @@ var c = class extends a {
               ` : t;
 	}
 }, l = (c.styles = [...o(c, "styles", c), s], c);
-r([n({ type: Number })], l.prototype, "progress", void 0), l = r([i("ds-progress-bar", { skipTagAsComponentName: !0 })], l);
+r([n({ type: Number })], l.prototype, "progress", void 0), l = r([i("ds-progress-bar")], l);
 //#endregion
 export { l as DsProgressBar };

package/dist-react/esm/components/ds-radio/ds-radio.js

@@ -10,8 +10,9 @@ import { booleanConverter as o } from "../../utils/booleanConverter.js";
 import { classMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import { commonStyles as c } from "./styles/common.styles.js";
+import { cupraStyles as l } from "./styles/cupra.styles.js";
 //#region src/components/ds-radio/ds-radio.ts
-var l = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.readonly = !1, this.checked = !1, this.disabled = !1, this.mode = "light", this.size = "large", this.handleClickInput = (e) => {
 			this.readonly && e.preventDefault();
@@ -66,28 +67,28 @@ var l = class extends i {
             </label>
         `;
 	}
-}, u = (l.styles = [c], l);
+}, d = (u.styles = [c, l], u);
 r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "readonly", void 0), r([t({
+})], d.prototype, "readonly", void 0), r([t({
 	type: String,
 	reflect: !0
-})], u.prototype, "name", void 0), r([t({ type: String })], u.prototype, "value", void 0), r([t({
+})], d.prototype, "name", void 0), r([t({ type: String })], d.prototype, "value", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "checked", void 0), r([t({
+})], d.prototype, "checked", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "disabled", void 0), r([t({
+})], d.prototype, "disabled", void 0), r([t({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), r([t({ type: String })], u.prototype, "size", void 0), r([n({
+})], d.prototype, "mode", void 0), r([t({ type: String })], d.prototype, "size", void 0), r([n({
 	slot: "",
 	flatten: !0
-})], u.prototype, "_defaultSlotNodes", void 0), u = r([a("ds-radio")], u);
+})], d.prototype, "_defaultSlotNodes", void 0), d = r([a("ds-radio")], d);
 //#endregion
-export { u as DsRadio };
+export { d as DsRadio };

package/dist-react/esm/components/ds-radio/styles/cupra.styles.js

@@ -0,0 +1,46 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-radio/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) label {
+        gap: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) label.disabled {
+        opacity: 0.4;
+    }
+    :host([data-ui-kit-theme='cupra']) label.large {
+        font: var(--ds-font-cupra-light-30-paragraph);
+    }
+    :host([data-ui-kit-theme='cupra']) label.small {
+        font: var(--ds-font-cupra-light-20-paragraph);
+    }
+    :host([data-ui-kit-theme='cupra']) label.light {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) label.dark {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted(input) {
+        width: 1.125rem;
+        height: 1.125rem;
+        border-width: 1px;
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted(input) {
+        border-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted(input) {
+        border-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted(input)::before {
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted(input:checked)::before {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted(input:checked)::before {
+        background-color: var(--ds-color-white);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist-react/esm/components/ds-radio-button/ds-radio-button.js

@@ -1,12 +1,12 @@
 import { ContextConsumer as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.js";
 import { html as t, nothing as n } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as r } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
-import { queryAssignedElements as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { queryAssignedElements as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import o from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as s } from "../base/UiKitElement.js";
+import s from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as l } from "../../utils/booleanConverter.js";
 import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
@@ -14,7 +14,7 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map
 import { radioGroupDisabledContext as d, radioGroupErrorContext as f, radioGroupErrorTextContext as p, radioGroupHelperTextContext as m, radioGroupSizeContext as h } from "../ds-radio-button-group/ds-radio-button-group.js";
 import { commonStyles as g } from "./styles/common.styles.js";
 //#region src/components/ds-radio-button/ds-radio-button.ts
-var _ = class extends s {
+var _ = class extends r {
 	constructor(...e) {
 		super(...e), this.inputPlacement = "left", this._size = "medium", this.errorText = "", this.helperText = "", this._disabled = !1, this.handleChange = (e) => {
 			this.checkInputState(e.target);
@@ -135,25 +135,25 @@ var _ = class extends s {
         `;
 	}
 }, v = (_.styles = [g], _);
-o([r({
+s([i({
 	type: String,
 	attribute: "input-placement"
-})], v.prototype, "inputPlacement", void 0), o([r({
+})], v.prototype, "inputPlacement", void 0), s([i({
 	type: String,
 	attribute: "size"
-})], v.prototype, "_size", void 0), o([r({
+})], v.prototype, "_size", void 0), s([i({
 	type: Boolean,
 	attribute: "error",
 	converter: l
-})], v.prototype, "_error", void 0), o([r({
+})], v.prototype, "_error", void 0), s([i({
 	type: String,
 	attribute: "error-text"
-})], v.prototype, "errorText", void 0), o([r({
+})], v.prototype, "errorText", void 0), s([i({
 	type: String,
 	attribute: "helper-text"
-})], v.prototype, "helperText", void 0), o([i()], v.prototype, "errorGroup", void 0), o([i()], v.prototype, "errorTextGroup", void 0), o([i()], v.prototype, "disabledGroup", void 0), o([i()], v.prototype, "helperTextGroup", void 0), o([i()], v.prototype, "sizeGroup", void 0), o([i()], v.prototype, "_disabled", void 0), o([a({
+})], v.prototype, "helperText", void 0), s([a()], v.prototype, "errorGroup", void 0), s([a()], v.prototype, "errorTextGroup", void 0), s([a()], v.prototype, "disabledGroup", void 0), s([a()], v.prototype, "helperTextGroup", void 0), s([a()], v.prototype, "sizeGroup", void 0), s([a()], v.prototype, "_disabled", void 0), s([o({
 	slot: "input",
 	selector: "input"
-})], v.prototype, "input", void 0), v = o([c("ds-radio-button")], v);
+})], v.prototype, "input", void 0), v = s([c("ds-radio-button")], v);
 //#endregion
 export { v as DsRadioButton };

package/dist-react/esm/components/ds-radio-button-group/ds-radio-button-group.js

@@ -1,18 +1,18 @@
 import { createContext as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.js";
 import { provide as t } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
 import { html as n, nothing as r } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as i } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import a from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as o } from "../base/UiKitElement.js";
+import o from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as c } from "../../utils/booleanConverter.js";
 import { classMap as l } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-radio-button-group/ds-radio-button-group.ts
-var d, f = e(Symbol("ds-radio-button-group:disabled")), p = e(Symbol("ds-radio-button-group:error")), m = e(Symbol("ds-radio-button-group:error-text")), h = e(Symbol("ds-radio-button-group:helper-text")), g = e(Symbol("ds-radio-button-group:size")), _ = (d = class extends o {
+var d, f = e(Symbol("ds-radio-button-group:disabled")), p = e(Symbol("ds-radio-button-group:error")), m = e(Symbol("ds-radio-button-group:error-text")), h = e(Symbol("ds-radio-button-group:helper-text")), g = e(Symbol("ds-radio-button-group:size")), _ = (d = class extends i {
 	constructor(...e) {
 		super(...e), this.error = !1, this.errorText = "", this.helperText = "", this.disabled = !1, this.size = "large", this.orientation = "vertical";
 	}
@@ -43,21 +43,21 @@ var d, f = e(Symbol("ds-radio-button-group:disabled")), p = e(Symbol("ds-radio-b
         `;
 	}
 }, d.styles = [u], d);
-a([t({ context: p }), i({
+o([t({ context: p }), a({
 	type: Boolean,
 	converter: c
-})], _.prototype, "error", void 0), a([t({ context: m }), i({
+})], _.prototype, "error", void 0), o([t({ context: m }), a({
 	type: String,
 	attribute: "error-text"
-})], _.prototype, "errorText", void 0), a([t({ context: h }), i({
+})], _.prototype, "errorText", void 0), o([t({ context: h }), a({
 	type: String,
 	attribute: "helper-text"
-})], _.prototype, "helperText", void 0), a([t({ context: f }), i({
+})], _.prototype, "helperText", void 0), o([t({ context: f }), a({
 	type: Boolean,
 	converter: c
-})], _.prototype, "disabled", void 0), a([t({ context: g }), i({ type: String })], _.prototype, "size", void 0), a([i({
+})], _.prototype, "disabled", void 0), o([t({ context: g }), a({ type: String })], _.prototype, "size", void 0), o([a({
 	type: String,
 	reflect: !0
-})], _.prototype, "orientation", void 0), _ = a([s("ds-radio-button-group")], _);
+})], _.prototype, "orientation", void 0), _ = o([s("ds-radio-button-group")], _);
 //#endregion
 export { _ as DsRadioButtonGroup, f as radioGroupDisabledContext, p as radioGroupErrorContext, m as radioGroupErrorTextContext, h as radioGroupHelperTextContext, g as radioGroupSizeContext };

package/dist-react/esm/components/ds-radio-group/ds-radio-group.js

@@ -62,6 +62,6 @@ i([n({ type: String })], u.prototype, "name", void 0), i([n({
 })], u.prototype, "value", void 0), i([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), i([n({ type: String })], u.prototype, "size", void 0), i([r({ selector: "ds-radio" })], u.prototype, "radioElements", void 0), u = i([a("ds-radio-group", { skipTagAsComponentName: !0 })], u);
+})], u.prototype, "mode", void 0), i([n({ type: String })], u.prototype, "size", void 0), i([r({ selector: "ds-radio" })], u.prototype, "radioElements", void 0), u = i([a("ds-radio-group")], u);
 //#endregion
 export { u as DsRadioGroup };

package/dist-react/esm/components/ds-rating/ds-rating.js

@@ -1,9 +1,9 @@
 import { html as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as t } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import n from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
 import "../ds-icon/ds-icon.js";
 import { booleanConverter as a } from "../../utils/booleanConverter.js";
@@ -12,7 +12,7 @@ import { classMap as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modu
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-rating/ds-rating.ts
-var l = class extends r {
+var l = class extends t {
 	constructor(...e) {
 		super(...e), this.disabled = !1, this.hideRatingText = !1;
 	}
@@ -48,14 +48,14 @@ var l = class extends r {
         `;
 	}
 }, u = (l.styles = [c], l);
-n([t({ type: Number })], u.prototype, "value", void 0), n([t({
+r([n({ type: Number })], u.prototype, "value", void 0), r([n({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], u.prototype, "disabled", void 0), n([t({
+})], u.prototype, "disabled", void 0), r([n({
 	type: Boolean,
 	converter: a,
 	attribute: "hide-rating-text"
-})], u.prototype, "hideRatingText", void 0), u = n([i("ds-rating")], u);
+})], u.prototype, "hideRatingText", void 0), u = r([i("ds-rating")], u);
 //#endregion
 export { u as DsRating };

package/dist-react/esm/components/ds-search/ds-search.js

@@ -14,8 +14,9 @@ import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modu
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import { FormAssociatedMixin as d } from "../../mixins/FormAssociatedMixin.js";
 import { commonStyles as f, containerStyles as p, helperTextStyles as m, inputContainerStyles as h, inputFieldStyles as g } from "./styles/common.styles.js";
+import { cupraStyles as _ } from "./styles/cupra.styles.js";
 //#region src/components/ds-search/ds-search.ts
-var _ = class extends d(o) {
+var v = class extends d(o) {
 	constructor(...e) {
 		super(...e), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.name = "", this.placeholder = "", this.type = "text", this.focused = !1, this.handleFocus = () => {
 			this.focused = !0;
@@ -133,35 +134,36 @@ var _ = class extends d(o) {
             </div>
         `;
 	}
-}, v = (_.styles = [
+}, y = (v.styles = [
 	f,
 	p,
 	m,
 	g,
-	h
-], _);
+	h,
+	_
+], v);
 a([n({
 	type: String,
 	reflect: !0,
 	attribute: "initial-value"
-})], v.prototype, "initialValue", void 0), a([n({ type: String })], v.prototype, "label", void 0), a([n({
+})], y.prototype, "initialValue", void 0), a([n({ type: String })], y.prototype, "label", void 0), a([n({
 	type: String,
 	attribute: "helper-text"
-})], v.prototype, "helperText", void 0), a([n({
+})], y.prototype, "helperText", void 0), a([n({
 	type: String,
 	attribute: "error-text"
-})], v.prototype, "errorText", void 0), a([n({
+})], y.prototype, "errorText", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], v.prototype, "disabled", void 0), a([n({
+})], y.prototype, "disabled", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], v.prototype, "success", void 0), a([n({
+})], y.prototype, "success", void 0), a([n({
 	type: String,
 	reflect: !0
-})], v.prototype, "mode", void 0), a([n({ type: String })], v.prototype, "size", void 0), a([n({ type: String })], v.prototype, "name", void 0), a([n({ type: String })], v.prototype, "placeholder", void 0), a([n({
+})], y.prototype, "mode", void 0), a([n({ type: String })], y.prototype, "size", void 0), a([n({ type: String })], y.prototype, "name", void 0), a([n({ type: String })], y.prototype, "placeholder", void 0), a([n({
 	type: String,
 	attribute: "max-length"
-})], v.prototype, "maxLength", void 0), a([n({ type: String })], v.prototype, "type", void 0), a([r()], v.prototype, "_value", void 0), a([r()], v.prototype, "focused", void 0), a([i(".input-field")], v.prototype, "inputField", void 0), v = a([s("ds-search")], v);
+})], y.prototype, "maxLength", void 0), a([n({ type: String })], y.prototype, "type", void 0), a([r()], y.prototype, "_value", void 0), a([r()], y.prototype, "focused", void 0), a([i(".input-field")], y.prototype, "inputField", void 0), y = a([s("ds-search")], y);
 //#endregion
-export { v as DsSearch };
+export { y as DsSearch };

package/dist-react/esm/components/ds-search/styles/cupra.styles.js

@@ -0,0 +1,182 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-search/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        padding: 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .input-container {
+        gap: 0.5rem;
+        padding: 0.5rem;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        margin: 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .input-container {
+        border-bottom-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .input-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.light .input-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.dark .input-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.light .input-container {
+        border-bottom-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.dark .input-container {
+        border-bottom-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.light .input-container {
+        border-bottom-color: var(--ds-color-red-120);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.dark .input-container {
+        border-bottom-color: var(--ds-color-red-60);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .input-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .input-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .search-icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .search-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .search-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .search-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .search-icon {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .search-icon {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .position-icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .position-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .position-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .position-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .position-icon {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .position-icon {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .clear-icon {
+        cursor: pointer;
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .input-field {
+        padding: 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .input-field {
+        font: var(--ds-cp-type-bodytight-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .input-field {
+        font: var(--ds-cp-type-smalltight-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .input-field {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .input-field {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.light .input-field {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.dark .input-field {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.light .input-field {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.dark .input-field {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.light .input-field {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.dark .input-field {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .input-field {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .input-field {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .large .error-text {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .error-text {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .error-text {
+        margin: 0 0 0.5rem 0;
+        padding: 0 0.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .error-text {
+        color: #b50303;
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .error-text {
+        color: #ec8b8b;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .helper-text {
+        font: var(--ds-cp-type-smalltight-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .helper-text {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .helper-text {
+        margin: 0;
+        padding: 0.5rem;
+        gap: 0.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .helper-text {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .helper-text {
+        color: var(--ds-color-grey);
+    }
+`;
+//#endregion
+export { t as cupraStyles };