@marigold/components 15.4.3 → 16.0.1

package/dist/index.js

@@ -144,8 +144,11 @@ const AccordionItem = ({ children, disabled, expanded,...props }) => {
 const AccordionPanel = ({ children }) => {
 	const { classNames: classNames$2 } = useAccordionContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DisclosurePanel, {
-		className: classNames$2.content,
-		children
+		className: classNames$2.panel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: classNames$2.content,
+			children
+		})
 	});
 };
 
@@ -288,19 +291,15 @@ const HelpText = ({ variant, size: size$1, description, errorMessage,...props })
 //#endregion
 //#region src/Label/Label.tsx
 const _Label = ({ size: size$1, variant, children,...props }) => {
-	const classNames$2 = (0, __marigold_system.useClassNames)({
+	const className = (0, __marigold_system.useClassNames)({
 		component: "Label",
 		size: size$1,
 		variant
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Label, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Label, {
 		...props,
-		className: (0, __marigold_system.cn)(classNames$2.container, "inline-flex"),
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			"aria-hidden": "true",
-			className: (0, __marigold_system.cn)("hidden", classNames$2.indicator),
-			children: "*"
-		})]
+		className: (0, __marigold_system.cn)(className, "inline-flex"),
+		children
 	});
 };
 
@@ -339,40 +338,47 @@ const _FieldBase = (props, ref) => {
 const FieldBase = fixedForwardRef(_FieldBase);
 
 //#endregion
-//#region src/ProgressCycle/ProgressCycle.tsx
-const ProgressCycle = ({ size: size$1 = "16",...props }) => {
+//#region src/ProgressCircle/ProgressCircle.tsx
+const ProgressCircleSvg = ({ size: size$1 = "16", variant }) => {
+	const classNames$2 = (0, __marigold_system.useClassNames)({
+		component: "ProgressCircle",
+		variant,
+		size: size$1
+	});
 	let strokeWidth = 3;
 	if (size$1 <= "24") strokeWidth = 2;
 	else if (size$1 >= "32") strokeWidth = 4;
 	const radius = `calc(50% - ${strokeWidth / 2}px)`;
-	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "ProgressCycle" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__marigold_system.SVG, {
+		className: (0, __marigold_system.cn)("animate-rotate-spinner origin-center fill-none", classNames$2.loader),
+		size: size$1,
+		"aria-hidden": "true",
+		role: "img",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "50%",
+			cy: "50%",
+			r: radius,
+			strokeWidth,
+			className: "stroke-transparent"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "50%",
+			cy: "50%",
+			r: radius,
+			strokeWidth,
+			pathLength: "100",
+			strokeDasharray: "100 200",
+			strokeDashoffset: "0",
+			strokeLinecap: "round",
+			className: (0, __marigold_system.cn)("animate-progress-cycle origin-center -rotate-90", classNames$2.container)
+		})]
+	});
+};
+const ProgressCircle = ({ size: size$1 = "16",...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ProgressBar, {
 		...props,
 		"aria-label": "loading",
 		isIndeterminate: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__marigold_system.SVG, {
-			className: "animate-rotate-spinner origin-center fill-none",
-			size: size$1,
-			"aria-hidden": "true",
-			role: "img",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-				cx: "50%",
-				cy: "50%",
-				r: radius,
-				strokeWidth,
-				className: "stroke-transparent"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-				cx: "50%",
-				cy: "50%",
-				r: radius,
-				strokeWidth,
-				pathLength: "100",
-				strokeDasharray: "100 200",
-				strokeDashoffset: "0",
-				strokeLinecap: "round",
-				className: (0, __marigold_system.cn)("animate-progress-cycle origin-center -rotate-90", classNames$2)
-			})]
-		})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircleSvg, { size: size$1 })
 	});
 };
 
@@ -461,7 +467,7 @@ const SearchInput = (0, react.forwardRef)(({ className, loading, onClear,...prop
 		className: (0, __marigold_system.cn)("[&::-webkit-search-cancel-button]:hidden", className?.input),
 		ref,
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { size: "16" }),
-		action: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCycle, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		action: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircle, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
 			className: className?.action,
 			onPress: () => onClear?.(),
 			"aria-label": stringFormatter.format("Clear search"),
@@ -613,7 +619,12 @@ const intlMessages = {
 		showMore: "Mehr anzeigen",
 		showMoreCount: "{count} weitere anzeigen",
 		showLess: "Weniger anzeigen",
-		showLessCount: "{count} weniger anzeigen"
+		showLessCount: "{count} weniger anzeigen",
+		dropZoneLabel: "Dateien hierher ziehen",
+		uploadLabel: "Hochladen",
+		moreInfo: "Mehr Informationen",
+		help: "Hilfe",
+		hiddenBreadcrumbs: "Diese Breadcrumbs sind ausgeblendet"
 	},
 	"en-US": {
 		cancel: "Cancel",
@@ -623,14 +634,19 @@ const intlMessages = {
 		showMore: "Show more",
 		showMoreCount: "Show {count} more",
 		showLess: "Show less",
-		showLessCount: "Show {count} less"
+		showLessCount: "Show {count} less",
+		dropZoneLabel: "Drop files here",
+		uploadLabel: "Upload",
+		moreInfo: "More information",
+		help: "Help",
+		hiddenBreadcrumbs: "These breadcrumbs are hidden"
 	}
 };
 
 //#endregion
 //#region src/Autocomplete/Autocomplete.tsx
 const AutocompleteInput = ({ loading, onSubmit, onClear, ref }) => {
-	const state = react.default.useContext(react_aria_components.ComboBoxStateContext);
+	const state = (0, react.useContext)(react_aria_components.ComboBoxStateContext);
 	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "ComboBox" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
 		ref,
@@ -712,19 +728,32 @@ const ChevronRight = ({ size: size$1 = 24, className,...props }) => /* @__PURE__
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m9 18 6-6-6-6" })
 });
 
+//#endregion
+//#region src/IconButton/IconButton.tsx
+const IconButton = ({ className, children, variant, size: size$1,...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		className: (0, __marigold_system.cn)("shrink-0 cursor-pointer outline-0", (0, __marigold_system.useClassNames)({
+			component: "IconButton",
+			variant,
+			size: size$1
+		}), className),
+		...props,
+		children
+	});
+};
+
 //#endregion
 //#region src/Breadcrumbs/BreadcrumbEllipsis.tsx
 const BreadcrumbEllipsis = ({ hiddenItems = [], disabled = false }) => {
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
 	const { container, item: menuItem } = (0, __marigold_system.useClassNames)({ component: "Menu" });
-	const { item: breadcrumbsItem, link } = (0, __marigold_system.useClassNames)({ component: "Breadcrumbs" });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.MenuTrigger, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
-		type: "button",
-		className: `${breadcrumbsItem} ${link}`,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.MenuTrigger, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+		"aria-label": stringFormatter.format("hiddenBreadcrumbs"),
 		children: "..."
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Menu, {
 		className: container,
 		children: hiddenItems.map((item, index$1) => {
-			if (!react.default.isValidElement(item)) return null;
+			if (!(0, react.isValidElement)(item)) return null;
 			const { href, children: itemChildren } = item.props;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.MenuItem, {
 				className: menuItem,
@@ -748,7 +777,7 @@ const _Breadcrumbs = (0, react.forwardRef)(({ children, variant, size: size$1, d
 		variant,
 		size: size$1
 	});
-	const items = react.default.Children.toArray(children);
+	const items = react.Children.toArray(children);
 	const total = items.length;
 	const shouldCollapse = typeof maxVisibleItems === "number" && maxVisibleItems >= 2 && total > maxVisibleItems;
 	const ellipsis = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsItem, {
@@ -766,7 +795,7 @@ const _Breadcrumbs = (0, react.forwardRef)(({ children, variant, size: size$1, d
 		isDisabled: disabled,
 		className: container,
 		children: displayedItems.map((item, index$1) => {
-			if (!react.default.isValidElement(item)) return null;
+			if (!(0, react.isValidElement)(item)) return null;
 			const isLast = index$1 === displayedItems.length - 1;
 			const { href, children: itemChildren,...ariaProps } = item.props;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Breadcrumb, {
@@ -779,7 +808,7 @@ const _Breadcrumbs = (0, react.forwardRef)(({ children, variant, size: size$1, d
 					children: itemChildren
 				}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, {
 					"aria-hidden": "true",
-					size: 14,
+					size: 16,
 					"data-testid": "breadcrumb-chevronright"
 				})]
 			}, `${href}-${index$1}`);
@@ -790,12 +819,11 @@ _Breadcrumbs.Item = BreadcrumbsItem;
 
 //#endregion
 //#region src/Breakout/Breakout.tsx
-const Breakout = ({ children }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "![grid-column:1/-1]",
-		children
-	});
-};
+const Breakout = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-breakout": true,
+	className: "col-span-full!",
+	children
+});
 
 //#endregion
 //#region src/Button/Button.tsx
@@ -813,7 +841,7 @@ const _Button = (0, react.forwardRef)(({ children, variant, size: size$1, disabl
 		isDisabled: disabled,
 		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "absolute",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCycle, {})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircle, {})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "invisible flex gap-[inherit]",
 			children
@@ -923,20 +951,6 @@ const CalendarListBox = ({ type, isDisabled, setSelectedDropdown }) => {
 	});
 };
 
-//#endregion
-//#region src/IconButton/IconButton.tsx
-const IconButton = ({ className, children, variant, size: size$1,...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
-		className: (0, __marigold_system.cn)("shrink-0 cursor-pointer outline-0", (0, __marigold_system.useClassNames)({
-			component: "IconButton",
-			variant,
-			size: size$1
-		}), className),
-		...props,
-		children
-	});
-};
-
 //#endregion
 //#region src/icons/ChevronLeft.tsx
 const ChevronLeft = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
@@ -1274,7 +1288,6 @@ const _CheckboxGroup = ({ children, variant, size: size$1, required, disabled, r
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			role: "presentation",
 			"data-orientation": orientation,
-			"data-group": "checkbox",
 			className: (0, __marigold_system.cn)(classNames$2.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CheckboxGroupContext.Provider, {
 				value: {
@@ -1428,7 +1441,7 @@ const _ComboBox = (0, react.forwardRef)(({ variant, size: size$1, required, disa
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Input, { action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
 			className: classNames$2,
-			children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCycle, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, { size: "16" })
+			children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircle, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, { size: "16" })
 		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
 			renderEmptyState: () => emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, { children: stringFormatter.format("noResultsFound") }),
 			children
@@ -1451,9 +1464,9 @@ const containerHeadlineLength = {
 	long: "35ch"
 };
 const gridColsAlign = {
-	left: "grid-cols-[minmax(0,max-content)_1fr_1fr]",
-	center: "grid-cols-[1fr_minmax(0,max-content)_1fr]",
-	right: " grid-cols-[1fr_1fr_minmax(0,max-content)]"
+	left: "has-[[data-breakout]]:grid-cols-[minmax(0,max-content)_1fr_1fr]",
+	center: "has-[[data-breakout]]:grid-cols-[1fr_minmax(0,max-content)_1fr]",
+	right: "has-[[data-breakout]]:grid-cols-[1fr_1fr_minmax(0,max-content)]"
 };
 const gridColumn = {
 	left: "*:col-[1]",
@@ -1556,13 +1569,14 @@ const DialogTrigger$2 = ({ open,...rest }) => /* @__PURE__ */ (0, react_jsx_runt
 	isOpen: open,
 	...rest
 });
-const _ContextualHelp = (0, react.forwardRef)(({ children, variant = "help", size: size$1, width, placement = "bottom start", offset: offset$1 = 0, defaultOpen, open, onOpenChange }, ref) => {
+const _ContextualHelp = (0, react.forwardRef)(({ children, variant = "help", size: size$1, width, placement = "bottom start", offset: offset$1 = 0, defaultOpen, open, onOpenChange, ariaLabel }, ref) => {
 	const Icon$2 = icons$2[variant];
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "ContextualHelp",
 		variant,
 		size: size$1
 	});
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogTrigger$2, {
 		defaultOpen,
 		open,
@@ -1570,7 +1584,7 @@ const _ContextualHelp = (0, react.forwardRef)(({ children, variant = "help", siz
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
 			ref,
 			className: classNames$2.trigger,
-			"aria-label": variant === "info" ? "Information" : "Hilfe",
+			"aria-label": ariaLabel ?? (variant === "info" ? stringFormatter.format("moreInfo") : stringFormatter.format("help")),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$2, { size: 20 })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Popover, {
 			placement,
@@ -1604,14 +1618,90 @@ const _DateSegment = ({ segment,...props }) => {
 
 //#endregion
 //#region src/DateField/DateInput.tsx
-const _DateInput = ({ variant, size: size$1, action,...props }) => {
+const extractCalendarDate = (format, order, dateString) => {
+	const isMatch = dateString.trim().match(format);
+	if (!isMatch) return;
+	const date = order.reduce((accumulatedValue, currentVal, currentIndex) => {
+		return {
+			...accumulatedValue,
+			[currentVal]: parseInt(isMatch[currentIndex + 1], 10)
+		};
+	}, {});
+	if (isValidDate(date.year, date.month, date.day)) return new __internationalized_date.CalendarDate(date.year, date.month, date.day);
+};
+const parseDateFromString = (dateString) => {
+	for (const format of [
+		{
+			regex: /^(\d{4})-(\d{1,2})-(\d{1,2})$/,
+			order: [
+				"year",
+				"month",
+				"day"
+			]
+		},
+		{
+			regex: /^(\d{1,2})[./](\d{1,2})[./](\d{4})$/,
+			order: [
+				"day",
+				"month",
+				"year"
+			]
+		},
+		{
+			regex: /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/,
+			order: [
+				"month",
+				"day",
+				"year"
+			]
+		}
+	]) {
+		const result = extractCalendarDate(format.regex, format.order, dateString);
+		if (result) return result;
+	}
+};
+const isValidDate = (year, month, day) => {
+	if (year < 1 || year > 9999) return false;
+	if (month < 1 || month > 12) return false;
+	if (day < 1 || day > 31) return false;
+	const daysInMonth = [
+		31,
+		28,
+		31,
+		30,
+		31,
+		30,
+		31,
+		31,
+		30,
+		31,
+		30,
+		31
+	];
+	const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
+	if (month === 2 && isLeapYear) return day <= 29;
+	return day <= daysInMonth[month - 1];
+};
+const _DateInput = ({ variant, size: size$1, action, onPaste,...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "DateField",
 		variant,
 		size: size$1
 	});
+	const handlePaste = async (event) => {
+		try {
+			const parsedDate = parseDateFromString(event.clipboardData.getData("text"));
+			if (parsedDate) {
+				event.preventDefault();
+				onPaste(parsedDate);
+			}
+		} catch (error) {
+			console.warn("Failed to parse pasted date:", error);
+		}
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Group, {
 		className: classNames$2.field,
+		onPaste: handlePaste,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DateInput, {
 			className: "flex flex-1 items-center",
 			...props,
@@ -1625,7 +1715,7 @@ const _DateInput = ({ variant, size: size$1, action,...props }) => {
 
 //#endregion
 //#region src/DateField/DateField.tsx
-const _DateField = (0, react.forwardRef)(({ variant, size: size$1, action, disabled, required, error, readOnly,...rest }, ref) => {
+const _DateField = (0, react.forwardRef)(({ variant, size: size$1, action, disabled, required, error, readOnly, onChange,...rest }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
 		as: react_aria_components.DateField,
 		variant,
@@ -1636,9 +1726,23 @@ const _DateField = (0, react.forwardRef)(({ variant, size: size$1, action, disab
 		isInvalid: error,
 		isRequired: required,
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_DateInput, { action })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateInputWithPasteWrapper, {
+			onChange,
+			action
+		})
 	});
 });
+const DateInputWithPasteWrapper = ({ onChange,...props }) => {
+	const ctx = (0, react.useContext)(react_aria_components.DateFieldStateContext);
+	const onPaste = (date) => {
+		if (onChange) onChange(date);
+		ctx?.setValue(date);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_DateInput, {
+		onPaste,
+		...props
+	});
+};
 
 //#endregion
 //#region src/icons/Calendar.tsx
@@ -1670,7 +1774,7 @@ const Calendar = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */
 
 //#endregion
 //#region src/DatePicker/DatePicker.tsx
-const _DatePicker = react.default.forwardRef(({ dateUnavailable, disabled, required, readOnly, error, variant, size: size$1, open, granularity = "day",...rest }, ref) => {
+const _DatePicker = (0, react.forwardRef)(({ dateUnavailable, disabled, required, readOnly, error, variant, size: size$1, open, granularity = "day", onChange,...rest }, ref) => {
 	const props = {
 		isDateUnavailable: dateUnavailable,
 		isDisabled: disabled,
@@ -1679,6 +1783,7 @@ const _DatePicker = react.default.forwardRef(({ dateUnavailable, disabled, requi
 		isInvalid: error,
 		isOpen: open,
 		granularity,
+		onChange,
 		...rest
 	};
 	const classNames$2 = (0, __marigold_system.useClassNames)({
@@ -1692,15 +1797,29 @@ const _DatePicker = react.default.forwardRef(({ dateUnavailable, disabled, requi
 		size: size$1,
 		...props,
 		ref,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_DateInput, { action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-			className: classNames$2,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Calendar, {
-				size: "16",
-				"data-testid": "action"
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerWithPasteWrapper, {
+			onChange,
+			action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+				className: classNames$2,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Calendar, {
+					size: "16",
+					"data-testid": "action"
+				})
 			})
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Dialog, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Calendar, { disabled }) }) })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Dialog, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Calendar, { disabled }) }) })]
 	});
 });
+const DatePickerWithPasteWrapper = ({ onChange,...props }) => {
+	const ctx = (0, react.useContext)(react_aria_components.DatePickerStateContext);
+	const onPaste = (date) => {
+		if (onChange) onChange(date);
+		ctx?.setValue(date);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_DateInput, {
+		onPaste,
+		...props
+	});
+};
 
 //#endregion
 //#region src/Overlay/Modal.tsx
@@ -2181,6 +2300,147 @@ Drawer.Title = DrawerTitle;
 Drawer.Content = DrawerContent;
 Drawer.Actions = DrawerActions;
 
+//#endregion
+//#region src/FileField/FileFieldItem.tsx
+const FileFieldItem = ({ children, onRemove }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "bg-background border-input flex items-center justify-between gap-2 rounded-lg border p-2 pe-3",
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButton, {
+			"aria-label": "Remove file",
+			onPress: onRemove
+		})]
+	});
+};
+
+//#endregion
+//#region src/icons/Upload.tsx
+const Upload = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 13v8M4 14.899A7 7 0 1115.71 8h1.79a4.5 4.5 0 012.5 8.242" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 17l4-4 4 4" })]
+});
+
+//#endregion
+//#region src/FileField/FileTrigger.tsx
+const _FileTrigger = ({ label, disabled,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.FileTrigger, {
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_Button, {
+			disabled,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Upload, {}), label]
+		})
+	});
+};
+
+//#endregion
+//#region src/FileField/fileUtils.ts
+const filterAcceptedFiles = (files, acceptedFileTypes) => {
+	if (!acceptedFileTypes || acceptedFileTypes.length === 0) return files;
+	if (acceptedFileTypes.some((token$1) => tokenAllowsAll(token$1.trim().toLowerCase()))) return files;
+	return files.filter((file) => acceptedFileTypes.some((token$1) => matchesAcceptedToken(file, token$1)));
+};
+const isFileDropItem = (item) => item && typeof item === "object" && item.kind === "file" && typeof item.getFile === "function";
+const tokenAllowsAll = (token$1) => token$1 === "*" || token$1 === "*/*";
+const toLower = (s) => s.toLowerCase();
+const matchesAcceptedToken = (file, token$1) => {
+	const t$1 = toLower(token$1.trim());
+	if (!t$1) return false;
+	if (tokenAllowsAll(t$1)) return true;
+	const fileType = toLower(file.type || "");
+	const fileName = toLower(file.name || "");
+	if (!t$1.includes("/") && !t$1.startsWith(".")) {
+		const ext = `.${t$1}`;
+		return fileName.endsWith(ext);
+	}
+	if (t$1.startsWith(".")) return fileName.endsWith(t$1);
+	if (t$1.endsWith("/*")) {
+		const prefix$1 = t$1.slice(0, t$1.length - 1);
+		return fileType.startsWith(prefix$1);
+	}
+	return fileType === t$1;
+};
+const normalizeAndLimitFiles = (files, { accept, multiple }) => {
+	const accepted = filterAcceptedFiles(files, accept);
+	return multiple ? accepted : accepted.slice(0, 1);
+};
+
+//#endregion
+//#region src/FileField/FileField.tsx
+const FileField = ({ disabled = false, accept = ["*"], multiple = false, width, label,...props }) => {
+	const [files, setFiles] = (0, react.useState)(null);
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages);
+	const dropZoneLabel = stringFormatter.format("dropZoneLabel");
+	const buttonLabel = stringFormatter.format("uploadLabel");
+	const handleSelect = (files$1) => {
+		setFiles(normalizeAndLimitFiles(files$1 ? Array.from(files$1) : [], {
+			accept,
+			multiple
+		}));
+	};
+	const handleDrop = async (e$1) => {
+		try {
+			const filePromises = e$1.items.filter(isFileDropItem).map((item) => item.getFile());
+			setFiles(normalizeAndLimitFiles((await Promise.all(filePromises)).filter(Boolean), {
+				accept,
+				multiple
+			}));
+		} catch {}
+	};
+	const fileTriggerProps = {
+		acceptedFileTypes: accept,
+		allowsMultiple: multiple,
+		onSelect: handleSelect
+	};
+	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "FileField" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+		as: "div",
+		width,
+		label,
+		className: classNames$2.container,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DropZone, {
+			onDrop: handleDrop,
+			isDisabled: disabled,
+			className: classNames$2.dropZone,
+			"data-testid": "dropzone",
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classNames$2.dropZoneContent,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: classNames$2.dropZoneLabel,
+					children: dropZoneLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_FileTrigger, {
+					...fileTriggerProps,
+					label: buttonLabel,
+					disabled
+				})]
+			})
+		}), files?.map((file, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileField.Item, {
+			onRemove: () => setFiles((prev$1) => (prev$1 ?? []).filter((_, i$1) => i$1 !== index$1)),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classNames$2.item,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: classNames$2.itemLabel,
+					children: file.name
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: classNames$2.itemDescription,
+					children: [(file.size / 1024 / 1024).toFixed(2), " MB"]
+				})]
+			})
+		}, index$1))]
+	});
+};
+FileField.Item = FileFieldItem;
+
 //#endregion
 //#region src/Form/Form.tsx
 const _Form = ({ unstyled, maxWidth = "full",...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Form, {
@@ -4265,9 +4525,9 @@ var jsx = function jsx$1(type, props) {
 	for (var i$1 = 2; i$1 < argsLength; i$1++) createElementArgArray[i$1] = args[i$1];
 	return react.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx$152) {
+(function(_jsx$156) {
 	var JSX;
-	(function(_JSX) {})(JSX || (JSX = _jsx$152.JSX || (_jsx$152.JSX = {})));
+	(function(_JSX) {})(JSX || (JSX = _jsx$156.JSX || (_jsx$156.JSX = {})));
 })(jsx || (jsx = {}));
 function css$2() {
 	for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
@@ -8362,7 +8622,8 @@ const _NumberField = (0, react.forwardRef)(({ variant, size: size$1, disabled, r
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Input, {
 					ref,
-					className: (0, __marigold_system.cn)("h-full flex-1 outline-none", classNames$2.input)
+					className: (0, __marigold_system.cn)("h-full flex-1 outline-none", classNames$2.input),
+					onFocus: (e$1) => e$1.currentTarget.select()
 				}),
 				showStepper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_StepButton, {
 					className: classNames$2.stepper,
@@ -8832,7 +9093,7 @@ const SelectBase = (0, react.forwardRef)(function Select$2({ disabled, required,
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(IconButton, {
 			className: (0, __marigold_system.cn)("flex w-full items-center justify-between gap-1 overflow-hidden", classNames$2.select),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SelectValue, { className: "truncate text-nowrap [&>[slot=description]]:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SelectValue, { className: "truncate text-nowrap [&_[slot=description]]:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, {
 				size: "16",
 				className: classNames$2.icon
 			})]
@@ -9719,11 +9980,157 @@ const _Tooltip = ({ children, variant, size: size$1, open,...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 //#endregion
-//#region src/XLoader/BaseLoader.tsx
-const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel,...props }) => {
+//#region src/Loader/BaseLoader.tsx
+const XLoaderSvg = ({ className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 150 150",
+		fill: "currentColor",
+		className,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_1_",
+				d: "M35.3 27h26.5l54 74.1H88.7z"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_5_",
+				d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "1.0s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_18_",
+				d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.9s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_19_",
+				d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.8s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_20_",
+				d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.7s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_21_",
+				d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.6s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_22_",
+				d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.5s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_23_",
+				d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.4s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_24_",
+				d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.3s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_25_",
+				d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.2s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_26_",
+				d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.1s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				id: "XMLID_27_",
+				d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+					attributeName: "opacity",
+					attributeType: "XML",
+					values: "1; .01; 1; 1; 1;",
+					begin: "0.0s",
+					dur: "2.5s",
+					repeatCount: "indefinite"
+				})
+			})
+		]
+	});
+};
+const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel, loaderType = "circle",...props }) => {
 	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
 	const className = (0, __marigold_system.useClassNames)({
-		component: "XLoader",
+		component: "Loader",
 		variant,
 		size: size$1
 	});
@@ -9732,149 +10139,9 @@ const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel,.
 		isIndeterminate: true,
 		"aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			viewBox: "0 0 150 150",
-			fill: "currentColor",
-			className: className.loader,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_1_",
-					d: "M35.3 27h26.5l54 74.1H88.7z"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_5_",
-					d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "1.0s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_18_",
-					d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.9s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_19_",
-					d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.8s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_20_",
-					d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.7s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_21_",
-					d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.6s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_22_",
-					d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.5s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_23_",
-					d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.4s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_24_",
-					d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.3s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_25_",
-					d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.2s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_26_",
-					d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.1s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					id: "XMLID_27_",
-					d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
-						attributeName: "opacity",
-						attributeType: "XML",
-						values: "1; .01; 1; 1; 1;",
-						begin: "0.0s",
-						dur: "2.5s",
-						repeatCount: "indefinite"
-					})
-				})
-			]
+		children: [loaderType === "xloader" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XLoaderSvg, { className: className.loader }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircleSvg, {
+			variant,
+			size: size$1
 		}), children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Label, {
 			className: className.label,
 			children
@@ -9883,7 +10150,7 @@ const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel,.
 };
 
 //#endregion
-//#region src/XLoader/XLoader.tsx
+//#region src/Loader/Loader.tsx
 const LoaderFullScreen = (props) => {
 	const id = (0, __react_aria_utils.useId)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Underlay, {
@@ -9913,7 +10180,7 @@ const LoaderSection = (props) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseLoader, { ...props })
 	});
 };
-const XLoader = ({ mode, variant,...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderFullScreen, {
+const Loader = ({ mode, variant,...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderFullScreen, {
 	variant: variant ?? "inverted",
 	...props
 }) : mode === "section" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderSection, {
@@ -9977,6 +10244,7 @@ exports.Dialog = _Dialog;
 exports.Divider = _Divider;
 exports.Drawer = Drawer;
 exports.FieldBase = FieldBase;
+exports.FileField = FileField;
 exports.Form = _Form;
 exports.Grid = Grid;
 exports.Headline = _Headline;
@@ -9997,6 +10265,7 @@ exports.LinkButton = _LinkButton;
 exports.List = List;
 exports.ListBox = _ListBox;
 exports.ListBoxItem = _ListBoxItem;
+exports.Loader = Loader;
 exports.MarigoldProvider = MarigoldProvider;
 exports.Menu = _Menu;
 exports.Modal = _Modal;
@@ -10012,7 +10281,8 @@ Object.defineProperty(exports, 'NumericFormat', {
 exports.OverlayContainerProvider = OverlayContainerProvider;
 exports.Pagination = _Pagination;
 exports.Popover = _Popover;
-exports.ProgressCycle = ProgressCycle;
+exports.ProgressCircle = ProgressCircle;
+exports.ProgressCircleSvg = ProgressCircleSvg;
 exports.Radio = _Radio;
 exports.RadioGroup = _RadioGroup;
 Object.defineProperty(exports, 'RouterProvider', {
@@ -10057,7 +10327,6 @@ Object.defineProperty(exports, 'VisuallyHidden', {
     return __react_aria_visually_hidden.VisuallyHidden;
   }
 });
-exports.XLoader = XLoader;
 exports.parseFormData = parseFormData;
 Object.defineProperty(exports, 'useAsyncList', {
   enumerable: true,