@cupra/ui-kit 2.0.0-canary.131 → 2.0.0-canary.133

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

@@ -5,16 +5,20 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
-import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { commonStyles as s } from "./styles/common.styles.js";
+import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-dialog-header/ds-dialog-header.ts
-var c = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.title = "primary", this.iconSize = 32;
 	}
 	static {
-		this.styles = [s];
+		this.styles = [l];
 	}
 	get classes() {
 		return { container: !0 };
@@ -29,16 +33,12 @@ var c = class extends i {
         `;
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName,
-			size: this.iconSize
-		}) : e;
+		return this.iconName ? o`<ds-icon class="icon" icon-name=${c(this.iconName)} size=${c(this.iconSize)}></ds-icon>` : e;
 	}
 	render() {
 		return t`
             ${this.styleTokens}
-            <div data-testid="ds-dialog-header-container" class=${o(this.classes)}>
+            <div data-testid="ds-dialog-header-container" class=${s(this.classes)}>
                 <div class="title-container">
                     ${this.iconTemplate}
                     <div class="title">${this.title}</div>
@@ -48,11 +48,11 @@ var c = class extends i {
         `;
 	}
 };
-r([n({ type: String })], c.prototype, "title", void 0), r([n({
+r([n({ type: String })], u.prototype, "title", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], c.prototype, "iconName", void 0), r([n({
+})], u.prototype, "iconName", void 0), r([n({
 	type: Number,
 	attribute: "icon-size"
-})], c.prototype, "iconSize", void 0), c = r([a("ds-dialog-header")], c);
+})], u.prototype, "iconSize", void 0), u = r([a("ds-dialog-header")], u);
 //#endregion

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

@@ -45,4 +45,3 @@ n([t({ type: String })], s.prototype, "orientation", void 0), n([t({ type: Strin
 	reflect: !0
 })], s.prototype, "mode", void 0), s = n([i("ds-divider")], s);
 //#endregion
-export { s as DsDivider };

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

@@ -7,12 +7,16 @@ import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { commonStyles as c, iconStyles as l } from "./styles/common.styles.js";
-import { themeConfig as u } from "./theme-config.js";
+import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/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";
 //#region src/components/ds-drawer/ds-drawer.ts
-var d = class extends i {
+var p = class extends i {
 	constructor(...e) {
 		super(...e), this._open = void 0, this._openState = !1, this.handleOverlayClick = () => {
 			this.dispatchEvent(new Event("ds-drawer:close", {
@@ -24,7 +28,7 @@ var d = class extends i {
 		};
 	}
 	static {
-		this.styles = [c, l];
+		this.styles = [u, d];
 	}
 	get open() {
 		return this._open ?? this._openState;
@@ -39,17 +43,17 @@ var d = class extends i {
 		};
 	}
 	getIconButtonTemplate() {
-		let e = u[this.theme]?.["icon-button-variant"];
-		return this.componentFactory.createIconButton({
-			class: "close-button visible",
-			"data-testid": "close-button",
-			"data-aria-label": "close-button",
-			"@click": this.handleOverlayClick,
-			size: "medium",
-			"icon-name": "cross",
-			variant: e,
-			mode: "dark"
-		});
+		let e = f[this.theme]?.["icon-button-variant"];
+		return s`<ds-icon-button
+            class="close-button visible"
+            data-testid="close-button"
+            data-aria-label="close-button"
+            @click=${this.handleOverlayClick}
+            size="medium"
+            icon-name="cross"
+            variant=${l(e)}
+            mode="dark"
+        ></ds-icon-button>`;
 	}
 	updated(e) {
 		super.updated?.(e), e.has && (e.has("_open") || e.has("_openState")) && window.addEventListener("keydown", this.handleKeyDown);
@@ -59,11 +63,11 @@ var d = class extends i {
 	}
 	render() {
 		return e`          
-            <div class=${s({
+            <div class=${c({
 			overlay: !0,
 			open: !!this.open
 		})} @click=${this.handleOverlayClick}></div>
-            <div data-testid="ds-drawer-container" class=${s(this.classes)}>
+            <div data-testid="ds-drawer-container" class=${c(this.classes)}>
                 <div class="scroll-area" tabindex="0">
                     <div class="drawer-header">
                         <slot name="header"></slot>                        
@@ -86,5 +90,5 @@ r([t({
 	type: Boolean,
 	attribute: "open",
 	converter: o
-})], d.prototype, "_open", void 0), r([n()], d.prototype, "_openState", void 0), d = r([a("ds-drawer")], d);
+})], p.prototype, "_open", void 0), r([n()], p.prototype, "_openState", void 0), p = r([a("ds-drawer")], p);
 //#endregion

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

@@ -6,17 +6,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { commonStyles as c } from "./styles/common.styles.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-favourite-action/ds-favourite-action.ts
-var l = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.initialSelected = !1, this.disabled = !1, this._selected = !1, this._initializedFromInitialSelected = !1;
 	}
 	static {
-		this.styles = [c];
+		this.styles = [l];
 	}
 	willUpdate(e) {
 		!this._initializedFromInitialSelected && e.has("initialSelected") && (this._selected = this.initialSelected, this._initializedFromInitialSelected = !0);
@@ -37,10 +39,7 @@ var l = class extends i {
 		return this.currentSelected ? "heart-filled" : "heart";
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName
-		});
+		return s`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>`;
 	}
 	get classes() {
 		return {
@@ -53,7 +52,7 @@ var l = class extends i {
 		return e`
             <button
                 type="button"
-                class=${s(this.classes)}
+                class=${c(this.classes)}
                 ?disabled=${this.disabled}
                 aria-pressed=${this.currentSelected}
                 aria-label=${this.dataAriaLabel || (this.currentSelected ? "Remove from favourites" : "Add to favourites")}
@@ -68,15 +67,15 @@ r([t({
 	type: Boolean,
 	converter: o,
 	attribute: "initial-selected"
-})], l.prototype, "initialSelected", void 0), r([t({
+})], u.prototype, "initialSelected", void 0), r([t({
 	type: Boolean,
 	attribute: "selected"
-})], l.prototype, "selected", void 0), r([t({
+})], u.prototype, "selected", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], l.prototype, "disabled", void 0), r([t({
+})], u.prototype, "disabled", void 0), r([t({
 	type: String,
 	attribute: "data-aria-label"
-})], l.prototype, "dataAriaLabel", void 0), r([n()], l.prototype, "_selected", void 0), l = r([a("ds-favourite-action")], l);
+})], u.prototype, "dataAriaLabel", void 0), r([n()], u.prototype, "_selected", void 0), u = r([a("ds-favourite-action")], u);
 //#endregion

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

@@ -72,4 +72,3 @@ a([r({
 	attribute: "size"
 })], u.prototype, "size", void 0), a([i()], u.prototype, "iconHtml", void 0), u = a([s("ds-icon")], u);
 //#endregion
-export { u as DsIcon };

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

@@ -5,26 +5,27 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
-import { objectConverter as l } from "../../utils/objectConverter.js";
-import { r as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { buttonStyles as d } from "./styles/common.styles.js";
+import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
+import { objectConverter as d } from "../../utils/objectConverter.js";
+import { r as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { buttonStyles as p } from "./styles/common.styles.js";
 //#region src/components/ds-icon-button/ds-icon-button.ts
-var f = class extends c(i) {
+var m = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
 	}
 	static {
-		this.styles = [d];
+		this.styles = [p];
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName
-		}) : e;
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>` : e;
 	}
 	handleClick(e) {
 		this.href || e.preventDefault();
@@ -61,11 +62,11 @@ var f = class extends c(i) {
 	render() {
 		return t`
             ${this.variantColorTokens}
-            ${u(this.htmlTagName || "button", [
+            ${f(this.htmlTagName || "button", [
 			["button", () => t`
                         <button
                             ?disabled=${this.disabled}
-                            class=${s(this.classes)}
+                            class=${c(this.classes)}
                             aria-label=${this.dataAriaLabel}
                         >
                             ${this.iconTemplate}
@@ -74,7 +75,7 @@ var f = class extends c(i) {
 			["a", () => t`
                         <a
                             ?disabled=${this.disabled}
-                            class=${s(this.classes)}
+                            class=${c(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -85,7 +86,7 @@ var f = class extends c(i) {
                         </a>
                     `],
 			["custom", () => t`
-                        <div class=${s(this.classes)} @click=${this.handleCustomClick}>
+                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
                             <slot></slot>
                         </div>
                     `]
@@ -96,39 +97,38 @@ var f = class extends c(i) {
 r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "variant", void 0), r([n({
+})], m.prototype, "variant", void 0), r([n({
 	type: String,
 	attribute: "custom-background"
-})], f.prototype, "customBackground", void 0), r([n({
+})], m.prototype, "customBackground", void 0), r([n({
 	type: String,
 	attribute: "custom-color"
-})], f.prototype, "customColor", void 0), r([n({
+})], m.prototype, "customColor", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "mode", void 0), r([n({
+})], m.prototype, "mode", void 0), r([n({
 	type: String,
-	converter: l
-})], f.prototype, "size", void 0), r([n({
+	converter: d
+})], m.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], f.prototype, "disabled", void 0), r([n({
+})], m.prototype, "disabled", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], f.prototype, "iconName", void 0), r([n({
+})], m.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], f.prototype, "htmlTagName", void 0), r([n({
+})], m.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label"
-})], f.prototype, "dataAriaLabel", void 0), r([n({
+})], m.prototype, "dataAriaLabel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "href", void 0), r([n({
+})], m.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "rel", void 0), r([n({
+})], m.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "target", void 0), f = r([a("ds-icon-button")], f);
+})], m.prototype, "target", void 0), m = r([a("ds-icon-button")], m);
 //#endregion
-export { f as DsIconButton };

package/dist-react/esm/components/ds-inline-alert/ds-inline-alert.js

@@ -6,18 +6,23 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as a } from "../base/UiKitElement.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as s } from "../../utils/booleanConverter.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
+import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { n as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { inlineAlertStyles as u } from "./styles/common.styles.js";
+import { o as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { n as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { inlineAlertStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-inline-alert/ds-inline-alert.ts
-var d = class extends a {
+var p = class extends a {
 	constructor(...e) {
 		super(...e), this.status = "default", this.title = "", this.text = "", this.showClose = !0, this._show = void 0, this._showState = !0;
 	}
 	static {
-		this.styles = [u];
+		this.styles = [f];
 	}
 	get show() {
 		return this._show ?? this._showState;
@@ -49,29 +54,25 @@ var d = class extends a {
 		};
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.getIconName(),
-			size: 24
-		});
+		return c`<ds-icon class="icon" icon-name=${u(this.getIconName())} size="24"></ds-icon>`;
 	}
 	get closeButtonTemplate() {
-		return this.showClose ? this.componentFactory.createIconButton({
-			"data-aria-label": "close-button",
-			"@click": this.handleClickCloseButton,
-			"icon-name": "cross",
-			variant: "naked",
-			size: "medium"
-		}) : e;
+		return this.showClose ? c`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>` : e;
 	}
 	render() {
 		return this.show ? t`
-            <div class=${c(this.inlineAlertClasses)} part="container">
+            <div class=${l(this.inlineAlertClasses)} part="container">
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${l(this.title, () => t`<div class="title">${this.title}</div>`)}
-                        ${l(this.text, () => t`<div class="message">${this.text}</div>`)}
+                        ${d(this.title, () => t`<div class="title">${this.title}</div>`)}
+                        ${d(this.text, () => t`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
@@ -80,15 +81,14 @@ var d = class extends a {
         ` : e;
 	}
 };
-i([n({ type: String })], d.prototype, "status", void 0), i([n({ type: String })], d.prototype, "title", void 0), i([n({ type: String })], d.prototype, "text", void 0), i([n({
+i([n({ type: String })], p.prototype, "status", void 0), i([n({ type: String })], p.prototype, "title", void 0), i([n({ type: String })], p.prototype, "text", void 0), i([n({
 	attribute: "show-close",
 	type: Boolean,
 	converter: s,
 	reflect: !0
-})], d.prototype, "showClose", void 0), i([n({
+})], p.prototype, "showClose", void 0), i([n({
 	type: Boolean,
 	attribute: "show",
 	converter: s
-})], d.prototype, "_show", void 0), i([r()], d.prototype, "_showState", void 0), d = i([o("ds-inline-alert")], d);
+})], p.prototype, "_show", void 0), i([r()], p.prototype, "_showState", void 0), p = i([o("ds-inline-alert")], p);
 //#endregion
-export { d as DsInlineAlert };

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

@@ -5,10 +5,12 @@ import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mod
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
-import { r as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { DsBaseInput as s } from "../base/ds-base-input/ds-base-input.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { r as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { DsBaseInput as c } from "../base/ds-base-input/ds-base-input.js";
 //#region src/components/ds-input/ds-input.ts
-var c = class extends s {
+var l = class extends c {
 	constructor(...e) {
 		super(...e), this.name = "", this.placeholder = "", this.type = "text", this.min = 0, this.max = 100, this.step = 1, this._hasPicker = !1, this.handleClickIcon = () => {
 			this.inputField?.showPicker?.();
@@ -36,11 +38,7 @@ var c = class extends s {
                     cursor: ${this._hasPicker ? "pointer" : "auto"};
                 }
             </style>
-            ${this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": n,
-			"@click": this.handleClickIcon
-		})}
+            ${o`<ds-icon class="icon" icon-name=${n} @click=${this.handleClickIcon}></ds-icon>`}
         `;
 	}
 	get labelTemplate() {
@@ -56,7 +54,7 @@ var c = class extends s {
 	}
 	get inputTemplate() {
 		return t`
-            ${o(this.type === "number", [[!0, () => t`
+            ${s(this.type === "number", [[!0, () => t`
                         <input
                             aria-labelledby="label"
                             class="input-field number"
@@ -91,8 +89,8 @@ var c = class extends s {
 		return e;
 	}
 };
-i([n({ type: String })], c.prototype, "name", void 0), i([n({ type: String })], c.prototype, "placeholder", void 0), i([n({
+i([n({ type: String })], l.prototype, "name", void 0), i([n({ type: String })], l.prototype, "placeholder", void 0), i([n({
 	type: String,
 	attribute: "max-length"
-})], c.prototype, "maxLength", void 0), i([n({ type: String })], c.prototype, "type", void 0), i([n({ type: Number })], c.prototype, "min", void 0), i([n({ type: Number })], c.prototype, "max", void 0), i([n({ type: Number })], c.prototype, "step", void 0), i([r()], c.prototype, "_hasPicker", void 0), c = i([a("ds-input", { skipTagAsComponentName: !0 })], c);
+})], l.prototype, "maxLength", void 0), i([n({ type: String })], l.prototype, "type", void 0), i([n({ type: Number })], l.prototype, "min", void 0), i([n({ type: Number })], l.prototype, "max", void 0), i([n({ type: Number })], l.prototype, "step", void 0), i([r()], l.prototype, "_hasPicker", void 0), l = i([a("ds-input", { skipTagAsComponentName: !0 })], l);
 //#endregion

package/dist-react/esm/components/ds-interactive-card/ds-interactive-card.js

@@ -5,12 +5,15 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { commonStyles as c } from "./styles/common.styles.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-interactive-card/ds-interactive-card.ts
-var l = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.size = "medium", this.selected = !1, this.error = !1, this.showClose = !1, this.handleClick = (e) => {
 			e.stopPropagation();
@@ -24,7 +27,7 @@ var l = class extends i {
 		};
 	}
 	static {
-		this.styles = [c];
+		this.styles = [l];
 	}
 	get classes() {
 		return {
@@ -42,25 +45,21 @@ var l = class extends i {
 		};
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": "cross-circle",
-			size: 24
-		});
+		return s`<ds-icon class="icon" icon-name="cross-circle" size="24"></ds-icon>`;
 	}
 	get closeButtonTemplate() {
-		return this.showClose ? this.componentFactory.createIconButton({
-			class: "close-button",
-			"data-aria-label": "Close",
-			"@click": this.handleCloseButtonClick,
-			"icon-name": "cross",
-			variant: "naked",
-			size: "medium"
-		}) : e;
+		return this.showClose ? s`<ds-icon-button
+            class="close-button"
+            data-aria-label="Close"
+            @click=${this.handleCloseButtonClick}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>` : e;
 	}
 	get contentTemplate() {
 		return this.error ? e : t`
-            <div part="container" class=${s(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
+            <div part="container" class=${c(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
                 ${this.closeButtonTemplate}
                 <header class="header" part="header">
                     <div class="header-main">
@@ -76,7 +75,7 @@ var l = class extends i {
 	}
 	get errorTemplate() {
 		return this.error ? t`
-            <div part="error" class=${s(this.errorClasses)}>
+            <div part="error" class=${c(this.errorClasses)}>
                 ${this.iconTemplate}
                 <div class="error-content" part="error-text">
                     <slot class="error-title" name="error-title"></slot>
@@ -92,15 +91,15 @@ var l = class extends i {
         `;
 	}
 };
-r([n({ type: String })], l.prototype, "size", void 0), r([n({
+r([n({ type: String })], u.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], l.prototype, "selected", void 0), r([n({
+})], u.prototype, "selected", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], l.prototype, "error", void 0), r([n({
+})], u.prototype, "error", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "show-close"
-})], l.prototype, "showClose", void 0), l = r([a("ds-interactive-card")], l);
+})], u.prototype, "showClose", void 0), u = r([a("ds-interactive-card")], u);
 //#endregion