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

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

@@ -0,0 +1,119 @@
+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-currency/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        gap: 0.125rem;
+        font-family: 'cupra-screen';
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.size-xxlarge {
+        font-size: 1.875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.size-xlarge {
+        font-size: 1.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.size-large {
+        font-size: 1.375rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.size-medium {
+        font-size: 1.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.size-small {
+        font-size: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.size-xsmall {
+        font-size: 0.875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.size-xxsmall {
+        font-size: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.weight-regular {
+        font-weight: 400;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.weight-medium {
+        font-weight: 500;
+    }
+    :host([data-ui-kit-theme='cupra']) .amount.weight-book {
+        font-weight: 350;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.size-xxlarge {
+        font-size: 1.875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.size-xlarge {
+        font-size: 1.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.size-large {
+        font-size: 1.375rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.size-medium {
+        font-size: 1.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.size-small {
+        font-size: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.size-xsmall {
+        font-size: 0.875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.size-xxsmall {
+        font-size: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.weight-regular {
+        font-weight: 400;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.weight-medium {
+        font-weight: 500;
+    }
+    :host([data-ui-kit-theme='cupra']) .currency.weight-book {
+        font-weight: 350;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.size-large {
+        font-size: 1.375rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.size-medium {
+        font-size: 1.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.size-small {
+        font-size: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.size-xsmall {
+        font-size: 0.875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.size-xxsmall {
+        font-size: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.weight-regular {
+        font-weight: 400;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.weight-medium {
+        font-weight: 500;
+    }
+    :host([data-ui-kit-theme='cupra']) .period.weight-book {
+        font-weight: 350;
+    }
+    :host([data-ui-kit-theme='cupra']) .note.size-medium {
+        font-size: 1.125rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .note.size-small {
+        font-size: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .note.size-xsmall {
+        font-size: 0.875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .note.size-xxsmall {
+        font-size: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .note.weight-regular {
+        font-weight: 400;
+    }
+    :host([data-ui-kit-theme='cupra']) .note.weight-medium {
+        font-weight: 500;
+    }
+    :host([data-ui-kit-theme='cupra']) .note.weight-book {
+        font-weight: 350;
+    }
+    :host([data-ui-kit-theme='cupra']) .note {
+        font-feature-settings: 'sups' on;
+    }
+`;
+//#endregion
+export { t as cupraStyles };

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

@@ -0,0 +1,74 @@
+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-currency/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        gap: var(--dg-spacing-s-2);
+        color: var(--dg-color-text-strong);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text {
+        font-family: var(--ui-kit-private-font-currency-family);
+        font-style: var(--ui-kit-private-font-currency-style);
+        letter-spacing: var(--ui-kit-private-font-currency-letter-spacing);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.weight-light {
+        font-weight: var(--ui-kit-private-font-currency-light-weight);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.weight-regular {
+        font-weight: var(--ui-kit-private-font-currency-regular-weight);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.weight-book {
+        font-weight: var(--ui-kit-private-font-currency-book-weight);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.weight-medium {
+        font-weight: var(--ui-kit-private-font-currency-medium-weight);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-colossal {
+        font-size: var(--ui-kit-private-font-currency-colossal-size);
+        line-height: var(--ui-kit-private-font-currency-colossal-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-huge {
+        font-size: var(--ui-kit-private-font-currency-huge-size);
+        line-height: var(--ui-kit-private-font-currency-huge-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-big {
+        font-size: var(--ui-kit-private-font-currency-big-size);
+        line-height: var(--ui-kit-private-font-currency-big-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-large {
+        font-size: var(--ui-kit-private-font-currency-large-size);
+        line-height: var(--ui-kit-private-font-currency-large-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-medium {
+        font-size: var(--ui-kit-private-font-currency-medium-size);
+        line-height: var(--ui-kit-private-font-currency-medium-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-small {
+        font-size: var(--ui-kit-private-font-currency-small-size);
+        line-height: var(--ui-kit-private-font-currency-small-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-tiny {
+        font-size: var(--ui-kit-private-font-currency-tiny-size);
+        line-height: var(--ui-kit-private-font-currency-tiny-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-micro {
+        font-size: var(--ui-kit-private-font-currency-micro-size);
+        line-height: var(--ui-kit-private-font-currency-micro-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .text.size-nano {
+        font-size: var(--ui-kit-private-font-currency-nano-size);
+        line-height: var(--ui-kit-private-font-currency-nano-line-height);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .note {
+        align-self: flex-start;
+        font-feature-settings: 'sups' on;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.strikethrough .text {
+        color: var(--ds-color-text-default-subtle);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .strikethrough-line {
+        background-color: var(--ds-color-text-default-subtle);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,74 @@
+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-currency/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        gap: var(--ds-spacing-s-2);
+        color: var(--ds-color-text-default);
+    }
+    :host([data-ui-kit-theme='seat']) .text {
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    :host([data-ui-kit-theme='seat']) .text.weight-light {
+        font-weight: var(--ds-typography-weight-currency-data-tertiary);
+    }
+    :host([data-ui-kit-theme='seat']) .text.weight-regular {
+        font-weight: var(--ds-typography-weight-currency-data-secondary);
+    }
+    :host([data-ui-kit-theme='seat']) .text.weight-book {
+        font-weight: var(--ds-typography-weight-currency-data-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .text.weight-medium {
+        font-weight: var(--ds-typography-weight-currency-display-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-colossal {
+        font-size: var(--ds-typography-size-currency-colossal);
+        line-height: var(--ds-typography-height-currency-colossal);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-huge {
+        font-size: var(--ds-typography-size-currency-huge);
+        line-height: var(--ds-typography-height-currency-huge);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-big {
+        font-size: var(--ds-typography-size-currency-big);
+        line-height: var(--ds-typography-height-currency-big);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-large {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-medium {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-small {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-tiny {
+        font-size: var(--ds-typography-size-currency-tiny);
+        line-height: var(--ds-typography-height-currency-tiny);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-micro {
+        font-size: var(--ds-typography-size-currency-micro);
+        line-height: var(--ds-typography-height-currency-micro);
+    }
+    :host([data-ui-kit-theme='seat']) .text.size-nano {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+    :host([data-ui-kit-theme='seat']) .note {
+        align-self: flex-start;
+        font-feature-settings: 'sups' on;
+    }
+    :host([data-ui-kit-theme='seat']) .container.strikethrough .text {
+        color: var(--ds-color-text-default-subtle);
+    }
+    :host([data-ui-kit-theme='seat']) .strikethrough-line {
+        background-color: var(--ds-color-text-default-subtle);
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -14,8 +14,10 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-define
 import "../ds-icon-button/ds-icon-button.js";
 import { inputStatesMixin as u } from "../../mixins/inputStatesMixin.js";
 import { commonStyles as d } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as f } from "./styles/cupra-diagonal.styles.js";
+import { seatStyles as p } from "./styles/seat.styles.js";
 //#region src/components/ds-date-picker/ds-date-picker.ts
-var f = class extends u(a) {
+var m = class extends u(a) {
 	constructor(...e) {
 		super(...e), this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelCalendarButton = "", this.isExpanded = !1, this.syncCalendarValue = () => {
 			let e = this.calendarElement;
@@ -40,11 +42,11 @@ var f = class extends u(a) {
 		this.syncCalendarValue(), e.addEventListener("input", this.syncCalendarValue);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), p.injectNativeInputStyles();
+		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), h.injectNativeInputStyles();
 	}
 	static injectNativeInputStyles() {
-		if (p.nativeStylesInjected) return;
-		p.nativeStylesInjected = !0;
+		if (h.nativeStylesInjected) return;
+		h.nativeStylesInjected = !0;
 		let e = document.createElement("style");
 		e.textContent = [".ds-date-picker input[type=\"date\"]::-webkit-calendar-picker-indicator { display: none !important; }", ".ds-date-picker input[type=\"date\"]::-webkit-inner-spin-button { display: none !important; }"].join("\n"), document.head.appendChild(e);
 	}
@@ -114,22 +116,26 @@ var f = class extends u(a) {
 	get invalidErrorTemplate() {
 		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? t : e`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
 	}
-}, p = f, m = (f.styles = [d], f.nativeStylesInjected = !1, f);
-i([n({ type: String })], m.prototype, "size", void 0), i([n({
+}, h = m, g = (m.styles = [
+	d,
+	f,
+	p
+], m.nativeStylesInjected = !1, m);
+i([n({ type: String })], g.prototype, "size", void 0), i([n({
 	type: String,
 	attribute: "helper-text"
-})], m.prototype, "helperText", void 0), i([n({
+})], g.prototype, "helperText", void 0), i([n({
 	type: String,
 	attribute: "forced-error"
-})], m.prototype, "forcedError", void 0), i([n({
+})], g.prototype, "forcedError", void 0), i([n({
 	type: String,
 	attribute: "invalid-error"
-})], m.prototype, "invalidError", void 0), i([n({
+})], g.prototype, "invalidError", void 0), i([n({
 	type: String,
 	attribute: "readonly-text"
-})], m.prototype, "readonlyText", void 0), i([n({
+})], g.prototype, "readonlyText", void 0), i([n({
 	type: String,
 	attribute: "data-aria-label-calendar-button"
-})], m.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], m.prototype, "isExpanded", void 0), m = p = i([o("ds-date-picker")], m);
+})], g.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], g.prototype, "isExpanded", void 0), g = h = i([o("ds-date-picker")], g);
 //#endregion
-export { m as DsDatePicker };
+export { g as DsDatePicker };

package/dist-react/esm/components/ds-date-picker/styles/cupra-diagonal.styles.js

@@ -0,0 +1,207 @@
+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-date-picker/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']):has(.disabled),
+    :host([data-ui-kit-theme='cupra-diagonal']):has(.readonly) {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        position: relative;
+        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(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted(label) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted(label) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled ::slotted(label) {
+        color: var(--ds-field-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+    }
+
+    :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-disabled, #5a5c67);
+        color-scheme: dark;
+        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;
+        cursor: text;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .focus:not(.filled) ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :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, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :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);
+        height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-m-1) 0;
+    }
+
+    :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);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5) 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        width: 100%;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) 0 var(--ds-spacing-m-1);
+        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']) .medium .input-container {
+        padding-left: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container > div {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container:hover,
+    :host([data-ui-kit-theme='cupra-diagonal']) .focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .focus:not(.focus-visible) .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .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']) .container.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .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']) .disabled .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled.invalid .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .footer {
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: var(--ds-spacing-s-5, 8px);
+        overflow: hidden;
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :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);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px) var(--ds-spacing-s-1, 0)
+            var(--ds-spacing-m-1, 12px);
+    }
+
+    :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);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .helper-text,
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly-text {
+        color: var(--ds-field-text-color-caption-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 {
+        color: var(--ds-field-text-color-caption-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .readonly .support-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        margin-top: var(--ds-spacing-s-3, 4px);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };