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

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

@@ -17,8 +17,12 @@ import { inputStatesMixin as u } from "../../mixins/inputStatesMixin.js";
 import "../ds-loader-spinner/ds-loader-spinner.js";
 import { validateMaxLength as d } from "../../utils/validateMaxLength.js";
 import { commonStyles as f } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as p } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as m } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as h } from "./styles/seat-legacy.styles.js";
+import { seatStyles as g } from "./styles/seat.styles.js";
 //#region src/components/ds-search-input/ds-search-input.ts
-var p = class extends u(i) {
+var _ = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.size = "large", 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((e) => this.nativeInput.dispatchEvent(new Event(e, {
@@ -118,29 +122,35 @@ var p = class extends u(i) {
 		let i = (n = this.nativeInput) == null || (n = n.maxLength) == null ? void 0 : n.toString();
 		return d(i) ? e`<span class="char-counter">${((r = this.inputStates.currentValue) == null ? void 0 : r.length) || 0}/${i}</span>` : t;
 	}
-}, m = (p.styles = [f], p);
-r([n({ type: String })], m.prototype, "size", void 0), r([n({ type: String })], m.prototype, "variant", void 0), r([n({
+}, v = (_.styles = [
+	f,
+	p,
+	g,
+	m,
+	h
+], _);
+r([n({ type: String })], v.prototype, "size", void 0), r([n({ type: String })], v.prototype, "variant", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], m.prototype, "loading", void 0), r([n({
+})], v.prototype, "loading", void 0), r([n({
 	type: String,
 	attribute: "helper-text"
-})], m.prototype, "helperText", void 0), r([n({
+})], v.prototype, "helperText", void 0), r([n({
 	type: String,
 	attribute: "forced-error"
-})], m.prototype, "forcedError", void 0), r([n({
+})], v.prototype, "forcedError", void 0), r([n({
 	type: String,
 	attribute: "invalid-error"
-})], m.prototype, "invalidError", void 0), r([n({
+})], v.prototype, "invalidError", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-remove-button"
-})], m.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
+})], v.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-position-button"
-})], m.prototype, "dataAriaLabelPositionButton", void 0), r([n({
+})], v.prototype, "dataAriaLabelPositionButton", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "with-position-button"
-})], m.prototype, "withPositionButton", void 0), m = r([a("ds-search-input")], m);
+})], v.prototype, "withPositionButton", void 0), v = r([a("ds-search-input")], v);
 //#endregion
-export { m as DsSearchInput };
+export { v as DsSearchInput };

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

@@ -0,0 +1,260 @@
+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-input/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']):has(.disabled) {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input) {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 0 0;
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        border: none;
+        outline: none;
+        background: transparent;
+        padding: 0;
+        height: 100%;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted(input) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted(input) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input)::-moz-placeholder {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input)::placeholder {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input:focus) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .filled ::slotted(input) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input:disabled) {
+        color: var(--ds-field-text-color-placeholder-disabled);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .input-container {
+        padding: 0 0 0 var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large.loading .input-container {
+        padding: 0 var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .input-container {
+        padding: 0 0 0 var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium.loading .input-container {
+        padding: 0 var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .input-container {
+        height: calc(var(--ds-sizing-48, 48px));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .input-container {
+        height: calc(var(--ds-sizing-40, 40px));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
+            var(--ds-border-radius-none);
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary .input-container:hover {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.focus:not(.focus-visible) .input-container {
+        border-bottom: var(--ds-border-width-l, 2px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.filled .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.container.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.container.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.disabled .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.disabled.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary .input-container {
+        border-radius: var(--ds-border-radius-xs, 6px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+        background: var(--ds-field-bg-color-default-inverted, rgba(9, 9, 11, 0.5));
+        -webkit-backdrop-filter: blur(var(--ds-blur-level-05, 60px));
+        backdrop-filter: blur(var(--ds-blur-level-05, 60px));
+        box-shadow: 0 var(--ds-shadow-vertical-level-01, 4px) var(--ds-shadow-blur-level-01, 4px) 0
+            var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary .input-container:hover {
+        background: var(--ds-field-bg-color-hover-inverted, rgba(9, 9, 11, 0.6));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover-inverted, rgba(9, 9, 11, 0.6));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.focus:not(.focus-visible) .input-container {
+        border: var(--ds-border-width-l, 2px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.filled .input-container {
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.container.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.container.invalid .input-container {
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.disabled .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.disabled.invalid .input-container {
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .footer {
+        box-sizing: border-box;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+        color: var(--ds-color-text-default-subtle);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        padding: 0 var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .footer {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .footer {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .helper-text {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .error-text {
+        color: var(--ds-field-text-color-caption-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .support-text,
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .char-counter {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .icon {
+        --ui-kit-icon-height: 1.5rem;
+        --ui-kit-icon-width: 1.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.focus:not(.focus-visible) .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-input-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.filled .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-input-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-disabled);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .buttons-container {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .remove-icon-button {
+        position: relative;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .remove-icon-button:after {
+        content: '';
+        display: inline-block;
+        width: 0.0625rem;
+        height: 1.5rem;
+        background: var(--ds-divider-bg-color-primary);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,263 @@
+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-input/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']):has(.disabled) {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container {
+        border-radius: 0px;
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.focus-visible {
+        outline: 0.125rem solid #fff;
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted(input) {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 0 0;
+        color: var(--ds-color-black);
+        font-family: var(--ds-font-family-base);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-font-letter-spacing-m);
+        border: none;
+        outline: none;
+        background: transparent;
+        padding: 0;
+        height: 100%;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .medium ::slotted(input) {
+        font-size: var(--ds-font-size-body-l);
+        line-height: var(--ds-font-height-body-l);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .small ::slotted(input) {
+        font-size: var(--ds-font-size-body-m);
+        line-height: var(--ds-font-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted(input)::-moz-placeholder {
+        color: var(--ds-color-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted(input)::placeholder {
+        color: var(--ds-color-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted(input:hover) {
+        color: var(--ds-color-field-text-hover);
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted(input:focus) {
+        color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .filled ::slotted(input) {
+        color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted(input:disabled) {
+        color: var(--ds-color-off-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .input-container {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        gap: 0.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .medium .input-container {
+        padding: 0 0 0 0.75rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .medium.loading .input-container {
+        padding: 0 0.75rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .small .input-container {
+        padding: 0 0 0 0.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .small.loading .input-container {
+        padding: 0 0.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .medium .input-container {
+        height: 3rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .small .input-container {
+        height: 2.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .primary .input-container {
+        background: var(--ds-color-white);
+        border-radius: 0px;
+        border-bottom: 1px solid var(--ds-color-dark-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .primary .input-container:hover {
+        border-bottom: 1px solid var(--ds-color-dark-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .primary.focus-visible .input-container {
+        border-bottom: 2px solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .primary.focus:not(.focus-visible) .input-container {
+        border-bottom: 1px solid var(--ds-color-dark-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .primary.filled .input-container {
+        border-bottom: 1px solid var(--ds-color-dark-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .primary.container.error .input-container,
+    :host([data-ui-kit-theme='cupra']) .primary.container.invalid .input-container {
+        border-bottom: 1px solid var(--ds-color-red-120);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .primary.disabled .input-container,
+    :host([data-ui-kit-theme='cupra']) .primary.disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra']) .primary.disabled.invalid .input-container {
+        border-bottom: 1px solid var(--ds-color-off-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .secondary .input-container {
+        border-radius: 0px;
+        border: 1px solid var(--ds-color-black);
+        background: var(--ds-color-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .secondary .input-container:hover {
+        border: 1px solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .secondary.focus-visible .input-container {
+        border: 2px solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .secondary.focus:not(.focus-visible) .input-container {
+        border: 1px solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .secondary.filled .input-container {
+        border: 1px solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .secondary.container.error .input-container,
+    :host([data-ui-kit-theme='cupra']) .secondary.container.invalid .input-container {
+        border: 1px solid var(--ds-color-red-120);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .secondary.disabled .input-container,
+    :host([data-ui-kit-theme='cupra']) .secondary.disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra']) .secondary.disabled.invalid .input-container {
+        border: 1px solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .footer {
+        box-sizing: border-box;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+        color: var(--ds-color-black);
+        text-overflow: ellipsis;
+        font-family: var(--ds-font-family-base);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-font-letter-spacing-m);
+        padding: 0 0.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .medium .footer {
+        font-size: var(--ds-font-size-body-m);
+        line-height: var(--ds-font-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .small .footer {
+        font-size: var(--ds-font-size-body-s);
+        line-height: var(--ds-font-height-body-s);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .helper-text {
+        color: var(--ds-color-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .error-text {
+        color: var(--ds-color-red-120);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .disabled .support-text,
+    :host([data-ui-kit-theme='cupra']) .disabled .char-counter {
+        color: var(--ds-color-off-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .medium .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .small .icon {
+        --ui-kit-icon-height: 1rem;
+        --ui-kit-icon-width: 1rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .input-container .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.focus .icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.filled .icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.disabled .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .buttons-container {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .remove-icon-button {
+        position: relative;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .remove-icon-button:after {
+        content: '';
+        display: inline-block;
+        width: 0.0625rem;
+        height: 1.25rem;
+        background: var(--ds-color-white);
+    }
+`;
+//#endregion
+export { t as cupraStyles };