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

package/dist/esm/components/ds-drawer/ds-drawer.js

@@ -14,9 +14,12 @@ import { ifDefined as l } 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 "../ds-icon-button/ds-icon-button.js";
 import { commonStyles as u, iconStyles as d } from "./styles/common.styles.js";
-import { themeConfig as f } from "./theme-config.js";
+import { cupraDiagonalStyles as f } from "./styles/cupra-diagonal.styles.js";
+import { seatLegacyStyles as p } from "./styles/seat-legacy.styles.js";
+import { seatStyles as m } from "./styles/seat.styles.js";
+import { themeConfig as h } from "./theme-config.js";
 //#region src/components/ds-drawer/ds-drawer.ts
-var p = class extends i {
+var g = class extends i {
 	constructor(...e) {
 		super(...e), this._open = void 0, this._openState = !1, this.handleOverlayClick = () => {
 			this.dispatchEvent(new Event("ds-drawer:close", {
@@ -41,7 +44,7 @@ var p = class extends i {
 	}
 	getIconButtonTemplate() {
 		var e;
-		let t = (e = f[this.theme]) == null ? void 0 : e["icon-button-variant"];
+		let t = (e = h[this.theme]) == null ? void 0 : e["icon-button-variant"];
 		return s`<ds-icon-button
             class="close-button visible"
             data-testid="close-button"
@@ -84,11 +87,17 @@ var p = class extends i {
             </div>
         `;
 	}
-}, m = (p.styles = [u, d], p);
+}, _ = (g.styles = [
+	u,
+	d,
+	f,
+	m,
+	p
+], g);
 r([t({
 	type: Boolean,
 	attribute: "open",
 	converter: o
-})], m.prototype, "_open", void 0), r([n()], m.prototype, "_openState", void 0), m = r([a("ds-drawer")], m);
+})], _.prototype, "_open", void 0), r([n()], _.prototype, "_openState", void 0), _ = r([a("ds-drawer")], _);
 //#endregion
-export { m as DsDrawer };
+export { _ as DsDrawer };

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

@@ -0,0 +1,55 @@
+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-drawer/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .overlay {
+        background: var(--ds-opacity-black-40);
+        -webkit-backdrop-filter: var(--ds-elevation-blur-level-01);
+        backdrop-filter: var(--ds-elevation-blur-level-01);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        color: var(--ui-kit-private-drawer-container-color, #ffffff);
+        background: var(--ds-color-bg-default);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .container {
+            border-radius: var(--ds-border-radius-m) 0px 0px var(--ds-border-radius-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header,
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-content,
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer {
+        padding-left: var(--ds-layout-margin);
+        padding-right: var(--ds-layout-margin);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header {
+        padding-top: var(--ds-spacing-layout-s);
+        padding-bottom: var(--ds-spacing-m-3);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header {
+            padding-bottom: var(--ds-spacing-layout-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer {
+        padding-top: var(--ds-spacing-layout-m);
+        padding-bottom: var(--ds-spacing-layout-l);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer ::slotted(*) {
+        gap: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .close-button {
+        top: calc(var(--ds-spacing-layout-s) - 0.125rem);
+        right: var(--ds-spacing-layout-xl);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

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

@@ -0,0 +1,55 @@
+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-drawer/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .overlay {
+        background: var(--dg-global-opacity-black-40);
+        -webkit-backdrop-filter: var(--dg-elevation-blur-soft);
+        backdrop-filter: var(--dg-elevation-blur-soft);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        background: #fff;
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) .container {
+            border-radius: var(--dg-border-radius-m) 0px 0px var(--dg-border-radius-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-header,
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-content,
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-footer {
+        padding-left: var(--dg-layout-margin);
+        padding-right: var(--dg-layout-margin);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-header {
+        padding-top: var(--dg-spacing-layout-s);
+        padding-bottom: var(--dg-spacing-m-3);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) .drawer-header {
+            padding-bottom: var(--dg-spacing-layout-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-footer {
+        padding-top: var(--dg-spacing-layout-m);
+        padding-bottom: var(--dg-spacing-layout-l);
+        background: #fff;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-footer ::slotted(*) {
+        gap: var(--dg-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .close-button {
+        top: calc(var(--dg-spacing-layout-s) - 0.125rem);
+        right: var(--dg-spacing-layout-xl);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist/esm/components/ds-drawer/styles/seat.styles.js

@@ -0,0 +1,55 @@
+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-drawer/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .overlay {
+        background: var(--ds-opacity-black-40);
+        -webkit-backdrop-filter: var(--ds-elevation-blur-level-01);
+        backdrop-filter: var(--ds-elevation-blur-level-01);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        color: var(--ui-kit-private-drawer-container-color, #ffffff);
+        background: var(--ds-color-bg-default);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            border-radius: var(--ds-border-radius-m) 0px 0px var(--ds-border-radius-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-header,
+    :host([data-ui-kit-theme='seat']) .drawer-content,
+    :host([data-ui-kit-theme='seat']) .drawer-footer {
+        padding-left: var(--ds-layout-margin);
+        padding-right: var(--ds-layout-margin);
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-header {
+        padding-top: var(--ds-spacing-layout-s);
+        padding-bottom: var(--ds-spacing-m-3);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) .drawer-header {
+            padding-bottom: var(--ds-spacing-layout-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-footer {
+        padding-top: var(--ds-spacing-layout-m);
+        padding-bottom: var(--ds-spacing-layout-l);
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-footer ::slotted(*) {
+        gap: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='seat']) .close-button {
+        top: calc(var(--ds-spacing-layout-s) - 0.125rem);
+        right: var(--ds-spacing-layout-xl);
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist/esm/components/ds-favourite-action/ds-favourite-action.js

@@ -12,13 +12,17 @@ import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
 import { classMap as c } 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 l } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as u } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as d } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as f } from "./styles/seat-legacy.styles.js";
+import { seatStyles as p } from "./styles/seat.styles.js";
 //#region src/components/ds-favourite-action/ds-favourite-action.ts
-var u = class extends i {
+var m = class extends i {
 	constructor(...e) {
 		super(...e), this.initialSelected = !1, this.disabled = !1, this._selected = !1, this._initializedFromInitialSelected = !1;
 	}
 	willUpdate(e) {
-		!this._initializedFromInitialSelected && e.has("initialSelected") && (this._selected = this.initialSelected, this._initializedFromInitialSelected = !0);
+		super.willUpdate(e), !this._initializedFromInitialSelected && e.has("initialSelected") && (this._selected = this.initialSelected, this._initializedFromInitialSelected = !0);
 	}
 	get currentSelected() {
 		return this.selected ?? this._selected;
@@ -59,21 +63,27 @@ var u = class extends i {
             </button>
         `;
 	}
-}, d = (u.styles = [l], u);
+}, h = (m.styles = [
+	l,
+	u,
+	p,
+	d,
+	f
+], m);
 r([t({
 	type: Boolean,
 	converter: o,
 	attribute: "initial-selected"
-})], d.prototype, "initialSelected", void 0), r([t({
+})], h.prototype, "initialSelected", void 0), r([t({
 	type: Boolean,
 	attribute: "selected"
-})], d.prototype, "selected", void 0), r([t({
+})], h.prototype, "selected", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], d.prototype, "disabled", void 0), r([t({
+})], h.prototype, "disabled", void 0), r([t({
 	type: String,
 	attribute: "data-aria-label"
-})], d.prototype, "dataAriaLabel", void 0), r([n()], d.prototype, "_selected", void 0), d = r([a("ds-favourite-action")], d);
+})], h.prototype, "dataAriaLabel", void 0), r([n()], h.prototype, "_selected", void 0), h = r([a("ds-favourite-action")], h);
 //#endregion
-export { d as DsFavouriteAction };
+export { h as DsFavouriteAction };

package/dist/esm/components/ds-favourite-action/styles/cupra-diagonal.styles.js

@@ -0,0 +1,45 @@
+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-favourite-action/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .button {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ui-kit-favourite-action-background, transparent);
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:hover {
+        background: var(
+            --ui-kit-favourite-action-background-hover,
+            var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3))
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:focus-visible {
+        background: transparent;
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .button:active {
+        background: var(
+            --ui-kit-favourite-action-background-active,
+            var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3))
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .button.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .icon {
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist/esm/components/ds-favourite-action/styles/cupra.styles.js

@@ -0,0 +1,64 @@
+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-favourite-action/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .button {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: transparent;
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button:hover {
+        background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3));
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button:focus-visible {
+        background: transparent;
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button:active {
+        background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3));
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .icon {
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-color: var(--ds-color-icon-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button:hover .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button:focus-visible .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button.selected .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button.selected:hover .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button.selected:focus-visible .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .button.disabled .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-disabled, #5a5c67);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist/esm/components/ds-favourite-action/styles/seat-legacy.styles.js

@@ -0,0 +1,45 @@
+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-favourite-action/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .button {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ui-kit-favourite-action-background, transparent);
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .button:hover {
+        background: var(
+            --ui-kit-favourite-action-background-hover,
+            var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3))
+        );
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .button:focus-visible {
+        background: transparent;
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .button:active {
+        background: var(
+            --ui-kit-favourite-action-background-hover,
+            var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3))
+        );
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .button.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .icon {
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist/esm/components/ds-favourite-action/styles/seat.styles.js

@@ -0,0 +1,45 @@
+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-favourite-action/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .button {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ui-kit-favourite-action-background, transparent);
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .button:hover {
+        background: var(
+            --ui-kit-favourite-action-background-hover,
+            var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3))
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .button:focus-visible {
+        background: transparent;
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .button:active {
+        background: var(
+            --ui-kit-favourite-action-background-hover,
+            var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3))
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .button.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .icon {
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist/esm/components/ds-hyperlink/ds-hyperlink.js

@@ -9,8 +9,9 @@ import { classMap as a } 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 { choose as o } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/choose.js";
 import { commonStyles as s } from "./styles/common.styles.js";
+import { cupraStyles as c } from "./styles/cupra.styles.js";
 //#region src/components/ds-hyperlink/ds-hyperlink.ts
-var c = class extends r {
+var l = class extends r {
 	constructor(...e) {
 		super(...e), this.htmlTagName = "a", this.mode = "light", this.size = "large";
 	}
@@ -53,22 +54,22 @@ var c = class extends r {
                     `]])}
         `;
 	}
-}, l = (c.styles = [s], c);
+}, u = (l.styles = [s, c], l);
 n([t({
 	type: String,
 	attribute: "html-tag-name"
-})], l.prototype, "htmlTagName", void 0), n([t({
+})], u.prototype, "htmlTagName", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "href", void 0), n([t({
+})], u.prototype, "href", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "rel", void 0), n([t({
+})], u.prototype, "rel", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "target", void 0), n([t({
+})], u.prototype, "target", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "mode", void 0), n([t({ type: String })], l.prototype, "size", void 0), l = n([i("ds-hyperlink")], l);
+})], u.prototype, "mode", void 0), n([t({ type: String })], u.prototype, "size", void 0), u = n([i("ds-hyperlink")], u);
 //#endregion
-export { l as DsHyperlinkButton };
+export { u as DsHyperlinkButton };

package/dist/esm/components/ds-hyperlink/styles/cupra.styles.js

@@ -0,0 +1,34 @@
+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-hyperlink/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .hyperlink {
+        border-bottom: 1px solid;
+    }
+    :host([data-ui-kit-theme='cupra']) .hyperlink.light {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .hyperlink.dark {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .hyperlink:hover.light {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .hyperlink:hover.dark {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .hyperlink.large {
+        font: var(--ds-font-cupra-light-30-paragraph);
+        height: 1.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .hyperlink.medium {
+        font: var(--ds-font-cupra-light-20-paragraph);
+        height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .hyperlink.small {
+        font: var(--ds-font-cupra-light-10);
+        height: 1rem;
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist/esm/components/ds-icon/ds-icon.js

@@ -1,12 +1,12 @@
 import { pubSub as e } from "../../utils/PubSub.js";
 import { css as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
 import { html as n } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as r } 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as a } 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 a from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as o } from "../base/UiKitElement.js";
+import o from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { iconsManager as c } from "../../utils/IconsManager.js";
 import { unsafeHTML as l } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js";
@@ -15,7 +15,7 @@ import u from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/classPri
 import d from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/classPrivateFieldSet2.js";
 import f from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/classPrivateFieldGet2.js";
 //#region src/components/ds-icon/ds-icon.ts
-var p = /* @__PURE__ */ new WeakMap(), m = class extends o {
+var p = /* @__PURE__ */ new WeakMap(), m = class extends r {
 	constructor() {
 		super(), u(this, p, void 0), this.iconHtml = "", d(p, this, 0), this.getIcon = async () => {
 			var e;
@@ -61,15 +61,15 @@ var p = /* @__PURE__ */ new WeakMap(), m = class extends o {
             display: inline-block;
         }
     `, m);
-a([r({
+o([i({
 	type: String,
 	attribute: "icon-name"
-})], h.prototype, "iconName", void 0), a([r({
+})], h.prototype, "iconName", void 0), o([i({
 	type: String,
 	attribute: "color"
-})], h.prototype, "color", void 0), a([r({ type: Number })], h.prototype, "width", void 0), a([r({ type: Number })], h.prototype, "height", void 0), a([r({
+})], h.prototype, "color", void 0), o([i({ type: Number })], h.prototype, "width", void 0), o([i({ type: Number })], h.prototype, "height", void 0), o([i({
 	type: Number,
 	attribute: "size"
-})], h.prototype, "size", void 0), a([i()], h.prototype, "iconHtml", void 0), h = a([s("ds-icon")], h);
+})], h.prototype, "size", void 0), o([a()], h.prototype, "iconHtml", void 0), h = o([s("ds-icon")], h);
 //#endregion
 export { h as DsIcon };