@solostylist/ui-kit 2.0.0 → 2.0.1

package/dist/s-comment-message/s-comment-message.js

@@ -1,2 +1,189 @@
-import { t as e } from "../s-comment-message-C6kfgRjv.js";
-export { e as SCommentMessage, e as default };
+import { i as e } from "../utils-CMeAWSRO.js";
+import { toSxArray as t } from "../utils/sx.js";
+import { SSkeleton as n } from "../s-skeleton/s-skeleton.js";
+import { SAvatar as r } from "../s-avatar/s-avatar.js";
+import i, { useEffect as a, useId as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ExpandLess as ee, ExpandMore as te, Favorite as ne, FavoriteBorder as u, Reply as d } from "@mui/icons-material";
+import { Box as f, Button as p, Collapse as m, IconButton as h, Stack as g, Typography as _, styled as v, useThemeProps as y } from "@mui/material";
+//#region lib/s-comment-message/s-comment-message.tsx
+var b = v(f, {
+	name: "SCommentMessage",
+	slot: "Root"
+})({}), x = i.forwardRef(function(i, v) {
+	let S = y({
+		props: i,
+		name: "SCommentMessage"
+	}), { commentId: C, userName: w, userAvatar: T, commentContent: E, datetime: D, likes: O = 0, isLiked: k = !1, replies: A = [], totalReplies: j, onLike: M, onReply: N, onToggleReplies: P, showReplies: F = !0, avatarSize: I = 48, level: L = 0, maxLevel: R = 3, loading: re = !1, children: z, sx: B, ...V } = S, H = o(), U = o(), W = C ?? H, [G, K] = s(O), [q, J] = s(k), [Y, ie] = s(!1), ae = () => {
+		q ? (K((e) => Math.max(0, e - 1)), J(!1)) : (K((e) => e + 1), J(!0)), M && M(W);
+	}, oe = () => {
+		N && N(W);
+	}, se = () => {
+		ie((e) => !e), P && P(W);
+	}, ce = e(D), X = j ?? A.length, Z = X > 0, Q = Math.min(L, R) * 2, $ = {
+		...S,
+		commentId: W,
+		localIsLiked: q,
+		showRepliesList: Y
+	};
+	return a(() => {
+		K(O);
+	}, [O]), a(() => {
+		J(k);
+	}, [k]), re ? /* @__PURE__ */ c(b, {
+		...V,
+		ownerState: $,
+		ref: v,
+		sx: [{
+			pl: Q,
+			py: 1
+		}, ...t(B)],
+		children: /* @__PURE__ */ l(g, {
+			direction: "row",
+			spacing: 2,
+			sx: { alignItems: "flex-start" },
+			children: [/* @__PURE__ */ c(n, {
+				variant: "circular",
+				width: I,
+				height: I
+			}), /* @__PURE__ */ l(f, {
+				sx: { flex: 1 },
+				children: [
+					/* @__PURE__ */ l(g, {
+						direction: "row",
+						spacing: 2,
+						sx: {
+							alignItems: "center",
+							mb: 1
+						},
+						children: [/* @__PURE__ */ c(n, {
+							width: 120,
+							height: 20
+						}), /* @__PURE__ */ c(n, {
+							width: 80,
+							height: 16
+						})]
+					}),
+					/* @__PURE__ */ c(n, {
+						height: 16,
+						sx: { mb: .5 }
+					}),
+					/* @__PURE__ */ c(n, {
+						width: "85%",
+						height: 16,
+						sx: { mb: .5 }
+					}),
+					/* @__PURE__ */ c(n, {
+						width: "70%",
+						height: 16,
+						sx: { mb: 2 }
+					}),
+					/* @__PURE__ */ l(g, {
+						direction: "row",
+						spacing: 1,
+						sx: { alignItems: "center" },
+						children: [
+							/* @__PURE__ */ c(n, { preset: "icon-button" }),
+							/* @__PURE__ */ c(n, {
+								width: 20,
+								height: 16
+							}),
+							/* @__PURE__ */ c(n, { width: 60 }),
+							/* @__PURE__ */ c(n, { width: 80 })
+						]
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ l(b, {
+		...V,
+		ownerState: $,
+		ref: v,
+		sx: [{
+			pl: Q,
+			py: 1
+		}, ...t(B)],
+		children: [/* @__PURE__ */ l(g, {
+			direction: "row",
+			spacing: 2,
+			sx: { alignItems: "flex-start" },
+			children: [/* @__PURE__ */ c(r, {
+				src: T,
+				name: w,
+				size: I
+			}), /* @__PURE__ */ l(f, {
+				sx: { flex: 1 },
+				children: [
+					/* @__PURE__ */ c(_, {
+						variant: "subtitle1",
+						children: w
+					}),
+					/* @__PURE__ */ c(_, {
+						variant: "body1",
+						children: E
+					}),
+					/* @__PURE__ */ c(_, {
+						variant: "caption",
+						children: ce
+					}),
+					/* @__PURE__ */ l(g, {
+						direction: "row",
+						spacing: 1,
+						sx: { alignItems: "center" },
+						children: [
+							/* @__PURE__ */ c(h, {
+								"aria-label": q ? "Unlike comment" : "Like comment",
+								"aria-pressed": q,
+								onClick: ae,
+								sx: { color: q ? "error.main" : "text.secondary" },
+								children: c(q ? ne : u, {})
+							}),
+							G > 0 && /* @__PURE__ */ c(_, {
+								variant: "caption",
+								children: G
+							}),
+							/* @__PURE__ */ c(p, {
+								startIcon: /* @__PURE__ */ c(d, {}),
+								onClick: oe,
+								variant: "text",
+								children: "Reply"
+							}),
+							Z && F && /* @__PURE__ */ l(p, {
+								"aria-controls": U,
+								"aria-expanded": Y,
+								startIcon: c(Y ? ee : te, {}),
+								onClick: se,
+								variant: "text",
+								children: [
+									X,
+									" ",
+									X === 1 ? "reply" : "replies"
+								]
+							})
+						]
+					}),
+					z && /* @__PURE__ */ c(f, { children: z })
+				]
+			})]
+		}), Z && F && /* @__PURE__ */ c(m, {
+			id: U,
+			in: Y,
+			children: /* @__PURE__ */ c(f, {
+				sx: { mt: 2 },
+				children: A.map((e, t) => /* @__PURE__ */ c(x, {
+					...e,
+					level: L + 1,
+					maxLevel: R,
+					onLike: M ?? e.onLike,
+					onReply: N ?? e.onReply,
+					onToggleReplies: P ?? e.onToggleReplies,
+					showReplies: F,
+					avatarSize: Math.max(32, I - 8)
+				}, e.commentId ?? `reply-${t}`))
+			})
+		})]
+	});
+});
+x.displayName = "SCommentMessage";
+//#endregion
+export { x as SCommentMessage, x as default };

package/dist/s-copyable-text/s-copyable-text.js

@@ -1,26 +1,26 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../appendOwnerState-CELpvdMz.js";
-import { n, t as r } from "../ContentCopy-5unyTYXy.js";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Box as s, IconButton as c, Paper as l, Typography as u, styled as d, useThemeProps as f } from "@mui/material";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Check as i, ContentCopy as a } from "@mui/icons-material";
+import { Box as o, IconButton as s, Paper as c, Typography as l, styled as u, useThemeProps as d } from "@mui/material";
+import f from "@mui/utils/appendOwnerState";
 //#region lib/s-copyable-text/s-copyable-text.tsx
-var p = d(l, {
+var p = u(c, {
 	name: "SCopyableText",
 	slot: "Root"
 })({});
 function m(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var h = i.forwardRef(function(l, d) {
-	let h = f({
-		props: l,
+var h = t.forwardRef(function(c, u) {
+	let h = d({
+		props: c,
 		name: "SCopyableText"
-	}), { children: g, copiedText: _ = "Copied", copyText: v = "Copy text", onCopyError: y, onCopySuccess: b, slotProps: x, slots: S, sx: C, ...w } = h, [T, E] = i.useState(!1), D = i.useRef(void 0), O = {
+	}), { children: g, copiedText: _ = "Copied", copyText: v = "Copy text", onCopyError: y, onCopySuccess: b, slotProps: x, slots: S, sx: C, ...w } = h, [T, E] = t.useState(!1), D = t.useRef(void 0), O = {
 		...h,
 		copied: T
-	}, k = S?.content ?? s, A = S?.text ?? u, j = S?.button ?? c, M = m(x?.content, O), N = m(x?.text, O), P = m(x?.button, O), F = t(S?.content, M ?? {}, O), I = t(S?.text, N ?? {}, O), { onClick: L, sx: R, ...z } = t(S?.button, P ?? {}, O), { sx: B, ...V } = F, { sx: H, ...U } = I;
-	i.useEffect(() => () => clearTimeout(D.current), []);
+	}, k = S?.content ?? o, A = S?.text ?? l, j = S?.button ?? s, M = m(x?.content, O), N = m(x?.text, O), P = m(x?.button, O), F = f(S?.content, M ?? {}, O), I = f(S?.text, N ?? {}, O), { onClick: L, sx: R, ...z } = f(S?.button, P ?? {}, O), { sx: B, ...V } = F, { sx: H, ...U } = I;
+	t.useEffect(() => () => clearTimeout(D.current), []);
 	let W = async (e) => {
 		if (L?.(e), !e.defaultPrevented) try {
 			await navigator.clipboard.writeText(g), E(!0), clearTimeout(D.current), D.current = setTimeout(() => E(!1), 2e3), b?.(g);
@@ -28,19 +28,19 @@ var h = i.forwardRef(function(l, d) {
 			y?.(e);
 		}
 	};
-	return /* @__PURE__ */ a(p, {
+	return /* @__PURE__ */ n(p, {
 		...w,
 		ownerState: O,
-		ref: d,
+		ref: u,
 		sx: [{
 			border: "1px dashed",
 			borderColor: "divider",
 			p: 2
 		}, ...e(C)],
-		children: /* @__PURE__ */ o(k, {
+		children: /* @__PURE__ */ r(k, {
 			...V,
 			sx: [{ position: "relative" }, ...e(B)],
-			children: [/* @__PURE__ */ a(j, {
+			children: [/* @__PURE__ */ n(j, {
 				...z,
 				"aria-label": T ? _ : v,
 				onClick: W,
@@ -52,8 +52,8 @@ var h = i.forwardRef(function(l, d) {
 					transform: "translateY(-50%)",
 					zIndex: 1
 				}, ...e(R)],
-				children: a(T ? n : r, {})
-			}), /* @__PURE__ */ a(A, {
+				children: n(T ? i : a, {})
+			}), /* @__PURE__ */ n(A, {
 				variant: "body1",
 				...U,
 				sx: [{

package/dist/s-countdown/s-count-box.js

@@ -1,10 +1,10 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../appendOwnerState-CELpvdMz.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, Fade as o, Slide as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Box as i, Fade as a, Slide as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import u from "@mui/utils/appendOwnerState";
 //#region lib/s-countdown/s-count-box.tsx
-var d = l(a, {
+var d = c(i, {
 	name: "SCountBox",
 	slot: "Root"
 })({});
@@ -41,15 +41,15 @@ function p(e) {
 		}
 	};
 }
-var m = n.forwardRef(function(n, l) {
-	let m = u({
-		props: n,
+var m = t.forwardRef(function(t, c) {
+	let m = l({
+		props: t,
 		name: "SCountBox"
 	}), { animation: h = "none", color: g = "inherit", digit: _, digitFormat: v = "default", label: y, separator: b, size: x = "medium", slotProps: S, slots: C, sx: w, ...T } = m, E = {
 		...m,
 		color: g,
 		size: x
-	}, D = C?.content ?? a, O = C?.digit ?? c, k = C?.label ?? c, A = C?.separator ?? c, j = f(S?.content, E), M = f(S?.digit, E), N = f(S?.label, E), P = f(S?.separator, E), F = t(C?.content, j ?? {}, E), I = t(C?.digit, M ?? {}, E), L = t(C?.label, N ?? {}, E), R = t(C?.separator, P ?? {}, E), { sx: z, ...B } = F, { sx: V, ...H } = I, { sx: U, ...W } = L, { sx: G, ...K } = R, q = p(x), J = v === "padded" ? _.toString().padStart(2, "0") : _.toString(), Y = /* @__PURE__ */ r(O, {
+	}, D = C?.content ?? i, O = C?.digit ?? s, k = C?.label ?? s, A = C?.separator ?? s, j = f(S?.content, E), M = f(S?.digit, E), N = f(S?.label, E), P = f(S?.separator, E), F = u(C?.content, j ?? {}, E), I = u(C?.digit, M ?? {}, E), L = u(C?.label, N ?? {}, E), R = u(C?.separator, P ?? {}, E), { sx: z, ...B } = F, { sx: V, ...H } = I, { sx: U, ...W } = L, { sx: G, ...K } = R, q = p(x), J = v === "padded" ? _.toString().padStart(2, "0") : _.toString(), Y = /* @__PURE__ */ n(O, {
 		component: "span",
 		variant: "h3",
 		...H,
@@ -60,25 +60,25 @@ var m = n.forwardRef(function(n, l) {
 			...q.digit
 		}, ...e(V)],
 		children: J
-	}), X = h === "fade" ? /* @__PURE__ */ r(o, {
+	}), X = h === "fade" ? /* @__PURE__ */ n(a, {
 		in: !0,
 		timeout: 300,
-		children: /* @__PURE__ */ r(a, { children: Y })
-	}, J) : h === "slide" ? /* @__PURE__ */ r(s, {
+		children: /* @__PURE__ */ n(i, { children: Y })
+	}, J) : h === "slide" ? /* @__PURE__ */ n(o, {
 		in: !0,
 		direction: "up",
 		timeout: 300,
-		children: /* @__PURE__ */ r(a, { children: Y })
+		children: /* @__PURE__ */ n(i, { children: Y })
 	}, J) : Y;
-	return /* @__PURE__ */ i(d, {
+	return /* @__PURE__ */ r(d, {
 		...T,
 		ownerState: E,
-		ref: l,
+		ref: c,
 		sx: [{
 			alignItems: "center",
 			display: "flex"
 		}, ...e(w)],
-		children: [/* @__PURE__ */ i(D, {
+		children: [/* @__PURE__ */ r(D, {
 			...B,
 			sx: [{
 				alignItems: "center",
@@ -87,7 +87,7 @@ var m = n.forwardRef(function(n, l) {
 				minWidth: "fit-content",
 				textAlign: "center"
 			}, ...e(z)],
-			children: [X, /* @__PURE__ */ r(k, {
+			children: [X, /* @__PURE__ */ n(k, {
 				component: "span",
 				...W,
 				sx: [{
@@ -100,7 +100,7 @@ var m = n.forwardRef(function(n, l) {
 				}, ...e(U)],
 				children: y
 			})]
-		}), b == null ? null : /* @__PURE__ */ r(A, {
+		}), b == null ? null : /* @__PURE__ */ n(A, {
 			variant: "h3",
 			...K,
 			sx: [{

package/dist/s-data-table/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-data-table-B1TGVupB.js";
+import { SDataTable as e } from "./s-data-table.js";
 export { e as SDataTable, e as default };

package/dist/s-data-table/s-data-table.js

@@ -1,2 +1,213 @@
-import { t as e } from "../s-data-table-B1TGVupB.js";
-export { e as SDataTable, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { SEmpty as t } from "../s-empty/s-empty.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import { buttonBaseClasses as i } from "@mui/material/ButtonBase";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@mui/material/Checkbox";
+import l from "@mui/material/Box";
+import u from "@mui/icons-material/ArrowDownward";
+import d from "@mui/icons-material/SwapVert";
+import f from "@mui/material/Table";
+import p, { tableBodyClasses as m } from "@mui/material/TableBody";
+import h, { tableCellClasses as g } from "@mui/material/TableCell";
+import _ from "@mui/material/TableHead";
+import v, { tableRowClasses as y } from "@mui/material/TableRow";
+import b, { tableSortLabelClasses as x } from "@mui/material/TableSortLabel";
+//#region lib/s-data-table/s-data-table.tsx
+var S = {
+	width: "40px",
+	minWidth: "40px",
+	maxWidth: "40px",
+	boxSizing: "content-box",
+	p: 2
+}, C = {
+	width: "40px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+}, w = {
+	width: "20px",
+	height: "20px",
+	m: 0,
+	p: 0
+}, T = { height: "48px" };
+function E(e) {
+	return e.sortKey ?? e.field ?? e.name;
+}
+function D(e, t, n) {
+	return e.formatter ? e.formatter(t, n) : e.field ? t[e.field] : null;
+}
+var O = n(f, {
+	name: "SDataTable",
+	slot: "Root"
+})(({ theme: e }) => ({
+	border: "1px solid",
+	borderCollapse: "separate",
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.shape.borderRadius,
+	borderSpacing: 0,
+	boxSizing: "border-box",
+	overflow: "hidden",
+	[`& .${m.root} > .${y.root}:last-child > .${g.root}`]: { borderBottom: 0 }
+})), k = Object.assign(a.forwardRef((n, a) => {
+	let f = r({
+		props: n,
+		name: "SDataTable"
+	}), { columns: m, hideHead: g, hover: y, onRowClick: k, onRowKeyDown: A, onDeselectAll: j, onDeselectOne: M, onSelectOne: N, onSelectAll: P, onSort: F, rows: I, selectable: L, selected: R, sortBy: z, sortDirection: B, sx: V, uniqueRowId: H, ...U } = f, W = {
+		...f,
+		hideHead: g,
+		hover: y,
+		selectable: L
+	}, G = /* @__PURE__ */ new Set();
+	I.forEach((e) => {
+		let t = e.id ?? H?.(e);
+		t != null && G.add(t);
+	});
+	let K = Array.from(G).filter((e) => R?.has(e)).length, q = K > 0 && K < G.size, J = G.size > 0 && K === G.size, Y = (e, t) => `${String(e.field ?? e.name ?? "column")}-${t}`, X = (e, t) => {
+		let n = E(t);
+		F?.(e, n, z === n && B === "asc" ? "desc" : "asc");
+	};
+	return /* @__PURE__ */ s(O, {
+		...U,
+		ownerState: W,
+		ref: a,
+		sx: [{ mt: 1 }, ...e(V)],
+		children: [/* @__PURE__ */ o(_, {
+			sx: { ...g && {
+				visibility: "collapse",
+				"--TableCell-borderWidth": 0
+			} },
+			children: /* @__PURE__ */ s(v, {
+				sx: T,
+				children: [L ? /* @__PURE__ */ o(h, {
+					padding: "checkbox",
+					sx: {
+						...S,
+						bgcolor: "action.hover",
+						backgroundClip: "padding-box"
+					},
+					children: /* @__PURE__ */ o(l, {
+						sx: C,
+						children: /* @__PURE__ */ o(c, {
+							checked: J,
+							indeterminate: q,
+							slotProps: { input: { "aria-label": "Select all rows" } },
+							sx: w,
+							onChange: (e) => {
+								J ? j?.(e) : P?.(e);
+							}
+						})
+					})
+				}) : null, m.map((e, t) => {
+					let n = e.sortable && z === E(e), r = n ? B === "asc" ? "ascending" : "descending" : void 0, a = e.hideName ? null : e.name;
+					return /* @__PURE__ */ o(h, {
+						"aria-sort": r,
+						sortDirection: n ? B : !1,
+						sx: {
+							width: e.width,
+							minWidth: e.width,
+							maxWidth: e.width,
+							...e.align && { textAlign: e.align },
+							bgcolor: "action.hover",
+							backgroundClip: "padding-box"
+						},
+						children: e.sortable ? /* @__PURE__ */ o(b, {
+							active: !!n,
+							direction: n ? B : "asc",
+							IconComponent: n ? u : d,
+							"aria-label": e.hideName ? `Sort by ${e.name}` : void 0,
+							onClick: (t) => X(t, e),
+							sx: {
+								display: "flex",
+								justifyContent: "space-between",
+								gap: 1,
+								width: "100%",
+								color: n ? "primary.main" : "inherit",
+								"&.Mui-active": { color: "primary.main" },
+								[`&.${i.focusVisible}`]: {
+									borderRadius: .5,
+									outline: "2px solid",
+									outlineColor: "primary.main",
+									outlineOffset: 2
+								},
+								[`& .${x.icon}`]: {
+									color: "text.disabled",
+									fontSize: "1.25rem",
+									marginLeft: "auto",
+									marginRight: 0,
+									opacity: 1
+								},
+								[`&:hover .${x.icon}`]: {
+									color: "text.secondary",
+									opacity: 1
+								},
+								[`&.${x.active} .${x.icon}`]: {
+									color: "primary.main",
+									opacity: 1
+								},
+								"@media (prefers-reduced-motion: reduce)": { [`& .${x.icon}`]: { transition: "none" } }
+							},
+							children: a
+						}) : a
+					}, Y(e, t));
+				})]
+			})
+		}), /* @__PURE__ */ o(p, { children: I.length ? I.map((e, t) => {
+			let n = e.id ?? H?.(e), r = n != null, i = r ? R?.has(n) : !1;
+			return /* @__PURE__ */ s(v, {
+				hover: y,
+				selected: i,
+				onClick: k ? (t) => {
+					k(t, e);
+				} : void 0,
+				onKeyDown: A || k ? (t) => {
+					A?.(t, e), !(!k || t.defaultPrevented || t.target !== t.currentTarget) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.currentTarget.click());
+				} : void 0,
+				...k && {
+					"aria-keyshortcuts": "Enter Space",
+					tabIndex: 0
+				},
+				sx: {
+					...T,
+					...k && {
+						cursor: "pointer",
+						"&:focus-visible": {
+							outline: "2px solid",
+							outlineColor: "primary.main",
+							outlineOffset: -2
+						}
+					}
+				},
+				children: [L ? /* @__PURE__ */ o(h, {
+					padding: "checkbox",
+					sx: S,
+					children: /* @__PURE__ */ o(l, {
+						sx: C,
+						children: /* @__PURE__ */ o(c, {
+							checked: r ? i : !1,
+							slotProps: { input: { "aria-label": r ? `Select row ${String(n)}` : "Select row" } },
+							sx: w,
+							onChange: (t) => {
+								i ? M?.(t, e) : N?.(t, e);
+							},
+							onClick: (e) => {
+								k && e.stopPropagation();
+							}
+						})
+					})
+				}) : null, m.map((n, r) => /* @__PURE__ */ o(h, {
+					sx: { ...n.align && { textAlign: n.align } },
+					children: D(n, e, t)
+				}, Y(n, r)))]
+			}, n ?? t);
+		}) : /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(h, {
+			align: "center",
+			colSpan: m.length + +!!L,
+			children: /* @__PURE__ */ o(t, {})
+		}) }) })]
+	});
+}), { displayName: "SDataTable" });
+k.displayName = "SDataTable";
+//#endregion
+export { k as SDataTable, k as default };

package/dist/s-date-picker/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-date-picker-BpX4HmBp.js";
+import { SDatePicker as e } from "./s-date-picker.js";
 export { e as SDatePicker, e as default };

package/dist/s-date-picker/s-date-picker.js

@@ -1,2 +1,106 @@
-import { t as e } from "../s-date-picker-BpX4HmBp.js";
-export { e as SDatePicker, e as default };
+import { tint as e } from "../theme/utils.js";
+import { staticFieldLabelStyles as t } from "../theme/components/field-label-styles.js";
+import { PickerActionBar as n } from "./picker-action-bar.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as a, useTheme as o, useThemeProps as s } from "@mui/material";
+import { mergeSlotProps as c } from "@mui/material/utils";
+import { inputBaseClasses as l } from "@mui/material/InputBase";
+import { DatePicker as u } from "@mui/x-date-pickers/DatePicker";
+//#region lib/s-date-picker/s-date-picker.tsx
+var d = [
+	"year",
+	"month",
+	"day"
+], f = a(u, {
+	name: "SDatePicker",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), p = r((r, a) => {
+	let u = s({
+		props: r,
+		name: "SDatePicker"
+	}), { label: p, required: m = !1, error: h = !1, helperText: g, id: _, slots: v, slotProps: y, views: b = d, ...x } = u, S = o(), C = {
+		...u,
+		error: h,
+		required: m
+	};
+	return /* @__PURE__ */ i(f, {
+		...x,
+		ref: a,
+		label: p,
+		ownerState: C,
+		views: b,
+		slots: {
+			actionBar: n,
+			...v
+		},
+		slotProps: {
+			...y,
+			openPickerButton: c(y?.openPickerButton, {
+				edge: "end",
+				size: "small"
+			}),
+			popper: c(y?.popper, { sx: { "& .MuiPaper-root": {
+				border: "1px solid",
+				borderColor: (S.vars ?? S).palette.divider,
+				borderRadius: (S.vars ?? S).shape.borderRadius,
+				boxShadow: "none",
+				backgroundImage: "none"
+			} } }),
+			textField: c(y?.textField, {
+				fullWidth: !0,
+				id: _,
+				error: h,
+				helperText: g,
+				required: m,
+				sx: {
+					...t,
+					"& .MuiPickersOutlinedInput-root": {
+						height: S.spacing(5),
+						minHeight: S.spacing(5),
+						px: 1.5,
+						py: 1,
+						color: (S.vars ?? S).palette.text.primary,
+						borderRadius: (S.vars ?? S).shape.borderRadius,
+						border: `1px solid ${(S.vars ?? S).palette.divider}`,
+						backgroundColor: (S.vars ?? S).palette.background.default,
+						transition: "border 120ms ease-in",
+						"&:hover": { borderColor: (S.vars ?? S).palette.grey[500] },
+						[`&:focus-within:not(.${l.error}):not(.${l.disabled}), &.${l.focused}:not(.${l.error}):not(.${l.disabled})`]: {
+							outline: `3px solid ${e((S.vars ?? S).palette.primary[500], 50)}`,
+							borderColor: (S.vars ?? S).palette.primary[400]
+						},
+						[`&.${l.error}:not(.${l.disabled})`]: {
+							borderColor: (S.vars ?? S).palette.error.main,
+							"&:hover": { borderColor: (S.vars ?? S).palette.error.main }
+						},
+						[`&.${l.error}:focus-within:not(.${l.disabled}), &.${l.error}.${l.focused}:not(.${l.disabled})`]: {
+							outline: `3px solid rgba(${(S.vars ?? S).palette.error.mainChannel} / 0.5)`,
+							borderColor: (S.vars ?? S).palette.error.main
+						},
+						[`&.${l.disabled}, &.${l.disabled} *`]: { color: (S.vars ?? S).palette.text.disabled },
+						[`&.${l.disabled}`]: { outline: "none" },
+						"&.MuiPickersInputBase-inputSizeSmall": {
+							height: S.spacing(4.5),
+							minHeight: S.spacing(4.5)
+						}
+					},
+					"& .MuiPickersInputBase-sectionsContainer": {
+						alignItems: "center",
+						height: "100%",
+						p: "0 !important"
+					},
+					"& .MuiPickersOutlinedInput-notchedOutline": { border: "none !important" },
+					"& .MuiPickersInputBase-input::placeholder": {
+						opacity: 1,
+						color: (S.vars ?? S).palette.text.secondary
+					}
+				}
+			})
+		}
+	});
+});
+p.displayName = "SDatePicker";
+//#endregion
+export { p as SDatePicker, p as default };