@well-insight/ui 0.1.10 → 0.1.11

package/dist/date-picker/index.js

@@ -1,27 +1,29 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n, o as r } from "../config-DWwce9jA.js";
-import { n as i, t as a } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t, t as n } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-CN1tuC95.js";
+import { c as i, o as a } from "../config-CTLkobga.js";
+import { n as o, t as s } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as o, Teleport as s, Transition as c, computed as l, createBlock as ee, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as te, defineComponent as p, nextTick as m, normalizeClass as h, normalizeStyle as ne, onBeforeUnmount as re, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, watch as ie, withCtx as ae, withKeys as x, withModifiers as S } from "vue";
+import { Fragment as c, Teleport as ee, Transition as te, computed as l, createBlock as ne, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as re, onBeforeUnmount as ie, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, watch as ae, withCtx as oe, withKeys as S, withModifiers as C } from "vue";
 //#region src/components/DatePicker/DatePicker.vue?vue&type=script&setup=true&lang.ts
-var oe = {
+var se = {
 	key: 0,
 	class: "wi-datepicker__label"
-}, se = [
+}, ce = [
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-invalid",
 	"aria-expanded",
 	"onKeydown"
-], ce = ["aria-label", "disabled"], le = ["aria-label"], ue = {
+], le = ["aria-label", "disabled"], ue = ["aria-label"], de = {
 	key: 0,
 	class: "wi-datepicker__shortcuts"
-}, de = ["onClick"], fe = { class: "wi-datepicker__calendar" }, pe = { class: "wi-datepicker__header" }, me = ["aria-label"], he = { class: "wi-datepicker__month" }, ge = ["aria-label"], _e = { class: "wi-datepicker__weekdays" }, ve = { class: "wi-datepicker__grid" }, ye = [
+}, fe = ["onClick"], pe = { class: "wi-datepicker__calendar" }, me = { class: "wi-datepicker__header" }, he = ["aria-label"], ge = { class: "wi-datepicker__month" }, _e = ["aria-label"], ve = { class: "wi-datepicker__weekdays" }, ye = { class: "wi-datepicker__grid" }, be = [
 	"disabled",
 	"onClick",
 	"onMouseenter"
-], C = /* @__PURE__ */ p({
+], w = /* @__PURE__ */ m({
 	__name: "DatePicker",
 	props: {
 		modelValue: { default: null },
@@ -55,10 +57,10 @@ var oe = {
 		},
 		appendTo: {}
 	},
-	emits: ["update:modelValue"],
-	setup(p, { emit: C }) {
-		let w = p, T = C, E = n(), D = i(), be = r("DatePicker", () => w.size), O = _(!1), k = _(null), A = _(null), j = _(null), M = _({}), N = _((/* @__PURE__ */ new Date()).getFullYear()), P = _((/* @__PURE__ */ new Date()).getMonth()), F = _(null), I = _(null), L = l(() => e(w, E.value.appendTo)), R = l(() => t(w, E.value.appendTo)), z = l(() => w.type === "daterange");
-		function B(e) {
+	emits: ["update:modelValue", "clear"],
+	setup(m, { emit: w }) {
+		let T = m, E = w, D = i(), O = o(), xe = a("DatePicker", () => T.size), k = v(!1), A = v(null), j = v(null), M = v(null), N = v({}), P = v((/* @__PURE__ */ new Date()).getFullYear()), F = v((/* @__PURE__ */ new Date()).getMonth()), I = v(null), L = v(null), R = l(() => t(T, D.value.appendTo)), z = l(() => n(T, D.value.appendTo)), B = l(() => T.type === "daterange");
+		function V(e) {
 			if (e == null || e === "") return null;
 			if (e instanceof Date) return Number.isNaN(e.getTime()) ? null : e;
 			let t = /^(\d{4})-(\d{2})-(\d{2})/.exec(e);
@@ -66,49 +68,49 @@ var oe = {
 			let n = new Date(e);
 			return Number.isNaN(n.getTime()) ? null : n;
 		}
-		function V(e) {
-			return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
-		}
 		function H(e) {
-			return w.format.replaceAll("YYYY", String(e.getFullYear())).replaceAll("MM", String(e.getMonth() + 1).padStart(2, "0")).replaceAll("DD", String(e.getDate()).padStart(2, "0"));
+			return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 		}
 		function U(e) {
+			return T.format.replaceAll("YYYY", String(e.getFullYear())).replaceAll("MM", String(e.getMonth() + 1).padStart(2, "0")).replaceAll("DD", String(e.getDate()).padStart(2, "0"));
+		}
+		function W(e) {
 			return new Date(e.getFullYear(), e.getMonth(), e.getDate());
 		}
-		function xe(e) {
+		function Se(e) {
 			if (e == null || e === "") return {
 				start: null,
 				end: null
 			};
 			if (Array.isArray(e)) return {
-				start: B(e[0]),
-				end: B(e[1])
+				start: V(e[0]),
+				end: V(e[1])
 			};
-			let t = B(e);
+			let t = V(e);
 			return {
 				start: t,
 				end: t
 			};
 		}
-		let W = l(() => xe(w.modelValue)), G = l(() => B(w.minDate)), K = l(() => B(w.maxDate)), q = l(() => {
-			let { start: e, end: t } = W.value;
-			return e ? !z.value || !t ? H(e) : `${H(e)} – ${H(t)}` : "";
-		}), Se = l(() => w.placeholder ?? (z.value ? D.value.dateRangePlaceholder : D.value.datePickerPlaceholder)), Ce = l(() => a(D.value.monthYear, {
-			year: N.value,
-			month: P.value + 1,
-			monthName: D.value.monthNames[P.value] ?? String(P.value + 1)
+		let G = l(() => Se(T.modelValue)), K = l(() => V(T.minDate)), q = l(() => V(T.maxDate)), J = l(() => {
+			let { start: e, end: t } = G.value;
+			return e ? !B.value || !t ? U(e) : `${U(e)} – ${U(t)}` : "";
+		}), Ce = l(() => T.placeholder ?? (B.value ? O.value.dateRangePlaceholder : O.value.datePickerPlaceholder)), we = l(() => s(O.value.monthYear, {
+			year: P.value,
+			month: F.value + 1,
+			monthName: O.value.monthNames[F.value] ?? String(F.value + 1)
 		}));
-		function we() {
-			let e = F.value ?? W.value.start, t = F.value ? I.value ?? F.value : W.value.end;
+		function Te() {
+			let e = I.value ?? G.value.start, t = I.value ? L.value ?? I.value : G.value.end;
 			if (!e) return {
 				start: null,
 				end: null
 			};
 			if (!t) return {
-				start: U(e),
-				end: U(e)
+				start: W(e),
+				end: W(e)
 			};
-			let n = U(e), r = U(t);
+			let n = W(e), r = W(t);
 			return n.getTime() <= r.getTime() ? {
 				start: n,
 				end: r
@@ -117,23 +119,23 @@ var oe = {
 				end: n
 			};
 		}
-		let Te = l(() => {
-			let e = new Date(N.value, P.value, 1).getDay(), t = new Date(N.value, P.value + 1, 0).getDate(), n = [];
+		let Ee = l(() => {
+			let e = new Date(P.value, F.value, 1).getDay(), t = new Date(P.value, F.value + 1, 0).getDate(), n = [];
 			for (let t = 0; t < e; t++) {
-				let r = new Date(N.value, P.value, -e + t + 1);
-				n.push(J(r, !1));
+				let r = new Date(P.value, F.value, -e + t + 1);
+				n.push(Y(r, !1));
 			}
-			for (let e = 1; e <= t; e++) n.push(J(new Date(N.value, P.value, e), !0));
+			for (let e = 1; e <= t; e++) n.push(Y(new Date(P.value, F.value, e), !0));
 			for (; n.length % 7 != 0 || n.length < 42;) {
 				let e = n[n.length - 1].date, t = new Date(e.getFullYear(), e.getMonth(), e.getDate() + 1);
-				n.push(J(t, !1));
+				n.push(Y(t, !1));
 			}
 			return n;
 		});
-		function J(e, t) {
-			let n = U(e), r = !1;
-			G.value && n < U(G.value) && (r = !0), K.value && n > U(K.value) && (r = !0);
-			let i = we(), a = n.getTime(), o = !!(i.start && a === i.start.getTime()), s = !!(i.end && a === i.end.getTime()), c = !!(z.value && i.start && i.end && a > i.start.getTime() && a < i.end.getTime());
+		function Y(e, t) {
+			let n = W(e), r = !1;
+			K.value && n < W(K.value) && (r = !0), q.value && n > W(q.value) && (r = !0);
+			let i = Te(), a = n.getTime(), o = !!(i.start && a === i.start.getTime()), s = !!(i.end && a === i.end.getTime()), c = !!(B.value && i.start && i.end && a > i.start.getTime() && a < i.end.getTime());
 			return {
 				date: n,
 				inMonth: t,
@@ -144,158 +146,163 @@ var oe = {
 				rangeEnd: s
 			};
 		}
-		let Ee = l(() => [
+		let De = l(() => [
 			"wi-datepicker",
-			`wi-datepicker--${be.value}`,
+			`wi-datepicker--${xe.value}`,
 			{
-				"wi-datepicker--fluid": w.fluid,
-				"wi-datepicker--disabled": w.disabled,
-				"wi-datepicker--invalid": w.invalid,
-				"wi-datepicker--open": O.value,
-				"wi-datepicker--range": z.value
+				"wi-datepicker--fluid": T.fluid,
+				"wi-datepicker--disabled": T.disabled,
+				"wi-datepicker--invalid": T.invalid,
+				"wi-datepicker--open": k.value,
+				"wi-datepicker--range": B.value
 			}
 		]);
-		function De() {
-			let e = W.value.start ?? /* @__PURE__ */ new Date();
-			N.value = e.getFullYear(), P.value = e.getMonth();
+		function Oe() {
+			let e = G.value.start ?? /* @__PURE__ */ new Date();
+			P.value = e.getFullYear(), F.value = e.getMonth();
 		}
-		function Y() {
-			if (!R.value || !A.value) return;
-			let e = A.value.getBoundingClientRect();
-			M.value = {
-				left: `${e.left}px`,
-				minWidth: `${e.width}px`,
-				top: `${e.bottom + 8}px`
-			};
+		function ke() {
+			if (!z.value || !j.value) return;
+			let e = j.value.getBoundingClientRect();
+			N.value = r(e, "bottom-start", { minWidth: `${e.width}px` });
 		}
-		function Oe(e) {
-			w.disabled || (O.value = e, e && (F.value = null, I.value = null, De(), m(() => Y())));
+		function Ae(e) {
+			T.disabled || (k.value = e, e && (I.value = null, L.value = null, Oe(), h(() => ke())));
 		}
 		function X() {
-			Oe(!O.value);
+			Ae(!k.value);
 		}
-		function ke() {
-			P.value === 0 ? (P.value = 11, --N.value) : --P.value;
+		function je() {
+			F.value === 0 ? (F.value = 11, --P.value) : --F.value;
 		}
-		function Ae() {
-			P.value === 11 ? (P.value = 0, N.value += 1) : P.value += 1;
+		function Me() {
+			F.value === 11 ? (F.value = 0, P.value += 1) : F.value += 1;
 		}
-		function je(e, t) {
-			if (t || w.disabled) return;
-			if (!z.value) {
-				T("update:modelValue", V(e)), O.value = !1;
+		function Ne(e, t) {
+			if (t || T.disabled) return;
+			if (!B.value) {
+				E("update:modelValue", H(e)), k.value = !1;
 				return;
 			}
-			if (!F.value) {
-				F.value = e, I.value = e;
+			if (!I.value) {
+				I.value = e, L.value = e;
 				return;
 			}
-			let n = F.value, r = e, [i, a] = n.getTime() <= r.getTime() ? [n, r] : [r, n];
-			T("update:modelValue", [V(i), V(a)]), F.value = null, I.value = null, O.value = !1;
+			let n = I.value, r = e, [i, a] = n.getTime() <= r.getTime() ? [n, r] : [r, n];
+			E("update:modelValue", [H(i), H(a)]), I.value = null, L.value = null, k.value = !1;
 		}
-		function Me(e) {
-			if (w.disabled) return;
+		function Pe(e) {
+			if (T.disabled) return;
 			let t = typeof e.value == "function" ? e.value() : e.value;
 			if (Array.isArray(t)) {
-				let e = B(t[0]), n = B(t[1]);
+				let e = V(t[0]), n = V(t[1]);
 				if (!e || !n) return;
 				let [r, i] = e.getTime() <= n.getTime() ? [e, n] : [n, e];
-				T("update:modelValue", z.value ? [V(r), V(i)] : V(r));
+				E("update:modelValue", B.value ? [H(r), H(i)] : H(r));
 			} else {
-				let e = B(t);
+				let e = V(t);
 				if (!e) return;
-				T("update:modelValue", z.value ? [V(e), V(e)] : V(e));
+				E("update:modelValue", B.value ? [H(e), H(e)] : H(e));
 			}
-			O.value = !1;
+			k.value = !1;
 		}
-		function Ne() {
-			w.disabled || !w.clearable || T("update:modelValue", null);
+		function Fe() {
+			T.disabled || !T.clearable || (E("update:modelValue", null), E("clear"));
 		}
 		function Z(e) {
 			let t = e.target;
-			k.value?.contains(t) || j.value?.contains(t) || (O.value = !1);
+			A.value?.contains(t) || M.value?.contains(t) || (k.value = !1);
 		}
 		function Q(e) {
-			e.key === "Escape" && (O.value = !1);
+			e.key === "Escape" && (k.value = !1);
 		}
 		function $() {
-			O.value && Y();
+			k.value && ke();
 		}
-		return ie(O, async (e) => {
-			e ? (document.addEventListener("click", Z), document.addEventListener("keydown", Q), R.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)), await m()) : (document.removeEventListener("click", Z), document.removeEventListener("keydown", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), re(() => {
+		return ae(k, async (e) => {
+			e ? (document.addEventListener("click", Z), document.addEventListener("keydown", Q), z.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)), await h()) : (document.removeEventListener("click", Z), document.removeEventListener("keydown", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), ie(() => {
 			document.removeEventListener("click", Z), document.removeEventListener("keydown", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, t) => (g(), d("div", {
+		}), (t, n) => (_(), d("div", {
 			ref_key: "root",
-			ref: k,
-			class: h(Ee.value)
+			ref: A,
+			class: g(De.value)
 		}, [
-			p.label ? (g(), d("label", oe, y(p.label), 1)) : u("", !0),
+			m.label ? (_(), d("label", se, b(m.label), 1)) : u("", !0),
 			f("div", {
 				ref_key: "triggerEl",
-				ref: A,
+				ref: j,
 				class: "wi-datepicker__control"
 			}, [f("input", {
 				class: "wi-datepicker__input",
 				type: "text",
 				readonly: "",
-				value: q.value,
-				placeholder: Se.value,
-				disabled: p.disabled,
-				"aria-invalid": p.invalid || void 0,
-				"aria-expanded": O.value,
+				value: J.value,
+				placeholder: Ce.value,
+				disabled: m.disabled,
+				"aria-invalid": m.invalid || void 0,
+				"aria-expanded": k.value,
 				"aria-haspopup": "dialog",
 				onClick: X,
-				onKeydown: [x(S(X, ["prevent"]), ["enter"]), x(S(X, ["prevent"]), ["space"])]
-			}, null, 40, se), p.clearable && q.value ? (g(), d("button", {
+				onKeydown: [S(C(X, ["prevent"]), ["enter"]), S(C(X, ["prevent"]), ["space"])]
+			}, null, 40, ce), m.clearable && J.value ? (_(), d("button", {
 				key: 0,
 				type: "button",
 				class: "wi-datepicker__clear",
-				"aria-label": b(D).clearDate,
-				disabled: p.disabled,
-				onClick: S(Ne, ["stop"])
-			}, " × ", 8, ce)) : u("", !0)], 512),
-			(g(), ee(s, {
-				to: L.value.to,
-				disabled: L.value.disabled
-			}, [te(c, { name: "wi-scale-fade" }, {
-				default: ae(() => [O.value ? (g(), d("div", {
+				"aria-label": x(O).clearDate,
+				disabled: m.disabled,
+				onClick: C(Fe, ["stop"])
+			}, [p(e, {
+				name: "close",
+				size: "sm"
+			})], 8, le)) : u("", !0)], 512),
+			(_(), ne(ee, {
+				to: R.value.to,
+				disabled: R.value.disabled
+			}, [p(te, { name: "wi-scale-fade" }, {
+				default: oe(() => [k.value ? (_(), d("div", {
 					key: 0,
 					ref_key: "panel",
-					ref: j,
-					class: h(["wi-datepicker__panel", {
-						"wi-datepicker__panel--teleported": R.value,
-						"wi-datepicker__panel--with-shortcuts": p.shortcuts.length
+					ref: M,
+					class: g(["wi-datepicker__panel", {
+						"wi-datepicker__panel--teleported": z.value,
+						"wi-datepicker__panel--with-shortcuts": m.shortcuts.length
 					}]),
-					style: ne(R.value ? M.value : void 0),
+					style: re(z.value ? N.value : void 0),
 					role: "dialog",
-					"aria-label": b(D).datePicker
-				}, [p.shortcuts.length ? (g(), d("div", ue, [(g(!0), d(o, null, v(p.shortcuts, (e) => (g(), d("button", {
+					"aria-label": x(O).datePicker
+				}, [m.shortcuts.length ? (_(), d("div", de, [(_(!0), d(c, null, y(m.shortcuts, (e) => (_(), d("button", {
 					key: e.label,
 					type: "button",
 					class: "wi-datepicker__shortcut",
-					onClick: (t) => Me(e)
-				}, y(e.label), 9, de))), 128))])) : u("", !0), f("div", fe, [
-					f("div", pe, [
+					onClick: (t) => Pe(e)
+				}, b(e.label), 9, fe))), 128))])) : u("", !0), f("div", pe, [
+					f("div", me, [
 						f("button", {
 							type: "button",
 							class: "wi-datepicker__nav",
-							"aria-label": b(D).prevMonth,
-							onClick: ke
-						}, " ‹ ", 8, me),
-						f("span", he, y(Ce.value), 1),
+							"aria-label": x(O).prevMonth,
+							onClick: je
+						}, [p(e, {
+							name: "chevron-left",
+							size: "sm"
+						})], 8, he),
+						f("span", ge, b(we.value), 1),
 						f("button", {
 							type: "button",
 							class: "wi-datepicker__nav",
-							"aria-label": b(D).nextMonth,
-							onClick: Ae
-						}, " › ", 8, ge)
+							"aria-label": x(O).nextMonth,
+							onClick: Me
+						}, [p(e, {
+							name: "chevron-right",
+							size: "sm"
+						})], 8, _e)
 					]),
-					f("div", _e, [(g(!0), d(o, null, v(b(D).weekdays, (e) => (g(), d("span", { key: e }, y(e), 1))), 128))]),
-					f("div", ve, [(g(!0), d(o, null, v(Te.value, (e) => (g(), d("button", {
+					f("div", ve, [(_(!0), d(c, null, y(x(O).weekdays, (e) => (_(), d("span", { key: e }, b(e), 1))), 128))]),
+					f("div", ye, [(_(!0), d(c, null, y(Ee.value, (e) => (_(), d("button", {
 						key: e.date.toISOString(),
 						type: "button",
-						class: h(["wi-datepicker__day", {
+						class: g(["wi-datepicker__day", {
 							"wi-datepicker__day--other": !e.inMonth,
 							"wi-datepicker__day--selected": e.selected,
 							"wi-datepicker__day--in-range": e.inRange,
@@ -303,14 +310,14 @@ var oe = {
 							"wi-datepicker__day--range-end": e.rangeEnd
 						}]),
 						disabled: e.disabled,
-						onClick: (t) => je(e.date, e.disabled),
-						onMouseenter: (t) => z.value && F.value && (I.value = e.date)
-					}, y(e.date.getDate()), 43, ye))), 128))])
-				])], 14, le)) : u("", !0)]),
+						onClick: (t) => Ne(e.date, e.disabled),
+						onMouseenter: (t) => B.value && I.value && (L.value = e.date)
+					}, b(e.date.getDate()), 43, be))), 128))])
+				])], 14, ue)) : u("", !0)]),
 				_: 1
 			})], 8, ["to", "disabled"]))
 		], 2));
 	}
 });
 //#endregion
-export { C as WiDatePicker };
+export { w as WiDatePicker };

package/dist/date-picker/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }
@@ -750,13 +749,60 @@
     line-height: 1;
 }
 
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
+}
+
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* —— Form: DatePicker —— */
-.wi-datepicker {
-    --wi-datepicker-input-affix-padding: var(--wi-control-affix-padding);
-    --wi-datepicker-day-size: var(--wi-control-affix-size);
-    --wi-datepicker-calendar-cell-size: 2rem;
+.wi-datepicker,
+.wi-datepicker__panel {
+    --wi-datepicker-calendar-cell-size: var(--wi-control-affix-size, 2rem);
+    --wi-datepicker-day-size: var(--wi-datepicker-calendar-cell-size);
     --wi-datepicker-grid-gap: 0.125rem;
+    --wi-datepicker-panel-min-width: calc(
+        7 * var(--wi-datepicker-calendar-cell-size) + 6 *
+            var(--wi-datepicker-grid-gap) + 2 * var(--wi-space-3)
+    );
     --wi-datepicker-shortcuts-width: 6rem;
+}
+
+.wi-datepicker {
+    --wi-datepicker-input-end-padding: calc(var(--wi-space-2) + 1.25rem);
     display: inline-flex;
     flex-direction: column;
     gap: var(--wi-space-2);
@@ -789,7 +835,7 @@
     font: inherit;
     font-size: var(--wi-control-font-medium);
     min-height: var(--wi-control-height-medium);
-    padding: 0 var(--wi-datepicker-input-affix-padding) 0
+    padding: 0 var(--wi-datepicker-input-end-padding) 0
         var(--wi-control-padding-x-medium);
     width: 100%;
 }
@@ -797,14 +843,14 @@
 .wi-datepicker--small .wi-datepicker__input {
     font-size: var(--wi-control-font-small);
     min-height: var(--wi-control-height-small);
-    padding: 0 var(--wi-datepicker-input-affix-padding) 0
+    padding: 0 var(--wi-datepicker-input-end-padding) 0
         var(--wi-control-padding-x-small);
 }
 
 .wi-datepicker--large .wi-datepicker__input {
     font-size: var(--wi-control-font-large);
     min-height: var(--wi-control-height-large);
-    padding: 0 var(--wi-datepicker-input-affix-padding) 0
+    padding: 0 var(--wi-datepicker-input-end-padding) 0
         var(--wi-control-padding-x-large);
 }
 
@@ -818,11 +864,14 @@
 }
 
 .wi-datepicker__clear {
+    align-items: center;
     background: transparent;
     border: 0;
     color: var(--wi-color-text-muted);
     cursor: pointer;
+    display: inline-flex;
     font: inherit;
+    justify-content: center;
     position: absolute;
     right: var(--wi-space-2);
 }
@@ -833,19 +882,26 @@
     border-radius: var(--wi-radius-md);
     box-shadow: var(--wi-shadow-md);
     margin-top: var(--wi-space-1);
+    min-width: max(100%, var(--wi-datepicker-panel-min-width));
     padding: var(--wi-space-3);
     position: absolute;
     top: 100%;
+    width: max-content;
     z-index: var(--wi-z-popper);
 }
 
 .wi-datepicker__panel--teleported {
     margin-top: 0;
+    min-width: var(--wi-datepicker-panel-min-width);
     position: fixed;
     top: auto;
     z-index: var(--wi-z-dropdown);
 }
 
+.wi-datepicker__calendar {
+    flex: 0 0 auto;
+}
+
 .wi-datepicker__header {
     align-items: center;
     display: flex;
@@ -858,12 +914,15 @@
 }
 
 .wi-datepicker__nav {
+    align-items: center;
     background: transparent;
     border: 0;
     border-radius: var(--wi-radius-sm);
     color: var(--wi-color-text);
     cursor: pointer;
+    display: inline-flex;
     font: inherit;
+    justify-content: center;
     line-height: 1;
     padding: var(--wi-space-1) var(--wi-space-2);
 }
@@ -880,7 +939,11 @@
 .wi-datepicker__grid {
     display: grid;
     gap: var(--wi-datepicker-grid-gap);
-    grid-template-columns: repeat(7, var(--wi-datepicker-calendar-cell-size));
+    grid-template-columns: repeat(
+        7,
+        var(--wi-datepicker-calendar-cell-size, var(--wi-control-affix-size, 2rem))
+    );
+    place-items: center;
 }
 
 .wi-datepicker__weekdays {

package/dist/date-picker/style.js

@@ -1,3 +1,4 @@
 import '../theme/styles.css'
 import '../styles/base.css'
+import '../components/Icon/styles.css'
 import '../components/DatePicker/styles.css'