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

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

@@ -0,0 +1,80 @@
+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-chip/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-blur::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--ui-kit-private-blur-background);
+        -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        border-radius: var(--ui-kit-private-blur-border-radius, inherit);
+        border: var(--ui-kit-private-blur-border, inherit);
+        pointer-events: none;
+        z-index: -1;
+        will-change: filter;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        padding: 0 1rem;
+        gap: 0.375rem;
+        box-sizing: border-box;
+        min-width: var(--ds-sizing-80, 80px);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-default);
+        --ui-kit-private-blur-size: 2.5rem;
+        --ui-kit-private-blur-border: 1px solid transparent;
+        --ui-kit-private-blur-border-radius: var(--ds-border-radius-full);
+        color: var(--ds-color-text-default);
+        --ui-kit-icon-color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.selected {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+        --ui-kit-private-blur-border: 1px solid var(--ds-color-border-selected-subtle);
+        color: var(--ds-color-text-selected-subtle);
+        --ui-kit-icon-color: var(--ds-color-text-selected-subtle);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:hover {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:focus-visible {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        outline-width: var(--ds-border-width-l, 2px);
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-button-outline-color-focus, #6b8494);
+        outline-style: solid;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.large {
+        height: 3rem;
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.medium {
+        height: 2.5rem;
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+        font: 400 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-chip/styles/cupra.styles.js

@@ -0,0 +1,72 @@
+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-chip/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        padding: 0 1rem;
+        gap: var(--ds-cp-scale-on-8);
+        box-sizing: border-box;
+        border-radius: var(--ds-cp-scale-on-24);
+        border: var(--ui-kit-private-chip-border);
+        color: var(--ui-kit-private-chip-color);
+        background-color: var(--ui-kit-private-chip-bg, transparent);
+        --ui-kit-icon-color: var(--ui-kit-private-chip-color);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.light {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-1) solid var(--ds-color-black);
+        --ui-kit-private-chip-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.dark {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-white);
+        --ui-kit-private-chip-color: var(--ds-color-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.selected {
+        --ui-kit-private-chip-border: none;
+        --ui-kit-private-chip-color: var(--ds-color-desert-sand-100);
+        --ui-kit-private-chip-bg: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.selected.dark {
+        --ui-kit-private-chip-color: var(--ds-color-black);
+        --ui-kit-private-chip-bg: var(--ds-color-desert-sand-100);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):hover {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):hover.dark {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):focus-visible,
+    :host([data-ui-kit-theme='cupra']) .container:not(.selected):active {
+        --ui-kit-private-chip-border: var(--ds-cp-scale-on-2) solid var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.large {
+        height: 3rem;
+        font: var(--ds-font-cupra-regular-30-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.medium {
+        height: 2.5rem;
+        font: var(--ds-font-cupra-regular-30-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .container.small {
+        height: 2.25rem;
+        font: var(--ds-font-cupra-regular-20-title);
+    }
+    :host([data-ui-kit-theme='cupra']) .icon.large {
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .icon.medium {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .icon.small {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist-react/esm/components/ds-chip/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-chip/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        padding: 0 1rem;
+        gap: var(--dg-spacing-s-5);
+        box-sizing: border-box;
+        border-radius: var(--dg-border-radius-02);
+        border: var(--ui-kit-private-chip-border);
+        color: var(--ui-kit-private-chip-color);
+        font-family: var(--dg-font-family-base);
+        font-weight: 700;
+        background-color: var(--ui-kit-private-chip-bg, transparent);
+        --ui-kit-icon-color: var(--ui-kit-private-chip-color);
+        --ui-kit-icon-height: 1.5rem;
+        --ui-kit-icon-width: 1.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.light {
+        --ui-kit-private-chip-border: var(--dg-border-width-m) solid var(--dg-color-field-border-filled);
+        --ui-kit-private-chip-color: var(--dg-color-text-strong);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.dark {
+        --ui-kit-private-chip-border: var(--dg-border-width-m) solid var(--dg-color-text-inverted);
+        --ui-kit-private-chip-color: var(--dg-color-text-inverted);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.selected {
+        --ui-kit-private-chip-color: var(--dg-color-text-inverted);
+        --ui-kit-private-chip-bg: var(--dg-global-color-black-100);
+        --ui-kit-private-chip-border: none;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.selected.dark {
+        --ui-kit-private-chip-color: var(--dg-color-text-strong);
+        --ui-kit-private-chip-bg: var(--dg-color-field-bg-selected);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.selected):hover,
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.selected):focus-visible,
+    :host([data-ui-kit-theme='seat-legacy']) .container:not(.selected):active {
+        outline: var(--ui-kit-private-chip-border);
+        outline-offset: -0.125rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.large {
+        height: 3rem;
+        font-size: var(--dg-font-size-body-l);
+        line-height: var(--dg-font-height-body-m);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.medium {
+        height: 2.5rem;
+        font-size: var(--dg-font-size-body-m);
+        line-height: var(--dg-font-height-body-s);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .container.small {
+        height: 2.25rem;
+        font-size: var(--dg-font-size-body-s);
+        line-height: var(--dg-font-height-body-xs);
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon.large {
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon.medium {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon.small {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,80 @@
+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-chip/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-blur::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--ui-kit-private-blur-background);
+        -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        border-radius: var(--ui-kit-private-blur-border-radius, inherit);
+        border: var(--ui-kit-private-blur-border, inherit);
+        pointer-events: none;
+        z-index: -1;
+        will-change: filter;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        padding: 0 1rem;
+        gap: 0.375rem;
+        box-sizing: border-box;
+        min-width: var(--ds-sizing-80, 80px);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-default);
+        --ui-kit-private-blur-size: 2.5rem;
+        --ui-kit-private-blur-border: 1px solid transparent;
+        --ui-kit-private-blur-border-radius: var(--ds-border-radius-full);
+        color: var(--ds-color-text-default);
+        --ui-kit-icon-color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.selected {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+        --ui-kit-private-blur-border: 1px solid var(--ds-color-border-selected-subtle);
+        color: var(--ds-color-text-selected-subtle);
+        --ui-kit-icon-color: var(--ds-color-text-selected-subtle);
+    }
+    :host([data-ui-kit-theme='seat']) .container:hover {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .container:focus-visible {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        outline-width: var(--ds-border-width-l, 2px);
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-button-outline-color-focus, #6b8494);
+        outline-style: solid;
+    }
+    :host([data-ui-kit-theme='seat']) .container:active {
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-active);
+    }
+    :host([data-ui-kit-theme='seat']) .container.large {
+        height: 3rem;
+        --ui-kit-icon-width: 1.5rem;
+        --ui-kit-icon-height: 1.5rem;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .container.medium {
+        height: 2.5rem;
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -17,8 +17,12 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-define
 import "../ds-icon-button/ds-icon-button.js";
 import { stringArrayConverter as p } from "../../utils/arrayConverter.js";
 import { commonStyles as m } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as h } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as g } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as _ } from "./styles/seat-legacy.styles.js";
+import { seatStyles as v } from "./styles/seat.styles.js";
 //#region src/components/ds-chips/ds-chips.ts
-var h = class extends s {
+var y = class extends s {
 	constructor(...e) {
 		super(...e), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
 			this.handleScrollNav();
@@ -108,19 +112,25 @@ var h = class extends s {
             </div>
         `;
 	}
-}, g = (h.styles = [m], h);
+}, b = (y.styles = [
+	m,
+	h,
+	v,
+	g,
+	_
+], y);
 o([n({
 	type: Array,
 	attribute: "selected-chips",
 	converter: p,
 	reflect: !0
-})], g.prototype, "selectedChips", void 0), o([n({
+})], b.prototype, "selectedChips", void 0), o([n({
 	type: Boolean,
 	attribute: "multi-choice",
 	converter: l
-})], g.prototype, "multiChoice", void 0), o([n({ type: String })], g.prototype, "size", void 0), o([n({
+})], b.prototype, "multiChoice", void 0), o([n({ type: String })], b.prototype, "size", void 0), o([n({
 	type: String,
 	reflect: !0
-})], g.prototype, "mode", void 0), o([r()], g.prototype, "hasScrollLeft", void 0), o([r()], g.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], g.prototype, "chips", void 0), o([i(".chips-container")], g.prototype, "chipsContainer", void 0), g = o([c("ds-chips")], g);
+})], b.prototype, "mode", void 0), o([r()], b.prototype, "hasScrollLeft", void 0), o([r()], b.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], b.prototype, "chips", void 0), o([i(".chips-container")], b.prototype, "chipsContainer", void 0), b = o([c("ds-chips")], b);
 //#endregion
-export { g as DsChips };
+export { b as DsChips };

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

@@ -0,0 +1,16 @@
+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-chips/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        --ui-kit-private-chips-fade-color: #15181e;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .chips-container {
+        gap: 0.5rem;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        overflow: hidden;
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,18 @@
+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-chips/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        --ui-kit-private-chips-fade-color: white;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.dark {
+        --ui-kit-private-chips-fade-color: black;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .chips-container {
+        gap: var(--ds-cp-scale-on-8);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

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

@@ -0,0 +1,18 @@
+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-chips/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        --ui-kit-private-chips-fade-color: white;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container.dark {
+        --ui-kit-private-chips-fade-color: black;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .chips-container {
+        gap: var(--dg-size-08);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,16 @@
+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-chips/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        --ui-kit-private-chips-fade-color: #15181e;
+    }
+
+    :host([data-ui-kit-theme='seat']) .chips-container {
+        gap: 0.5rem;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        overflow: hidden;
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -9,8 +9,12 @@ import { classMap as o } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modu
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import { formatNumber as s } from "../../utils/formatNumber/formatNumber.js";
 import { commonStyles as c } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as l } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as u } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as d } from "./styles/seat-legacy.styles.js";
+import { seatStyles as f } from "./styles/seat.styles.js";
 //#region src/components/ds-currency/ds-currency.ts
-var l = class extends i {
+var p = class extends i {
 	constructor(...e) {
 		super(...e), this.currencyDisplay = "symbol", this.minimumFractionDigits = 0, this.maximumFractionDigits = 20, this.amountSize = "medium", this.amountWeight = "medium", this.periodSize = "medium", this.periodWeight = "medium", this.noteSize = "medium", this.noteWeight = "medium", this.variant = "default";
 	}
@@ -63,52 +67,58 @@ var l = class extends i {
             ${this.valueTemplate}${this.periodTemplate}${this.noteTemplate}${r}
         </div>`;
 	}
-}, u = (l.styles = [c], l);
-r([n({ type: String })], u.prototype, "locale", void 0), r([n({
+}, m = (p.styles = [
+	c,
+	l,
+	f,
+	u,
+	d
+], p);
+r([n({ type: String })], m.prototype, "locale", void 0), r([n({
 	type: String,
 	attribute: "currency-code"
-})], u.prototype, "currencyCode", void 0), r([n({
+})], m.prototype, "currencyCode", void 0), r([n({
 	type: String,
 	attribute: "currency-display"
-})], u.prototype, "currencyDisplay", void 0), r([n({
+})], m.prototype, "currencyDisplay", void 0), r([n({
 	type: Object,
 	attribute: "symbol-overrides"
-})], u.prototype, "symbolOverrides", void 0), r([n({
+})], m.prototype, "symbolOverrides", void 0), r([n({
 	type: String,
 	attribute: "value-text"
-})], u.prototype, "valueText", void 0), r([n({
+})], m.prototype, "valueText", void 0), r([n({
 	type: Number,
 	attribute: "amount-number"
-})], u.prototype, "amountNumber", void 0), r([n({
+})], m.prototype, "amountNumber", void 0), r([n({
 	type: Number,
 	attribute: "minimum-fraction-digits"
-})], u.prototype, "minimumFractionDigits", void 0), r([n({
+})], m.prototype, "minimumFractionDigits", void 0), r([n({
 	type: Number,
 	attribute: "maximum-fraction-digits"
-})], u.prototype, "maximumFractionDigits", void 0), r([n({ type: String })], u.prototype, "period", void 0), r([n({ type: String })], u.prototype, "note", void 0), r([n({
+})], m.prototype, "maximumFractionDigits", void 0), r([n({ type: String })], m.prototype, "period", void 0), r([n({ type: String })], m.prototype, "note", void 0), r([n({
 	type: String,
 	attribute: "thousand-separator"
-})], u.prototype, "thousandSeparator", void 0), r([n({
+})], m.prototype, "thousandSeparator", void 0), r([n({
 	type: String,
 	attribute: "fraction-separator"
-})], u.prototype, "fractionSeparator", void 0), r([n({
+})], m.prototype, "fractionSeparator", void 0), r([n({
 	type: String,
 	attribute: "amount-size"
-})], u.prototype, "amountSize", void 0), r([n({
+})], m.prototype, "amountSize", void 0), r([n({
 	type: String,
 	attribute: "amount-weight"
-})], u.prototype, "amountWeight", void 0), r([n({
+})], m.prototype, "amountWeight", void 0), r([n({
 	type: String,
 	attribute: "period-size"
-})], u.prototype, "periodSize", void 0), r([n({
+})], m.prototype, "periodSize", void 0), r([n({
 	type: String,
 	attribute: "period-weight"
-})], u.prototype, "periodWeight", void 0), r([n({
+})], m.prototype, "periodWeight", void 0), r([n({
 	type: String,
 	attribute: "note-size"
-})], u.prototype, "noteSize", void 0), r([n({
+})], m.prototype, "noteSize", void 0), r([n({
 	type: String,
 	attribute: "note-weight"
-})], u.prototype, "noteWeight", void 0), r([n({ type: String })], u.prototype, "variant", void 0), u = r([a("ds-currency")], u);
+})], m.prototype, "noteWeight", void 0), r([n({ type: String })], m.prototype, "variant", void 0), m = r([a("ds-currency")], m);
 //#endregion
-export { u as DsCurrency };
+export { m as DsCurrency };

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