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

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

@@ -6,18 +6,22 @@ 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 { 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-calendar-day/ds-calendar-day.js";
-import { arrayConverter as s } from "../../utils/arrayConverter.js";
-import { commonStyles as c } from "./styles/common.styles.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { arrayConverter as l } from "../../utils/arrayConverter.js";
+import { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-calendar/ds-calendar.ts
-var l = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.variant = "plane", this.size = "large", this.locale = "en-US", this.firstDayOfWeek = 1, this.disabledDates = [], this.disabledWeekdays = [], this._viewDate = /* @__PURE__ */ new Date(), this._value = null, this._initialValueApplied = !1, this._viewDateInitialized = !1;
 	}
 	static {
-		this.styles = [c];
+		this.styles = [u];
 	}
 	get selectedDate() {
 		if (this.value) {
@@ -173,26 +177,24 @@ var l = class extends i {
 		return this.size === "medium" ? "small" : "medium";
 	}
 	get prevButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "nav-button",
-			"icon-name": "arrow-left",
-			"data-aria-label": "Previous month",
-			"@click": this.handlePrevMonth,
-			variant: "naked",
-			size: this.navButtonSize,
-			color: "var(--ds-icon-button-icon-color-standard-default, #fafafa)"
-		});
+		return o`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-left"
+            data-aria-label="Previous month"
+            @click=${this.handlePrevMonth}
+            variant="naked"
+            size=${c(this.navButtonSize)}
+        ></ds-icon-button>`;
 	}
 	get nextButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "nav-button",
-			"icon-name": "arrow-right",
-			"data-aria-label": "Next month",
-			"@click": this.handleNextMonth,
-			variant: "naked",
-			size: this.navButtonSize,
-			color: "var(--ds-icon-button-icon-color-standard-default, #fafafa)"
-		});
+		return o`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-right"
+            data-aria-label="Next month"
+            @click=${this.handleNextMonth}
+            variant="naked"
+            size=${c(this.navButtonSize)}
+        ></ds-icon-button>`;
 	}
 	get weekdaysTemplate() {
 		return e`
@@ -208,14 +210,14 @@ var l = class extends i {
             <div class="days-grid" role="grid" @ds-calendar-day-change=${this.handleDayChange}>
                 ${n.map((t) => e`
                         <div class="days-row" role="row">
-                            ${t.map((e) => this.componentFactory.createCalendarDay({
-			day: e.day,
-			size: this.size,
-			disabled: e.isDisabled,
-			selected: e.isSelected,
-			today: e.isToday,
-			"outside-month": !e.isCurrentMonth
-		}))}
+                            ${t.map((e) => o`<ds-calendar-day
+                                    day=${e.day}
+                                    size=${c(this.size)}
+                                    ?disabled=${e.isDisabled}
+                                    ?selected=${e.isSelected}
+                                    ?today=${e.isToday}
+                                    ?outside-month=${!e.isCurrentMonth}
+                                ></ds-calendar-day>`)}
                         </div>
                     `)}
             </div>
@@ -223,7 +225,7 @@ var l = class extends i {
 	}
 	render() {
 		return e`
-            <div class=${o(this.calendarClasses)} role="application" aria-label="Calendar">
+            <div class=${s(this.calendarClasses)} role="application" aria-label="Calendar">
                 <div class="header">
                     ${this.prevButtonTemplate}
                     <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
@@ -237,39 +239,39 @@ var l = class extends i {
 r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "value", void 0), r([t({
+})], d.prototype, "value", void 0), r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "variant", void 0), r([t({
+})], d.prototype, "variant", void 0), r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "size", void 0), r([t({
+})], d.prototype, "size", void 0), r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "locale", void 0), r([t({
+})], d.prototype, "locale", void 0), r([t({
 	type: Number,
 	reflect: !0,
 	attribute: "first-day-of-week"
-})], l.prototype, "firstDayOfWeek", void 0), r([t({
+})], d.prototype, "firstDayOfWeek", void 0), r([t({
 	type: String,
 	reflect: !0,
 	attribute: "min-date"
-})], l.prototype, "minDate", void 0), r([t({
+})], d.prototype, "minDate", void 0), r([t({
 	type: String,
 	reflect: !0,
 	attribute: "max-date"
-})], l.prototype, "maxDate", void 0), r([t({
+})], d.prototype, "maxDate", void 0), r([t({
 	attribute: "disabled-dates",
-	converter: s
-})], l.prototype, "disabledDates", void 0), r([t({
+	converter: l
+})], d.prototype, "disabledDates", void 0), r([t({
 	attribute: "disabled-weekdays",
-	converter: s
-})], l.prototype, "disabledWeekdays", void 0), r([t({
+	converter: l
+})], d.prototype, "disabledWeekdays", void 0), r([t({
 	type: String,
 	reflect: !0,
 	attribute: "view-date"
-})], l.prototype, "viewDateAttr", void 0), r([t({
+})], d.prototype, "viewDateAttr", void 0), r([t({
 	type: String,
 	attribute: "initial-value"
-})], l.prototype, "initialValue", void 0), r([n()], l.prototype, "_viewDate", void 0), r([n()], l.prototype, "_value", void 0), l = r([a("ds-calendar")], l);
+})], d.prototype, "initialValue", void 0), r([n()], d.prototype, "_viewDate", void 0), r([n()], d.prototype, "_value", void 0), d = r([a("ds-calendar")], d);
 //#endregion

package/dist-react/esm/components/ds-calendar-day/ds-calendar-day.js

@@ -84,4 +84,3 @@ n([t({
 	attribute: "outside-month"
 })], c.prototype, "outsideMonth", void 0), c = n([i("ds-calendar-day")], c);
 //#endregion
-export { c as DsCalendarDay };

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

@@ -7,14 +7,16 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.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 { checkboxGroupDisabledContext as u, checkboxGroupErrorContext as d, checkboxGroupSizeContext as f } from "../ds-checkbox-group/ds-checkbox-group.js";
-import { FormAssociatedMixin as p } from "../../mixins/FormAssociatedMixin.js";
-import { commonStyles as m } from "./styles/common.styles.js";
+import { checkboxGroupDisabledContext as d, checkboxGroupErrorContext as f, checkboxGroupSizeContext as p } from "../ds-checkbox-group/ds-checkbox-group.js";
+import { FormAssociatedMixin as m } from "../../mixins/FormAssociatedMixin.js";
+import { commonStyles as h } from "./styles/common.styles.js";
 //#region src/components/ds-checkbox/ds-checkbox.ts
-var h = class extends p(o) {
+var g = class extends m(o) {
 	constructor(...e) {
 		super(...e), this.inputPlacement = "left", this._checked = void 0, this._checkedState = !1, this.required = !1, this._disabled = !1, this.mode = "light", this._size = "medium", this.helperText = "", this.infoText = "", this._forcedError = "", this.invalidError = "", this.indeterminate = !1, this.dataAriaLabel = "";
 	}
@@ -25,25 +27,25 @@ var h = class extends p(o) {
 		this._checked = e;
 	}
 	static {
-		this.styles = [m];
+		this.styles = [h];
 	}
 	connectedCallback() {
 		super.connectedCallback(), queueMicrotask(() => {
 			this.createContextConsumers([
 				{
-					context: u,
+					context: d,
 					callback: (e) => {
 						this.disabledGroup = e;
 					}
 				},
 				{
-					context: d,
+					context: f,
 					callback: (e) => {
 						this.errorGroup = e;
 					}
 				},
 				{
-					context: f,
+					context: p,
 					callback: (e) => {
 						this.sizeGroup = e;
 					}
@@ -104,12 +106,7 @@ var h = class extends p(o) {
 		};
 	}
 	get iconTemplate() {
-		if (!this.checked) return t;
-		let e = this.indeterminate ? "minus" : "check";
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": e
-		});
+		return this.checked ? l`<ds-icon class="icon" icon-name=${this.indeterminate ? "minus" : "check"}></ds-icon>` : t;
 	}
 	get styleTokens() {
 		return n`
@@ -124,7 +121,7 @@ var h = class extends p(o) {
 	render() {
 		return n`
             ${this.styleTokens}
-            <div class=${l(this.classes)}>
+            <div class=${u(this.classes)}>
                 <label>
                     <span class="checkmark-container">
                         <span class="checkmark">
@@ -156,44 +153,44 @@ var h = class extends p(o) {
         `;
 	}
 };
-a([r({ type: String })], h.prototype, "name", void 0), a([r({ type: String })], h.prototype, "value", void 0), a([r({
+a([r({ type: String })], g.prototype, "name", void 0), a([r({ type: String })], g.prototype, "value", void 0), a([r({
 	type: String,
 	attribute: "input-placement"
-})], h.prototype, "inputPlacement", void 0), a([r({
+})], g.prototype, "inputPlacement", void 0), a([r({
 	type: Boolean,
 	attribute: "checked",
 	converter: c,
 	reflect: !0
-})], h.prototype, "_checked", void 0), a([i()], h.prototype, "_checkedState", void 0), a([r({
+})], g.prototype, "_checked", void 0), a([i()], g.prototype, "_checkedState", void 0), a([r({
 	type: Boolean,
 	converter: c
-})], h.prototype, "required", void 0), a([r({
+})], g.prototype, "required", void 0), a([r({
 	type: Boolean,
 	converter: c,
 	attribute: "disabled"
-})], h.prototype, "_disabled", void 0), a([r({
+})], g.prototype, "_disabled", void 0), a([r({
 	type: String,
 	reflect: !0
-})], h.prototype, "mode", void 0), a([r({
+})], g.prototype, "mode", void 0), a([r({
 	type: String,
 	attribute: "size"
-})], h.prototype, "_size", void 0), a([r({
+})], g.prototype, "_size", void 0), a([r({
 	type: String,
 	attribute: "helper-text"
-})], h.prototype, "helperText", void 0), a([r({
+})], g.prototype, "helperText", void 0), a([r({
 	type: String,
 	attribute: "info-text"
-})], h.prototype, "infoText", void 0), a([r({
+})], g.prototype, "infoText", void 0), a([r({
 	type: String,
 	attribute: "forced-error"
-})], h.prototype, "_forcedError", void 0), a([r({
+})], g.prototype, "_forcedError", void 0), a([r({
 	type: String,
 	attribute: "invalid-error"
-})], h.prototype, "invalidError", void 0), a([r({
+})], g.prototype, "invalidError", void 0), a([r({
 	type: Boolean,
 	converter: c
-})], h.prototype, "indeterminate", void 0), a([r({
+})], g.prototype, "indeterminate", void 0), a([r({
 	type: String,
 	attribute: "data-aria-label"
-})], h.prototype, "dataAriaLabel", void 0), a([i()], h.prototype, "disabledGroup", void 0), a([i()], h.prototype, "errorGroup", void 0), a([i()], h.prototype, "sizeGroup", void 0), h = a([s("ds-checkbox")], h);
+})], g.prototype, "dataAriaLabel", void 0), a([i()], g.prototype, "disabledGroup", void 0), a([i()], g.prototype, "errorGroup", void 0), a([i()], g.prototype, "sizeGroup", void 0), g = a([s("ds-checkbox")], g);
 //#endregion

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

@@ -5,19 +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 { commonStyles 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 { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-chip/ds-chip.ts
-var l = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "", this.handleSlotChange = (e) => {
 			this.slottedText = e.target.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent.trim()).join(" "), this.requestUpdate();
 		};
 	}
 	static {
-		this.styles = [c];
+		this.styles = [u];
 	}
 	get classes() {
 		return {
@@ -60,25 +64,20 @@ var l = class extends i {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
 	}
 	get leadingIconTemplate() {
-		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;
 	}
 	get iconTemplate() {
-		if (!this.selected || !this.deselectable) return e;
-		let t = this.mode === "light" ? "dark" : "light";
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": "cross",
-			"data-testid": "ds-chip-icon",
-			"@click": this.handleClickIcon,
-			"@keydown": this.handleKeyDownIcon,
-			role: "button",
-			"aria-label": `deselect ${this.slottedText}`,
-			tabindex: "0",
-			mode: t
-		});
+		return !this.selected || !this.deselectable ? e : s`<ds-icon
+            class="icon"
+            icon-name="cross"
+            mode=${this.mode === "light" ? "dark" : "light"}
+            data-testid="ds-chip-icon"
+            @click=${this.handleClickIcon}
+            @keydown=${this.handleKeyDownIcon}
+            role="button"
+            aria-label=${`deselect ${this.slottedText}`}
+            tabindex="0"
+        ></ds-icon>`;
 	}
 	render() {
 		return t`
@@ -88,7 +87,7 @@ var l = class extends i {
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${s(this.classes)}
+                class=${c(this.classes)}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
@@ -99,21 +98,21 @@ var l = class extends i {
         `;
 	}
 };
-r([n({ type: String })], l.prototype, "value", void 0), r([n({
+r([n({ type: String })], d.prototype, "value", void 0), r([n({
 	type: String,
 	reflect: !0
-})], l.prototype, "mode", void 0), r([n({
+})], d.prototype, "mode", void 0), r([n({
 	type: String,
 	reflect: !0
-})], l.prototype, "size", void 0), r([n({
+})], d.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], l.prototype, "selected", void 0), r([n({
+})], d.prototype, "selected", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], l.prototype, "deselectable", void 0), r([n({
+})], d.prototype, "deselectable", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], l.prototype, "iconName", void 0), l = r([a("ds-chip")], l);
+})], d.prototype, "iconName", void 0), d = r([a("ds-chip")], d);
 //#endregion

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

@@ -9,12 +9,16 @@ import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as s } from "../base/UiKitElement.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as l } from "../../utils/booleanConverter.js";
-import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { e as d } 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 { arrayConverter as d } from "../../utils/arrayConverter.js";
-import { commonStyles as f } from "./styles/common.styles.js";
+import { o as f } 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 { arrayConverter as p } from "../../utils/arrayConverter.js";
+import { commonStyles as m } from "./styles/common.styles.js";
 //#region src/components/ds-chips/ds-chips.ts
-var p = class extends s {
+var h = class extends s {
 	constructor(...e) {
 		super(...e), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
 			this.handleScrollNav();
@@ -34,7 +38,7 @@ var p = class extends s {
 		};
 	}
 	static {
-		this.styles = [f];
+		this.styles = [m];
 	}
 	firstUpdated() {
 		this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
@@ -45,16 +49,16 @@ var p = class extends s {
 	getScrollButtonTemplate(t, n) {
 		if (t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight) return e;
 		let r = `arrow-${t}`;
-		return this.componentFactory.createIconButton({
-			class: `scroll-button ${t}`,
-			"data-testid": `scroll-button-${t}`,
-			"data-aria-label": `scroll-button-${t}`,
-			"@click": n,
-			size: this.size || "large",
-			"icon-name": r,
-			variant: "rounded",
-			mode: this.mode
-		});
+		return u`<ds-icon-button
+            class=${`scroll-button ${t}`}
+            data-testid=${`scroll-button-${t}`}
+            data-aria-label=${`scroll-button-${t}`}
+            @click=${n}
+            size=${this.size || "large"}
+            icon-name=${r}
+            variant="rounded"
+            mode=${f(this.mode)}
+        ></ds-icon-button>`;
 	}
 	updated(e) {
 		super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
@@ -96,7 +100,7 @@ var p = class extends s {
                 @deselect=${this.handleDeselect}
             >
                 ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
-                <nav tabindex="0" class=${u(this.chipsContainerClasses)}>
+                <nav tabindex="0" class=${d(this.chipsContainerClasses)}>
                     <slot @slotchange=${this.updateChildChips}></slot>
                 </nav>
                 ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
@@ -107,14 +111,14 @@ var p = class extends s {
 o([n({
 	type: Array,
 	attribute: "selected-chips",
-	converter: d,
+	converter: p,
 	reflect: !0
-})], p.prototype, "selectedChips", void 0), o([n({
+})], h.prototype, "selectedChips", void 0), o([n({
 	type: Boolean,
 	attribute: "multi-choice",
 	converter: l
-})], p.prototype, "multiChoice", void 0), o([n({ type: String })], p.prototype, "size", void 0), o([n({
+})], h.prototype, "multiChoice", void 0), o([n({ type: String })], h.prototype, "size", void 0), o([n({
 	type: String,
 	reflect: !0
-})], p.prototype, "mode", void 0), o([r()], p.prototype, "hasScrollLeft", void 0), o([r()], p.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], p.prototype, "chips", void 0), o([i(".chips-container")], p.prototype, "chipsContainer", void 0), p = o([c("ds-chips")], p);
+})], h.prototype, "mode", void 0), o([r()], h.prototype, "hasScrollLeft", void 0), o([r()], h.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], h.prototype, "chips", void 0), o([i(".chips-container")], h.prototype, "chipsContainer", void 0), h = o([c("ds-chips")], h);
 //#endregion

package/dist-react/esm/components/ds-date-picker/ds-date-picker.js

@@ -6,14 +6,18 @@ 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 { 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 { inputStatesMixin as c } from "../../mixins/inputStatesMixin.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 "../ds-icon-button/ds-icon-button.js";
+import { inputStatesMixin as u } from "../../mixins/inputStatesMixin.js";
+import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-date-picker/ds-date-picker.ts
-var u, d = class extends c(a) {
+var f, p = class extends u(a) {
 	static {
-		u = this;
+		f = this;
 	}
 	constructor(...e) {
 		super(...e), this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelCalendarButton = "", this.isExpanded = !1, this.handleCalendarButtonClick = () => {
@@ -27,17 +31,17 @@ var u, d = class extends c(a) {
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [d];
 	}
 	static {
 		this.nativeStylesInjected = !1;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), u.injectNativeInputStyles();
+		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), f.injectNativeInputStyles();
 	}
 	static injectNativeInputStyles() {
-		if (u.nativeStylesInjected) return;
-		u.nativeStylesInjected = !0;
+		if (f.nativeStylesInjected) return;
+		f.nativeStylesInjected = !0;
 		let e = document.createElement("style");
 		e.textContent = [".ds-date-picker input[type=\"date\"]::-webkit-calendar-picker-indicator { display: none !important; }", ".ds-date-picker input[type=\"date\"]::-webkit-inner-spin-button { display: none !important; }"].join("\n"), document.head.appendChild(e);
 	}
@@ -60,7 +64,7 @@ var u, d = class extends c(a) {
 	}
 	render() {
 		return t`
-            <div class=${s(this.classes)}>
+            <div class=${c(this.classes)}>
                 <div class="input-container">
                     <div><slot></slot></div>
                     ${this.calendarButtonTemplate}
@@ -83,15 +87,15 @@ var u, d = class extends c(a) {
         `;
 	}
 	get calendarButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "calendar-button",
-			"icon-name": "calendar",
-			size: this.size,
-			disabled: !!this.nativeInput?.disabled,
-			variant: "naked",
-			"@click": this.handleCalendarButtonClick,
-			"data-aria-label": this.dataAriaLabelCalendarButton || "open calendar"
-		});
+		return s`<ds-icon-button
+            class="calendar-button"
+            icon-name="calendar"
+            size=${l(this.size)}
+            ?disabled=${!!this.nativeInput?.disabled}
+            variant="naked"
+            @click=${this.handleCalendarButtonClick}
+            data-aria-label=${this.dataAriaLabelCalendarButton || "open calendar"}
+        ></ds-icon-button>`;
 	}
 	get helperTextTemplate() {
 		return this.inputStates.readonly || this.forcedError || this.inputStates.invalid && this.invalidError ? e : t`<span class="support-text helper-text">${this.helperText}</span>`;
@@ -106,20 +110,20 @@ var u, d = class extends c(a) {
 		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? e : t`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
 	}
 };
-i([n({ type: String })], d.prototype, "size", void 0), i([n({
+i([n({ type: String })], p.prototype, "size", void 0), i([n({
 	type: String,
 	attribute: "helper-text"
-})], d.prototype, "helperText", void 0), i([n({
+})], p.prototype, "helperText", void 0), i([n({
 	type: String,
 	attribute: "forced-error"
-})], d.prototype, "forcedError", void 0), i([n({
+})], p.prototype, "forcedError", void 0), i([n({
 	type: String,
 	attribute: "invalid-error"
-})], d.prototype, "invalidError", void 0), i([n({
+})], p.prototype, "invalidError", void 0), i([n({
 	type: String,
 	attribute: "readonly-text"
-})], d.prototype, "readonlyText", void 0), i([n({
+})], p.prototype, "readonlyText", void 0), i([n({
 	type: String,
 	attribute: "data-aria-label-calendar-button"
-})], d.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], d.prototype, "isExpanded", void 0), d = u = i([o("ds-date-picker")], d);
+})], p.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], p.prototype, "isExpanded", void 0), p = f = i([o("ds-date-picker")], p);
 //#endregion