@kazee-ds/react 0.0.0-stage → 0.5.0

package/dist/index.js

@@ -0,0 +1,3436 @@
+"use client";
+import { Button as Button$1, ButtonContext } from "react-aria-components/Button";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { ProgressBarContext } from "react-aria-components/ProgressBar";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ToggleButton as ToggleButton$1 } from "react-aria-components/ToggleButton";
+import { ToggleButtonGroup as ToggleButtonGroup$1 } from "react-aria-components/ToggleButtonGroup";
+import { I18nProvider, useLocale } from "react-aria-components/I18nProvider";
+import { Button as Button$2, Label as Label$1, ListBox, ListBoxItem, Popover as Popover$1, Select as Select$1, SelectValue } from "react-aria-components/Select";
+import { FieldError, Input as Input$1, Label as Label$2, Text, TextArea, TextField } from "react-aria-components/TextField";
+import { Label as Label$3 } from "react-aria-components/Label";
+import { Checkbox as Checkbox$1 } from "react-aria-components/Checkbox";
+import { Label as Label$4, Radio, RadioGroup as RadioGroup$1 } from "react-aria-components/RadioGroup";
+import { FieldError as FieldError$1, SwitchButton, SwitchField, Text as Text$1 } from "react-aria-components/Switch";
+import { ListBox as ListBox$1, ListBoxItem as ListBoxItem$1 } from "react-aria-components/ListBox";
+import { Button as Button$3, FieldError as FieldError$2, Group, Input as Input$2, Label as Label$5, NumberField as NumberField$1, Text as Text$2 } from "react-aria-components/NumberField";
+import { Tab, TabList, TabPanel, Tabs as Tabs$1 } from "react-aria-components/Tabs";
+import { Dialog as Dialog$1, DialogTrigger, Heading } from "react-aria-components/Dialog";
+import { Modal, ModalOverlay } from "react-aria-components/Modal";
+import { Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger } from "react-aria-components/Menu";
+import { Header } from "react-aria-components/Header";
+import { Separator as Separator$1 } from "react-aria-components/Separator";
+import { Popover as Popover$2 } from "react-aria-components/Popover";
+import { Tooltip as Tooltip$1, TooltipTrigger } from "react-aria-components/Tooltip";
+import { Button as Button$4, ComboBox, Input as Input$3, Label as Label$6, ListBox as ListBox$2, ListBoxItem as ListBoxItem$2, Popover as Popover$3 } from "react-aria-components/ComboBox";
+import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, RangeCalendar, RangeCalendarStateContext } from "react-aria-components/RangeCalendar";
+import { GregorianCalendar, endOfMonth, getLocalTimeZone, parseDate, startOfMonth, startOfWeek, today } from "@internationalized/date";
+import { Button as Button$5, I18nProvider as I18nProvider$1, Text as Text$3, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastList, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
+//#region src/Button.tsx
+function PendingLabelAnchor() {
+	const context = useContext(ProgressBarContext);
+	const id = context && "id" in context ? context.id : void 0;
+	return id ? /* @__PURE__ */ jsx("span", {
+		id,
+		hidden: true,
+		"aria-hidden": "true"
+	}) : null;
+}
+function Button({ variant = "primary", size = "md", isIconOnly = false, isPending = false, isDisabled = false, fullWidth = false, type = "button", children, ...props }) {
+	const className = [
+		"button",
+		`button--${variant}`,
+		size !== "md" && `button--${size}`,
+		isIconOnly && "button--icon-only",
+		fullWidth && !isIconOnly && "button--full-width"
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		type: isPending ? "button" : type,
+		className,
+		isDisabled,
+		isPending,
+		children: (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [typeof children === "function" ? children({
+			isPending: state.isPending,
+			isDisabled: state.isDisabled,
+			isHovered: state.isHovered,
+			isPressed: state.isPressed,
+			isFocused: state.isFocused,
+			isFocusVisible: state.isFocusVisible
+		}) : children, isPending && /* @__PURE__ */ jsx(PendingLabelAnchor, {})] })
+	});
+}
+//#endregion
+//#region src/ButtonGroup.tsx
+function ButtonGroupSeparator() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "button-group__separator",
+		"aria-hidden": "true"
+	});
+}
+function Root$1({ children, label, variant, size, isDisabled, fullWidth, orientation = "horizontal", dir }) {
+	function defaults(nodes) {
+		return Children.map(nodes, (child) => {
+			if (!isValidElement(child)) return child;
+			if (child.type === Fragment) return cloneElement(child, {}, defaults(child.props.children));
+			if (child.type !== Button) return child;
+			const button = child;
+			return cloneElement(button, {
+				variant: button.props.variant ?? variant,
+				size: button.props.size ?? size,
+				isDisabled: button.props.isDisabled ?? isDisabled
+			});
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		dir,
+		"data-orientation": orientation,
+		className: `button-group${fullWidth ? " button-group--full-width" : ""}`,
+		children: defaults(children)
+	});
+}
+var ButtonGroup = /* @__PURE__ */ Object.assign(Root$1, { Separator: ButtonGroupSeparator });
+//#endregion
+//#region src/ToggleButton.tsx
+var ToggleButtonSizeContext = createContext("md");
+function ToggleButton({ children, variant = "default", size, isIconOnly, ...props }) {
+	const inheritedSize = useContext(ToggleButtonSizeContext);
+	const resolvedSize = size ?? inheritedSize;
+	return /* @__PURE__ */ jsx(ToggleButton$1, {
+		...props,
+		className: [
+			"button",
+			"toggle-button",
+			`toggle-button--${variant}`,
+			resolvedSize !== "md" && `button--${resolvedSize}`,
+			isIconOnly && "button--icon-only"
+		].filter(Boolean).join(" "),
+		children: ({ isSelected, isPressed, isHovered, isFocused, isFocusVisible, isDisabled }) => typeof children === "function" ? children({
+			isSelected,
+			isPressed,
+			isHovered,
+			isFocused,
+			isFocusVisible,
+			isDisabled
+		}) : children
+	});
+}
+//#endregion
+//#region src/OverlayDirection.tsx
+function OverlayDirection({ dir, children }) {
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children
+	}) : children;
+}
+//#endregion
+//#region src/ToggleButtonGroup.tsx
+var keys = (value) => Array.isArray(value) ? value : value ? [value] : [];
+function Root(props) {
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir: props.dir,
+		children: /* @__PURE__ */ jsx(ToggleButtonSizeContext.Provider, {
+			value: props.size ?? "md",
+			children: /* @__PURE__ */ jsx(ToggleButtonGroup$1, {
+				"aria-label": props.label,
+				dir: props.dir,
+				className: [
+					"button-group",
+					"toggle-button-group",
+					props.isDetached && "button-group--detached",
+					props.fullWidth && "button-group--full-width"
+				].filter(Boolean).join(" "),
+				orientation: props.orientation ?? "horizontal",
+				selectionMode: props.selectionMode ?? "single",
+				selectedKeys: props.value === void 0 ? void 0 : keys(props.value),
+				defaultSelectedKeys: keys(props.defaultValue),
+				onSelectionChange: (selected) => {
+					if (props.isDisabled) return;
+					const next = Array.from(selected, String);
+					if (props.selectionMode === "multiple") props.onChange?.(next);
+					else props.onChange?.(next[0] ?? null);
+				},
+				isDisabled: props.isDisabled,
+				disallowEmptySelection: props.disallowEmptySelection,
+				children: props.children
+			})
+		})
+	});
+}
+var ToggleButtonGroup = /* @__PURE__ */ Object.assign(Root, { Separator: ButtonGroupSeparator });
+//#endregion
+//#region src/icons.tsx
+function ChevronIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+	});
+}
+function CheckIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5" })
+	});
+}
+function CloseIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+	});
+}
+//#endregion
+//#region src/field.tsx
+function useFeedback({ description, errorMessage, isInvalid }) {
+	const id = useId();
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const showError = !!(isInvalid && errorMessage);
+	return {
+		describedBy: [description && descriptionId, showError && errorId].filter(Boolean).join(" ") || void 0,
+		feedback: /* @__PURE__ */ jsxs(Fragment$1, { children: [description && /* @__PURE__ */ jsx("span", {
+			id: descriptionId,
+			className: "input__description",
+			children: description
+		}), showError && /* @__PURE__ */ jsx("span", {
+			id: errorId,
+			className: "input__error",
+			children: errorMessage
+		})] })
+	};
+}
+//#endregion
+//#region src/SelectionValidation.tsx
+function SelectionValidation({ hasValue, required, disabled, onInvalid, onReset, onResetStart }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const form = ref.current?.form;
+		const reset = (event) => {
+			onResetStart();
+			setTimeout(() => onReset(event.defaultPrevented), 0);
+		};
+		form?.addEventListener("reset", reset, true);
+		return () => form?.removeEventListener("reset", reset, true);
+	}, [onReset, onResetStart]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		className: "selection__validation",
+		type: "text",
+		tabIndex: -1,
+		"aria-hidden": "true",
+		autoComplete: "off",
+		required,
+		disabled,
+		value: hasValue ? "selected" : "",
+		onChange: () => {},
+		onInvalid: (event) => {
+			event.preventDefault();
+			onInvalid();
+		}
+	});
+}
+//#endregion
+//#region src/selection-options.ts
+function selectionIds(value, options, multiple) {
+	const requested = new Set(Array.isArray(value) ? value : typeof value === "string" ? [value] : []);
+	const ids = [...new Set(options.filter((o) => o.id !== "" && requested.has(o.id)).map((o) => o.id))];
+	return multiple ? ids : ids.slice(0, 1);
+}
+function filterOptions(options, query) {
+	const fold = (text) => text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+	const search = fold(query.trim());
+	return options.filter((o) => fold(`${o.label} ${o.description ?? ""}`).includes(search));
+}
+//#endregion
+//#region src/Select.tsx
+function Select(props) {
+	const { label, options, placeholder, isDisabled, isRequired, isClearable, clearLabel = "Hapus pilihan", dir } = props;
+	const multiple = props.selectionMode === "multiple";
+	const [local, setLocal] = useState(props.defaultValue);
+	const [tried, setTried] = useState(false);
+	const resetting = useRef(false);
+	const trigger = useRef(null);
+	const ids = selectionIds(props.value !== void 0 ? props.value : local, options, multiple);
+	const selected = options.filter((o) => ids.includes(o.id));
+	const invalid = props.isInvalid || tried && isRequired && ids.length === 0;
+	const { describedBy, feedback } = useFeedback({
+		description: props.description,
+		isInvalid: invalid,
+		errorMessage: props.errorMessage ?? (isRequired && ids.length === 0 ? props.requiredMessage ?? "Pilihan wajib diisi." : void 0)
+	});
+	function update(value) {
+		if (isDisabled || resetting.current) return;
+		const next = selectionIds(value, options, multiple);
+		setLocal(multiple ? next : next[0] ?? null);
+		if (props.selectionMode === "multiple") props.onChange?.(next);
+		else if (next[0] !== void 0) props.onChange?.(next[0]);
+	}
+	function clear() {
+		if (isDisabled || resetting.current) return;
+		setLocal(multiple ? [] : null);
+		if (props.selectionMode === "multiple") props.onChange?.([]);
+		props.onClear?.();
+		trigger.current?.focus();
+	}
+	const select = /* @__PURE__ */ jsxs(Select$1, {
+		className: [
+			"select",
+			`select--${props.size ?? "md"}`,
+			`select--${props.variant ?? "primary"}`,
+			props.hideLabel && "select--label-hidden",
+			props.fullWidth === false && "select--fit"
+		].filter(Boolean).join(" "),
+		"data-multiple": multiple || void 0,
+		selectionMode: multiple ? "multiple" : "single",
+		value: multiple ? ids : ids[0] ?? null,
+		onChange: update,
+		placeholder,
+		isDisabled,
+		isRequired,
+		isInvalid: !!invalid,
+		validationBehavior: "aria",
+		"aria-describedby": describedBy,
+		children: [
+			/* @__PURE__ */ jsxs(Label$1, {
+				className: "select__label",
+				children: [label, isRequired && /* @__PURE__ */ jsxs("span", {
+					className: "selection__required",
+					"aria-hidden": "true",
+					children: [" ", "*"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "select__control",
+				"data-clearable": isClearable || void 0,
+				children: [/* @__PURE__ */ jsxs(Button$2, {
+					ref: trigger,
+					className: "select__trigger",
+					"aria-describedby": describedBy,
+					children: [
+						props.startContent && /* @__PURE__ */ jsx("span", {
+							className: "selection__leading",
+							"aria-hidden": "true",
+							children: props.startContent
+						}),
+						/* @__PURE__ */ jsx(SelectValue, {
+							className: "select__value",
+							children: () => selected.length ? props.renderValue?.(selected) ?? selected.map((o) => o.label).join(", ") : placeholder
+						}),
+						/* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
+					]
+				}), isClearable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "selection__clear",
+					"data-empty": ids.length === 0 || void 0,
+					"aria-hidden": ids.length === 0 || void 0,
+					tabIndex: ids.length === 0 ? -1 : void 0,
+					"aria-label": clearLabel,
+					disabled: isDisabled || ids.length === 0,
+					onClick: clear,
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: "selection__close-icon" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Popover$1, {
+				className: "select__popover",
+				children: /* @__PURE__ */ jsx(ListBox, {
+					className: "select__list",
+					children: options.map((option) => /* @__PURE__ */ jsxs(ListBoxItem, {
+						onPress: props.onAction ? () => props.onAction(option.id) : void 0,
+						id: option.id,
+						textValue: option.label,
+						isDisabled: option.isDisabled,
+						className: "select__item",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "select__item-label",
+							children: props.renderOption?.(option) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [option.label, option.description && /* @__PURE__ */ jsx("span", {
+								className: "selection__description",
+								children: option.description
+							})] })
+						}), /* @__PURE__ */ jsx(CheckIcon, { className: "select__check" })]
+					}, option.id))
+				})
+			}),
+			feedback,
+			props.name && (multiple ? ids : [ids[0] ?? ""]).map((id, i) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: props.name,
+				value: id,
+				disabled: isDisabled
+			}, i)),
+			/* @__PURE__ */ jsx(SelectionValidation, {
+				hasValue: ids.length > 0,
+				required: isRequired,
+				disabled: isDisabled,
+				onInvalid: () => {
+					setTried(true);
+					trigger.current?.focus();
+				},
+				onResetStart: () => {
+					resetting.current = true;
+				},
+				onReset: (cancelled) => {
+					resetting.current = false;
+					if (!cancelled) {
+						setTried(false);
+						if (props.value === void 0) setLocal(props.defaultValue);
+					}
+				}
+			})
+		]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: select
+	}) : select;
+}
+//#endregion
+//#region src/SelectGroup.tsx
+/** Joins direct Select children. Each child retains its own value and accessible label. */
+function SelectGroup({ label, children, size, variant, fullWidth = true, isDisabled, dir }) {
+	function defaults(nodes) {
+		return Children.map(nodes, (child) => {
+			if (!isValidElement(child)) return child;
+			if (child.type === Fragment) return cloneElement(child, {}, defaults(child.props.children));
+			if (child.type !== Select) return child;
+			const select = child;
+			return cloneElement(select, {
+				size: select.props.size ?? size,
+				variant: select.props.variant ?? variant,
+				hideLabel: select.props.hideLabel ?? true,
+				fullWidth: select.props.fullWidth ?? fullWidth,
+				isDisabled: !!isDisabled || select.props.isDisabled,
+				dir: select.props.dir ?? dir
+			});
+		});
+	}
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: ["select-group", !fullWidth && "select-group--fit"].filter(Boolean).join(" "),
+		disabled: isDisabled,
+		dir,
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "select-group__legend",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "select-group__controls",
+			children: defaults(children)
+		})]
+	});
+}
+//#endregion
+//#region src/Input.tsx
+var Input = /* @__PURE__ */ forwardRef(function Input({ label, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, placeholder, type = "text", size = "md", variant = "primary", fullWidth = true, prefix, suffix, name, id, autoComplete, maxLength, minLength, pattern, inputMode, enterKeyHint, autoFocus, spellCheck, form, onFocus, onBlur, onKeyDown, onKeyUp, dir }, ref) {
+	const control = useRef(null);
+	useImperativeHandle(ref, () => control.current);
+	const hasAdornment = prefix != null || suffix != null;
+	const input = /* @__PURE__ */ jsx(Input$1, {
+		ref: control,
+		className: "input__control",
+		placeholder,
+		required: isRequired,
+		minLength,
+		pattern,
+		inputMode,
+		enterKeyHint,
+		autoFocus,
+		spellCheck,
+		form,
+		onFocus,
+		onBlur,
+		onKeyDown,
+		onKeyUp
+	});
+	return /* @__PURE__ */ jsxs(TextField, {
+		className: `input input--${size} input--${variant}${fullWidth ? "" : " input--fit"}`,
+		value,
+		defaultValue,
+		onChange,
+		isInvalid,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		validationBehavior: "aria",
+		type,
+		name,
+		id,
+		autoComplete,
+		maxLength,
+		dir,
+		children: [
+			/* @__PURE__ */ jsx(Label$2, {
+				className: "input__label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("fieldset", {
+				className: "input__boundary",
+				role: "presentation",
+				disabled: isDisabled,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: hasAdornment ? "input__group" : "input__plain",
+					"data-invalid": isInvalid || void 0,
+					"data-readonly": isReadOnly || void 0,
+					onPointerDown: (event) => {
+						if (!isDisabled && !event.target.closest("input,button,a,select,textarea,[tabindex],[contenteditable]")) {
+							event.preventDefault();
+							control.current?.focus();
+						}
+					},
+					children: [
+						prefix != null && /* @__PURE__ */ jsx("span", {
+							className: "input__prefix",
+							children: prefix
+						}),
+						input,
+						suffix != null && /* @__PURE__ */ jsx("span", {
+							className: "input__suffix",
+							children: suffix
+						})
+					]
+				})
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				className: "input__description",
+				children: description
+			}),
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError, {
+				className: "input__error",
+				children: errorMessage
+			})
+		]
+	});
+});
+//#endregion
+//#region src/Textarea.tsx
+function Textarea({ label, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, placeholder, rows = 3, resize = "vertical", name, id, autoComplete, maxLength, dir }) {
+	return /* @__PURE__ */ jsxs(TextField, {
+		className: "input textarea",
+		"data-resize": resize,
+		value,
+		defaultValue,
+		onChange,
+		isInvalid,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		validationBehavior: "aria",
+		name,
+		id,
+		autoComplete,
+		maxLength,
+		dir,
+		children: [
+			/* @__PURE__ */ jsx(Label$2, {
+				className: "input__label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TextArea, {
+				className: "input__control textarea__control",
+				rows,
+				placeholder,
+				required: isRequired
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				className: "input__description",
+				children: description
+			}),
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError, {
+				className: "input__error",
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Label.tsx
+/** Associates visible text with a separately rendered control. */
+function Label({ children, htmlFor, id }) {
+	return /* @__PURE__ */ jsx(Label$3, {
+		className: "label",
+		htmlFor,
+		id,
+		children
+	});
+}
+//#endregion
+//#region src/Checkbox.tsx
+function Checkbox({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, isRequired = false, isIndeterminate = false, name, value = "on", id, dir }) {
+	const { describedBy, feedback } = useFeedback({
+		description,
+		errorMessage,
+		isInvalid
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "input",
+		dir,
+		children: [/* @__PURE__ */ jsx(Checkbox$1, {
+			className: "choice",
+			isSelected,
+			defaultSelected,
+			onChange,
+			isDisabled,
+			isRequired,
+			isInvalid,
+			isIndeterminate,
+			validationBehavior: "aria",
+			name,
+			value,
+			id,
+			"aria-describedby": describedBy,
+			"aria-invalid": isInvalid || void 0,
+			children: ({ isSelected: selected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "checkbox__control",
+				"data-state": isIndeterminate ? "indeterminate" : selected ? "checked" : "unchecked",
+				"data-disabled": disabled || void 0,
+				"data-invalid": isInvalid || void 0,
+				"data-focus-visible": isFocusVisible || void 0,
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: "checkbox__check" }), /* @__PURE__ */ jsx("span", { className: "checkbox__dash" })]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "choice__label",
+				children: label
+			})] })
+		}), feedback]
+	});
+}
+//#endregion
+//#region src/RadioGroup.tsx
+function RadioGroup({ label, options, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isRequired = false, name, id, orientation = "vertical", dir }) {
+	const { describedBy, feedback } = useFeedback({
+		description,
+		errorMessage,
+		isInvalid
+	});
+	const group = /* @__PURE__ */ jsxs(RadioGroup$1, {
+		className: "input radio-group",
+		value,
+		defaultValue,
+		onChange,
+		isDisabled,
+		isRequired,
+		isInvalid,
+		validationBehavior: "aria",
+		name,
+		id,
+		orientation,
+		dir,
+		"aria-describedby": describedBy,
+		children: [
+			/* @__PURE__ */ jsx(Label$4, {
+				className: "label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "radio-group__items",
+				"data-orientation": orientation,
+				children: options.map((option) => /* @__PURE__ */ jsx(Radio, {
+					value: option.id,
+					isDisabled: option.isDisabled,
+					className: "choice",
+					children: ({ isSelected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "radio__control",
+						"data-state": isSelected ? "checked" : "unchecked",
+						"data-disabled": disabled || void 0,
+						"data-invalid": isInvalid || void 0,
+						"data-focus-visible": isFocusVisible || void 0,
+						children: /* @__PURE__ */ jsx("span", { className: "radio__dot" })
+					}), /* @__PURE__ */ jsx("span", {
+						className: "choice__label",
+						children: option.label
+					})] })
+				}, option.id))
+			}),
+			feedback
+		]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: group
+	}) : group;
+}
+//#endregion
+//#region src/Switch.tsx
+function Switch({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, name, value = "on", id, dir }) {
+	return /* @__PURE__ */ jsxs(SwitchField, {
+		className: "input",
+		dir,
+		isSelected,
+		defaultSelected,
+		onChange,
+		isDisabled,
+		isInvalid,
+		validationBehavior: "aria",
+		name,
+		value,
+		id,
+		children: [
+			/* @__PURE__ */ jsx(SwitchButton, {
+				className: "choice",
+				children: ({ isSelected: selected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "switch__control",
+					"data-state": selected ? "checked" : "unchecked",
+					"data-disabled": disabled || void 0,
+					"data-invalid": isInvalid || void 0,
+					"data-focus-visible": isFocusVisible || void 0,
+					children: /* @__PURE__ */ jsx("span", { className: "switch__thumb" })
+				}), /* @__PURE__ */ jsx("span", {
+					className: "choice__label",
+					children: label
+				})] })
+			}),
+			description && /* @__PURE__ */ jsx(Text$1, {
+				slot: "description",
+				className: "input__description",
+				children: description
+			}),
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$1, {
+				className: "input__error",
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+//#region src/form-context.ts
+var FormErrorsContext = /* @__PURE__ */ createContext({});
+//#endregion
+//#region src/FieldComponent.tsx
+function Field({ label, name, children, id, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, dir }) {
+	const errors = useContext(FormErrorsContext);
+	const error = Object.hasOwn(errors, name) && typeof errors[name] === "string" ? errors[name] || void 0 : void 0;
+	const invalid = isInvalid || !!error;
+	const message = isInvalid && errorMessage || error || void 0;
+	const generated = useId();
+	const controlId = id ?? generated;
+	const { describedBy, feedback } = useFeedback({
+		description,
+		isInvalid: invalid,
+		errorMessage: message
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "input field",
+		dir,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: controlId,
+				children: label
+			}),
+			children({
+				controlProps: {
+					id: controlId,
+					name,
+					className: "input__control field__control",
+					disabled: isDisabled,
+					readOnly: isReadOnly,
+					required: isRequired,
+					"aria-required": isRequired || void 0,
+					"aria-invalid": invalid || void 0,
+					"aria-describedby": describedBy
+				},
+				isInvalid: invalid,
+				errorMessage: message
+			}),
+			feedback
+		]
+	});
+}
+//#endregion
+//#region src/Form.tsx
+function Form({ children, validationErrors = {}, onSubmit, onReset, noValidate = false, id, "aria-label": ariaLabel, "aria-labelledby": labelledBy, dir }) {
+	function submit(event) {
+		event.preventDefault();
+		const form = event.currentTarget;
+		if (!noValidate && !form.checkValidity()) {
+			form.reportValidity();
+			return;
+		}
+		for (const element of form.querySelectorAll("[aria-invalid=\"true\"]")) {
+			const selector = "input:not([type=\"hidden\"]), textarea, select, button, [role=\"listbox\"]";
+			const invalid = (element.matches(selector) ? [element] : [...element.querySelectorAll(selector)]).find((control) => !control.matches(":disabled, [aria-disabled=\"true\"]"));
+			if (invalid) {
+				invalid.focus();
+				return;
+			}
+		}
+		onSubmit?.(new FormData(form, event.nativeEvent.submitter), event);
+	}
+	return /* @__PURE__ */ jsx(FormErrorsContext.Provider, {
+		value: validationErrors,
+		children: /* @__PURE__ */ jsx("form", {
+			className: "form",
+			id,
+			dir,
+			"aria-label": ariaLabel,
+			"aria-labelledby": labelledBy,
+			noValidate,
+			onSubmit: submit,
+			onReset,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/listbox-selection.ts
+/** Stable option order, unique enabled IDs, and at most one ID in single mode. */
+function listboxSelection(value, options, mode) {
+	const requested = new Set(value);
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const option of options) if (option.id && !option.isDisabled && requested.has(option.id) && !seen.has(option.id)) {
+		seen.add(option.id);
+		result.push(option.id);
+		if (mode === "single") break;
+	}
+	return result;
+}
+//#endregion
+//#region src/Listbox.tsx
+function Listbox({ label, options, value, defaultValue = [], onChange, selectionMode = "single", isDisabled = false, description, errorMessage, isInvalid = false, name, id, dir, emptyMessage = "Tidak ada pilihan." }) {
+	const [local, setLocal] = useState(defaultValue);
+	const selected = listboxSelection(value ?? local, options, selectionMode);
+	const nodeRef = useRef(null);
+	const tabIndexBeforeDisable = useRef(void 0);
+	function listRef(node) {
+		if (!node) return;
+		if (nodeRef.current !== node) tabIndexBeforeDisable.current = void 0;
+		nodeRef.current = node;
+		if (isInvalid) node.setAttribute("aria-invalid", "true");
+		else node.removeAttribute("aria-invalid");
+		if (isDisabled) {
+			node.setAttribute("aria-disabled", "true");
+			if (tabIndexBeforeDisable.current === void 0) tabIndexBeforeDisable.current = node.getAttribute("tabindex");
+			node.tabIndex = -1;
+		} else {
+			node.removeAttribute("aria-disabled");
+			if (tabIndexBeforeDisable.current !== void 0) {
+				if (tabIndexBeforeDisable.current === null) node.removeAttribute("tabindex");
+				else node.setAttribute("tabindex", tabIndexBeforeDisable.current);
+				tabIndexBeforeDisable.current = void 0;
+			}
+		}
+	}
+	const generated = useId();
+	const labelId = `${id ?? generated}-label`;
+	const { describedBy, feedback } = useFeedback({
+		description,
+		errorMessage,
+		isInvalid
+	});
+	function change(keys) {
+		if (isDisabled || keys === "all") return;
+		const next = listboxSelection([...keys].map(String), options, selectionMode);
+		if (next.length === selected.length && next.every((key, index) => key === selected[index])) return;
+		setLocal(next);
+		onChange?.(next);
+	}
+	const list = /* @__PURE__ */ jsxs("div", {
+		className: "input listbox",
+		dir,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(ListBox$1, {
+				ref: listRef,
+				id,
+				className: "listbox__list",
+				"aria-labelledby": labelId,
+				"aria-describedby": describedBy,
+				"aria-invalid": isInvalid || void 0,
+				"aria-disabled": isDisabled || void 0,
+				selectionMode,
+				selectionBehavior: selectionMode === "single" ? "replace" : "toggle",
+				disallowEmptySelection: selectionMode === "single",
+				selectedKeys: selected,
+				onSelectionChange: change,
+				disabledKeys: options.filter((option) => isDisabled || option.isDisabled).map((option) => option.id),
+				renderEmptyState: () => /* @__PURE__ */ jsx("span", {
+					className: "listbox__empty",
+					children: emptyMessage
+				}),
+				children: options.map((option) => /* @__PURE__ */ jsxs(ListBoxItem$1, {
+					id: option.id,
+					textValue: option.label,
+					isDisabled: isDisabled || option.isDisabled,
+					className: "listbox__item",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "listbox__text",
+						children: option.label
+					}), /* @__PURE__ */ jsx(CheckIcon, { className: "listbox__check" })]
+				}, option.id))
+			}),
+			feedback,
+			name && selected.map((key) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: key,
+				disabled: isDisabled
+			}, key))
+		]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: list
+	}) : list;
+}
+//#endregion
+//#region src/NumberField.tsx
+function finite(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function NumberField({ label, value, defaultValue = null, onChange, min, max, step = 1, locale = "id-ID", formatOptions, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, name, id, dir, incrementLabel, decrementLabel }) {
+	const buttonId = useId();
+	const inputRef = useRef(null);
+	const [local, setLocal] = useState(() => finite(defaultValue));
+	const selected = finite(value === void 0 ? local : value);
+	function change(next) {
+		if (isDisabled || isReadOnly) return;
+		const number = finite(next);
+		setLocal(number);
+		onChange?.(number);
+	}
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsx(NumberField$1, {
+			className: "input number-field",
+			id,
+			dir,
+			value: selected ?? NaN,
+			onChange: change,
+			minValue: min,
+			maxValue: max,
+			step,
+			formatOptions,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			isInvalid,
+			validationBehavior: "aria",
+			isWheelDisabled: true,
+			children: ({ state }) => {
+				const empty = state.inputValue.trim() === "";
+				function startEmpty() {
+					const start = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, min ?? 0));
+					state.setNumberValue(start);
+					inputRef.current?.focus();
+				}
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Label$5, {
+						className: "label",
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Group, {
+						className: "number-field__group",
+						onKeyDownCapture: (event) => {
+							if (isDisabled || isReadOnly || !empty || ![
+								"ArrowUp",
+								"ArrowDown",
+								"PageUp",
+								"PageDown"
+							].includes(event.key)) return;
+							event.preventDefault();
+							event.stopPropagation();
+							startEmpty();
+						},
+						children: /* @__PURE__ */ jsx(ButtonContext.Consumer, { children: (buttonContext) => /* @__PURE__ */ jsxs(ButtonContext.Provider, {
+							value: empty ? null : buttonContext,
+							children: [
+								/* @__PURE__ */ jsxs(Button$3, {
+									slot: empty ? void 0 : "decrement",
+									onPress: empty ? startEmpty : void 0,
+									isDisabled: empty ? isDisabled || isReadOnly : void 0,
+									preventFocusOnPress: true,
+									className: "number-field__step",
+									"aria-label": decrementLabel ?? `Kurangi ${label}`,
+									"aria-labelledby": `${buttonId}-decrement`,
+									excludeFromTabOrder: true,
+									children: [/* @__PURE__ */ jsx("span", {
+										id: `${buttonId}-decrement`,
+										hidden: true,
+										children: decrementLabel ?? `Kurangi ${label}`
+									}), "−"]
+								}),
+								/* @__PURE__ */ jsx(Input$2, {
+									ref: inputRef,
+									className: "number-field__control",
+									required: isRequired
+								}),
+								/* @__PURE__ */ jsxs(Button$3, {
+									slot: empty ? void 0 : "increment",
+									onPress: empty ? startEmpty : void 0,
+									isDisabled: empty ? isDisabled || isReadOnly : void 0,
+									preventFocusOnPress: true,
+									className: "number-field__step",
+									"aria-label": incrementLabel ?? `Tambah ${label}`,
+									"aria-labelledby": `${buttonId}-increment`,
+									excludeFromTabOrder: true,
+									children: [/* @__PURE__ */ jsx("span", {
+										id: `${buttonId}-increment`,
+										hidden: true,
+										children: incrementLabel ?? `Tambah ${label}`
+									}), "+"]
+								})
+							]
+						}) })
+					}),
+					description && /* @__PURE__ */ jsx(Text$2, {
+						slot: "description",
+						className: "input__description",
+						children: description
+					}),
+					isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$2, {
+						className: "input__error",
+						children: errorMessage
+					}),
+					name && /* @__PURE__ */ jsx("input", {
+						type: "hidden",
+						name,
+						value: selected === null ? "" : String(selected),
+						disabled: isDisabled
+					})
+				] });
+			}
+		})
+	});
+}
+//#endregion
+//#region src/Card.tsx
+/** A content container; place links and buttons inside rather than making it clickable. */
+function Card({ title, description, headingLevel = 3, actions, header, titleExtras, footer, children, className, ...props }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: ["card", className].filter(Boolean).join(" "),
+		children: [
+			(title || description || actions || header || titleExtras) && /* @__PURE__ */ jsxs("div", {
+				className: "card__header",
+				children: [(title || description || header || titleExtras) && /* @__PURE__ */ jsx("div", {
+					className: "card__heading",
+					children: header ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [titleExtras ? /* @__PURE__ */ jsxs("div", {
+						className: "card__title-row",
+						children: [title && /* @__PURE__ */ jsx(Heading, {
+							className: "card__title",
+							children: title
+						}), titleExtras]
+					}) : title && /* @__PURE__ */ jsx(Heading, {
+						className: "card__title",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "card__description",
+						children: description
+					})] })
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "card__actions",
+					children: actions
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "card__content",
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "card__footer",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Badge.tsx
+/** Static status text. Dynamic announcements belong in an application-owned live region. */
+function Badge({ tone = "neutral", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: ["badge", className].filter(Boolean).join(" "),
+		"data-tone": tone
+	});
+}
+//#endregion
+//#region src/Skeleton.tsx
+/** Decorative placeholder. Set aria-busy and loading text on the surrounding content. */
+function Skeleton({ shape = "rectangle", animated = true, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: ["skeleton", className].filter(Boolean).join(" "),
+		"data-shape": shape,
+		"data-animated": animated ? "true" : void 0,
+		"aria-hidden": "true"
+	});
+}
+//#endregion
+//#region src/Separator.tsx
+function Separator({ orientation = "horizontal", decorative = true, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: ["separator", className].filter(Boolean).join(" "),
+		"data-orientation": orientation,
+		role: decorative ? "presentation" : "separator",
+		"aria-hidden": decorative ? "true" : void 0,
+		"aria-orientation": decorative ? void 0 : orientation
+	});
+}
+//#endregion
+//#region src/tabs-indicator.ts
+function mountTabsIndicator(container) {
+	const list = container.querySelector("[role=\"tablist\"]");
+	if (!list) return () => {};
+	let frame = 0, disposed = false, previous = null, armed = false;
+	const prev = container.querySelector("[data-tabs-scroll=\"prev\"]");
+	const next = container.querySelector("[data-tabs-scroll=\"next\"]");
+	const vertical = () => list.getAttribute("aria-orientation") === "vertical";
+	const reduced = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+	function measure() {
+		if (disposed) return;
+		const selected = list.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+		const rect = list.getBoundingClientRect();
+		if (selected && rect.width > 0 && rect.height > 0) {
+			const tab = selected.getBoundingClientRect();
+			const border = getComputedStyle(list);
+			list.style.setProperty("--tabs-indicator-x", `${tab.left - rect.left + list.scrollLeft - (parseFloat(border.borderLeftWidth) || 0)}px`);
+			list.style.setProperty("--tabs-indicator-y", `${tab.top - rect.top + list.scrollTop - (parseFloat(border.borderTopWidth) || 0)}px`);
+			list.style.setProperty("--tabs-indicator-width", `${tab.width}px`);
+			list.style.setProperty("--tabs-indicator-height", `${tab.height}px`);
+			list.dataset.indicatorReady = "true";
+			if (!armed) {
+				armed = true;
+				requestAnimationFrame(() => {
+					if (!disposed) list.dataset.indicatorAnimated = "true";
+				});
+			}
+			if (selected !== previous && previous && typeof list.scrollBy === "function") {
+				const delta = vertical() ? tab.top < rect.top ? tab.top - rect.top : tab.bottom > rect.bottom ? tab.bottom - rect.bottom : 0 : tab.left < rect.left ? tab.left - rect.left : tab.right > rect.right ? tab.right - rect.right : 0;
+				if (delta) list.scrollBy({
+					[vertical() ? "top" : "left"]: delta,
+					behavior: reduced() ? "instant" : "smooth"
+				});
+			}
+		} else list.dataset.indicatorReady = "false";
+		previous = selected;
+		const max = vertical() ? list.scrollHeight - list.clientHeight : list.scrollWidth - list.clientWidth;
+		const position = Math.abs(vertical() ? list.scrollTop : list.scrollLeft);
+		list.dataset.overflow = String(max > 1);
+		if (prev) {
+			prev.hidden = max <= 1;
+			prev.disabled = position <= 1;
+		}
+		if (next) {
+			next.hidden = max <= 1;
+			next.disabled = position >= max - 1;
+		}
+	}
+	function schedule() {
+		if (disposed) return;
+		cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(measure);
+	}
+	function scroll(direction) {
+		if (typeof list.scrollBy !== "function") return;
+		const rtl = !vertical() && getComputedStyle(list).direction === "rtl";
+		const amount = (vertical() ? list.clientHeight : list.clientWidth) * .7 * direction * (rtl ? -1 : 1);
+		list.scrollBy({
+			[vertical() ? "top" : "left"]: amount,
+			behavior: reduced() ? "instant" : "smooth"
+		});
+	}
+	const backward = () => scroll(-1), forward = () => scroll(1);
+	prev?.addEventListener("click", backward);
+	next?.addEventListener("click", forward);
+	list.addEventListener("scroll", schedule, { passive: true });
+	window.addEventListener("resize", schedule);
+	const observer = new MutationObserver(schedule);
+	observer.observe(list, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"aria-selected",
+			"aria-orientation",
+			"aria-disabled",
+			"disabled"
+		]
+	});
+	const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
+	resize?.observe(list);
+	for (const tab of list.querySelectorAll("[role=\"tab\"]")) resize?.observe(tab);
+	document.fonts?.ready.then(schedule);
+	schedule();
+	return () => {
+		disposed = true;
+		cancelAnimationFrame(frame);
+		observer.disconnect();
+		resize?.disconnect();
+		prev?.removeEventListener("click", backward);
+		next?.removeEventListener("click", forward);
+		list.removeEventListener("scroll", schedule);
+		window.removeEventListener("resize", schedule);
+	};
+}
+//#endregion
+//#region src/Tabs.tsx
+function Tabs({ label, variant = "primary", size = "md", orientation = "horizontal", align = "center", fullWidth = false, inset = "default", showSeparators = false, renderIcon, previousLabel = "Tab sebelumnya / Previous tabs", nextLabel = "Tab berikutnya / Next tabs", extras, actions, items, value, defaultValue, onChange, renderPanel, activationMode = "manual", dir, id }) {
+	const container = useRef(null);
+	const hasToolbar = !!(extras || actions);
+	useEffect(() => container.current ? mountTabsIndicator(container.current) : void 0, [items.length, hasToolbar]);
+	const [local, setLocal] = useState(defaultValue);
+	const selected = items.find((item) => item.id === (value ?? local) && !item.isDisabled)?.id ?? items.find((item) => !item.isDisabled)?.id;
+	const list = items.length > 0 ? /* @__PURE__ */ jsxs("div", {
+		className: "tabs__list-container",
+		ref: container,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "tabs__scroll-button tabs__scroll-button--prev",
+				"data-tabs-scroll": "prev",
+				hidden: true,
+				"aria-label": previousLabel,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m14 6-6 6 6 6" })
+				})
+			}),
+			/* @__PURE__ */ jsx(TabList, {
+				className: "tabs__list",
+				"aria-label": label,
+				children: items.map((item, index) => /* @__PURE__ */ jsxs(Tab, {
+					className: "tabs__trigger",
+					id: item.id,
+					isDisabled: item.isDisabled,
+					children: [
+						showSeparators && index > 0 && /* @__PURE__ */ jsx("span", {
+							className: "tabs__separator",
+							"aria-hidden": "true"
+						}),
+						renderIcon && /* @__PURE__ */ jsx("span", {
+							className: "tabs__icon",
+							"aria-hidden": "true",
+							children: renderIcon(item)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "tabs__label",
+							children: item.label
+						})
+					]
+				}, item.id))
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "tabs__scroll-button tabs__scroll-button--next",
+				"data-tabs-scroll": "next",
+				hidden: true,
+				"aria-label": nextLabel,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m10 6 6 6-6 6" })
+				})
+			})
+		]
+	}) : null;
+	const content = /* @__PURE__ */ jsxs(Tabs$1, {
+		className: [
+			"tabs",
+			`tabs--${variant === "default" ? "primary" : variant}`,
+			`tabs--align-${align}`,
+			fullWidth && "tabs--full-width",
+			inset === "none" && "tabs--flush",
+			size !== "md" && `tabs--${size}`
+		].filter(Boolean).join(" "),
+		id,
+		orientation,
+		dir,
+		selectedKey: selected ?? "",
+		keyboardActivation: activationMode,
+		disabledKeys: items.filter((item) => item.isDisabled).map((item) => item.id),
+		onSelectionChange: (key) => {
+			const next = String(key);
+			if (next !== selected && items.some((item) => item.id === next && !item.isDisabled)) {
+				setLocal(next);
+				onChange?.(next);
+			}
+		},
+		children: [extras || actions ? /* @__PURE__ */ jsxs("div", {
+			className: "tabs__toolbar",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "tabs__navigation",
+				children: [list, extras && /* @__PURE__ */ jsx("div", {
+					className: "tabs__extras",
+					children: extras
+				})]
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "tabs__actions",
+				children: actions
+			})]
+		}) : list, items.map((item) => /* @__PURE__ */ jsx(TabPanel, {
+			id: item.id,
+			className: "tabs__panel",
+			children: renderPanel(item)
+		}, item.id))]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: content
+	}) : content;
+}
+//#endregion
+//#region src/pagination-model.ts
+function paginationModel(totalItems, pageSize, value, siblingCount = 1) {
+	const count = Math.max(1, Math.ceil((Number.isFinite(totalItems) ? Math.min(Number.MAX_SAFE_INTEGER, Math.max(0, Math.floor(totalItems))) : 0) / (Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 10)));
+	const current = Math.min(count, Math.max(1, Number.isFinite(value) ? Math.floor(value) : 1));
+	const siblings = Number.isFinite(siblingCount) ? Math.min(2, Math.max(0, Math.floor(siblingCount))) : 1;
+	const pages = /* @__PURE__ */ new Set([
+		1,
+		count,
+		current
+	]);
+	for (let offset = 1; offset <= siblings; offset++) {
+		if (current - offset > 1) pages.add(current - offset);
+		if (current + offset < count) pages.add(current + offset);
+	}
+	const ordered = [...pages].sort((a, b) => a - b);
+	const entries = [];
+	ordered.forEach((page, index) => {
+		if (index && page - ordered[index - 1] > 1) entries.push(`gap-${page}`);
+		entries.push(page);
+	});
+	return {
+		current,
+		count,
+		entries
+	};
+}
+//#endregion
+//#region src/Pagination.tsx
+function Pagination({ totalItems, pageSize = 10, value, defaultValue = 1, onChange, isDisabled = false, siblingCount = 1, label = "Navigasi halaman", previousLabel = "Sebelumnya", nextLabel = "Berikutnya", pageLabel = "Halaman", dir, id }) {
+	const [local, setLocal] = useState(defaultValue);
+	const { current, count, entries } = paginationModel(totalItems, pageSize, value ?? local, siblingCount);
+	function change(next) {
+		if (isDisabled || next === current || next < 1 || next > count) return;
+		setLocal(next);
+		onChange?.(next);
+	}
+	return /* @__PURE__ */ jsxs("nav", {
+		className: "pagination",
+		"aria-label": label,
+		dir,
+		id,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pagination__button",
+				disabled: isDisabled || current === 1,
+				onClick: () => change(current - 1),
+				children: previousLabel
+			}),
+			entries.map((entry) => typeof entry === "string" ? /* @__PURE__ */ jsx("span", {
+				className: "pagination__gap",
+				"aria-hidden": "true",
+				children: "..."
+			}, entry) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pagination__button",
+				"aria-label": `${pageLabel} ${entry}`,
+				"aria-current": entry === current ? "page" : void 0,
+				disabled: isDisabled,
+				onClick: () => change(entry),
+				children: entry
+			}, entry)),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pagination__button",
+				disabled: isDisabled || current === count,
+				onClick: () => change(current + 1),
+				children: nextLabel
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "pagination__summary",
+				"aria-live": "polite",
+				children: [
+					current,
+					" / ",
+					count
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Table.tsx
+function Table({ caption, children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "table__scroll",
+		role: "region",
+		"aria-label": caption,
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsxs("table", {
+			...props,
+			className: ["table", className].filter(Boolean).join(" "),
+			children: [/* @__PURE__ */ jsx("caption", {
+				className: "table__caption",
+				children: caption
+			}), children]
+		})
+	});
+}
+//#endregion
+//#region src/DataTable.tsx
+function DataTable({ caption, columns, rows, sort = null, onSortChange, isLoading = false, isDisabled = false, emptyMessage = "Tidak ada data.", loadingMessage = "Memuat data...", errorMessage, renderCell, dir, id }) {
+	function requestSort(column) {
+		if (isLoading || isDisabled || !column.sortable) return;
+		onSortChange?.({
+			columnId: column.id,
+			direction: sort?.columnId === column.id && sort.direction === "ascending" ? "descending" : "ascending"
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "data-table",
+		dir,
+		id,
+		children: [
+			/* @__PURE__ */ jsxs(Table, {
+				caption,
+				"aria-busy": isLoading || void 0,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					"aria-sort": column.sortable ? sort?.columnId === column.id ? sort.direction : "none" : void 0,
+					children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "table__sort",
+						disabled: isLoading || isDisabled,
+						onClick: () => requestSort(column),
+						children: [column.label, /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: sort?.columnId === column.id ? sort.direction === "ascending" ? "↑" : "↓" : "↕"
+						})]
+					}) : column.label
+				}, column.id)) }) }), /* @__PURE__ */ jsx("tbody", { children: rows.length ? rows.map((row) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { children: renderCell ? renderCell(row, column) : row.cells[column.id] ?? "" }, column.id)) }, row.id)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: Math.max(1, columns.length),
+					className: "table__empty",
+					children: isLoading ? loadingMessage : errorMessage || emptyMessage
+				}) }) })]
+			}),
+			isLoading && /* @__PURE__ */ jsx("p", {
+				className: "data-table__status",
+				role: "status",
+				children: loadingMessage
+			}),
+			errorMessage && !isLoading && /* @__PURE__ */ jsx("p", {
+				className: "input__error",
+				role: "alert",
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Alert.tsx
+function Alert({ title, description, tone = "info", announcement = "off", children, actions, id }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: "alert",
+		"data-tone": tone,
+		role: announcement === "polite" ? "status" : announcement === "assertive" ? "alert" : void 0,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "alert__title",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "alert__description",
+				children: description
+			}),
+			children,
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "alert__actions",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Empty.tsx
+function Empty({ title, description, headingLevel = 3, actions, children, id }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: "empty",
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				className: "empty__title",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "empty__description",
+				children: description
+			}),
+			children,
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "empty__actions",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Breadcrumb.tsx
+function Breadcrumb({ items, label = "Jejak halaman", dir, id }) {
+	return /* @__PURE__ */ jsx("nav", {
+		id,
+		className: "breadcrumb",
+		"aria-label": label,
+		dir,
+		children: /* @__PURE__ */ jsx("ol", { children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { children: [index > 0 && /* @__PURE__ */ jsx("span", {
+			className: "breadcrumb__separator",
+			"aria-hidden": "true",
+			children: "/"
+		}), index === items.length - 1 ? /* @__PURE__ */ jsx("span", {
+			"aria-current": "page",
+			children: item.label
+		}) : item.href ? /* @__PURE__ */ jsx("a", {
+			href: item.href,
+			children: item.label
+		}) : /* @__PURE__ */ jsx("span", { children: item.label })] }, index)) })
+	});
+}
+//#endregion
+//#region src/useDisclosure.ts
+function useDisclosure(open, defaultOpen = false, onOpenChange) {
+	const [local, setLocal] = useState(defaultOpen);
+	const visible = open ?? local;
+	function change(next) {
+		if (next === visible) return;
+		setLocal(next);
+		onOpenChange?.(next);
+	}
+	return {
+		visible,
+		change
+	};
+}
+//#endregion
+//#region src/Sidebar.tsx
+function Sidebar({ label, items, currentId, open, defaultOpen = true, onOpenChange, toggleLabel = "Menu navigasi", dir, id }) {
+	const generated = useId(), navId = `${id ?? generated}-nav`;
+	const { visible, change } = useDisclosure(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsxs("aside", {
+		id,
+		className: "sidebar",
+		dir,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sidebar__header",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sidebar__title",
+				children: label
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "sidebar__toggle",
+				"aria-label": toggleLabel,
+				"aria-expanded": visible,
+				"aria-controls": navId,
+				onClick: () => change(!visible),
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: visible ? "−" : "+"
+				})
+			})]
+		}), /* @__PURE__ */ jsx("nav", {
+			id: navId,
+			"aria-label": label,
+			hidden: !visible,
+			children: /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsx("li", { children: item.isDisabled ? /* @__PURE__ */ jsx("span", {
+				className: "sidebar__link",
+				"aria-disabled": "true",
+				children: item.label
+			}) : /* @__PURE__ */ jsx("a", {
+				className: "sidebar__link",
+				href: item.href,
+				"aria-current": item.id === currentId ? "page" : void 0,
+				children: item.label
+			}) }, item.id)) })
+		})]
+	});
+}
+//#endregion
+//#region src/chart-model.ts
+function chartModel(data) {
+	const valid = data.filter((item) => Number.isFinite(item.value));
+	const scale = valid.reduce((max, item) => Math.max(max, Math.abs(item.value)), 1);
+	const min = valid.reduce((min, item) => Math.min(min, item.value / scale), 0);
+	const span = valid.reduce((max, item) => Math.max(max, item.value / scale), 0) - min || 1, step = 560 / Math.max(1, valid.length);
+	const y = (value) => 180 - (value / scale - min) / span * 160;
+	return {
+		items: valid.map((item, index) => ({
+			...item,
+			x: 20 + step * (index + .5),
+			y: y(item.value)
+		})),
+		baseline: y(0),
+		barWidth: Math.min(40, step * .7)
+	};
+}
+//#endregion
+//#region src/Chart.tsx
+function Chart({ label, data, type = "bar", description, locale = "id-ID", formatOptions, categoryLabel = "Kategori", valueLabel = "Nilai", emptyMessage = "Belum ada data grafik.", id, dir }) {
+	const generated = useId(), labelId = `${id ?? generated}-label`, model = chartModel(data), format = new Intl.NumberFormat(locale, formatOptions);
+	return /* @__PURE__ */ jsxs("figure", {
+		id,
+		className: "chart",
+		dir,
+		"aria-labelledby": labelId,
+		children: [
+			/* @__PURE__ */ jsx("figcaption", {
+				id: labelId,
+				className: "chart__title",
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "chart__description",
+				children: description
+			}),
+			model.items.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("svg", {
+				className: "chart__plot",
+				viewBox: "0 0 600 210",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [
+					/* @__PURE__ */ jsx("line", {
+						className: "chart__axis",
+						x1: "20",
+						x2: "580",
+						y1: model.baseline,
+						y2: model.baseline
+					}),
+					type === "line" ? /* @__PURE__ */ jsx("polyline", {
+						className: "chart__line",
+						points: model.items.map((item) => `${item.x},${item.y}`).join(" ")
+					}) : null,
+					model.items.map((item) => /* @__PURE__ */ jsxs("g", { children: [type === "bar" ? /* @__PURE__ */ jsx("rect", {
+						className: "chart__bar",
+						x: item.x - model.barWidth / 2,
+						y: Math.min(item.y, model.baseline),
+						width: model.barWidth,
+						height: Math.abs(item.y - model.baseline)
+					}) : /* @__PURE__ */ jsx("circle", {
+						className: "chart__bar",
+						cx: item.x,
+						cy: item.y,
+						r: "4"
+					}), model.items.length <= 12 && /* @__PURE__ */ jsx("text", {
+						className: "chart__label",
+						x: item.x,
+						y: "202",
+						textAnchor: "middle",
+						children: item.label.slice(0, 12)
+					})] }, item.id))
+				]
+			}), /* @__PURE__ */ jsxs(Table, {
+				caption: label,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: categoryLabel
+				}), /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: valueLabel
+				})] }) }), /* @__PURE__ */ jsx("tbody", { children: model.items.map((item) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					children: item.label
+				}), /* @__PURE__ */ jsx("td", { children: format.format(item.value) })] }, item.id)) })]
+			})] }) : /* @__PURE__ */ jsx(Empty, { title: emptyMessage })
+		]
+	});
+}
+//#endregion
+//#region src/Dialog.tsx
+function Dialog(props) {
+	const { triggerLabel, title, description, children, footer, isDisabled = false, closeLabel = "Tutup", dir, size = "md", placement = "center", scroll = "outside", backdrop = "opaque", isDismissable = true, isKeyboardDismissDisabled = false, showCloseButton = true, showFooterClose = true } = props;
+	const { visible, change } = useDisclosure(props.open, props.defaultOpen ?? false, props.onOpenChange);
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: `button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`,
+				"aria-label": triggerLabel,
+				isDisabled,
+				children: props.triggerContent ?? triggerLabel
+			}), /* @__PURE__ */ jsx(ModalOverlay, {
+				className: "dialog__backdrop dialog__viewport",
+				"data-size": size,
+				"data-placement": placement,
+				"data-scroll": scroll,
+				"data-backdrop": backdrop,
+				isDismissable,
+				isKeyboardDismissDisabled,
+				children: /* @__PURE__ */ jsx(Modal, {
+					className: "dialog__panel",
+					dir,
+					children: /* @__PURE__ */ jsxs(Dialog$1, {
+						className: "dialog__content",
+						"aria-describedby": description ? descriptionId : void 0,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "overlay__header",
+								"data-close-button": showCloseButton || void 0,
+								children: [
+									/* @__PURE__ */ jsx(Heading, {
+										level: 2,
+										slot: "title",
+										className: "overlay__title",
+										children: title
+									}),
+									description && /* @__PURE__ */ jsx("p", {
+										id: descriptionId,
+										className: "overlay__description",
+										children: description
+									}),
+									showCloseButton && /* @__PURE__ */ jsx(Button$1, {
+										className: "dialog__close",
+										"aria-label": props.closeIconLabel ?? `${closeLabel} dialog`,
+										onPress: () => change(false),
+										children: /* @__PURE__ */ jsx(CloseIcon, {})
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "overlay__body",
+								children
+							}),
+							(footer || showFooterClose) && /* @__PURE__ */ jsxs("div", {
+								className: "overlay__footer",
+								children: [footer, showFooterClose && /* @__PURE__ */ jsx(Button$1, {
+									className: "button button--secondary",
+									onPress: () => change(false),
+									children: closeLabel
+								})]
+							})
+						]
+					})
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/overlay-model.ts
+function menuGroups(items) {
+	const groups = [];
+	for (const item of items) {
+		const previous = groups.at(-1);
+		if (!previous || previous.label !== item.section || item.separatorBefore) groups.push({
+			key: item.id,
+			label: item.section,
+			items: [item]
+		});
+		else previous.items.push(item);
+	}
+	return groups;
+}
+function menuLeaves(items, disabled = false) {
+	return items.flatMap((item) => item.children?.length ? menuLeaves(item.children, disabled || !!item.isDisabled) : [{
+		...item,
+		isDisabled: disabled || item.isDisabled
+	}]);
+}
+function menuSelection(keys, items, mode) {
+	const wanted = new Set(keys);
+	const result = menuLeaves(items).filter((item) => wanted.has(item.id)).map((item) => item.id);
+	return mode === "none" ? [] : mode === "single" ? result.slice(0, 1) : result;
+}
+//#endregion
+//#region src/DropdownMenu.tsx
+function DropdownMenu(props) {
+	const { triggerLabel, items, isDisabled = false, dir, selectionMode = "none", placement = "bottom-start" } = props;
+	const { visible, change } = useDisclosure(props.open, props.defaultOpen ?? false, props.onOpenChange);
+	const [local, setLocal] = useState(props.defaultSelectedKeys ?? []);
+	const selected = menuSelection(props.selectedKeys ?? local, items, selectionMode);
+	const [side, align] = placement.split("-");
+	const popoverPlacement = `${side} ${side === "left" || side === "right" ? align === "start" ? "top" : "bottom" : align}`;
+	const closeOnSelect = props.closeOnSelect ?? selectionMode !== "multiple";
+	const leaves = menuLeaves(items, isDisabled);
+	function action(id) {
+		const item = leaves.find((item) => item.id === id);
+		if (item && !item.isDisabled) props.onAction?.(id);
+	}
+	function select(keys, level) {
+		if (isDisabled || selectionMode === "none") return;
+		const levelIds = new Set(level.filter((item) => !item.children?.length).map((item) => item.id));
+		const next = menuSelection(selectionMode === "multiple" ? [...selected.filter((id) => !levelIds.has(id)), ...keys] : keys, items, selectionMode);
+		setLocal(next);
+		props.onSelectionChange?.(next);
+	}
+	function content(item) {
+		const icon = props.renderIcon?.(item);
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			selectionMode !== "none" && !item.children?.length && /* @__PURE__ */ jsx(CheckIcon, { className: "menu__check" }),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "menu__icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "menu__text",
+				children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description && /* @__PURE__ */ jsx("span", {
+					className: "menu__description",
+					children: item.description
+				})]
+			}),
+			item.shortcut && /* @__PURE__ */ jsx("kbd", {
+				className: "menu__shortcut",
+				"aria-hidden": "true",
+				children: item.shortcut
+			}),
+			!!item.children?.length && /* @__PURE__ */ jsx(ChevronIcon, { className: "menu__arrow" })
+		] });
+	}
+	function renderMenu(level, label, blocked = false) {
+		return /* @__PURE__ */ jsx(Menu, {
+			className: "menu__list",
+			"aria-label": label,
+			selectionMode,
+			selectedKeys: selected,
+			onSelectionChange: (keys) => select(keys === "all" ? level.filter((i) => !i.isDisabled && !i.children?.length).map((i) => i.id) : Array.from(keys, String), level),
+			disallowEmptySelection: selectionMode === "single",
+			shouldCloseOnSelect: closeOnSelect,
+			onAction: (key) => action(String(key)),
+			children: menuGroups(level).flatMap((group, index) => {
+				const rows = group.items.map((item) => {
+					const disabled = isDisabled || blocked || !!item.isDisabled;
+					const row = /* @__PURE__ */ jsx(MenuItem, {
+						id: item.id,
+						textValue: item.label,
+						className: "menu__item",
+						isDisabled: disabled,
+						"data-tone": item.tone ?? "default",
+						shouldCloseOnSelect: closeOnSelect,
+						children: content(item)
+					}, item.id);
+					return item.children?.length ? /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [row, /* @__PURE__ */ jsx(Popover$2, {
+						className: "menu__panel",
+						offset: 4,
+						containerPadding: 16,
+						dir,
+						children: renderMenu(item.children, item.label, disabled)
+					})] }, item.id) : row;
+				});
+				return [index > 0 ? /* @__PURE__ */ jsx(Separator$1, { className: "menu__separator" }, `${group.key}-separator`) : null, /* @__PURE__ */ jsxs(MenuSection, {
+					"aria-label": group.label,
+					children: [group.label && /* @__PURE__ */ jsx(Header, {
+						className: "menu__heading",
+						children: group.label
+					}), rows]
+				}, group.key)];
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(MenuTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: `button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`,
+				"aria-label": triggerLabel,
+				isDisabled: isDisabled || !items.length,
+				children: props.triggerContent ?? triggerLabel
+			}), /* @__PURE__ */ jsx(Popover$2, {
+				className: "menu__panel",
+				placement: popoverPlacement,
+				offset: 8,
+				containerPadding: 16,
+				dir,
+				children: renderMenu(items, triggerLabel)
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/Popover.tsx
+function Popover({ triggerLabel, title, description, children, open, defaultOpen = false, onOpenChange, isDisabled = false, closeLabel = "Tutup", dir }) {
+	const { visible, change } = useDisclosure(open, defaultOpen, onOpenChange), descriptionId = useId();
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: "button button--secondary",
+				isDisabled,
+				children: triggerLabel
+			}), /* @__PURE__ */ jsx(Popover$2, {
+				className: "popover__panel",
+				isNonModal: true,
+				placement: "bottom start",
+				offset: 8,
+				containerPadding: 16,
+				dir,
+				children: /* @__PURE__ */ jsxs(Dialog$1, {
+					className: "popover__content",
+					"aria-describedby": description ? descriptionId : void 0,
+					children: [
+						/* @__PURE__ */ jsx(Heading, {
+							level: 2,
+							slot: "title",
+							className: "overlay__title",
+							children: title
+						}),
+						description && /* @__PURE__ */ jsx("p", {
+							id: descriptionId,
+							className: "overlay__description",
+							children: description
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "overlay__body",
+							children
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "overlay__footer",
+							children: /* @__PURE__ */ jsx(Button$1, {
+								className: "button button--secondary",
+								onPress: () => change(false),
+								children: closeLabel
+							})
+						})
+					]
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/Tooltip.tsx
+function Tooltip({ triggerLabel, text, triggerContent, triggerIconOnly = false, triggerVariant = "secondary", triggerSize = "md", open, defaultOpen = false, onOpenChange, isDisabled = false, dir }) {
+	const { visible, change } = useDisclosure(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(TooltipTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			delay: 300,
+			closeDelay: 0,
+			isDisabled,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: [
+					"button",
+					`button--${triggerVariant}`,
+					triggerSize !== "md" && `button--${triggerSize}`,
+					triggerIconOnly && "button--icon-only"
+				].filter(Boolean).join(" "),
+				"aria-label": triggerLabel,
+				isDisabled,
+				children: triggerContent ?? triggerLabel
+			}), /* @__PURE__ */ jsx(Tooltip$1, {
+				className: "tooltip__panel",
+				placement: "top",
+				offset: 8,
+				containerPadding: 16,
+				dir,
+				children: text
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/Spinner.tsx
+/** Decorative by default. Use label for a standalone loading status; omit it inside a labeled Button. */
+function Spinner({ size = "md", color = "current", label, id }) {
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		className: `spinner spinner--${size}`,
+		"data-color": color,
+		role: label ? "status" : void 0,
+		"aria-label": label || void 0,
+		"aria-hidden": !label || void 0,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 20 20",
+			fill: "none",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "spinner__track",
+				cx: "10",
+				cy: "10",
+				r: "8"
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "spinner__arc",
+				cx: "10",
+				cy: "10",
+				r: "8",
+				pathLength: "100",
+				strokeDasharray: "36 64"
+			})]
+		}), label && /* @__PURE__ */ jsx("span", {
+			className: "spinner__label",
+			children: label
+		})]
+	});
+}
+//#endregion
+//#region src/Combobox.tsx
+/** Searchable single selection. Draft text is never submitted as a value. */
+function Combobox(props) {
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const [draft, setDraft] = useState(null);
+	const [tried, setTried] = useState(false);
+	const resetting = useRef(false);
+	const input = useRef(null);
+	const id = selectionIds(props.value !== void 0 ? props.value : local, props.options, false)[0] ?? null;
+	const selected = props.options.find((o) => o.id === id);
+	const [previous, setPrevious] = useState(selected);
+	if (previous !== selected) {
+		setPrevious(selected);
+		setDraft(null);
+	}
+	const text = draft ?? selected?.label ?? "";
+	const invalid = props.isInvalid || tried && props.isRequired && !id;
+	const { describedBy, feedback } = useFeedback({
+		description: props.description,
+		isInvalid: invalid,
+		errorMessage: props.errorMessage ?? (props.isRequired && !id ? props.requiredMessage ?? "Pilihan wajib diisi." : void 0)
+	});
+	function change(value) {
+		if (props.isDisabled || resetting.current) return;
+		const next = selectionIds(value, props.options, false)[0] ?? null;
+		setLocal(next);
+		props.onChange?.(next);
+		setDraft(null);
+	}
+	const content = /* @__PURE__ */ jsxs(ComboBox, {
+		className: "select combobox",
+		value: id,
+		onChange: change,
+		inputValue: text,
+		onInputChange: (text) => {
+			if (resetting.current) return;
+			setDraft(text);
+			if (text === "" && id) {
+				setLocal(null);
+				props.onChange?.(null);
+			}
+		},
+		defaultItems: props.options,
+		defaultFilter: (label, query) => filterOptions(props.options, query).some((option) => option.label === label),
+		allowsEmptyCollection: true,
+		allowsCustomValue: false,
+		isDisabled: props.isDisabled,
+		isRequired: props.isRequired,
+		isInvalid: !!invalid,
+		validationBehavior: "aria",
+		children: [
+			/* @__PURE__ */ jsxs(Label$6, {
+				className: "select__label",
+				children: [props.label, props.isRequired && /* @__PURE__ */ jsxs("span", {
+					className: "selection__required",
+					"aria-hidden": "true",
+					children: [" ", "*"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "combobox__control",
+				"data-invalid": invalid || void 0,
+				"data-disabled": props.isDisabled || void 0,
+				children: [
+					props.startContent && /* @__PURE__ */ jsx("span", {
+						className: "selection__leading",
+						"aria-hidden": "true",
+						children: props.startContent
+					}),
+					/* @__PURE__ */ jsx(Input$3, {
+						ref: input,
+						className: "combobox__input",
+						placeholder: props.placeholder,
+						"aria-describedby": describedBy
+					}),
+					props.isClearable && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "combobox__clear",
+						"data-empty": !id && !text || void 0,
+						"aria-hidden": !id && !text || void 0,
+						tabIndex: !id && !text ? -1 : void 0,
+						disabled: props.isDisabled || !id && !text,
+						"aria-label": props.clearLabel ?? "Hapus pilihan",
+						onClick: () => {
+							change(null);
+							input.current?.focus();
+						},
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "selection__close-icon" })
+					}),
+					/* @__PURE__ */ jsx(Button$4, {
+						className: "combobox__toggle",
+						"aria-label": props.toggleLabel ?? "Buka pilihan",
+						children: /* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Popover$3, {
+				className: "select__popover combobox__popover",
+				children: /* @__PURE__ */ jsx(ListBox$2, {
+					className: "select__list",
+					renderEmptyState: () => /* @__PURE__ */ jsx("span", {
+						className: "selection__empty",
+						children: props.emptyMessage ?? "Tidak ada pilihan."
+					}),
+					children: (option) => /* @__PURE__ */ jsxs(ListBoxItem$2, {
+						id: option.id,
+						textValue: option.label,
+						isDisabled: option.isDisabled,
+						className: "select__item",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "select__item-label",
+							children: props.renderOption?.(option) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [option.label, option.description && /* @__PURE__ */ jsx("span", {
+								className: "selection__description",
+								children: option.description
+							})] })
+						}), /* @__PURE__ */ jsx(CheckIcon, { className: "select__check" })]
+					})
+				})
+			}),
+			feedback,
+			props.name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: props.name,
+				value: id ?? "",
+				disabled: props.isDisabled
+			}),
+			/* @__PURE__ */ jsx(SelectionValidation, {
+				hasValue: !!id,
+				required: props.isRequired,
+				disabled: props.isDisabled,
+				onInvalid: () => {
+					setTried(true);
+					input.current?.focus();
+				},
+				onResetStart: () => {
+					resetting.current = true;
+				},
+				onReset: (cancelled) => {
+					resetting.current = false;
+					if (!cancelled) {
+						setTried(false);
+						setDraft(null);
+						if (props.value === void 0) setLocal(props.defaultValue ?? null);
+					}
+				}
+			})
+		]
+	});
+	return props.dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: props.dir === "rtl" ? "ar-EG" : "en-US",
+		children: content
+	}) : content;
+}
+//#endregion
+//#region src/toggle-group-model.ts
+/** Normalize IDs without discarding existing disabled selections. */
+function toggleIds(value, items, multiple) {
+	const wanted = new Set(Array.isArray(value) ? value : typeof value === "string" ? [value] : []);
+	const result = [...new Set(items.filter((item) => item.id !== "" && wanted.has(item.id)).map((item) => item.id))];
+	return multiple ? result : result.slice(0, 1);
+}
+//#endregion
+//#region src/ToggleGroup.tsx
+function ToggleGroup(props) {
+	const multiple = props.selectionMode === "multiple";
+	const [local, setLocal] = useState(props.defaultValue);
+	const ids = toggleIds(props.value !== void 0 ? props.value : local, props.items, multiple);
+	function update(keys) {
+		if (props.isDisabled) return;
+		const requested = new Set(Array.from(keys, String));
+		for (const item of props.items.filter((item) => item.isDisabled)) if (multiple && ids.includes(item.id)) requested.add(item.id);
+		else if (!ids.includes(item.id)) requested.delete(item.id);
+		const next = toggleIds([...requested], props.items, multiple);
+		if (next.length === ids.length && next.every((id, index) => id === ids[index])) return;
+		if (props.disallowEmptySelection && ids.length && !next.length) return;
+		const value = multiple ? next : next[0] ?? null;
+		setLocal(value);
+		if (props.selectionMode === "multiple") props.onChange?.(next);
+		else props.onChange?.(next[0] ?? null);
+	}
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir: props.dir,
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup$1, {
+			className: "toggle-group",
+			"aria-label": props.label,
+			dir: props.dir,
+			selectionMode: multiple ? "multiple" : "single",
+			selectedKeys: ids,
+			onSelectionChange: update,
+			disallowEmptySelection: props.disallowEmptySelection,
+			isDisabled: props.isDisabled,
+			orientation: props.orientation ?? "horizontal",
+			"data-variant": props.variant ?? "outline",
+			"data-size": props.size ?? "md",
+			"data-icon-only": props.isIconOnly || void 0,
+			children: props.items.map((item) => /* @__PURE__ */ jsxs(ToggleButton$1, {
+				id: item.id,
+				className: "toggle-group__item",
+				"aria-label": item.label,
+				isDisabled: props.isDisabled || item.isDisabled,
+				children: [props.renderIcon && /* @__PURE__ */ jsx("span", {
+					className: "toggle-group__icon",
+					"aria-hidden": "true",
+					children: props.renderIcon(item)
+				}), !props.isIconOnly && /* @__PURE__ */ jsx("span", { children: item.label })]
+			}, item.id))
+		})
+	});
+}
+//#endregion
+//#region src/date-range-model.ts
+function dateRangeLabels(locale = "id-ID") {
+	return locale.startsWith("id") ? {
+		title: "Pilih rentang tanggal",
+		start: "Tanggal mulai",
+		end: "Tanggal akhir",
+		apply: "Terapkan",
+		cancel: "Batal",
+		clear: "Kosongkan",
+		previousMonth: "Bulan sebelumnya",
+		nextMonth: "Bulan berikutnya",
+		presets: "Pilihan cepat",
+		placeholder: "Pilih tanggal",
+		incomplete: "Lengkapi tanggal mulai dan akhir.",
+		order: "Tanggal akhir harus setelah atau sama dengan tanggal mulai.",
+		bounds: "Tanggal berada di luar batas yang diizinkan.",
+		unavailable: "Rentang memuat tanggal yang tidak tersedia.",
+		length: "Durasi rentang tidak sesuai batas yang diizinkan.",
+		required: "Rentang tanggal wajib diisi."
+	} : {
+		title: "Select date range",
+		start: "Start date",
+		end: "End date",
+		apply: "Apply",
+		cancel: "Cancel",
+		clear: "Clear",
+		previousMonth: "Previous month",
+		nextMonth: "Next month",
+		presets: "Quick selections",
+		placeholder: "Choose dates",
+		incomplete: "Enter both start and end dates.",
+		order: "End date must be on or after start date.",
+		bounds: "Dates are outside the allowed limits.",
+		unavailable: "The range includes an unavailable date.",
+		length: "The range duration is outside the allowed limits.",
+		required: "A date range is required."
+	};
+}
+function validDate(value) {
+	if (!/^(?!0000)\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+	try {
+		return parseDate(value).toString() === value;
+	} catch {
+		return false;
+	}
+}
+function asDate(value) {
+	return value && validDate(value) ? parseDate(value) : void 0;
+}
+function currentDate() {
+	return today(getLocalTimeZone()).toString();
+}
+function rangeError(value, constraints = {}) {
+	if (!value) return null;
+	if (!validDate(value.start) || !validDate(value.end)) return "incomplete";
+	if (value.end < value.start) return "order";
+	if (constraints.minDate && value.start < constraints.minDate || constraints.maxDate && value.end > constraints.maxDate) return "bounds";
+	const start = parseDate(value.start), end = parseDate(value.end);
+	const days = end.calendar.toJulianDay(end) - start.calendar.toJulianDay(start) + 1;
+	if (constraints.minDays && days < constraints.minDays || constraints.maxDays && days > constraints.maxDays) return "length";
+	if (constraints.isDateUnavailable) for (let day = start; day.compare(end) <= 0; day = day.add({ days: 1 })) {
+		if (constraints.isDateUnavailable(day.toString())) return "unavailable";
+		if (day.compare(end) === 0) break;
+	}
+	return null;
+}
+function rangeText(value, locale = "id-ID") {
+	if (!value || !validDate(value.start) || !validDate(value.end)) return "";
+	const formatter = new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		timeZone: "UTC",
+		calendar: "gregory"
+	});
+	const date = (s) => parseDate(s).toDate("UTC");
+	return value.start === value.end ? formatter.format(date(value.start)) : `${formatter.format(date(value.start))} – ${formatter.format(date(value.end))}`;
+}
+function createDateRangePresets(referenceDate = currentDate(), locale = "id-ID", weekStartsOn = 1) {
+	const day = parseDate(referenceDate), week = startOfWeek(day, locale, weekStartsOn === 1 ? "mon" : "sun");
+	const id = locale.startsWith("id");
+	return [
+		{
+			id: "this-week",
+			label: id ? "Minggu ini" : "This Week",
+			start: week,
+			end: week.add({ days: 6 })
+		},
+		{
+			id: "last-week",
+			label: id ? "Minggu lalu" : "Last Week",
+			start: week.subtract({ days: 7 }),
+			end: week.subtract({ days: 1 })
+		},
+		{
+			id: "last-7-days",
+			label: id ? "7 hari terakhir" : "Last 7 Days",
+			start: day.subtract({ days: 6 }),
+			end: day
+		},
+		{
+			id: "last-30-days",
+			label: id ? "30 hari terakhir" : "Last 30 Days",
+			start: day.subtract({ days: 29 }),
+			end: day
+		},
+		{
+			id: "this-month",
+			label: id ? "Bulan ini" : "Current Month",
+			start: startOfMonth(day),
+			end: endOfMonth(day)
+		},
+		{
+			id: "next-month",
+			label: id ? "Bulan depan" : "Next Month",
+			start: startOfMonth(day.add({ months: 1 })),
+			end: endOfMonth(day.add({ months: 1 }))
+		}
+	].map(({ id, label, start, end }) => ({
+		id,
+		label,
+		value: {
+			start: start.toString(),
+			end: end.toString()
+		}
+	}));
+}
+//#endregion
+//#region src/DateRangePicker.tsx
+var empty = () => ({
+	start: "",
+	end: ""
+});
+function CalendarContent({ onPending, dir, children }) {
+	const state = useContext(RangeCalendarStateContext);
+	const { direction } = useLocale();
+	const pending = !!state?.anchorDate;
+	useEffect(() => onPending(pending), [pending, onPending]);
+	return /* @__PURE__ */ jsx("div", {
+		onKeyDownCapture: (event) => {
+			if (!state || !dir || dir === direction || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || !["ArrowLeft", "ArrowRight"].includes(event.key) || !event.target.closest(".date-range__day")) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (event.key === "ArrowRight" === (dir === "rtl")) state.focusPreviousDay();
+			else state.focusNextDay();
+		},
+		children
+	});
+}
+function DateRangePicker(props) {
+	const { label, locale = "id-ID", dir, size = "md", variant = "primary", fullWidth = true, hideLabel = false, visibleMonths = 2, weekStartsOn = 1, display = "popover", showInputs = true, presets = [], isDisabled = false, isReadOnly = false, isRequired = false } = props;
+	const labels = {
+		...dateRangeLabels(locale),
+		...props.labels
+	};
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const committed = props.value !== void 0 ? props.value : local;
+	const start = committed?.start ?? "", end = committed?.end ?? "";
+	const [draft, setDraft] = useState({
+		start,
+		end
+	});
+	const initialFocus = () => {
+		const date = asDate(start) ?? asDate(props.referenceDate) ?? asDate(currentDate());
+		const min = asDate(props.minDate), max = asDate(props.maxDate);
+		return min && date.compare(min) < 0 ? min : max && date.compare(max) > 0 ? max : date;
+	};
+	const [focused, setFocused] = useState(initialFocus);
+	const [formError, setFormError] = useState(false);
+	const [pending, setPending] = useState(false), [calendarKey, setCalendarKey] = useState(0);
+	const trigger = useRef(null);
+	const id = useId();
+	const disclosure = useDisclosure(props.open, props.defaultOpen, props.onOpenChange);
+	const visible = disclosure.visible && !isDisabled;
+	useEffect(() => setDraft({
+		start,
+		end
+	}), [start, end]);
+	function replaceDraft(next) {
+		setDraft(next);
+		setPending(false);
+		setCalendarKey((k) => k + 1);
+	}
+	function resetDraft() {
+		replaceDraft({
+			start,
+			end
+		});
+		setFocused(initialFocus());
+	}
+	function changeOpen(next) {
+		if (isDisabled && next) return;
+		resetDraft();
+		disclosure.change(next);
+	}
+	const nullableDraft = draft.start || draft.end ? draft : null;
+	const errorCode = pending ? "incomplete" : rangeError(nullableDraft, props) ?? (isRequired && !nullableDraft ? "required" : null);
+	const error = errorCode ? labels[errorCode] : void 0;
+	const committedError = rangeError(committed, props);
+	const outerError = props.isInvalid || committedError || formError;
+	const matchingPreset = presets.find((p) => p.value.start === start && p.value.end === end);
+	const text = committed ? props.formatRange?.(committed, locale) ?? matchingPreset?.label ?? rangeText(committed, locale) : labels.placeholder;
+	const feedbackId = outerError ? `${id}-error` : props.description ? `${id}-description` : void 0;
+	function apply() {
+		if (isDisabled || isReadOnly || errorCode) return;
+		const next = nullableDraft ? { ...nullableDraft } : null;
+		setLocal(next);
+		setFormError(false);
+		props.onChange?.(next);
+		props.onApply?.(next);
+		disclosure.change(false);
+	}
+	function edit(part, value) {
+		if (isDisabled || isReadOnly) return;
+		replaceDraft({
+			...draft,
+			[part]: value
+		});
+		if (asDate(value)) setFocused(asDate(value));
+	}
+	const calendarValue = asDate(draft.start) && asDate(draft.end) && draft.start <= draft.end ? {
+		start: asDate(draft.start),
+		end: asDate(draft.end)
+	} : null;
+	const panel = /* @__PURE__ */ jsxs("div", {
+		className: "date-range__content",
+		"data-readonly": isReadOnly || void 0,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "date-range__intro",
+				children: [/* @__PURE__ */ jsx("h2", {
+					id: `${id}-title`,
+					children: labels.title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "date-range__summary",
+					"aria-live": "polite",
+					children: pending ? labels.incomplete : rangeText(nullableDraft, locale) || labels.incomplete
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "date-range__body",
+				children: [presets.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "date-range__presets",
+					role: "group",
+					"aria-label": labels.presets,
+					children: presets.map((p) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "date-range__preset",
+						disabled: isDisabled || isReadOnly || !!rangeError(p.value, props),
+						"aria-pressed": !pending && draft.start === p.value.start && draft.end === p.value.end,
+						onClick: () => {
+							replaceDraft({ ...p.value });
+							setFocused(asDate(p.value.start));
+						},
+						children: p.label
+					}, p.id))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "date-range__main",
+					children: [
+						showInputs && /* @__PURE__ */ jsx("div", {
+							className: "date-range__inputs",
+							children: ["start", "end"].map((part) => /* @__PURE__ */ jsxs("label", {
+								className: "date-range__field",
+								children: [/* @__PURE__ */ jsx("span", { children: labels[part] }), /* @__PURE__ */ jsx("input", {
+									type: "date",
+									form: "",
+									value: draft[part],
+									min: props.minDate,
+									max: props.maxDate,
+									disabled: isDisabled,
+									readOnly: isReadOnly,
+									"aria-invalid": !!errorCode,
+									"aria-describedby": error ? `${id}-draft-error` : void 0,
+									onChange: (e) => edit(part, e.target.value)
+								})]
+							}, part))
+						}),
+						props.showMonthYearPicker && /* @__PURE__ */ jsxs("div", {
+							className: "date-range__jump",
+							children: [/* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: locale.startsWith("id") ? "Bulan" : "Month" }), /* @__PURE__ */ jsx("select", {
+								form: "",
+								disabled: isDisabled,
+								"aria-label": locale.startsWith("id") ? "Bulan" : "Month",
+								value: focused.month,
+								onChange: (e) => setFocused(focused.set({ month: Number(e.target.value) })),
+								children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx("option", {
+									value: i + 1,
+									children: new Intl.DateTimeFormat(locale, {
+										month: "long",
+										timeZone: "UTC",
+										calendar: "gregory"
+									}).format(focused.set({
+										month: i + 1,
+										day: 1
+									}).toDate("UTC"))
+								}, i))
+							})] }), /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: locale.startsWith("id") ? "Tahun" : "Year" }), /* @__PURE__ */ jsx("input", {
+								type: "number",
+								form: "",
+								disabled: isDisabled,
+								min: asDate(props.minDate)?.year ?? 1,
+								max: asDate(props.maxDate)?.year ?? 9999,
+								defaultValue: focused.year,
+								onBlur: (e) => {
+									const year = Number(e.target.value);
+									if (Number.isInteger(year) && year >= 1 && year <= 9999) setFocused(focused.set({ year }));
+									else e.target.value = String(focused.year);
+								}
+							}, focused.year)] })]
+						}),
+						/* @__PURE__ */ jsx(RangeCalendar, {
+							dir,
+							className: "date-range__calendar",
+							"aria-label": labels.title,
+							value: calendarValue,
+							focusedValue: focused,
+							onFocusChange: setFocused,
+							createCalendar: () => new GregorianCalendar(),
+							onChange: (v) => {
+								if (v) setDraft({
+									start: v.start.toString(),
+									end: v.end.toString()
+								});
+							},
+							visibleDuration: { months: visibleMonths },
+							firstDayOfWeek: weekStartsOn === 1 ? "mon" : "sun",
+							pageBehavior: "single",
+							minValue: asDate(props.minDate),
+							maxValue: asDate(props.maxDate),
+							isDisabled,
+							isReadOnly,
+							isDateUnavailable: props.isDateUnavailable ? (d) => props.isDateUnavailable(d.toString()) : void 0,
+							children: /* @__PURE__ */ jsxs(CalendarContent, {
+								onPending: setPending,
+								dir,
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "date-range__navigation",
+									children: [/* @__PURE__ */ jsx(Button$1, {
+										slot: "previous",
+										className: "date-range__nav date-range__nav--previous",
+										"aria-label": labels.previousMonth,
+										children: /* @__PURE__ */ jsx(ChevronIcon, {})
+									}), /* @__PURE__ */ jsx(Button$1, {
+										slot: "next",
+										className: "date-range__nav date-range__nav--next",
+										"aria-label": labels.nextMonth,
+										children: /* @__PURE__ */ jsx(ChevronIcon, {})
+									})]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "date-range__months",
+									children: Array.from({ length: visibleMonths }, (_, i) => /* @__PURE__ */ jsxs("div", {
+										className: "date-range__month",
+										children: [/* @__PURE__ */ jsx(CalendarHeading, {
+											offset: { months: i },
+											className: "date-range__heading"
+										}), /* @__PURE__ */ jsxs(CalendarGrid, {
+											offset: { months: i },
+											className: "date-range__grid",
+											weekdayStyle: "short",
+											children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
+												className: "date-range__weekday",
+												children: day
+											}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
+												date,
+												className: "date-range__day"
+											}) })]
+										})]
+									}, i))
+								})]
+							})
+						}, calendarKey),
+						/* @__PURE__ */ jsx("div", {
+							className: "date-range__validation",
+							"aria-live": "polite",
+							children: error && /* @__PURE__ */ jsx("p", {
+								id: `${id}-draft-error`,
+								role: "alert",
+								children: error
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("footer", {
+				className: "date-range__footer",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "button button--ghost button--sm",
+					disabled: isDisabled || isReadOnly,
+					onClick: () => replaceDraft(empty()),
+					children: labels.clear
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "button button--secondary button--sm",
+					onClick: () => changeOpen(false),
+					children: labels.cancel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "button button--primary button--sm",
+					disabled: isDisabled || isReadOnly || !!errorCode,
+					onClick: apply,
+					children: labels.apply
+				})] })]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale: new Intl.Locale(locale, {
+			calendar: "gregory",
+			...dir ? { script: dir === "rtl" ? "Arab" : "Latn" } : {}
+		}).toString(),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: [
+				"date-range",
+				`date-range--${size}`,
+				`date-range--${variant}`,
+				!fullWidth && "date-range--fit",
+				hideLabel && "date-range--label-hidden",
+				props.triggerDisplay === "icon" && "date-range--icon-trigger"
+			].filter(Boolean).join(" "),
+			dir,
+			"data-disabled": isDisabled || void 0,
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					id: `${id}-label`,
+					className: "date-range__label",
+					children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: " *"
+					})]
+				}),
+				display === "inline" ? /* @__PURE__ */ jsx("section", {
+					className: "date-range__panel date-range__inline",
+					"aria-labelledby": `${id}-title`,
+					dir,
+					children: panel
+				}) : /* @__PURE__ */ jsxs(DialogTrigger, {
+					isOpen: visible,
+					onOpenChange: changeOpen,
+					children: [/* @__PURE__ */ jsxs(Button$1, {
+						ref: trigger,
+						className: "date-range__trigger",
+						isDisabled,
+						"aria-labelledby": `${id}-label ${id}-value`,
+						"aria-describedby": feedbackId,
+						"aria-invalid": !!outerError,
+						children: [
+							/* @__PURE__ */ jsxs("svg", {
+								className: "date-range__icon",
+								"aria-hidden": "true",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.8",
+								strokeLinecap: "round",
+								children: [/* @__PURE__ */ jsx("rect", {
+									x: "3",
+									y: "5",
+									width: "18",
+									height: "16",
+									rx: "2"
+								}), /* @__PURE__ */ jsx("path", { d: "M7 3v4m10-4v4M3 10h18" })]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								id: `${id}-value`,
+								className: "date-range__value",
+								"data-placeholder": !committed || void 0,
+								children: text
+							}),
+							/* @__PURE__ */ jsx(ChevronIcon, { className: "date-range__chevron" })
+						]
+					}), /* @__PURE__ */ jsx(Popover$2, {
+						className: "date-range__panel",
+						placement: "bottom start",
+						offset: 8,
+						containerPadding: 16,
+						dir,
+						children: /* @__PURE__ */ jsx(Dialog$1, {
+							className: "date-range__dialog",
+							"aria-labelledby": `${id}-title`,
+							children: panel
+						})
+					})]
+				}),
+				props.description && /* @__PURE__ */ jsx("span", {
+					id: `${id}-description`,
+					className: "input__description",
+					children: props.description
+				}),
+				outerError && /* @__PURE__ */ jsx("span", {
+					id: `${id}-error`,
+					className: "input__error",
+					role: "alert",
+					children: props.errorMessage ?? (committedError ? labels[committedError] : labels.required)
+				}),
+				props.name && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: `${props.name}.start`,
+					value: start,
+					disabled: isDisabled
+				}), /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: `${props.name}.end`,
+					value: end,
+					disabled: isDisabled
+				})] }),
+				/* @__PURE__ */ jsx(SelectionValidation, {
+					hasValue: !!committed && !committedError,
+					required: isRequired || !!committedError,
+					disabled: isDisabled,
+					onInvalid: () => {
+						setFormError(true);
+						trigger.current?.focus();
+					},
+					onResetStart: () => {},
+					onReset: (cancelled) => {
+						if (!cancelled) {
+							if (props.value === void 0) setLocal(props.defaultValue ?? null);
+							setFormError(false);
+							changeOpen(false);
+						}
+					}
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/toast-model.ts
+var EMPTY = Object.freeze([]);
+var messageOptions = (message) => typeof message === "string" ? { title: message } : message;
+var milliseconds = (value, fallback) => Number.isFinite(value) && value >= 0 ? value : fallback;
+/** Complete required notifications/cleanup before reporting user callback failures. */
+var complete = (operations) => {
+	const errors = [];
+	for (const operation of operations) try {
+		operation();
+	} catch (error) {
+		errors.push(error);
+	}
+	if (errors.length === 1) throw errors[0];
+	if (errors.length > 1) throw new AggregateError(errors, "Toast lifecycle callbacks failed.");
+};
+/** Create per application/provider; no browser globals or timers are used until attached. */
+function createToastManager(options = {}) {
+	const maxVisible = Math.max(1, Math.floor(options.maxVisible ?? 3));
+	const maxPending = Math.max(0, Math.floor(options.maxPending ?? 50));
+	const duration = milliseconds(options.duration ?? 5e3, 5e3);
+	const exitDuration = milliseconds(options.exitDuration ?? 200, 200);
+	const records = /* @__PURE__ */ new Map();
+	const visible = [];
+	const pending = [];
+	const listeners = /* @__PURE__ */ new Set();
+	const pauses = /* @__PURE__ */ new Map();
+	let snapshot = EMPTY;
+	let attached = false;
+	let disposed = false;
+	let sequence = 0;
+	let generation = 0;
+	const paused = () => !attached || pauses.size > 0;
+	const freeze = (entry) => Object.freeze({
+		...entry,
+		action: entry.action ? Object.freeze({ ...entry.action }) : void 0,
+		cancel: entry.cancel ? Object.freeze({ ...entry.cancel }) : void 0
+	});
+	const publish = () => {
+		const next = visible.map((id) => records.get(id).entry);
+		if (next.length === snapshot.length && next.every((entry, index) => entry === snapshot[index])) return;
+		snapshot = Object.freeze(next);
+		complete([...listeners]);
+	};
+	const stop = (record) => {
+		if (record.timer !== void 0) clearTimeout(record.timer);
+		record.timer = void 0;
+		if (record.startedAt !== null) {
+			const elapsed = Math.max(0, Date.now() - record.startedAt);
+			if (record.entry.state === "closing") record.exitRemaining = Math.max(0, record.exitRemaining - elapsed);
+			else record.entry = freeze({
+				...record.entry,
+				remaining: Math.max(0, record.entry.remaining - elapsed)
+			});
+		}
+		record.startedAt = null;
+	};
+	const promote = () => {
+		while (visible.length < maxVisible && pending.length) {
+			const id = pending.shift();
+			const record = records.get(id);
+			visible.push(id);
+			record.entry = freeze({
+				...record.entry,
+				visibleAt: Date.now(),
+				paused: paused()
+			});
+			start(record);
+		}
+	};
+	const remove = (id) => {
+		const record = records.get(id);
+		if (!record) return;
+		stop(record);
+		records.delete(id);
+		const index = visible.indexOf(id);
+		if (index >= 0) visible.splice(index, 1);
+		const waiting = pending.indexOf(id);
+		if (waiting >= 0) pending.splice(waiting, 1);
+		promote();
+		publish();
+	};
+	const start = (record) => {
+		if (!attached || record.entry.visibleAt === null || record.timer !== void 0) return;
+		const closing = record.entry.state === "closing";
+		if (!closing && (paused() || record.entry.isLoading || record.entry.duration === 0)) return;
+		record.startedAt = Date.now();
+		record.timer = setTimeout(() => {
+			record.timer = void 0;
+			record.startedAt = null;
+			if (closing) remove(record.entry.id);
+			else manager.dismiss(record.entry.id, "timeout");
+		}, closing ? record.exitRemaining : record.entry.remaining);
+	};
+	const refreshPause = () => {
+		for (const id of visible) {
+			const record = records.get(id);
+			stop(record);
+			record.entry = freeze({
+				...record.entry,
+				paused: paused() || record.entry.state === "closing"
+			});
+			start(record);
+		}
+		publish();
+	};
+	const update = (id, changes, invalidate, onGeneration) => {
+		const record = records.get(id);
+		if (!record || record.entry.state === "closing" || disposed) return false;
+		stop(record);
+		const before = record.entry;
+		const settled = before.isLoading && changes.isLoading === false;
+		const nextDuration = changes.duration !== void 0 ? milliseconds(changes.duration, duration) : settled ? duration : before.duration;
+		record.entry = freeze({
+			...before,
+			...changes,
+			id,
+			tone: changes.tone ?? before.tone,
+			duration: nextDuration,
+			isLoading: changes.isLoading ?? before.isLoading,
+			remaining: changes.duration !== void 0 || settled ? nextDuration : before.remaining,
+			generation: invalidate ? ++generation : before.generation
+		});
+		onGeneration?.(record.entry.generation);
+		start(record);
+		publish();
+		return true;
+	};
+	const add = (value, onGeneration) => {
+		if (disposed) return null;
+		if (value.id !== void 0 && records.has(value.id)) return update(value.id, value, true, onGeneration) ? value.id : null;
+		if (visible.length >= maxVisible && pending.length >= maxPending) return null;
+		let id = value.id;
+		if (id === void 0) do
+			id = `toast-${++sequence}`;
+		while (records.has(id));
+		const entry = freeze({
+			...value,
+			id,
+			tone: value.tone ?? "neutral",
+			duration: milliseconds(value.duration ?? duration, duration),
+			isLoading: value.isLoading ?? false,
+			generation: ++generation,
+			state: "open",
+			createdAt: Date.now(),
+			visibleAt: visible.length < maxVisible ? Date.now() : null,
+			remaining: milliseconds(value.duration ?? duration, duration),
+			paused: paused()
+		});
+		const record = {
+			entry,
+			startedAt: null,
+			exitRemaining: exitDuration
+		};
+		records.set(id, record);
+		if (visible.length < maxVisible) {
+			visible.push(id);
+			start(record);
+		} else pending.push(id);
+		onGeneration?.(entry.generation);
+		publish();
+		return id;
+	};
+	const manager = {
+		add,
+		update: (id, changes) => update(id, changes, true),
+		dismiss(id, reason = "dismiss") {
+			const record = records.get(id);
+			if (!record || record.entry.state === "closing") return;
+			stop(record);
+			record.entry = freeze({
+				...record.entry,
+				state: "closing",
+				paused: true,
+				remaining: reason === "timeout" ? 0 : record.entry.remaining
+			});
+			complete([() => {
+				if (record.entry.visibleAt === null) remove(id);
+				else {
+					start(record);
+					publish();
+				}
+			}, () => record.entry.onClose?.(reason)]);
+		},
+		clear(reason = "clear") {
+			complete([...pending, ...visible].map((id) => () => manager.dismiss(id, reason)));
+		},
+		pause(reason) {
+			if (disposed) return;
+			pauses.set(reason, (pauses.get(reason) ?? 0) + 1);
+			if (pauses.size === 1 && pauses.get(reason) === 1) refreshPause();
+		},
+		resume(reason) {
+			const count = pauses.get(reason);
+			if (!count || disposed) return;
+			if (count === 1) pauses.delete(reason);
+			else pauses.set(reason, count - 1);
+			if (!pauses.size) refreshPause();
+		},
+		attach() {
+			if (disposed) throw new Error("Cannot attach a disposed ToastManager.");
+			if (attached) throw new Error("A ToastManager may attach to only one provider.");
+			attached = true;
+			try {
+				refreshPause();
+			} catch (error) {
+				attached = false;
+				complete([() => {
+					throw error;
+				}, refreshPause]);
+			}
+			let detached = false;
+			return () => {
+				if (detached || disposed) return;
+				detached = true;
+				attached = false;
+				refreshPause();
+			};
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			attached = false;
+			const closing = [...records.values()].filter((record) => record.entry.state === "open");
+			for (const record of records.values()) stop(record);
+			records.clear();
+			visible.length = 0;
+			pending.length = 0;
+			pauses.clear();
+			complete([
+				publish,
+				() => listeners.clear(),
+				...closing.map((record) => () => record.entry.onClose?.("unmount"))
+			]);
+		},
+		subscribe(listener) {
+			if (!disposed) listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getSnapshot: () => snapshot,
+		getServerSnapshot: () => EMPTY,
+		promise(task, messages, promiseOptions = {}) {
+			let expected;
+			const id = add({
+				...promiseOptions,
+				...messageOptions(messages.loading),
+				isLoading: true
+			}, (value) => {
+				expected = value;
+			});
+			const settle = (message, tone) => {
+				if (id === null || records.get(id)?.entry.generation !== expected || records.get(id)?.entry.state !== "open") return;
+				const content = typeof message === "function" ? message() : message;
+				if (records.get(id)?.entry.generation !== expected || records.get(id)?.entry.state !== "open") return;
+				update(id, {
+					tone,
+					duration: promiseOptions.duration ?? duration,
+					...messageOptions(content),
+					isLoading: false
+				}, false);
+			};
+			return {
+				id,
+				promise: task.then((value) => {
+					const message = messages.success;
+					settle(typeof message === "function" ? () => message(value) : message, "success");
+					return value;
+				}, (error) => {
+					const message = messages.error;
+					settle(typeof message === "function" ? () => message(error) : message, "danger");
+					throw error;
+				})
+			};
+		}
+	};
+	return manager;
+}
+//#endregion
+//#region src/Toast.tsx
+/** Keeps upstream accessibility/focus behavior while Kazee owns every timer and queue decision. */
+var QueueAdapter = class extends UNSTABLE_ToastQueue {
+	manager;
+	regionPaused = false;
+	constructor(manager) {
+		super();
+		this.manager = manager;
+		this.refresh();
+	}
+	refresh() {
+		this.visibleToasts = this.manager.getSnapshot().map((content) => ({
+			key: content.id,
+			content
+		}));
+	}
+	subscribe(listener) {
+		return this.manager.subscribe(() => {
+			this.refresh();
+			listener();
+		});
+	}
+	add(content) {
+		return this.manager.add(content) ?? "";
+	}
+	close(key) {
+		this.manager.dismiss(key);
+	}
+	clear() {
+		this.manager.clear();
+	}
+	pauseAll() {
+		if (!this.regionPaused) {
+			this.regionPaused = true;
+			this.manager.pause("region");
+		}
+	}
+	resumeAll() {
+		if (this.regionPaused) {
+			this.regionPaused = false;
+			this.manager.resume("region");
+		}
+	}
+};
+var ToastContext = createContext(null);
+function ToastProvider({ children, manager: suppliedManager, placement = "bottom-end", label = "Notifikasi / Notifications", closeLabel = "Tutup notifikasi / Close notification", hotkey = ["Alt", "t"], dir = "ltr", showProgress = false, swipeThreshold = 50, renderToast }) {
+	const [ownedManager] = useState(() => createToastManager());
+	const manager = suppliedManager ?? ownedManager;
+	const queue = useMemo(() => new QueueAdapter(manager), [manager]);
+	const region = useRef(null);
+	const entries = useSyncExternalStore(manager.subscribe, manager.getSnapshot, manager.getServerSnapshot);
+	const positions = useRef(/* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		const nodes = region.current?.querySelectorAll(".toast");
+		const previous = positions.current;
+		const next = /* @__PURE__ */ new Map();
+		const animations = [];
+		const regionTop = region.current?.getBoundingClientRect().top ?? 0;
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		for (const node of nodes ?? []) {
+			const id = node.dataset.toastId;
+			if (!id) continue;
+			const top = node.offsetTop + regionTop;
+			next.set(id, top);
+			const before = previous.get(id);
+			if (before !== void 0 && before !== top && node.dataset.state === "open" && !reducedMotion && node.animate) {
+				const style = getComputedStyle(node);
+				const token = style.getPropertyValue("--ds-motion-duration-normal").trim();
+				const duration = token.endsWith("ms") ? parseFloat(token) : parseFloat(token) * 1e3;
+				animations.push(node.animate([{ translate: `0 ${before - top}px` }, { translate: "0 0" }], {
+					duration: Number.isFinite(duration) ? duration : 160,
+					easing: style.getPropertyValue("--ds-motion-ease-standard").trim() || "ease-out"
+				}));
+			}
+		}
+		positions.current = next;
+		return () => {
+			for (const animation of animations) animation.cancel();
+		};
+	}, [entries]);
+	const lastFocused = useRef(null);
+	const lifetime = useRef({ generation: 0 });
+	const hotkeySignature = hotkey.join("+");
+	useEffect(() => {
+		const keys = hotkeySignature ? hotkeySignature.split("+") : [];
+		const detach = manager.attach();
+		let documentPaused = false;
+		let windowPaused = false;
+		const visibility = () => {
+			if (document.hidden && !documentPaused) {
+				documentPaused = true;
+				manager.pause("document");
+			} else if (!document.hidden && documentPaused) {
+				documentPaused = false;
+				manager.resume("document");
+			}
+		};
+		const blur = () => {
+			if (!windowPaused) {
+				windowPaused = true;
+				manager.pause("window");
+			}
+		};
+		const focus = () => {
+			if (windowPaused) {
+				windowPaused = false;
+				manager.resume("window");
+			}
+		};
+		visibility();
+		const keydown = (event) => {
+			if (event.defaultPrevented) return;
+			if (event.key === "Escape" && region.current?.contains(event.target)) {
+				const target = event.target;
+				if (target.closest("input,textarea,select,[contenteditable=\"true\"]")) return;
+				const focused = target.closest(".toast[data-state=\"open\"]");
+				const latest = [...manager.getSnapshot()].reverse().find((entry) => entry.state === "open");
+				const id = focused?.dataset.toastId ?? latest?.id;
+				if (id) {
+					event.preventDefault();
+					event.stopPropagation();
+					manager.dismiss(id);
+				}
+				return;
+			}
+			if (!keys.length) return;
+			const key = keys[keys.length - 1].toLowerCase();
+			const modifiers = keys.slice(0, -1).map((value) => value.toLowerCase());
+			if (event.key.toLowerCase() === key && event.altKey === modifiers.includes("alt") && event.ctrlKey === modifiers.includes("control") && event.metaKey === modifiers.includes("meta") && event.shiftKey === modifiers.includes("shift")) {
+				const target = region.current?.querySelector(".toast[data-state=\"open\"]");
+				if (target) {
+					event.preventDefault();
+					target.focus();
+				}
+			}
+		};
+		const focusIn = (event) => {
+			if (region.current?.contains(event.target) && !region.current.contains(event.relatedTarget)) lastFocused.current = event.relatedTarget;
+		};
+		document.addEventListener("focusin", focusIn);
+		document.addEventListener("visibilitychange", visibility);
+		document.addEventListener("keydown", keydown);
+		window.addEventListener("blur", blur);
+		window.addEventListener("focus", focus);
+		return () => {
+			document.removeEventListener("focusin", focusIn);
+			document.removeEventListener("visibilitychange", visibility);
+			document.removeEventListener("keydown", keydown);
+			window.removeEventListener("blur", blur);
+			window.removeEventListener("focus", focus);
+			detach();
+			if (documentPaused) manager.resume("document");
+			if (windowPaused) manager.resume("window");
+			queue.resumeAll();
+		};
+	}, [
+		manager,
+		hotkeySignature,
+		queue
+	]);
+	useEffect(() => {
+		const lifecycle = lifetime.current;
+		const token = ++lifecycle.generation;
+		return () => {
+			queueMicrotask(() => {
+				if (lifecycle.generation === token) ownedManager.dispose();
+			});
+		};
+	}, [ownedManager]);
+	const context = {
+		manager,
+		closeLabel,
+		placement,
+		dir,
+		showProgress,
+		swipeThreshold,
+		restoreFocus: () => {
+			const next = region.current?.querySelector(".toast[data-state=\"open\"]");
+			if (next) next.focus();
+			else if (lastFocused.current?.isConnected) lastFocused.current.focus();
+		}
+	};
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: context,
+		children: [children, /* @__PURE__ */ jsx(I18nProvider$1, {
+			locale: dir === "rtl" ? "ar" : "en",
+			children: /* @__PURE__ */ jsx(UNSTABLE_ToastRegion, {
+				queue,
+				ref: region,
+				className: "toast-region",
+				"data-placement": placement,
+				"aria-label": label,
+				"aria-keyshortcuts": hotkey.length ? hotkey.join("+") : void 0,
+				children: /* @__PURE__ */ jsx(UNSTABLE_ToastList, {
+					className: "toast-list",
+					children: ({ toast }) => /* @__PURE__ */ jsx(Fragment$1, { children: renderToast ? renderToast(toast.content) : /* @__PURE__ */ jsx(Toast, { entry: toast.content }) })
+				})
+			})
+		})]
+	});
+}
+function useToast() {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider.");
+	return context.manager;
+}
+function Indicator({ entry }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: "20",
+		height: "20",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		"aria-hidden": "true",
+		children: entry.isLoading ? /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "8",
+			strokeDasharray: "36 14"
+		}) : entry.tone === "success" ? /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) : entry.tone === "warning" || entry.tone === "danger" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "m12 3 10 18H2L12 3Z" }), /* @__PURE__ */ jsx("path", { d: "M12 9v5m0 3v1" })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 10v7m0-11v1" })] })
+	});
+}
+function Toast({ entry, indicator, children, className }) {
+	const actionDescriptionId = useId();
+	const cancelDescriptionId = useId();
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("Toast must be used within a ToastProvider region.");
+	const { manager, closeLabel, placement, dir, showProgress, swipeThreshold, restoreFocus } = context;
+	const ref = useRef(null);
+	const drag = useRef(null);
+	const [offset, setOffset] = useState(0);
+	const [swipe, setSwipe] = useState();
+	const closing = entry.state === "closing";
+	const direction = (placement.endsWith("start") ? -1 : 1) * (dir === "rtl" ? -1 : 1);
+	useEffect(() => {
+		if (closing && ref.current?.contains(document.activeElement)) restoreFocus?.();
+	}, [closing, restoreFocus]);
+	const action = (item, reason) => {
+		item.onAction();
+		if (item.dismiss !== false) manager.dismiss(entry.id, reason);
+	};
+	const finishSwipe = (commit) => {
+		const current = drag.current;
+		drag.current = null;
+		if (!current) return;
+		if (current && !current.cancelled) manager.resume("swipe");
+		if (commit && !current.cancelled && current.offset * direction >= swipeThreshold) {
+			setSwipe("end");
+			setOffset(current.offset);
+			manager.dismiss(entry.id, "swipe");
+		} else {
+			setSwipe("cancel");
+			setOffset(0);
+		}
+	};
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const handlers = {
+			pointerdown: (event) => {
+				if (closing || drag.current || event.button !== 0 || event.target.closest("button,a,input,textarea,select,[role=\"button\"],[contenteditable=\"true\"]")) return;
+				if (event.pointerType === "mouse") event.preventDefault();
+				drag.current = {
+					x: event.clientX,
+					y: event.clientY,
+					id: event.pointerId,
+					cancelled: false,
+					offset: 0
+				};
+				ref.current?.setPointerCapture?.(event.pointerId);
+				manager.pause("swipe");
+			},
+			selectstart: (event) => {
+				if (drag.current && !drag.current.cancelled) event.preventDefault();
+			},
+			dragstart: (event) => {
+				if (drag.current && !drag.current.cancelled) event.preventDefault();
+			},
+			pointermove: (event) => {
+				const current = drag.current;
+				if (!current || current.id !== event.pointerId || current.cancelled) return;
+				const x = event.clientX - current.x;
+				const y = event.clientY - current.y;
+				if (Math.abs(y) > Math.abs(x) && Math.abs(y) > 8) {
+					current.cancelled = true;
+					setOffset(0);
+					manager.resume("swipe");
+					return;
+				}
+				if (Math.abs(x) > 8) {
+					current.offset = Math.max(0, x * direction) * direction;
+					setSwipe("move");
+					setOffset(current.offset);
+				}
+			},
+			pointerup: () => finishSwipe(true),
+			pointercancel: () => finishSwipe(false),
+			lostpointercapture: () => {
+				if (drag.current) finishSwipe(false);
+			}
+		};
+		for (const [name, handler] of Object.entries(handlers)) node.addEventListener(name, handler);
+		return () => {
+			for (const [name, handler] of Object.entries(handlers)) node.removeEventListener(name, handler);
+		};
+	});
+	useEffect(() => () => {
+		if (drag.current) {
+			const active = !drag.current.cancelled;
+			drag.current = null;
+			if (active) manager.resume("swipe");
+		}
+	}, [manager]);
+	return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
+		toast: {
+			key: entry.id,
+			content: entry
+		},
+		ref,
+		className: `toast${className ? ` ${className}` : ""}`,
+		"data-toast-id": entry.id,
+		"data-tone": entry.tone,
+		"data-loading": entry.isLoading || void 0,
+		"data-state": entry.state,
+		"data-placement": placement,
+		"data-paused": entry.paused || void 0,
+		"data-swipe": swipe,
+		inert: closing || void 0,
+		"aria-hidden": closing || void 0,
+		style: {
+			"--toast-swipe-x": `${offset}px`,
+			touchAction: "pan-y"
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "toast__indicator",
+				"aria-hidden": "true",
+				children: indicator ?? /* @__PURE__ */ jsx(Indicator, { entry })
+			}),
+			/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
+				className: "toast__body",
+				role: "status",
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ jsx(Text$3, {
+						slot: "title",
+						className: "toast__title",
+						children: entry.title
+					}),
+					entry.description && /* @__PURE__ */ jsx(Text$3, {
+						slot: "description",
+						className: "toast__description",
+						children: entry.description
+					}),
+					children,
+					(entry.action || entry.cancel) && /* @__PURE__ */ jsxs("div", {
+						className: "toast__actions",
+						children: [
+							entry.action && /* @__PURE__ */ jsx("span", {
+								id: actionDescriptionId,
+								hidden: true,
+								children: entry.action.altText
+							}),
+							entry.cancel && /* @__PURE__ */ jsx("span", {
+								id: cancelDescriptionId,
+								hidden: true,
+								children: entry.cancel.altText
+							}),
+							entry.action && /* @__PURE__ */ jsx(Button$5, {
+								className: "toast__action",
+								"aria-describedby": actionDescriptionId,
+								isDisabled: closing,
+								onPress: () => action(entry.action, "action"),
+								children: entry.action.label
+							}),
+							entry.cancel && /* @__PURE__ */ jsx(Button$5, {
+								className: "toast__action",
+								"data-cancel": true,
+								"aria-describedby": cancelDescriptionId,
+								isDisabled: closing,
+								onPress: () => action(entry.cancel, "cancel"),
+								children: entry.cancel.label
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Button$5, {
+				slot: "close",
+				className: "toast__close",
+				"aria-label": closeLabel,
+				isDisabled: closing,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					width: "16",
+					height: "16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M6 18 18 6" })
+				})
+			}),
+			showProgress && entry.duration > 0 && !entry.isLoading && /* @__PURE__ */ jsx("span", {
+				className: "toast__progress",
+				"aria-hidden": "true",
+				style: {
+					"--toast-progress": entry.remaining / entry.duration,
+					"--toast-remaining": `${entry.remaining}ms`
+				}
+			}, `${entry.generation}-${entry.remaining}-${entry.paused}`)
+		]
+	});
+}
+//#endregion
+export { Alert, Badge, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, Card, Chart, Checkbox, Combobox, DataTable, DateRangePicker, Dialog, DropdownMenu, Empty, Field, Form, Input, Label, Listbox, NumberField, Pagination, Popover, RadioGroup, Select, SelectGroup, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, Toast, ToastProvider, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, createDateRangePresets, createToastManager, rangeText as formatDateRange, useToast };
+
+//# sourceMappingURL=index.js.map