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

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

@@ -6,24 +6,25 @@ 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 { r as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { commonStyles 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 { r as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-link-button/ds-link-button.ts
-var u = class extends i {
+var f = class extends i {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.size = "large", this.underline = !1, this.disabled = !1, this.iconName = "arrow-right", this.iconPosition = "right";
 	}
 	static {
-		this.styles = [l];
+		this.styles = [d];
 	}
 	get iconTemplate() {
-		return this.iconName === "none" ? e : this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName
-		});
+		return this.iconName === "none" ? e : s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>`;
 	}
 	get classes() {
 		return {
@@ -50,15 +51,15 @@ var u = class extends i {
 	render() {
 		return t`
             ${this.styleTokens}
-            ${c(this.htmlTagName || "button", [["button", () => t`
-                        <button class=${s(this.classes)} ?disabled=${this.disabled}>
+            ${u(this.htmlTagName || "button", [["button", () => t`
+                        <button class=${c(this.classes)} ?disabled=${this.disabled}>
                             ${this.iconPosition === "left" ? this.iconTemplate : e}
                             <span class="label"><slot></slot></span>
                             ${this.iconPosition === "right" ? this.iconTemplate : e}
                         </button>
                     `], ["a", () => t`
                         <a
-                            class=${s(this.classes)}
+                            class=${c(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -76,29 +77,29 @@ var u = class extends i {
 r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), r([n({ type: String })], u.prototype, "size", void 0), r([n({
+})], f.prototype, "mode", void 0), r([n({ type: String })], f.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], u.prototype, "underline", void 0), r([n({
+})], f.prototype, "underline", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], u.prototype, "disabled", void 0), r([n({
+})], f.prototype, "disabled", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], u.prototype, "htmlTagName", void 0), r([n({
+})], f.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "href", void 0), r([n({
+})], f.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "rel", void 0), r([n({
+})], f.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "target", void 0), r([n({
+})], f.prototype, "target", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], u.prototype, "iconName", void 0), r([n({
+})], f.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "icon-position"
-})], u.prototype, "iconPosition", void 0), u = r([a("ds-link-button")], u);
+})], f.prototype, "iconPosition", void 0), f = r([a("ds-link-button")], f);
 //#endregion

package/dist-react/esm/components/ds-loader-logo/ds-loader-logo.js

@@ -5,15 +5,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 { commonStyles as s } from "./ds-loader-logo.styles.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.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 "./ds-loader-logo.styles.js";
 //#region src/components/ds-loader-logo/ds-loader-logo.ts
-var c = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.show = !1, this.zIndex = 2e3, this.iconName = "logo";
 	}
 	static {
-		this.styles = [s];
+		this.styles = [l];
 	}
 	get styleTokens() {
 		return t`
@@ -25,10 +29,7 @@ var c = class extends i {
         `;
 	}
 	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=${c(this.iconName)}></ds-icon>` : e;
 	}
 	render() {
 		return this.show ? t`
@@ -47,11 +48,11 @@ var c = class extends i {
 r([n({
 	type: Boolean,
 	converter: o
-})], c.prototype, "show", void 0), r([n({
+})], u.prototype, "show", void 0), r([n({
 	type: Number,
 	attribute: "z-index"
-})], c.prototype, "zIndex", void 0), r([n({
+})], u.prototype, "zIndex", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], c.prototype, "iconName", void 0), r([n({ type: String })], c.prototype, "color", void 0), c = r([a("ds-loader-logo")], c);
+})], u.prototype, "iconName", void 0), r([n({ type: String })], u.prototype, "color", void 0), u = r([a("ds-loader-logo")], u);
 //#endregion

package/dist-react/esm/components/ds-loader-spinner/ds-loader-spinner.js

@@ -55,4 +55,3 @@ r([n({
 	reflect: !0
 })], u.prototype, "size", void 0), u = r([a("ds-loader-spinner")], u);
 //#endregion
-export { u as DsLoaderSpinner };

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

@@ -5,29 +5,25 @@ 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, containerStyles as c } from "./styles/common.styles.js";
-import { themeConfig as l } from "./theme-config.js";
+import { commonStyles as c, containerStyles as l } from "./styles/common.styles.js";
+import { themeConfig as u } from "./theme-config.js";
 //#region src/components/ds-logo/ds-logo.ts
-var u = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.size = "xxsmall", this.mode = "light";
 	}
 	static {
-		this.styles = [s, c];
+		this.styles = [c, l];
 	}
 	get logoTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon-logo",
-			"icon-name": "logo"
-		});
+		return o`<ds-icon class="icon-logo" icon-name="logo"></ds-icon>`;
 	}
 	get logoWordmarkTemplate() {
-		return !this.theme || !l[this.theme]?.["show-wordmark"] ? e : this.componentFactory.createIcon({
-			class: "icon-wordmark",
-			"icon-name": "logo-wordmark"
-		});
+		return !this.theme || !u[this.theme]?.["show-wordmark"] ? e : o`<ds-icon class="icon-wordmark" icon-name="logo-wordmark"></ds-icon>`;
 	}
 	get classes() {
 		return {
@@ -48,15 +44,15 @@ var u = class extends i {
 	render() {
 		return t`
             ${this.styleTokens}
-            <div data-testid="ds-logo-container" class=${o(this.classes)}>
+            <div data-testid="ds-logo-container" class=${s(this.classes)}>
                 ${this.logoTemplate}
                 ${this.logoWordmarkTemplate}
             </div>
         `;
 	}
 };
-r([n({ type: String })], u.prototype, "size", void 0), r([n({
+r([n({ type: String })], d.prototype, "size", void 0), r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), u = r([a("ds-logo")], u);
+})], d.prototype, "mode", void 0), d = r([a("ds-logo")], d);
 //#endregion

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

@@ -5,24 +5,24 @@ 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 { mapPinStyles as c } 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 { mapPinStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-map-pin/ds-map-pin.ts
-var l = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.width = 48, this.height = 48, this.checked = !1, this.iconSize = 24, this.iconTop = 8;
 	}
 	static {
-		this.styles = [c];
+		this.styles = [u];
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName,
-			size: this.iconSize
-		}) : e;
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)} size=${l(this.iconSize)}></ds-icon>` : e;
 	}
 	get clusterNumberTemplate() {
 		return this.clusterCount ? t`
@@ -57,7 +57,7 @@ var l = class extends i {
 	render() {
 		return t`
             ${this.styleTokens}
-            <span data-testid="ds-map-pin-container" class=${s(this.classes)} @click=${this.handleClick}>
+            <span data-testid="ds-map-pin-container" class=${c(this.classes)} @click=${this.handleClick}>
                 <svg
                     class="marker"
                     xmlns="http://www.w3.org/2000/svg"
@@ -81,24 +81,24 @@ var l = class extends i {
 r([n({
 	type: Number,
 	attribute: "width"
-})], l.prototype, "width", void 0), r([n({
+})], d.prototype, "width", void 0), r([n({
 	type: Number,
 	attribute: "height"
-})], l.prototype, "height", void 0), r([n({
+})], d.prototype, "height", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], l.prototype, "checked", void 0), r([n({
+})], d.prototype, "checked", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], l.prototype, "iconName", void 0), r([n({
+})], d.prototype, "iconName", void 0), r([n({
 	type: Number,
 	attribute: "icon-size"
-})], l.prototype, "iconSize", void 0), r([n({
+})], d.prototype, "iconSize", void 0), r([n({
 	type: Number,
 	attribute: "icon-top"
-})], l.prototype, "iconTop", void 0), r([n({
+})], d.prototype, "iconTop", void 0), r([n({
 	type: Number,
 	attribute: "cluster-count"
-})], l.prototype, "clusterCount", void 0), l = r([a("ds-map-pin")], l);
+})], d.prototype, "clusterCount", void 0), d = r([a("ds-map-pin")], d);
 //#endregion

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

@@ -6,11 +6,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 { 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-media-control/ds-media-control.ts
-var c = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this._state = void 0, this._stateValue = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
 			e.stopPropagation();
@@ -26,7 +30,7 @@ var c = class extends i {
 		};
 	}
 	static {
-		this.styles = [s];
+		this.styles = [l];
 	}
 	get state() {
 		return this._state ?? this._stateValue;
@@ -56,11 +60,7 @@ var c = class extends i {
 		return this.state === "play" ? "pause" : "play";
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName,
-			size: this.iconSize
-		});
+		return o`<ds-icon class="icon" icon-name=${this.iconName} size=${c(this.iconSize)}></ds-icon>`;
 	}
 	get progressTemplate() {
 		let t = this.size === "large" ? 46 : this.size === "small" ? 30 : 38, n = t / 2 - 2 / 2, r = n - 1, i = 2 * Math.PI * n, a = this.normalizedProgress / 100, o = i.toFixed(3), s = (i * (1 - a)).toFixed(3);
@@ -84,7 +84,7 @@ var c = class extends i {
 		return e`
             <div
                 part="container"
-                class=${o(this.classes)}
+                class=${s(this.classes)}
                 role="button"
                 tabindex="0"
                 aria-label=${`${t} media ${this.size}`}
@@ -101,11 +101,11 @@ r([t({
 	type: String,
 	attribute: "state",
 	reflect: !0
-})], c.prototype, "_state", void 0), r([n()], c.prototype, "_stateValue", void 0), r([t({
+})], u.prototype, "_state", void 0), r([n()], u.prototype, "_stateValue", void 0), r([t({
 	type: String,
 	reflect: !0
-})], c.prototype, "size", void 0), r([t({
+})], u.prototype, "size", void 0), r([t({
 	type: Number,
 	reflect: !0
-})], c.prototype, "progress", void 0), c = r([a("ds-media-control")], c);
+})], u.prototype, "progress", void 0), u = r([a("ds-media-control")], u);
 //#endregion

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

@@ -5,23 +5,29 @@ 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 { alignStyles as l, commonStyles as u, dialogStyles as d, fitStyles as f, fullScreenStyles as p } 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 "../ds-button/ds-button.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { alignStyles as d, commonStyles as f, dialogStyles as p, fitStyles as m, fullScreenStyles as h } from "./styles/common.styles.js";
 //#region src/components/ds-modal/ds-modal.ts
-var m = class extends c(i) {
+var g = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.withCloseButton = !0, this.variant = "fullScreen", this.zIndex = 2e3, this.disableScrollLock = !1, this.fullWidth = !1, this.vAlign = "default";
 	}
 	static {
 		this.styles = [
+			h,
 			p,
-			d,
+			m,
 			f,
-			u,
-			l
+			d
 		];
 	}
 	disconnectedCallback() {
@@ -43,7 +49,7 @@ var m = class extends c(i) {
 		};
 	}
 	get backdropTemplate() {
-		return this.variant === "dialog" ? t`<div class=${s(this.backdropClasses)} />` : e;
+		return this.variant === "dialog" ? t`<div class=${c(this.backdropClasses)} />` : e;
 	}
 	get buttonSize() {
 		return [
@@ -56,40 +62,34 @@ var m = class extends c(i) {
 		return this.variant === "dialog" || ["xs", "s"].includes(this.viewport) ? "small" : "medium";
 	}
 	get closeButtonTemplate() {
-		return this.withCloseButton ? this.componentFactory.createIconButton({
-			class: "close-button",
-			"data-aria-label": "close-button",
-			"@click": this.handleClickCloseButton,
-			size: this.closeButtonSize,
-			"icon-name": "cross",
-			mode: "light",
-			variant: "primary"
-		}) : e;
+		return this.withCloseButton ? s`<ds-icon-button
+            class="close-button"
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            size=${l(this.closeButtonSize)}
+            icon-name="cross"
+            mode="light"
+            variant="primary"
+        ></ds-icon-button>` : e;
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName,
-			size: 64
-		}) : e;
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)} size="64"></ds-icon>` : e;
 	}
 	get cancelButtonTemplate() {
-		return this.cancelButtonText ? this.componentFactory.createButton({
-			class: "cancel-button",
-			variant: "secondary",
-			size: this.buttonSize,
-			"@click": this.handleClickCancelButton,
-			children: this.cancelButtonText
-		}) : e;
+		return this.cancelButtonText ? s`<ds-button
+            class="cancel-button"
+            variant="secondary"
+            size=${l(this.buttonSize)}
+            @click=${this.handleClickCancelButton}
+        >${this.cancelButtonText}</ds-button>` : e;
 	}
 	get confirmButtonTemplate() {
-		return this.confirmButtonText ? this.componentFactory.createButton({
-			class: "confirm-button",
-			variant: "primary",
-			size: this.buttonSize,
-			"@click": this.handleClickConfirmButton,
-			children: this.confirmButtonText
-		}) : e;
+		return this.confirmButtonText ? s`<ds-button
+            class="confirm-button"
+            variant="primary"
+            size=${l(this.buttonSize)}
+            @click=${this.handleClickConfirmButton}
+        >${this.confirmButtonText}</ds-button>` : e;
 	}
 	get modalClasses() {
 		return {
@@ -123,12 +123,12 @@ var m = class extends c(i) {
             <div
                 role="dialog"
                 aria-labelledby="ds-modal-title"
-                class=${s(this.modalClasses)}
+                class=${c(this.modalClasses)}
                 @transitionend=${this.handleTransitionEnd}
             >
                 ${this.closeButtonTemplate}
                 ${this.iconTemplate}
-                <div class=${s(this.contentClasses)}>
+                <div class=${c(this.contentClasses)}>
                     <slot id="ds-modal-title" name="title"></slot>
                     <slot name="content"></slot>
                     ${this.cancelButtonTemplate}
@@ -169,32 +169,32 @@ r([n({
 	type: Boolean,
 	reflect: !0,
 	converter: o
-})], m.prototype, "open", void 0), r([n({
+})], g.prototype, "open", void 0), r([n({
 	type: Boolean,
 	attribute: "with-close-button",
 	converter: o
-})], m.prototype, "withCloseButton", void 0), r([n({
+})], g.prototype, "withCloseButton", void 0), r([n({
 	type: String,
 	attribute: "cancel-button-text"
-})], m.prototype, "cancelButtonText", void 0), r([n({
+})], g.prototype, "cancelButtonText", void 0), r([n({
 	type: String,
 	attribute: "confirm-button-text"
-})], m.prototype, "confirmButtonText", void 0), r([n({ type: String })], m.prototype, "variant", void 0), r([n({
+})], g.prototype, "confirmButtonText", void 0), r([n({ type: String })], g.prototype, "variant", void 0), r([n({
 	type: Number,
 	attribute: "z-index"
-})], m.prototype, "zIndex", void 0), r([n({
+})], g.prototype, "zIndex", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "disable-scroll-lock"
-})], m.prototype, "disableScrollLock", void 0), r([n({
+})], g.prototype, "disableScrollLock", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], m.prototype, "iconName", void 0), r([n({
+})], g.prototype, "iconName", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], m.prototype, "fullWidth", void 0), r([n({
+})], g.prototype, "fullWidth", void 0), r([n({
 	type: String,
 	attribute: "v-align"
-})], m.prototype, "vAlign", void 0), m = r([a("ds-modal")], m);
+})], g.prototype, "vAlign", void 0), g = r([a("ds-modal")], g);
 //#endregion

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

@@ -3,31 +3,35 @@ import { r as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/nod
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
-import { DsTextInput as i } from "../ds-text-input/ds-text-input.js";
+import { uiKitHtml as i } from "../../utils/uiKitHtml.js";
+import { o as a } 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 { DsTextInput as o } from "../ds-text-input/ds-text-input.js";
 //#region src/components/ds-password-input/ds-password-input.ts
-var a = class extends i {
+var s = class extends o {
 	constructor(...e) {
 		super(...e), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
 			this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
 		};
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "icon-button",
-			"icon-name": this.visible ? "eye-crossed-out" : "eye",
-			disabled: !!this.nativeInput?.disabled,
-			size: this.size,
-			variant: "naked",
-			"@click": this.handleClickIcon,
-			"data-aria-label": this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"
-		});
+		return i`<ds-icon-button
+            class="icon-button"
+            icon-name=${this.visible ? "eye-crossed-out" : "eye"}
+            ?disabled=${!!this.nativeInput?.disabled}
+            size=${a(this.size)}
+            variant="naked"
+            @click=${this.handleClickIcon}
+            data-aria-label=${this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"}
+        ></ds-icon-button>`;
 	}
 };
 n([e({
 	type: String,
 	attribute: "data-aria-label-hide-button"
-})], a.prototype, "dataAriaLabelHideButton", void 0), n([e({
+})], s.prototype, "dataAriaLabelHideButton", void 0), n([e({
 	type: String,
 	attribute: "data-aria-label-show-button"
-})], a.prototype, "dataAriaLabelShowButton", void 0), n([t()], a.prototype, "visible", void 0), a = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], a);
+})], s.prototype, "dataAriaLabelShowButton", void 0), n([t()], s.prototype, "visible", void 0), s = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], s);
 //#endregion

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

@@ -5,18 +5,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as r } from "../base/UiKitElement.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as a } from "../../utils/booleanConverter.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 "../ds-icon/ds-icon.js";
-import { commonStyles as s } from "./styles/common.styles.js";
+import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-rating/ds-rating.ts
-var c = class extends r {
+var l = class extends r {
 	constructor(...e) {
 		super(...e), this.disabled = !1, this.hideRatingText = !1;
 	}
 	static {
-		this.styles = [s];
+		this.styles = [c];
 	}
 	get displayValue() {
 		if (this.value === void 0 || this.value === null || this.value < 0) return 0;
@@ -36,31 +37,27 @@ var c = class extends r {
 		let e = this.displayValue, t = [];
 		for (let n = 1; n <= 5; n++) {
 			let r = this.getStarIconName(n, e);
-			r && t.push(this.componentFactory.createIcon({
-				class: "star-icon",
-				"icon-name": r,
-				size: 16
-			}));
+			r && t.push(o`<ds-icon class="star-icon" icon-name=${r} size="16"></ds-icon>`);
 		}
 		return t;
 	}
 	render() {
 		let t = this.value !== void 0 && this.value >= 0 ? this.value : 0, n = Math.max(0, Math.min(5, t)).toString();
 		return e`
-            <div class=${o(this.classes)} aria-label=${`Rating: ${n} out of 5`} role="img">
+            <div class=${s(this.classes)} aria-label=${`Rating: ${n} out of 5`} role="img">
                 <div class="stars-wrapper">${this.starsTemplate}</div>
                 ${this.hideRatingText ? "" : e`<span class="rating-text">${n}</span>`}
             </div>
         `;
 	}
 };
-n([t({ type: Number })], c.prototype, "value", void 0), n([t({
+n([t({ type: Number })], l.prototype, "value", void 0), n([t({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], c.prototype, "disabled", void 0), n([t({
+})], l.prototype, "disabled", void 0), n([t({
 	type: Boolean,
 	converter: a,
 	attribute: "hide-rating-text"
-})], c.prototype, "hideRatingText", void 0), c = n([i("ds-rating")], c);
+})], l.prototype, "hideRatingText", void 0), l = n([i("ds-rating")], l);
 //#endregion