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

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

@@ -0,0 +1,206 @@
+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/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']):has(.disabled),
+    :host([data-ui-kit-theme='seat']):has(.readonly) {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .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='seat']) .container.focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::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='seat']) .large ::slotted(label) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium ::slotted(label) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled ::slotted(label) {
+        color: var(--ds-field-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .readonly ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted(input) {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 0 0;
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+        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='seat']) .focus:not(.filled) ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .filled ::slotted(input) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted(input:disabled) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .readonly ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .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='seat']) .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='seat']) .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='seat']) .medium .input-container {
+        padding-left: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='seat']) .input-container > div {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .input-container:hover,
+    :host([data-ui-kit-theme='seat']) .focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='seat']) .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='seat']) .filled .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.error .input-container,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .disabled .input-container,
+    :host([data-ui-kit-theme='seat']) .disabled.error .input-container,
+    :host([data-ui-kit-theme='seat']) .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='seat']) .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='seat']) .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='seat']) .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='seat']) .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='seat']) .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .helper-text,
+    :host([data-ui-kit-theme='seat']) .readonly-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .error-text {
+        color: var(--ds-field-text-color-caption-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='seat']) .disabled .support-text {
+        color: var(--ds-field-text-color-caption-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .readonly .support-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        margin-top: var(--ds-spacing-s-3, 4px);
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -13,8 +13,11 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map
 import { debounce as u } from "../../utils/debounce.js";
 import { scrollLock as d } from "../../utils/scrollLock.js";
 import { commonStyles as f } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as p } from "./styles/cupra-diagonal.styles.js";
+import { seatLegacyStyles as m } from "./styles/seat-legacy.styles.js";
+import { seatStyles as h } from "./styles/seat.styles.js";
 //#region src/components/ds-dialog/ds-dialog.ts
-var p = class extends o {
+var g = class extends o {
 	constructor(...e) {
 		super(...e), this.lockClose = !1, this.lockScroll = !0, this._open = void 0, this._openState = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.scrollLocked = !1, this.handleCloseButtonClick = () => {
 			this.handleClose("button");
@@ -112,25 +115,30 @@ var p = class extends o {
             </dialog>
         `;
 	}
-}, m = (p.styles = [f], p);
+}, _ = (g.styles = [
+	f,
+	p,
+	h,
+	m
+], g);
 a([n({
 	type: Boolean,
 	converter: c,
 	attribute: "lock-close"
-})], m.prototype, "lockClose", void 0), a([n({
+})], _.prototype, "lockClose", void 0), a([n({
 	type: Boolean,
 	converter: c,
 	attribute: "lock-scroll"
-})], m.prototype, "lockScroll", void 0), a([n({
+})], _.prototype, "lockScroll", void 0), a([n({
 	type: Boolean,
 	attribute: "open",
 	converter: c
-})], m.prototype, "_open", void 0), a([r()], m.prototype, "_openState", void 0), a([n({ type: String })], m.prototype, "size", void 0), a([n({
+})], _.prototype, "_open", void 0), a([r()], _.prototype, "_openState", void 0), a([n({ type: String })], _.prototype, "size", void 0), a([n({
 	type: String,
 	attribute: "data-aria-label"
-})], m.prototype, "dataAriaLabel", void 0), a([n({
+})], _.prototype, "dataAriaLabel", void 0), a([n({
 	type: String,
 	attribute: "data-aria-description"
-})], m.prototype, "dataAriaDescription", void 0), a([r()], m.prototype, "hasBeenOpened", void 0), a([r()], m.prototype, "hasScroll", void 0), a([i(".content")], m.prototype, "content", void 0), a([i("dialog")], m.prototype, "nativeDialog", void 0), m = a([s("ds-dialog")], m);
+})], _.prototype, "dataAriaDescription", void 0), a([r()], _.prototype, "hasBeenOpened", void 0), a([r()], _.prototype, "hasScroll", void 0), a([i(".content")], _.prototype, "content", void 0), a([i("dialog")], _.prototype, "nativeDialog", void 0), _ = a([s("ds-dialog")], _);
 //#endregion
-export { m as DsDialog };
+export { _ as DsDialog };

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

@@ -0,0 +1,101 @@
+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-dialog/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+        box-sizing: border-box;
+        padding: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .dialog::backdrop {
+        background-color: var(--ds-color-bg-overlay);
+        -webkit-backdrop-filter: blur(0.75rem);
+        backdrop-filter: blur(0.75rem);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .panel {
+        background: transparent;
+        border: none;
+        display: flex;
+        gap: var(--ds-spacing-s-5);
+        flex-direction: column;
+        align-items: flex-end;
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content-container {
+        flex: 1 1 auto;
+        align-self: stretch;
+        padding: var(--ds-spacing-layout-l) var(--ds-spacing-m-3);
+        border-radius: var(--ds-border-radius-m);
+        background-color: var(--ds-color-surface-elevated);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .with-scroll .content {
+        padding-right: var(--ds-spacing-layout-s);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s);
+        flex: 1;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='footer']) {
+        flex-shrink: 0;
+        margin-top: var(--ds-spacing-layout-m);
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-m-2) var(--ds-spacing-m-4);
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .content-container {
+            padding: var(--ds-spacing-layout-l);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-2);
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel {
+            flex-direction: row-reverse;
+            align-items: flex-start;
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel.small {
+            width: 32.75rem;
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel.medium {
+            width: 41.75rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-4);
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-9);
+        }
+        :host([data-ui-kit-theme='cupra-diagonal']) .panel.large {
+            width: 78.5rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-thumb,
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-color: var(--ds-opacity-white-70);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,105 @@
+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-dialog/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .dialog {
+        box-sizing: border-box;
+        padding: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .dialog::backdrop {
+        background-color: var(--ds-color-bg-overlay);
+        -webkit-backdrop-filter: blur(0.75rem);
+        backdrop-filter: blur(0.75rem);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .panel {
+        background: transparent;
+        border: none;
+        display: flex;
+        gap: var(--ds-spacing-s-5);
+        flex-direction: column;
+        align-items: flex-end;
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .content-container {
+        flex: 1 1 auto;
+        align-self: stretch;
+        padding: var(--ds-spacing-layout-l) var(--ds-spacing-m-3);
+        border-radius: var(--ds-border-radius-m);
+        background-color: var(--ds-color-surface-elevated);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .with-scroll .content {
+        padding-right: var(--ds-spacing-layout-s);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s);
+        flex: 1;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='footer']) {
+        flex-shrink: 0;
+        margin-top: var(--ds-spacing-layout-m);
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-m-2) var(--ds-spacing-m-4);
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .content-container {
+            padding: var(--ds-spacing-layout-l);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-2);
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel {
+            flex-direction: row-reverse;
+            align-items: flex-start;
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel.small {
+            width: 32.75rem;
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel.medium {
+            width: 41.75rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-4);
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat-legacy']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-9);
+        }
+        :host([data-ui-kit-theme='seat-legacy']) .panel.large {
+            width: 78.5rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-thumb,
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-color: var(--ds-opacity-white-70);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='close-button']) {
+        --dg-icon-button-border-radius-base: var(--dg-border-radius-full);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,101 @@
+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-dialog/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .dialog {
+        box-sizing: border-box;
+        padding: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='seat']) .dialog::backdrop {
+        background-color: var(--ds-color-bg-overlay);
+        -webkit-backdrop-filter: blur(0.75rem);
+        backdrop-filter: blur(0.75rem);
+    }
+
+    :host([data-ui-kit-theme='seat']) .panel {
+        background: transparent;
+        border: none;
+        display: flex;
+        gap: var(--ds-spacing-s-5);
+        flex-direction: column;
+        align-items: flex-end;
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    :host([data-ui-kit-theme='seat']) .content-container {
+        flex: 1 1 auto;
+        align-self: stretch;
+        padding: var(--ds-spacing-layout-l) var(--ds-spacing-m-3);
+        border-radius: var(--ds-border-radius-m);
+        background-color: var(--ds-color-surface-elevated);
+    }
+
+    :host([data-ui-kit-theme='seat']) .with-scroll .content {
+        padding-right: var(--ds-spacing-layout-s);
+    }
+
+    :host([data-ui-kit-theme='seat']) .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s);
+        flex: 1;
+        overflow: auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='footer']) {
+        flex-shrink: 0;
+        margin-top: var(--ds-spacing-layout-m);
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat']) .dialog {
+            padding: var(--ds-spacing-m-2) var(--ds-spacing-m-4);
+        }
+        :host([data-ui-kit-theme='seat']) .content-container {
+            padding: var(--ds-spacing-layout-l);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-2);
+        }
+        :host([data-ui-kit-theme='seat']) .panel {
+            flex-direction: row-reverse;
+            align-items: flex-start;
+        }
+        :host([data-ui-kit-theme='seat']) .panel.small {
+            width: 32.75rem;
+        }
+        :host([data-ui-kit-theme='seat']) .panel.medium {
+            width: 41.75rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-4);
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat']) .dialog {
+            padding: var(--ds-spacing-l-3) var(--ds-spacing-l-9);
+        }
+        :host([data-ui-kit-theme='seat']) .panel.large {
+            width: 78.5rem;
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar-thumb,
+    :host([data-ui-kit-theme='seat']) .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-color: var(--ds-opacity-white-70);
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-dialog-body/ds-dialog-body.js

@@ -6,8 +6,11 @@ import { customUiKitElement as r } from "../../decorators/customUiKitElement.js"
 import { classMap as i } 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 a } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as o } from "./styles/cupra-diagonal.styles.js";
+import { seatLegacyStyles as s } from "./styles/seat-legacy.styles.js";
+import { seatStyles as c } from "./styles/seat.styles.js";
 //#region src/components/ds-dialog-body/ds-dialog-body.ts
-var o = class extends n {
+var l = class extends n {
 	get classes() {
 		return { container: !0 };
 	}
@@ -30,7 +33,12 @@ var o = class extends n {
             </div>
         `;
 	}
-}, s = (o.styles = [a], o);
-s = t([r("ds-dialog-body")], s);
+}, u = (l.styles = [
+	a,
+	o,
+	c,
+	s
+], l);
+u = t([r("ds-dialog-body")], u);
 //#endregion
-export { s as DsDialogBody };
+export { u as DsDialogBody };

package/dist-react/esm/components/ds-dialog-body/styles/cupra-diagonal.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-dialog-body/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-m);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='description']) {
+        color: var(--ds-color-text-default-subtlest);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='image']) {
+        border-radius: var(--ds-border-radius-m);
+        width: 100%;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(:not([slot])) {
+        color: var(--ds-color-text-default-subtlest);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-dialog-body/styles/seat-legacy.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-dialog-body/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='description']) {
+        color: var(--ds-color-text-default-subtlest);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='image']) {
+        border-radius: var(--ds-border-radius-m);
+        width: 100%;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted(:not([slot])) {
+        color: var(--ds-color-text-default-subtlest);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist-react/esm/components/ds-dialog-body/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-dialog-body/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-m);
+    }
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='description']) {
+        color: var(--ds-color-text-default-subtlest);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='image']) {
+        border-radius: var(--ds-border-radius-m);
+        width: 100%;
+    }
+    :host([data-ui-kit-theme='seat']) ::slotted(:not([slot])) {
+        color: var(--ds-color-text-default-subtlest);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+`;
+//#endregion
+export { t as seatStyles };