@leabankab/component-library 7.3.0 → 8.0.0

package/dist/date-picker.mjs

@@ -0,0 +1,1012 @@
+"use client";
+import { ThemeProvider as e, createTheme as t } from "@mui/material/styles";
+import n from "@mui/material/useMediaQuery";
+import { AdapterDateFns as r } from "@mui/x-date-pickers/AdapterDateFns";
+import { DatePicker as i } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider as a } from "@mui/x-date-pickers/LocalizationProvider";
+import { esES as o, fiFI as s, nbNO as c, svSE as l } from "@mui/x-date-pickers/locales";
+import { format as u } from "date-fns";
+import { es as d, fi as f, nb as p, sv as m } from "date-fns/locale";
+import { CalendarSearch as h, ChevronDown as ee, ChevronLeft as te, ChevronRight as g } from "lucide-react";
+import { useEffect as _, useMemo as ne, useRef as re, useState as ie } from "react";
+import { Drawer as v, createTranslation as y, useLanguage as ae } from "./component-library.es.js";
+import b from "@mui/material/Box";
+import x from "@mui/material/IconButton";
+import { usePickerActionsContext as S, usePickerAdapter as C } from "@mui/x-date-pickers/hooks";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import E from "@mui/material/Typography";
+import { MonthCalendar as oe } from "@mui/x-date-pickers/MonthCalendar";
+import { YearCalendar as se } from "@mui/x-date-pickers/YearCalendar";
+//#region src/components/form/use-focus-target-ref.ts
+var D = (e, t) => {
+	if (typeof e == "function") {
+		let n = e(t);
+		return {
+			ref: e,
+			target: t,
+			cleanup: typeof n == "function" ? n : void 0
+		};
+	}
+	return e && (e.current = t), {
+		ref: e,
+		target: t
+	};
+}, O = (e) => {
+	if (!e) return;
+	let { ref: t, cleanup: n } = e;
+	n ? n() : typeof t == "function" ? t(null) : t && (t.current = null);
+};
+function ce(e, t, n) {
+	let r = re(null);
+	_(() => {
+		let i = t.current, a = null;
+		if (i) {
+			for (let e of n) if (a = i.querySelector(e), a) break;
+		}
+		let o = r.current;
+		o && o.ref === e && o.target === a || (O(o), r.current = e ? D(e, a) : null);
+	}), _(() => () => {
+		O(r.current), r.current = null;
+	}, []);
+}
+//#endregion
+//#region src/theme/tokens/breakpoints.ts
+var k = {
+	xs: 0,
+	sm: 600,
+	md: 900,
+	lg: 1200,
+	xl: 1536
+}, A = {
+	purple: {
+		50: "#FAF7FB",
+		100: "#E2D8E4",
+		200: "#C5B1CA",
+		300: "#C29AC2",
+		400: "#9E6DA8",
+		500: "#855888",
+		600: "#70427B",
+		700: "#5A3463",
+		800: "#422349",
+		900: "#2E1834",
+		950: "#1A0E1E"
+	},
+	teal: {
+		50: "#F0FCFA",
+		100: "#DAF6F1",
+		200: "#CEF3ED",
+		300: "#08C2A7",
+		400: "#46D1BD",
+		500: "#06A892",
+		600: "#058F7D",
+		700: "#047568",
+		800: "#035C53",
+		900: "#02433E",
+		950: "#012A28"
+	},
+	blue: {
+		50: "#EFF6FF",
+		100: "#CBE5FD",
+		200: "#93CBFC",
+		300: "#4DA8F7",
+		400: "#057EF2",
+		500: "#0468C9",
+		600: "#0354A3",
+		700: "#02417D",
+		800: "#012E57",
+		900: "#011B31",
+		950: "#000E19"
+	},
+	orange: {
+		50: "#FFF5F2",
+		100: "#FFDFD7",
+		200: "#FFC4B5",
+		300: "#FF9E87",
+		400: "#FE653E",
+		500: "#E54E28",
+		600: "#C43E1C",
+		700: "#A33218",
+		800: "#822814",
+		900: "#611E0F",
+		950: "#401408"
+	},
+	amber: {
+		50: "#FFF9EB",
+		100: "#FFEFC7",
+		200: "#FFE299",
+		300: "#FFCF5C",
+		400: "#F7A800",
+		500: "#D98F00",
+		600: "#B37400",
+		700: "#8C5A00",
+		800: "#6B4500",
+		900: "#4A3000",
+		950: "#2E1D00"
+	},
+	red: {
+		50: "#FEF2F2",
+		100: "#FCDCDC",
+		200: "#F9BBBB",
+		300: "#F28888",
+		400: "#E85555",
+		500: "#D32F2F",
+		600: "#AD2121",
+		700: "#8A1919",
+		800: "#6F1313",
+		900: "#4D0E0E",
+		950: "#2E0808"
+	},
+	beige: {
+		50: "#FAF7F5",
+		100: "#F0E9E5",
+		200: "#E0D4CD",
+		300: "#C9B8AD",
+		400: "#B09A8C",
+		500: "#977C6B",
+		600: "#7E6556",
+		700: "#654F42",
+		800: "#4C3A32",
+		900: "#332722",
+		950: "#1A1411"
+	},
+	neutral: {
+		50: "#F7F7F6",
+		100: "#EBEBEB",
+		200: "#DBDBDB",
+		300: "#C4C4C4",
+		400: "#A2A2A2",
+		500: "#757575",
+		600: "#5E5E5E",
+		700: "#454545",
+		800: "#2E2E2E",
+		900: "#1A1A1A",
+		950: "#0F1010"
+	},
+	white: "#FFFFFF",
+	black: "#0F1010"
+}, j = "\"ClashGrotesk\", \"ClashGrotesk Fallback\", sans-serif", M = {
+	xs: "0.75rem",
+	sm: "0.875rem",
+	md: "1rem",
+	lg: "1.25rem",
+	xl: "1.5rem",
+	"2xl": "2rem",
+	"3xl": "2.5rem",
+	"4xl": "3rem",
+	"5xl": "3.5rem",
+	"6xl": "4rem"
+}, N = {
+	thin: 200,
+	light: 300,
+	regular: 400,
+	medium: 500,
+	semibold: 600,
+	bold: 700,
+	black: 800
+}, P = {
+	none: 1,
+	tight: 1.25,
+	snug: 1.4,
+	normal: 1.5
+}, { purple: F, teal: I, blue: L, amber: R, red: z, neutral: B, white: V, beige: H } = A, U = {
+	bg: {
+		base: V,
+		subtle: B[50],
+		muted: H[100],
+		contrast: B[950],
+		accent: F[100],
+		overlay: ((e, t) => {
+			let [n, r, i] = [
+				1,
+				3,
+				5
+			].map((t) => parseInt(e.slice(t, t + 2), 16));
+			return `rgba(${n}, ${r}, ${i}, ${t})`;
+		})(B[950], .5)
+	},
+	text: {
+		base: B[950],
+		subtle: B[500],
+		muted: B[400],
+		accent: F[600],
+		contrast: V
+	},
+	border: {
+		base: B[200],
+		subtle: B[100],
+		strong: B[950],
+		accent: F[600],
+		contrast: V
+	},
+	primary: {
+		base: F[600],
+		hover: F[700],
+		subtle: F[100],
+		contrast: V
+	},
+	secondary: {
+		base: B[950],
+		hover: B[800],
+		subtle: B[100],
+		contrast: V
+	},
+	tertiary: {
+		base: I[300],
+		hover: I[400],
+		subtle: I[100],
+		contrast: V
+	},
+	status: {
+		error: {
+			base: z[500],
+			subtle: z[100]
+		},
+		warning: {
+			base: R[400],
+			subtle: R[100]
+		},
+		info: {
+			base: L[400],
+			subtle: L[100]
+		},
+		success: {
+			base: I[400],
+			subtle: I[100]
+		}
+	}
+}, W = {
+	xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+	sm: "0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10)",
+	md: "0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.10)",
+	lg: "0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10)",
+	xl: "0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10)",
+	"2xl": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
+	inner: "0px 2px 4px 0px rgba(0, 0, 0, 0.05) inset"
+}, G = {
+	sm: 4,
+	md: 5,
+	lg: 6,
+	xl: 8,
+	"2xl": 10,
+	"3xl": 12,
+	"4xl": 16,
+	"5xl": 32,
+	huge: 64,
+	full: 100
+}, K = 8, q = 16, J = (e) => `${e * K / q}rem`, le = 16, Y = {
+	base: 16,
+	ratio: 1.125
+}, ue = (e) => Math.round(Y.base * Y.ratio ** e), de = (e) => `${ue(e) / le}rem`, X = (e, t, n, r = "0") => ({
+	step: e,
+	fontWeight: t,
+	lineHeight: n,
+	letterSpacing: r
+}), fe = {
+	display: {
+		sm: X(10, "semibold", "none"),
+		md: X(12, "semibold", "none")
+	},
+	heading: {
+		xs: X(0, "semibold", "snug"),
+		sm: X(2, "semibold", "snug"),
+		md: X(4, "semibold", "snug"),
+		lg: X(6, "semibold", "tight"),
+		xl: X(8, "semibold", "tight")
+	},
+	body: {
+		xs: X(-2, "regular", "normal"),
+		sm: X(-1, "regular", "normal"),
+		md: X(0, "regular", "normal"),
+		lg: X(1, "regular", "normal")
+	},
+	label: {
+		sm: X(-2, "medium", "tight"),
+		md: X(-1, "medium", "tight"),
+		lg: X(0, "medium", "tight")
+	}
+}, pe = Object.entries(fe).flatMap(([e, t]) => Object.entries(t).map(([t, n]) => [`${e}-${t}`, n])), me = Object.fromEntries(pe), he = (e) => {
+	let { step: t, fontWeight: n, lineHeight: r, letterSpacing: i } = me[e];
+	return {
+		fontSize: de(t),
+		fontWeight: N[n],
+		lineHeight: P[r],
+		letterSpacing: i
+	};
+}, Z = {
+	standard: "ease-in-out",
+	spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+}, Q = {
+	fast: "0.15s",
+	normal: "0.2s",
+	emphasis: "0.3s"
+}, ge = (e, t = Q.normal, n = Z.standard) => e.map((e) => `${e} ${t} ${n}`).join(", "), $ = { "&:focus-visible": {
+	outline: "2px solid",
+	outlineColor: U.text.base
+} }, _e = y({
+	previousMonth: {
+		no: "Forrige måned",
+		se: "Föregående månad",
+		fi: "Edellinen kuukausi",
+		es: "Mes anterior"
+	},
+	nextMonth: {
+		no: "Neste måned",
+		se: "Nästa månad",
+		fi: "Seuraava kuukausi",
+		es: "Mes siguiente"
+	},
+	switchToYearView: {
+		no: "bytt til årsvisning",
+		se: "byt till årsvy",
+		fi: "vaihda vuosinäkymään",
+		es: "cambiar a vista de año"
+	},
+	switchToDayView: {
+		no: "bytt til datovisning",
+		se: "byt till datumvy",
+		fi: "vaihda päivänäkymään",
+		es: "cambiar a vista de fecha"
+	}
+}), ve = (e) => e.charAt(0).toUpperCase() + e.slice(1), ye = {
+	width: 40,
+	height: 40,
+	border: "1px solid",
+	borderColor: "border.base",
+	color: "text.base",
+	"&:hover": { backgroundColor: "bg.subtle" },
+	"&.Mui-disabled": {
+		opacity: .45,
+		color: "text.base"
+	}
+};
+function be({ currentMonth: e, onMonthChange: t, onViewChange: n, view: r, minDate: i, maxDate: a, disabled: o, labels: s }) {
+	let c = C(), l = {
+		..._e(),
+		...s
+	}, u = r === "day", d = !!o || i != null && !c.isAfter(e, c.startOfMonth(i)), f = !!o || a != null && !c.isBefore(c.startOfMonth(e), c.startOfMonth(a)), p = `${ve(c.formatByString(e, "LLLL"))} ${c.getYear(e)}`, m = `${p}, ${u ? l.switchToYearView : l.switchToDayView}`;
+	return /* @__PURE__ */ T(b, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: 1,
+			px: .5,
+			pb: 1
+		},
+		children: [
+			u ? /* @__PURE__ */ w(x, {
+				"aria-label": l.previousMonth,
+				disabled: d,
+				onClick: () => t(c.addMonths(e, -1)),
+				sx: ye,
+				children: /* @__PURE__ */ w(te, {
+					size: 20,
+					"aria-hidden": !0
+				})
+			}) : /* @__PURE__ */ w(b, { sx: {
+				width: 40,
+				height: 40
+			} }),
+			/* @__PURE__ */ T(b, {
+				component: "button",
+				type: "button",
+				"aria-label": m,
+				disabled: !!o,
+				onClick: () => n?.(u ? "year" : "day"),
+				sx: {
+					display: "inline-flex",
+					alignItems: "center",
+					gap: .75,
+					px: 1,
+					py: .5,
+					border: "none",
+					borderRadius: 2,
+					background: "transparent",
+					cursor: "pointer",
+					fontFamily: "inherit",
+					fontSize: "1.0625rem",
+					fontWeight: "fontWeightMedium",
+					color: "text.base",
+					"&:hover": { backgroundColor: "bg.subtle" },
+					"&:disabled": {
+						cursor: "default",
+						opacity: .45
+					},
+					...$
+				},
+				children: [p, /* @__PURE__ */ w(b, {
+					component: "span",
+					sx: {
+						display: "inline-flex",
+						color: "primary.base",
+						transition: "transform .15s",
+						transform: u ? "none" : "rotate(180deg)"
+					},
+					children: /* @__PURE__ */ w(ee, {
+						size: 16,
+						"aria-hidden": !0
+					})
+				})]
+			}),
+			u ? /* @__PURE__ */ w(x, {
+				"aria-label": l.nextMonth,
+				disabled: f,
+				onClick: () => t(c.addMonths(e, 1)),
+				sx: ye,
+				children: /* @__PURE__ */ w(g, {
+					size: 20,
+					"aria-hidden": !0
+				})
+			}) : /* @__PURE__ */ w(b, { sx: {
+				width: 40,
+				height: 40
+			} })
+		]
+	});
+}
+//#endregion
+//#region src/date-picker/drawer-toolbar.tsx
+function xe({ eyebrow: e, title: t, titleId: n, hidden: r }) {
+	return r ? null : /* @__PURE__ */ T(b, {
+		sx: {
+			px: 3,
+			pt: 1,
+			pb: 1.5
+		},
+		children: [e != null && /* @__PURE__ */ w(E, {
+			component: "p",
+			sx: {
+				color: "text.accent",
+				fontWeight: "fontWeightBold",
+				textTransform: "uppercase",
+				letterSpacing: "0.06em",
+				fontSize: "0.8125rem",
+				mb: .5
+			},
+			children: e
+		}), t != null && /* @__PURE__ */ w(E, {
+			component: "h2",
+			id: n,
+			sx: {
+				color: "text.base",
+				fontWeight: "fontWeightMedium",
+				fontSize: "1.75rem"
+			},
+			children: t
+		})]
+	});
+}
+//#endregion
+//#region src/date-picker/theme/field-base.ts
+var Se = "54px", Ce = {
+	paddingInlineStart: "0.9rem",
+	paddingBlockStart: "1.5rem",
+	paddingBlockEnd: "0.5rem"
+}, we = (e) => ({
+	[`& .${e}`]: {
+		top: 0,
+		inset: 0
+	},
+	[`& .${e} legend`]: { display: "none" }
+}), Te = (e) => ({
+	[`&:hover:not(:focus-within):not(.Mui-disabled):not(.Mui-error) .${e}`]: {
+		borderWidth: "2px",
+		borderColor: U.border.strong
+	},
+	[`&:focus-within:not(.Mui-error) .${e}`]: {
+		borderWidth: "2px",
+		borderColor: U.border.accent
+	},
+	[`&.Mui-error .${e}`]: {
+		borderWidth: "2px",
+		borderColor: U.status.error.base
+	},
+	[`&.Mui-error:hover:not(:focus-within):not(.Mui-disabled) .${e}`]: {
+		borderWidth: "2px",
+		borderColor: U.status.error.base
+	},
+	[`&.Mui-error:focus-within .${e}`]: {
+		borderWidth: "2px",
+		borderColor: U.status.error.base
+	}
+}), Ee = "MuiPickersOutlinedInput-notchedOutline", De = {
+	MuiPickersOutlinedInput: { styleOverrides: {
+		root: {
+			boxSizing: "border-box",
+			alignItems: "flex-start",
+			padding: 0,
+			borderRadius: G.xl,
+			height: Se,
+			lineHeight: "normal",
+			...we(Ee),
+			...Te(Ee),
+			"& .MuiInputAdornment-root": { alignSelf: "center" },
+			"& .MuiInputAdornment-positionEnd": { marginRight: J(2) }
+		},
+		sectionsContainer: {
+			...Ce,
+			paddingInlineEnd: "0.9rem"
+		}
+	} },
+	MuiPickersLayout: { styleOverrides: { root: {
+		width: "100%",
+		display: "flex",
+		flexDirection: "column",
+		gap: J(2),
+		padding: J(3),
+		paddingBlockEnd: J(1),
+		"& .MuiPickersLayout-contentWrapper": { width: "100%" }
+	} } },
+	MuiDateCalendar: { styleOverrides: { root: {
+		width: "100%",
+		maxHeight: "none"
+	} } },
+	MuiDayCalendar: { styleOverrides: {
+		header: { justifyContent: "space-between" },
+		weekContainer: {
+			justifyContent: "space-between",
+			margin: 0
+		},
+		weekDayLabel: {
+			fontSize: M.sm,
+			color: U.text.subtle
+		}
+	} },
+	MuiPickerDay: { styleOverrides: { root: {
+		width: 40,
+		height: 40,
+		fontSize: M.md,
+		color: U.text.base,
+		backgroundColor: "transparent",
+		"&:hover, &:focus": { backgroundColor: U.bg.subtle },
+		"&.MuiPickerDay-selected": {
+			backgroundColor: U.primary.base,
+			color: U.primary.contrast,
+			"&:hover, &:focus": { backgroundColor: U.primary.hover }
+		},
+		"&.Mui-disabled, &.MuiPickerDay-disabled": { color: U.text.muted },
+		"&.MuiPickerDay-today:not(.MuiPickerDay-selected)": {
+			outline: `1px solid ${U.border.base}`,
+			outlineOffset: -1
+		}
+	} } },
+	MuiMonthCalendar: { styleOverrides: {
+		root: {
+			width: "100%",
+			justifyContent: "space-between",
+			columnGap: 0,
+			rowGap: J(1.5)
+		},
+		button: {
+			flex: "0 0 31%",
+			maxWidth: "31%",
+			fontSize: M.md,
+			fontWeight: 500,
+			color: U.text.base,
+			backgroundColor: "transparent",
+			borderRadius: G["3xl"],
+			height: J(6),
+			margin: 0,
+			"&:hover, &:focus": { backgroundColor: U.bg.subtle },
+			"&.Mui-selected, &.MuiMonthCalendar-selected": {
+				backgroundColor: U.primary.base,
+				color: U.primary.contrast,
+				"&:hover, &:focus": { backgroundColor: U.primary.hover }
+			},
+			"&.Mui-disabled, &.MuiMonthCalendar-disabled": {
+				backgroundColor: "transparent",
+				color: U.text.muted
+			}
+		}
+	} },
+	MuiYearCalendar: { styleOverrides: {
+		root: {
+			width: "100%",
+			justifyContent: "space-between",
+			columnGap: 0,
+			rowGap: J(1.5)
+		},
+		button: {
+			flex: "0 0 31%",
+			maxWidth: "31%",
+			fontSize: M.md,
+			fontWeight: 500,
+			color: U.text.base,
+			backgroundColor: "transparent",
+			borderRadius: G["3xl"],
+			height: J(6),
+			margin: 0,
+			"&:hover, &:focus": { backgroundColor: U.bg.subtle },
+			"&.Mui-selected, &.MuiYearCalendar-selected": {
+				backgroundColor: U.primary.base,
+				color: U.primary.contrast,
+				"&:hover, &:focus": { backgroundColor: U.primary.hover }
+			},
+			"&.Mui-disabled, &.MuiYearCalendar-disabled": {
+				backgroundColor: "transparent",
+				color: U.text.muted
+			}
+		}
+	} },
+	MuiPickerPopper: { styleOverrides: { paper: {
+		width: "100%",
+		boxSizing: "border-box",
+		borderRadius: G.xl,
+		boxShadow: W.md,
+		border: `1px solid ${U.border.subtle}`
+	} } }
+}, Oe = {
+	defaultProps: { variant: "outlined" },
+	styleOverrides: { root: { position: "relative" } }
+}, ke = { styleOverrides: { root: he("body-sm") } }, Ae = {
+	defaultProps: { size: "large" },
+	styleOverrides: {
+		root: {
+			...$,
+			borderRadius: G.full,
+			textTransform: "none",
+			border: "2px solid",
+			transition: [ge(["background-color"], Q.emphasis, Z.spring), ge(["color"], Q.emphasis, Z.spring)].join(", "),
+			svg: { flexShrink: 0 }
+		},
+		sizeSmall: {
+			padding: J(1),
+			svg: {
+				width: 16,
+				height: 16
+			}
+		},
+		sizeLarge: {
+			padding: J(1),
+			svg: {
+				width: 24,
+				height: 24
+			}
+		}
+	},
+	variants: [{
+		props: { color: "primary" },
+		style: {
+			borderColor: U.border.strong,
+			color: U.text.base,
+			"&:hover": {
+				borderColor: U.primary.base,
+				backgroundColor: U.primary.base,
+				color: U.primary.contrast
+			}
+		}
+	}, {
+		props: { color: "secondary" },
+		style: {
+			borderColor: U.primary.base,
+			color: U.primary.base,
+			"&:hover": {
+				borderColor: U.border.strong,
+				backgroundColor: U.primary.base,
+				color: U.primary.contrast
+			}
+		}
+	}]
+}, je = { styleOverrides: { shrink: { top: "1rem" } } }, Me = {
+	fontFamily: j,
+	fontWeight: N.regular,
+	color: U.text.base,
+	"& strong": { fontWeight: N.medium },
+	"& a": {
+		color: `${U.text.base} !important`,
+		textDecorationColor: `${U.text.base} !important`,
+		fontWeight: N.regular
+	},
+	h1: void 0,
+	h2: void 0,
+	h3: void 0,
+	h4: void 0,
+	h5: void 0,
+	h6: void 0,
+	subtitle1: void 0,
+	subtitle2: void 0,
+	heading: {
+		fontFamily: j,
+		fontWeight: N.medium,
+		letterSpacing: "0.02em"
+	},
+	body1: {
+		fontSize: M.md,
+		fontWeight: N.regular
+	},
+	body2: {
+		fontSize: M.sm,
+		fontWeight: N.regular
+	},
+	button: void 0,
+	caption: void 0
+}, Ne = (e) => ({
+	...e,
+	main: e.base,
+	dark: e.hover,
+	light: e.subtle,
+	contrastText: e.contrast
+}), Pe = t({
+	breakpoints: { values: k },
+	palette: {
+		...U,
+		primary: Ne(U.primary),
+		secondary: Ne(U.secondary)
+	},
+	typography: Me,
+	components: {
+		...De,
+		MuiIconButton: Ae,
+		MuiFormControl: Oe,
+		MuiFormHelperText: ke,
+		MuiInputLabel: je
+	}
+}), Fe = y({
+	selectDate: {
+		no: "Velg dato",
+		se: "Välj datum",
+		fi: "Valitse päivä",
+		es: "Seleccionar fecha"
+	},
+	selectMonthYear: {
+		no: "Velg måned og år",
+		se: "Välj månad och år",
+		fi: "Valitse kuukausi ja vuosi",
+		es: "Seleccionar mes y año"
+	}
+}), Ie = y({
+	month: {
+		no: "Måned",
+		se: "Månad",
+		fi: "Kuukausi",
+		es: "Mes"
+	},
+	year: {
+		no: "År",
+		se: "År",
+		fi: "Vuosi",
+		es: "Año"
+	},
+	selectView: {
+		no: "Velg visning",
+		se: "Välj vy",
+		fi: "Valitse näkymä",
+		es: "Seleccionar vista"
+	}
+}), Le = (e, t) => {
+	let n = {
+		view: "month",
+		label: t.month
+	}, r = {
+		view: "year",
+		label: t.year
+	};
+	return e === "year-month" ? [r, n] : [n, r];
+};
+function Re({ currentView: e, onViewChange: t, order: n = "month-year", labels: r }) {
+	let i = {
+		...Ie(),
+		...r
+	}, a = Le(n, i);
+	return /* @__PURE__ */ w(b, {
+		role: "group",
+		"aria-label": i.selectView,
+		sx: {
+			display: "flex",
+			gap: .5,
+			p: .5,
+			mb: 1,
+			borderRadius: "999px",
+			backgroundColor: "bg.subtle"
+		},
+		children: a.map(({ view: n, label: r }) => {
+			let i = n === e;
+			return /* @__PURE__ */ w(b, {
+				component: "button",
+				type: "button",
+				"aria-pressed": i,
+				onClick: () => t(n),
+				sx: {
+					flex: 1,
+					minHeight: 40,
+					border: "none",
+					borderRadius: "999px",
+					cursor: "pointer",
+					fontFamily: "inherit",
+					fontSize: "0.9375rem",
+					fontWeight: "fontWeightMedium",
+					backgroundColor: i ? "bg.base" : "transparent",
+					color: i ? "text.base" : "text.subtle",
+					boxShadow: i ? "0px 1px 3px rgba(0, 0, 0, 0.12)" : "none",
+					transition: "background-color .15s, color .15s",
+					"&:hover": { color: "text.base" },
+					...$
+				},
+				children: r
+			}, n);
+		})
+	});
+}
+//#endregion
+//#region src/date-picker/view-renderers.tsx
+var ze = (e = "month-year", t) => {
+	let n = e === "year-month", r = (r) => {
+		let i = S();
+		return /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w(Re, {
+			currentView: "month",
+			onViewChange: (e) => i.setView(e),
+			order: e,
+			labels: t
+		}), /* @__PURE__ */ w(oe, {
+			value: r.value ?? null,
+			referenceDate: r.referenceDate,
+			minDate: r.minDate,
+			maxDate: r.maxDate,
+			disableFuture: r.disableFuture,
+			disablePast: r.disablePast,
+			shouldDisableMonth: r.shouldDisableMonth,
+			timezone: r.timezone,
+			onChange: (e) => {
+				n ? i.setValue(e, { changeImportance: "accept" }) : (i.setValue(e, { changeImportance: "set" }), i.setView("year"));
+			}
+		})] });
+	}, i = (r) => {
+		let i = S();
+		return /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w(Re, {
+			currentView: "year",
+			onViewChange: (e) => i.setView(e),
+			order: e,
+			labels: t
+		}), /* @__PURE__ */ w(se, {
+			value: r.value ?? null,
+			referenceDate: r.referenceDate,
+			minDate: r.minDate,
+			maxDate: r.maxDate,
+			disableFuture: r.disableFuture,
+			disablePast: r.disablePast,
+			shouldDisableYear: r.shouldDisableYear,
+			timezone: r.timezone,
+			onChange: (e) => {
+				n ? (i.setValue(e, { changeImportance: "set" }), i.setView("month")) : i.setValue(e, { changeImportance: "accept" });
+			}
+		})] });
+	};
+	return {
+		month: (e) => /* @__PURE__ */ w(r, { ...e }),
+		year: (e) => /* @__PURE__ */ w(i, { ...e })
+	};
+}, Be = [
+	"year",
+	"month",
+	"day"
+], Ve = Pe.breakpoints.up("sm"), He = { "--drawer-radius": "1.5rem" }, Ue = ["[role=\"spinbutton\"]"], We = {
+	no: p,
+	se: m,
+	fi: f,
+	es: d
+}, Ge = {
+	no: c,
+	se: l,
+	fi: s,
+	es: o
+}, Ke = (e) => Ge[e].components.MuiLocalizationProvider.defaultProps.localeText, qe = () => /* @__PURE__ */ w(h, {
+	size: 20,
+	"aria-hidden": !0
+}), Je = (e) => (t) => u(t, "EEEEEE", { locale: e }).toLowerCase(), Ye = {
+	name: "sameWidth",
+	enabled: !0,
+	phase: "beforeWrite",
+	requires: ["computeStyles"],
+	fn: ({ state: e }) => {
+		e.styles.popper.width = `${e.rects.reference.width}px`;
+	},
+	effect: ({ state: e }) => {
+		let t = e.elements.reference;
+		e.elements.popper.style.width = `${t.offsetWidth}px`;
+	}
+};
+function Xe({ open: e, onClose: t, children: n, slotProps: r }) {
+	let i = (typeof r?.paper == "object" ? r.paper : void 0)?.["aria-labelledby"];
+	return /* @__PURE__ */ w(v.Root, {
+		side: "bottom",
+		open: e,
+		onOpenChange: (e, n) => {
+			e || t?.(n.event, n.reason === "outside-press" ? "backdropClick" : "escapeKeyDown");
+		},
+		children: /* @__PURE__ */ T(v.Portal, { children: [/* @__PURE__ */ w(v.Backdrop, {}), /* @__PURE__ */ w(v.Viewport, { children: /* @__PURE__ */ T(v.Popup, {
+			"aria-labelledby": i,
+			style: He,
+			children: [/* @__PURE__ */ w(v.Handle, {}), n]
+		}) })] })
+	});
+}
+function Ze(t) {
+	return /* @__PURE__ */ w(e, {
+		theme: Pe,
+		children: /* @__PURE__ */ w(Qe, { ...t })
+	});
+}
+function Qe({ value: e, defaultValue: t, onValueChange: o, onBlur: s, ref: c, name: l, label: u, helperText: d, error: f, disabled: p, required: m, readOnly: h, minDate: ee, maxDate: te, disablePast: g, disableFuture: _, views: v = Be, monthYearOrder: y = "month-year", format: b, referenceDate: x, open: S, onOpenChange: C, desktopModeMediaQuery: T = Ve, eyebrow: E, title: oe, viewToggleLabels: se, calendarHeaderLabels: D, className: O, style: k }) {
+	let A = ae(), j = Fe(), M = n(T), N = We[A], P = !v.includes("day"), F = oe ?? (P ? j.selectMonthYear : j.selectDate), I = P && y === "year-month", L = b ?? (I ? "yyyy MMMM" : void 0), R = P ? ze(y, se) : void 0, z = I ? "year" : P ? "month" : void 0, B = ne(() => Je(N), [N]), V = re(null);
+	ce(c, V, Ue);
+	let [H, U] = ie(!1), W = S ?? H, G = (e) => {
+		W || e.currentTarget.contains(e.relatedTarget) || s?.();
+	}, K = {
+		openPickerIcon: qe,
+		...P ? {} : { calendarHeader: be }
+	}, q = M ? K : {
+		...K,
+		dialog: Xe,
+		toolbar: xe
+	}, J = {
+		openPickerButton: { sx: {
+			border: "none",
+			color: "text.subtle",
+			"&:hover": {
+				backgroundColor: "transparent",
+				color: "text.base"
+			}
+		} },
+		popper: { modifiers: [Ye] },
+		...P ? {} : { calendarHeader: { labels: D } },
+		textField: {
+			error: f,
+			required: m,
+			helperText: d,
+			fullWidth: !0,
+			className: O,
+			style: k,
+			slotProps: { root: {
+				ref: V,
+				onBlur: G
+			} }
+		},
+		...M ? {} : {
+			actionBar: { actions: [] },
+			toolbar: {
+				hidden: !1,
+				eyebrow: E,
+				title: F
+			}
+		}
+	};
+	return /* @__PURE__ */ w(a, {
+		dateAdapter: r,
+		adapterLocale: N,
+		localeText: Ke(A),
+		children: /* @__PURE__ */ w(i, {
+			value: e,
+			defaultValue: t,
+			onChange: (e, t) => o?.(e, { validationError: t.validationError }),
+			name: l,
+			label: u,
+			disabled: p,
+			readOnly: h,
+			minDate: ee,
+			maxDate: te,
+			disablePast: g,
+			disableFuture: _,
+			views: v,
+			openTo: z,
+			format: L,
+			referenceDate: x,
+			viewRenderers: R,
+			dayOfWeekFormatter: B,
+			desktopModeMediaQuery: T,
+			closeOnSelect: !0,
+			slots: q,
+			slotProps: J,
+			open: S,
+			onOpen: () => {
+				U(!0), C?.(!0);
+			},
+			onClose: () => {
+				U(!1), C?.(!1), s?.();
+			}
+		})
+	});
+}
+//#endregion
+export { Ze as DatePicker };
+
+//# sourceMappingURL=date-picker.mjs.map