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

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

@@ -0,0 +1,69 @@
+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-logo/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        width: 100%;
+        box-sizing: border-box;
+    }
+    :host([data-ui-kit-theme='cupra']) .container.xxsmall {
+        max-width: 8rem;
+        max-height: 1.5rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+        gap: var(--dg-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.xsmall {
+        max-width: 12.125rem;
+        max-height: 2rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+        gap: var(--dg-spacing-16, 16px);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.small {
+        max-width: 13.9375rem;
+        max-height: 2.5rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+        gap: var(--dg-spacing-16, 16px);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.medium {
+        max-width: 17.75rem;
+        max-height: 3rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+        gap: var(--dg-spacing-20, 20px);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.large {
+        max-width: 21rem;
+        max-height: 3.5rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+        gap: var(--dg-spacing-24, 24px);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.xlarge {
+        max-width: 24.5rem;
+        max-height: 4rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+        gap: var(--dg-spacing-32, 32px);
+    }
+    :host([data-ui-kit-theme='cupra']) .icon-logo {
+        display: contents;
+        --ui-kit-icon-width: auto;
+        --ui-kit-icon-height: 100%;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .icon-logo {
+        --ui-kit-icon-color: var(--ds-color-black, black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .icon-logo {
+        --ui-kit-icon-color: var(--dg-color-text-strong, #fafafa);
+    }
+    :host([data-ui-kit-theme='cupra']) .icon-wordmark {
+        display: contents;
+        --ui-kit-icon-width: 100%;
+        --ui-kit-icon-height: 100%;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .icon-wordmark {
+        --ui-kit-icon-color: var(--ds-color-black, black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .icon-wordmark {
+        --ui-kit-icon-color: var(--dg-color-text-strong, #fafafa);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

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

@@ -0,0 +1,42 @@
+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-logo/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        width: 100%;
+        box-sizing: border-box;
+        grid-template-columns: auto;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.xxsmall {
+        max-height: 1.5rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.xsmall {
+        max-height: 2rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.small {
+        max-height: 2.5rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium {
+        max-height: 3rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large {
+        max-height: 3.5rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.xlarge {
+        max-height: 4rem;
+        padding: var(--dg-spacing-00, 0px) var(--dg-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon-logo {
+        display: contents;
+        --ui-kit-icon-color: var(--dg-color-text-default, #1b1b1b);
+        --ui-kit-icon-width: auto;
+        --ui-kit-icon-height: 100%;
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,59 @@
+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-logo/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        width: 100%;
+        box-sizing: border-box;
+    }
+    :host([data-ui-kit-theme='seat']) .container.xxsmall {
+        max-width: 8rem;
+        max-height: 1.5rem;
+        padding: var(--ds-spacing-00, 0px) var(--ds-spacing-08, 8px);
+        gap: var(--ds-spacing-08, 8px);
+    }
+    :host([data-ui-kit-theme='seat']) .container.xsmall {
+        max-width: 12.125rem;
+        max-height: 2rem;
+        padding: var(--ds-spacing-00, 0px) var(--ds-spacing-08, 8px);
+        gap: var(--ds-spacing-16, 16px);
+    }
+    :host([data-ui-kit-theme='seat']) .container.small {
+        max-width: 13.9375rem;
+        max-height: 2.5rem;
+        padding: var(--ds-spacing-00, 0px) var(--ds-spacing-08, 8px);
+        gap: var(--ds-spacing-16, 16px);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium {
+        max-width: 17.75rem;
+        max-height: 3rem;
+        padding: var(--ds-spacing-00, 0px) var(--ds-spacing-08, 8px);
+        gap: var(--ds-spacing-20, 20px);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large {
+        max-width: 21rem;
+        max-height: 3.5rem;
+        padding: var(--ds-spacing-00, 0px) var(--ds-spacing-08, 8px);
+        gap: var(--ds-spacing-24, 24px);
+    }
+    :host([data-ui-kit-theme='seat']) .container.xlarge {
+        max-width: 24.5rem;
+        max-height: 4rem;
+        padding: var(--ds-spacing-00, 0px) var(--ds-spacing-08, 8px);
+        gap: var(--ds-spacing-32, 32px);
+    }
+    :host([data-ui-kit-theme='seat']) .icon-logo {
+        display: contents;
+        --ui-kit-icon-color: var(--ds-color-text-default, #fafafa);
+        --ui-kit-icon-width: auto;
+        --ui-kit-icon-height: 100%;
+    }
+    :host([data-ui-kit-theme='seat']) .icon-wordmark {
+        display: contents;
+        --ui-kit-icon-color: var(--ds-color-text-default, #fafafa);
+        --ui-kit-icon-width: 100%;
+        --ui-kit-icon-height: 100%;
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-main-title/ds-main-title.js

@@ -1,15 +1,15 @@
 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 { classMap as a } 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 o } from "./styles/common.styles.js";
 //#region src/components/ds-main-title/ds-main-title.ts
-var s = class extends r {
+var s = class extends t {
 	constructor(...e) {
 		super(...e), this.alignment = "left";
 	}
@@ -28,6 +28,6 @@ var s = class extends r {
         `;
 	}
 }, c = (s.styles = [o], s);
-n([t({ type: String })], c.prototype, "alignment", void 0), c = n([i("ds-main-title")], c);
+r([n({ type: String })], c.prototype, "alignment", void 0), c = r([i("ds-main-title")], c);
 //#endregion
 export { c as DsMainTitle };

package/dist-react/esm/components/ds-map-pin/ds-map-pin.js

@@ -14,8 +14,12 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map
 import { ifDefined as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
 import { mapPinStyles as d } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as f } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as p } from "./styles/cupra.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-map-pin/ds-map-pin.ts
-var f = class extends a {
+var g = class extends a {
 	constructor(...e) {
 		super(...e), this.width = 48, this.height = 48, this._checked = void 0, this.initialChecked = !1, this.iconSize = 24, this.iconTop = 8;
 	}
@@ -82,34 +86,40 @@ var f = class extends a {
             </span>
         `;
 	}
-}, p = (f.styles = [d], f);
+}, _ = (g.styles = [
+	d,
+	f,
+	h,
+	p,
+	m
+], g);
 i([n({
 	type: Number,
 	attribute: "width"
-})], p.prototype, "width", void 0), i([n({
+})], _.prototype, "width", void 0), i([n({
 	type: Number,
 	attribute: "height"
-})], p.prototype, "height", void 0), i([n({
+})], _.prototype, "height", void 0), i([n({
 	type: Boolean,
 	attribute: "checked",
 	converter: s,
 	reflect: !0
-})], p.prototype, "_checked", void 0), i([n({
+})], _.prototype, "_checked", void 0), i([n({
 	type: Boolean,
 	converter: s,
 	attribute: "initial-checked"
-})], p.prototype, "initialChecked", void 0), i([r()], p.prototype, "_checkedState", void 0), i([n({
+})], _.prototype, "initialChecked", void 0), i([r()], _.prototype, "_checkedState", void 0), i([n({
 	type: String,
 	attribute: "icon-name"
-})], p.prototype, "iconName", void 0), i([n({
+})], _.prototype, "iconName", void 0), i([n({
 	type: Number,
 	attribute: "icon-size"
-})], p.prototype, "iconSize", void 0), i([n({
+})], _.prototype, "iconSize", void 0), i([n({
 	type: Number,
 	attribute: "icon-top"
-})], p.prototype, "iconTop", void 0), i([n({
+})], _.prototype, "iconTop", void 0), i([n({
 	type: Number,
 	attribute: "cluster-count"
-})], p.prototype, "clusterCount", void 0), p = i([o("ds-map-pin")], p);
+})], _.prototype, "clusterCount", void 0), _ = i([o("ds-map-pin")], _);
 //#endregion
-export { p as DsMapPin };
+export { _ as DsMapPin };

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

@@ -0,0 +1,69 @@
+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-map-pin/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .marker {
+        filter: drop-shadow(
+            0 var(--ds-shadow-vertical-level-01, 4px) var(--ds-shadow-blur-level-01, 4px)
+                var(--ds-color-shadow-level-01, rgba(9, 9, 11, 0.2))
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .marker > path {
+        fill: var(--ds-color-surface-marker-neutral-default, #fafafa);
+        d: path(
+            'M 24.1599 48.6467 C 26.4109 38.2008 41.9998 30.5848 41.9998 18.5849 C 41.9998 8.74991 33.9409 0.777954 23.9999 0.777954 C 14.059 0.777954 6 8.74991 6 18.5849 C 6 31.2298 21.5719 37.9948 23.5469 48.6077 C 23.7759 48.8277 23.8869 48.8277 24.1599 48.6467 Z'
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:hover .marker > path {
+        fill: var(--ds-color-surface-marker-neutral-hover, #d3d6d9);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active .marker > path {
+        fill: var(--ds-color-surface-marker-neutral-pressed, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-default-static-inverted, #09090b);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .checked {
+        .marker > path {
+            fill: var(--ds-color-surface-marker-brand-default, #b2764d);
+        }
+
+        .icon {
+            --ui-kit-icon-color: var(--ds-color-icon-default-static, #fafafa);
+        }
+
+        &.container:hover .marker > path {
+            fill: var(--ds-color-surface-marker-brand-hover, #885a3b);
+        }
+
+        &.container:active .marker > path {
+            fill: var(--ds-color-surface-marker-brand-pressed, #6c472f);
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .cluster-count {
+        box-sizing: border-box;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ds-color-bg-default, #15181e);
+        padding: var(--ds-spacing-s-3, 4px);
+        font-size: var(--ds-typography-size-body-s, 12px);
+        line-height: var(--ds-typography-height-body-s, 16px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        color: var(--ds-color-text-default, #fafafa);
+        font-style: normal;
+        font-weight: 400;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), serif;
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,30 @@
+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-map-pin/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .marker > path {
+        fill: var(--ds-color-black);
+        d: path(
+            'M 24.1599 48.6467 C 26.4109 38.2008 41.9998 30.5848 41.9998 18.5849 C 41.9998 8.74991 33.9409 0.777954 23.9999 0.777954 C 14.059 0.777954 6 8.74991 6 18.5849 C 6 31.2298 21.5719 37.9948 23.5469 48.6077 C 23.7759 48.8277 23.8869 48.8277 24.1599 48.6467 Z'
+        );
+    }
+    :host([data-ui-kit-theme='cupra']) .checked .marker > path {
+        fill: var(--ds-color-copper-100);
+    }
+    :host([data-ui-kit-theme='cupra']) .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .cluster-count {
+        border-radius: var(--dg-border-radius-full);
+        background: var(--dg-color-bg-base);
+        font-size: var(--dg-font-size-body-s, 12px);
+        line-height: var(--dg-font-height-body-s, 16px);
+        letter-spacing: var(--dg-font-letter-spacing-m, 0.5px);
+        color: var(--dg-color-text-strong);
+        font-family: var(--dg-font-family-base, 'cupra-screen'), serif;
+        font-style: normal;
+        font-weight: 400;
+    }
+`;
+//#endregion
+export { t as cupraStyles };

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

@@ -0,0 +1,47 @@
+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-map-pin/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .marker > path {
+        fill: var(--dg-color-icon-strong);
+        filter: drop-shadow(0 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
+        d: path(
+            'M24.16 47.869C26.411 37.423 42 29.807 42 17.807C42 7.972 33.941 0 24 0C14.059 0 6 7.972 6 17.807C6 30.452 21.572 37.217 23.547 47.83C23.776 48.05 23.887 48.05 24.16 47.869Z'
+        );
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .icon {
+        --ui-kit-icon-color: var(--dg-global-color-black-100);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .checked {
+        .marker > path {
+            fill: var(--dg-global-color-liminal-60);
+        }
+        .icon {
+            --ui-kit-icon-color: var(--dg-color-icon-strong);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .icon {
+        position: absolute;
+        top: var(--dg-size-06);
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .cluster-count {
+        border-radius: var(--dg-border-radius-full);
+        background: var(--dg-color-bg-base);
+        font-size: var(--dg-font-size-body-s, 12px);
+        line-height: var(--dg-font-height-body-s, 16px);
+        letter-spacing: var(--dg-font-letter-spacing-m, 0.5px);
+        color: var(--dg-color-text-strong);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .cluster {
+        .cluster-count {
+            font-family: var(--dg-typeface-font-family-seat);
+        }
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,69 @@
+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-map-pin/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .marker {
+        filter: drop-shadow(
+            0 var(--ds-shadow-vertical-level-01, 4px) var(--ds-shadow-blur-level-01, 4px)
+                var(--ds-color-shadow-level-01, rgba(9, 9, 11, 0.2))
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .marker > path {
+        fill: var(--ds-color-surface-marker-neutral-default, #fafafa);
+        d: path(
+            'M 24.1599 48.6467 C 26.4109 38.2008 41.9998 30.5848 41.9998 18.5849 C 41.9998 8.74991 33.9409 0.777954 23.9999 0.777954 C 14.059 0.777954 6 8.74991 6 18.5849 C 6 31.2298 21.5719 37.9948 23.5469 48.6077 C 23.7759 48.8277 23.8869 48.8277 24.1599 48.6467 Z'
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:hover .marker > path {
+        fill: var(--ds-color-surface-marker-neutral-hover, #d3d6d9);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:active .marker > path {
+        fill: var(--ds-color-surface-marker-neutral-pressed, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-default-static-inverted, #09090b);
+    }
+
+    :host([data-ui-kit-theme='seat']) .checked {
+        .marker > path {
+            fill: var(--ds-color-surface-marker-brand-default, #b2764d);
+        }
+
+        .icon {
+            --ui-kit-icon-color: var(--ds-color-icon-default-static, #fafafa);
+        }
+
+        &.container:hover .marker > path {
+            fill: var(--ds-color-surface-marker-brand-hover, #885a3b);
+        }
+
+        &.container:active .marker > path {
+            fill: var(--ds-color-surface-marker-brand-pressed, #6c472f);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .cluster-count {
+        box-sizing: border-box;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ds-color-bg-default, #15181e);
+        padding: var(--ds-spacing-s-3, 4px);
+        font-size: var(--ds-typography-size-body-s, 12px);
+        line-height: var(--ds-typography-height-body-s, 16px);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        color: var(--ds-color-text-default, #fafafa);
+        font-style: normal;
+        font-weight: 400;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), serif;
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-media-control/ds-media-control.js

@@ -1,10 +1,10 @@
 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 { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.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 "../ds-icon/ds-icon.js";
 import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
@@ -14,7 +14,7 @@ import { ifDefined as c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_mod
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
 import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-media-control/ds-media-control.ts
-var u = class extends i {
+var u = class extends t {
 	constructor(...e) {
 		super(...e), this._state = void 0, this._stateValue = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
 			e.stopPropagation();
@@ -95,16 +95,16 @@ var u = class extends i {
         `;
 	}
 }, d = (u.styles = [l], u);
-r([t({
+i([n({
 	type: String,
 	attribute: "state",
 	reflect: !0
-})], d.prototype, "_state", void 0), r([n()], d.prototype, "_stateValue", void 0), r([t({
+})], d.prototype, "_state", void 0), i([r()], d.prototype, "_stateValue", void 0), i([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "size", void 0), r([t({
+})], d.prototype, "size", void 0), i([n({
 	type: Number,
 	reflect: !0
-})], d.prototype, "progress", void 0), d = r([a("ds-media-control")], d);
+})], d.prototype, "progress", void 0), d = i([a("ds-media-control")], d);
 //#endregion
 export { d as DsMediaControl };

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

@@ -16,8 +16,11 @@ import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
 import "../ds-icon-button/ds-icon-button.js";
 import "../ds-button/ds-button.js";
 import { alignStyles as d, commonStyles as f, dialogStyles as p, fitStyles as m, fullScreenStyles as h } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as g } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as _ } from "./styles/cupra.styles.js";
+import { seatStyles as v } from "./styles/seat.styles.js";
 //#region src/components/ds-modal/ds-modal.ts
-var g = class extends u(i) {
+var y = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.withCloseButton = !0, this.variant = "fullScreen", this.zIndex = 2e3, this.disableScrollLock = !1, this.fullWidth = !1, this.vAlign = "default";
 	}
@@ -155,44 +158,47 @@ var g = class extends u(i) {
 			composed: !0
 		})));
 	}
-}, _ = (g.styles = [
+}, b = (y.styles = [
 	h,
 	p,
 	m,
 	f,
-	d
-], g);
+	d,
+	g,
+	v,
+	_
+], y);
 r([n({
 	type: Boolean,
 	reflect: !0,
 	converter: o
-})], _.prototype, "open", void 0), r([n({
+})], b.prototype, "open", void 0), r([n({
 	type: Boolean,
 	attribute: "with-close-button",
 	converter: o
-})], _.prototype, "withCloseButton", void 0), r([n({
+})], b.prototype, "withCloseButton", void 0), r([n({
 	type: String,
 	attribute: "cancel-button-text"
-})], _.prototype, "cancelButtonText", void 0), r([n({
+})], b.prototype, "cancelButtonText", void 0), r([n({
 	type: String,
 	attribute: "confirm-button-text"
-})], _.prototype, "confirmButtonText", void 0), r([n({ type: String })], _.prototype, "variant", void 0), r([n({
+})], b.prototype, "confirmButtonText", void 0), r([n({ type: String })], b.prototype, "variant", void 0), r([n({
 	type: Number,
 	attribute: "z-index"
-})], _.prototype, "zIndex", void 0), r([n({
+})], b.prototype, "zIndex", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "disable-scroll-lock"
-})], _.prototype, "disableScrollLock", void 0), r([n({
+})], b.prototype, "disableScrollLock", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], _.prototype, "iconName", void 0), r([n({
+})], b.prototype, "iconName", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], _.prototype, "fullWidth", void 0), r([n({
+})], b.prototype, "fullWidth", void 0), r([n({
 	type: String,
 	attribute: "v-align"
-})], _.prototype, "vAlign", void 0), _ = r([a("ds-modal")], _);
+})], b.prototype, "vAlign", void 0), b = r([a("ds-modal")], b);
 //#endregion
-export { _ as DsModal };
+export { b as DsModal };

package/dist-react/esm/components/ds-modal/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-modal/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        background-color: var(--ds-color-bg-overlay);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .backdrop {
+        background-color: var(--ds-color-surface-elevated);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='title']) {
+        font: 350 1.375rem / 1.5rem 'cupra-screen';
+        color: var(--ds-color-text-default);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) ::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='cupra-diagonal']) ::slotted([slot='title']) {
+            font: 400 1.875rem / 2.25rem 'cupra-screen';
+        }
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-modal/styles/cupra.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/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        background-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .backdrop {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='title']) {
+        font: var(--ds-cp-type-title4-book);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='content']) {
+        font: var(--ds-cp-type-small-book);
+        color: var(--ds-color-grey);
+    }
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra']) ::slotted([slot='title']) {
+            font: var(--ds-font-cupra-regular-60);
+        }
+    }
+`;
+//#endregion
+export { t as cupraStyles };