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

package/dist-react/esm/components/ds-sidebar-navigation/ds-sidebar-navigation.js

@@ -7,12 +7,14 @@ 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 { scrollLock as c } from "../../utils/scrollLock.js";
-import { commonStyles as l } from "./styles/common.styles.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { scrollLock as l } from "../../utils/scrollLock.js";
+import { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-sidebar-navigation/ds-sidebar-navigation.ts
-var u = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.open = !1, this.scrollLocked = !1, this.toggleModal = () => {
 			this.open = !this.open, this.open ? this.dispatchEvent(new Event("ds-sidebar-navigation:open", {
@@ -40,7 +42,7 @@ var u = class extends i {
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [u];
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e);
@@ -48,29 +50,29 @@ var u = class extends i {
 		t && this.setMainCtaSize(t);
 	}
 	updated(e) {
-		super.updated(e), e.has("open") && (this.open ? (c.lock(), this.scrollLocked = !0) : this.scrollLocked &&= (c.unlock(), !1));
+		super.updated(e), e.has("open") && (this.open ? (l.lock(), this.scrollLocked = !0) : this.scrollLocked &&= (l.unlock(), !1));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.scrollLocked &&= (c.unlock(), !1);
+		super.disconnectedCallback(), this.scrollLocked &&= (l.unlock(), !1);
 	}
 	modalButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "modal-button",
-			"icon-name": this.open ? "cross" : "triple-dot-v",
-			"@click": this.toggleModal,
-			"data-testid": "modal-button",
-			"data-aria-label": "more actions",
-			variant: "tertiary",
-			size: JSON.stringify({
-				xxl: "large",
-				xl: "large",
-				l: "medium",
-				m: "medium",
-				s: "small",
-				xs: "small",
-				xxs: "small"
-			})
-		});
+		return s`<ds-icon-button
+            class="modal-button"
+            icon-name=${this.open ? "cross" : "triple-dot-v"}
+            @click=${this.toggleModal}
+            data-testid="modal-button"
+            data-aria-label="more actions"
+            variant="tertiary"
+            size=${JSON.stringify({
+			xxl: "large",
+			xl: "large",
+			l: "medium",
+			m: "medium",
+			s: "small",
+			xs: "small",
+			xxs: "small"
+		})}
+        ></ds-icon-button>`;
 	}
 	classes() {
 		return {
@@ -80,7 +82,7 @@ var u = class extends i {
 	}
 	render() {
 		return e`
-            <div class=${s(this.classes())}>
+            <div class=${c(this.classes())}>
                 <nav class="nav" part="bar">
                     <div class="aside" part="aside">
                         <slot name="aside-text"></slot>
@@ -105,9 +107,9 @@ r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "open", void 0), r([n({
+})], d.prototype, "open", void 0), r([n({
 	slot: "main-cta",
 	selector: "ds-button",
 	flatten: !0
-})], u.prototype, "mainCtas", void 0), u = r([a("ds-sidebar-navigation")], u);
+})], d.prototype, "mainCtas", void 0), d = r([a("ds-sidebar-navigation")], d);
 //#endregion

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

@@ -44,4 +44,3 @@ var c = class extends r {
 };
 n([t({ type: String })], c.prototype, "variant", void 0), n([t({ type: String })], c.prototype, "width", void 0), n([t({ type: String })], c.prototype, "height", void 0), n([t({ type: String })], c.prototype, "animation", void 0), c = n([i("ds-skeleton")], c);
 //#endregion
-export { c as DsSkeleton };

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

@@ -8,12 +8,16 @@ import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
+import { e as u } 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 u, navigationStyles as d, panelsStyles as f, tabsStyles as p } from "./styles/common.styles.js";
-import { themeConfig as m } from "./theme-config.js";
+import { o as d } 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 f, navigationStyles as p, panelsStyles as m, tabsStyles as h } from "./styles/common.styles.js";
+import { themeConfig as g } from "./theme-config.js";
 //#region src/components/ds-tabs/ds-tabs.ts
-var h = class extends o {
+var _ = class extends o {
 	constructor(...e) {
 		super(...e), this._selectedTab = void 0, this._selectedTabState = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (e) => {
 			if (!(this.focusedTabIndex < 0)) switch (e.key) {
@@ -59,10 +63,10 @@ var h = class extends o {
 	}
 	static {
 		this.styles = [
-			u,
-			d,
+			f,
 			p,
-			f
+			h,
+			m
 		];
 	}
 	get selectedTab() {
@@ -79,16 +83,16 @@ var h = class extends o {
 	}
 	getScrollButtonTemplate(t, n) {
 		if (!this.theme || t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight) return e;
-		let r = `arrow-${t}`, i = m[this.theme]?.["icon-button-variant"];
-		return this.componentFactory.createIconButton({
-			class: `nav-arrow ${t}`,
-			"data-aria-label": `nav-arrow-${t}`,
-			"@click": n,
-			size: this.size === "medium" ? "medium" : "large",
-			"icon-name": r,
-			mode: this.mode,
-			variant: i
-		});
+		let r = `arrow-${t}`, i = g[this.theme]?.["icon-button-variant"];
+		return l`<ds-icon-button
+            class=${`nav-arrow ${t}`}
+            data-aria-label=${`nav-arrow-${t}`}
+            @click=${n}
+            size=${this.size === "medium" ? "medium" : "large"}
+            icon-name=${r}
+            mode=${d(this.mode)}
+            variant=${d(i)}
+        ></ds-icon-button>`;
 	}
 	firstUpdated() {
 		this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), this.setTabsFocusable();
@@ -154,8 +158,8 @@ var h = class extends o {
 	}
 	render() {
 		return t`
-            <div part="container" class=${l(this.classes)}>
-                <div class=${l(this.navContainerClasses)}>
+            <div part="container" class=${u(this.classes)}>
+                <div class=${u(this.navContainerClasses)}>
                     ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
                     <nav tabindex="0" role="tablist" @scroll=${this.handleScrollNav} @keydown=${this.handleKeyDown}>
                         <slot @slotchange=${this.handleTabsSlotchange} name="tab" @click=${this.handleSelect}></slot>
@@ -171,14 +175,14 @@ a([n({
 	type: Number,
 	attribute: "selected-tab",
 	reflect: !0
-})], h.prototype, "_selectedTab", void 0), a([r()], h.prototype, "_selectedTabState", void 0), a([n({
+})], _.prototype, "_selectedTab", void 0), a([r()], _.prototype, "_selectedTabState", void 0), a([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "mode", void 0), a([n({
+})], _.prototype, "mode", void 0), a([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "variant", void 0), a([n({ type: String })], h.prototype, "size", void 0), a([n({
+})], _.prototype, "variant", void 0), a([n({ type: String })], _.prototype, "size", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], h.prototype, "disabled", void 0), a([r()], h.prototype, "focusedTabIndex", void 0), a([i("nav")], h.prototype, "nav", void 0), a([r()], h.prototype, "tabs", void 0), a([r()], h.prototype, "panels", void 0), a([r()], h.prototype, "hasScrollLeft", void 0), a([r()], h.prototype, "hasScrollRight", void 0), h = a([s("ds-tabs")], h);
+})], _.prototype, "disabled", void 0), a([r()], _.prototype, "focusedTabIndex", void 0), a([i("nav")], _.prototype, "nav", void 0), a([r()], _.prototype, "tabs", void 0), a([r()], _.prototype, "panels", void 0), a([r()], _.prototype, "hasScrollLeft", void 0), a([r()], _.prototype, "hasScrollRight", void 0), _ = a([s("ds-tabs")], _);
 //#endregion

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

@@ -6,18 +6,22 @@ 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 { commonStyles as u, iconStyles as d } 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 { commonStyles as f, iconStyles as p } from "./styles/common.styles.js";
 //#region src/components/ds-tag/ds-tag.ts
-var f = class extends a {
+var m = class extends a {
 	constructor(...e) {
 		super(...e), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left";
 	}
 	static {
-		this.styles = [u, d];
+		this.styles = [f, p];
 	}
 	get classes() {
 		return {
@@ -40,19 +44,14 @@ var f = class extends a {
 		this.dispatchEvent(e);
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: c(this.iconClasses),
-			"icon-name": this.iconName,
-			size: 16,
-			"@click": this.handleClickIcon
-		}) : e;
+		return this.iconName ? c`<ds-icon class=${l(this.iconClasses)} icon-name=${u(this.iconName)} size="16" @click=${this.handleClickIcon}></ds-icon>` : e;
 	}
 	render() {
 		return this.show ? t`
-                <div class=${c(this.classes)}>
-                    ${l(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                <div class=${l(this.classes)}>
+                    ${d(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                     <slot></slot>
-                    ${l(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
+                    ${d(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                 </div>
             ` : e;
 	}
@@ -60,21 +59,21 @@ var f = class extends a {
 i([n({
 	type: Boolean,
 	converter: s
-})], f.prototype, "show", void 0), i([n({
+})], m.prototype, "show", void 0), i([n({
 	type: Boolean,
 	converter: s,
 	attribute: "clickable-icon"
-})], f.prototype, "clickableIcon", void 0), i([n({
+})], m.prototype, "clickableIcon", void 0), i([n({
 	type: String,
 	attribute: "icon-name"
-})], f.prototype, "iconName", void 0), i([n({
+})], m.prototype, "iconName", void 0), i([n({
 	type: String,
 	attribute: "icon-position"
-})], f.prototype, "iconPosition", void 0), i([n({
+})], m.prototype, "iconPosition", void 0), i([n({
 	type: String,
 	attribute: "color"
-})], f.prototype, "color", void 0), i([n({
+})], m.prototype, "color", void 0), i([n({
 	type: String,
 	attribute: "variant"
-})], f.prototype, "variant", void 0), i([r()], f.prototype, "onClickHandler", void 0), f = i([o("ds-tag")], f);
+})], m.prototype, "variant", void 0), i([r()], m.prototype, "onClickHandler", void 0), m = i([o("ds-tag")], m);
 //#endregion

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

@@ -5,12 +5,12 @@ import { n } 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 r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
-import { s as a, u as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
-import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
-import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { s as c, u as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
 import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
 import { objectConverter as d } from "../../utils/objectConverter.js";
 import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
@@ -51,12 +51,12 @@ var m = new Set([
 		};
 	}
 	render() {
-		let t = (this.htmlTagName ?? "").toLowerCase(), n = a(m.has(t) ? t : "span");
-		return o`
+		let t = (this.htmlTagName ?? "").toLowerCase(), n = c(m.has(t) ? t : "span");
+		return l`
             <${n} 
                 part="container" 
                 data-testid="ds-text-container" 
-                class=${l(this.classes)}
+                class=${s(this.classes)}
                 style=${f({ color: this.color || "var(--ui-kit-private-text-color)" })}
             >
                 ${this.value ? this.value : e}
@@ -79,10 +79,10 @@ r([t({
 	reflect: !0
 })], h.prototype, "color", void 0), r([t({
 	type: Boolean,
-	converter: c,
+	converter: o,
 	reflect: !0
 })], h.prototype, "uppercase", void 0), r([n({
 	slot: "",
 	flatten: !0
-})], h.prototype, "slotedNodes", void 0), h = r([s("ds-text")], h);
+})], h.prototype, "slotedNodes", void 0), h = r([a("ds-text")], h);
 //#endregion

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

@@ -5,13 +5,17 @@ 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 { 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 { inputStatesMixin as s } from "../../mixins/inputStatesMixin.js";
-import { validateMaxLength as c } from "../../utils/validateMaxLength.js";
-import { commonStyles as l } 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 "../ds-icon-button/ds-icon-button.js";
+import { inputStatesMixin as l } from "../../mixins/inputStatesMixin.js";
+import { validateMaxLength as u } from "../../utils/validateMaxLength.js";
+import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-text-input/ds-text-input.ts
-var u = class extends s(i) {
+var f = class extends l(i) {
 	constructor(...e) {
 		super(...e), this.keyboardMode = !1, this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
 			this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach((e) => this.nativeInput.dispatchEvent(new Event(e, {
@@ -21,7 +25,7 @@ var u = class extends s(i) {
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [d];
 	}
 	get classes() {
 		return {
@@ -38,7 +42,7 @@ var u = class extends s(i) {
 	}
 	render() {
 		return t`
-            <div class=${o(this.classes)}>
+            <div class=${s(this.classes)}>
                 <div class="input-container">
                     <div><slot></slot></div>
                     ${this.iconTemplate}
@@ -54,19 +58,19 @@ var u = class extends s(i) {
         `;
 	}
 	get iconTemplate() {
-		return !this.nativeInput?.value?.length || this.inputStates.readonly ? e : this.componentFactory.createIconButton({
-			class: "icon-button",
-			"icon-name": "cross",
-			size: this.size,
-			disabled: !!this.nativeInput?.disabled,
-			variant: "naked",
-			"@click": this.handleClickIcon,
-			"data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
-		});
+		return !this.nativeInput?.value?.length || this.inputStates.readonly ? e : o`<ds-icon-button
+            class="icon-button"
+            icon-name="cross"
+            size=${c(this.size)}
+            ?disabled=${!!this.nativeInput?.disabled}
+            variant="naked"
+            @click=${this.handleClickIcon}
+            data-aria-label=${this.dataAriaLabelRemoveButton || "remove button"}
+        ></ds-icon-button>`;
 	}
 	get lengthTemplate() {
 		let n = this.nativeInput?.maxLength?.toString();
-		return c(n) ? t`<span class="char-counter">${this.inputStates.currentValue?.length || 0}/${n}</span>` : e;
+		return u(n) ? t`<span class="char-counter">${this.inputStates.currentValue?.length || 0}/${n}</span>` : e;
 	}
 	get helperTextTemplate() {
 		return this.inputStates.readonly || this.forcedError || this.inputStates.invalid && this.invalidError ? e : t`<span class="support-text helper-text">${this.helperText}</span>`;
@@ -81,21 +85,21 @@ var u = class extends s(i) {
 		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? e : t`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
 	}
 };
-r([n({ type: String })], u.prototype, "size", void 0), r([n({
+r([n({ type: String })], f.prototype, "size", void 0), r([n({
 	type: String,
 	attribute: "helper-text"
-})], u.prototype, "helperText", void 0), r([n({
+})], f.prototype, "helperText", void 0), r([n({
 	type: String,
 	attribute: "forced-error"
-})], u.prototype, "forcedError", void 0), r([n({
+})], f.prototype, "forcedError", void 0), r([n({
 	type: String,
 	attribute: "invalid-error"
-})], u.prototype, "invalidError", void 0), r([n({
+})], f.prototype, "invalidError", void 0), r([n({
 	type: String,
 	attribute: "readonly-text"
-})], u.prototype, "readonlyText", void 0), r([n({
+})], f.prototype, "readonlyText", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-remove-button"
-})], u.prototype, "dataAriaLabelRemoveButton", void 0), u = r([a("ds-text-input")], u);
+})], f.prototype, "dataAriaLabelRemoveButton", void 0), f = r([a("ds-text-input")], f);
 //#endregion
-export { u as DsTextInput };
+export { f as DsTextInput };

package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -50,7 +50,7 @@ var p = class extends o {
 	}
 	loadThemeStyles() {
 		return this.loadStyles ? new Promise((e, t) => {
-			let n = "/2.0.0-canary.131", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
+			let n = "/2.0.0-canary.133", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) e();
 			else {
 				let i = `ui-kit-theme-${n}`, a = document.getElementById(i), o = document.createElement("link");

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

@@ -6,24 +6,28 @@ 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 { 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 { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { o as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
-import { toastManager as l } from "./utils/ToastManager.js";
-import { c as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.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 { 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 { toastManager as d } from "./utils/ToastManager.js";
+import "../ds-toast-message/ds-toast-message.js";
+import { c as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/repeat.js";
-import { containerStyles as d, toastStyles as f } from "./styles/common.styles.js";
+import { containerStyles as p, toastStyles as m } from "./styles/common.styles.js";
 //#region src/components/ds-toast/ds-toast.ts
-var p = class extends a {
+var h = class extends a {
 	constructor(...e) {
 		super(...e), this.position = "top-right", this.toasts = [], this.unsubscribe = null;
 	}
 	static {
-		this.styles = [d, f];
+		this.styles = [p, m];
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.unsubscribe = l.subscribe((e) => {
+		super.connectedCallback(), this.unsubscribe = d.subscribe((e) => {
 			this.toasts = e;
 		});
 	}
@@ -34,7 +38,7 @@ var p = class extends a {
 		let t = e.target;
 		if (t.classList.contains("exiting") && (e.animationName === "toast-out-left" || e.animationName === "toast-out-right")) {
 			let e = t.getAttribute("data-id");
-			e && l.removeToast(e);
+			e && d.removeToast(e);
 		}
 	}
 	getToastMessageTemplate(n) {
@@ -47,16 +51,16 @@ var p = class extends a {
 			let e = document.querySelector(`[data-id="${n.referenceId}"]`);
 			if (e) {
 				let t = e.cloneNode(!0);
-				t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = c(t.outerHTML);
+				t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = s(t.outerHTML);
 			}
-		} else i = this.componentFactory.createToastMessage({
-			"data-id": n.id,
-			"data-template": !1,
-			title: n.title,
-			text: n.text,
-			status: n.status
-		});
-		return t`<div class=${s(r)} data-id="${n.id}">${i}</div>`;
+		} else i = c`<ds-toast-message
+                data-id=${n.id}
+                data-template="false"
+                title=${u(n.title)}
+                text=${u(n.text)}
+                status=${u(n.status)}
+            ></ds-toast-message>`;
+		return t`<div class=${l(r)} data-id="${n.id}">${i}</div>`;
 	}
 	get containerClasses() {
 		return {
@@ -68,14 +72,14 @@ var p = class extends a {
 		return t`
             <div
                 part="toast-container"
-                class=${s(this.containerClasses)}
+                class=${l(this.containerClasses)}
                 @animationend=${this.handleAnimationEnd}
                 aria-live="polite"
             >
-                ${u(this.toasts, (e) => e.id, (e) => this.getToastMessageTemplate(e))}
+                ${f(this.toasts, (e) => e.id, (e) => this.getToastMessageTemplate(e))}
             </div>
         `;
 	}
 };
-i([n({ type: String })], p.prototype, "position", void 0), i([r()], p.prototype, "toasts", void 0), p = i([o("ds-toast")], p);
+i([n({ type: String })], h.prototype, "position", void 0), i([r()], h.prototype, "toasts", void 0), h = i([o("ds-toast")], h);
 //#endregion

package/dist-react/esm/components/ds-toast-message/ds-toast-message.js

@@ -5,18 +5,23 @@ 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 { n as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { toastMessageStyles as l } 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 { n as u } 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 { toastMessageStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-toast-message/ds-toast-message.ts
-var u = class extends i {
+var f = class extends i {
 	constructor(...e) {
 		super(...e), this.status = "default", this.dataId = "", this.title = "", this.text = "", this.dataTemplate = !0;
 	}
 	static {
-		this.styles = [l];
+		this.styles = [d];
 	}
 	getIconName() {
 		switch (this.status) {
@@ -42,29 +47,25 @@ var u = class extends i {
 		};
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.getIconName(),
-			size: 24
-		});
+		return s`<ds-icon class="icon" icon-name=${l(this.getIconName())} size="24"></ds-icon>`;
 	}
 	get closeButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			"data-aria-label": "close-button",
-			"@click": this.handleClickCloseButton,
-			"icon-name": "cross",
-			variant: "naked",
-			size: "medium"
-		});
+		return s`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>`;
 	}
 	render() {
 		return this.dataTemplate ? e : t`
-            <div class=${s(this.toastMessageClasses)}>
+            <div class=${c(this.toastMessageClasses)}>
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${c(this.title, () => t`<div class="title">${this.title}</div>`)}
-                        ${c(this.text, () => t`<div class="message">${this.text}</div>`)}
+                        ${u(this.title, () => t`<div class="title">${this.title}</div>`)}
+                        ${u(this.text, () => t`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
@@ -73,15 +74,14 @@ var u = class extends i {
         `;
 	}
 };
-r([n({ type: String })], u.prototype, "status", void 0), r([n({
+r([n({ type: String })], f.prototype, "status", void 0), r([n({
 	type: String,
 	attribute: "data-id",
 	reflect: !0
-})], u.prototype, "dataId", void 0), r([n({ type: String })], u.prototype, "title", void 0), r([n({ type: String })], u.prototype, "text", void 0), r([n({
+})], f.prototype, "dataId", void 0), r([n({ type: String })], f.prototype, "title", void 0), r([n({ type: String })], f.prototype, "text", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "data-template",
 	reflect: !0
-})], u.prototype, "dataTemplate", void 0), u = r([a("ds-toast-message")], u);
+})], f.prototype, "dataTemplate", void 0), f = r([a("ds-toast-message")], f);
 //#endregion
-export { u as DsToastMessage };