@takeoff-ui/react-spar 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -1,19 +1,30 @@
 import { createContext, Children, isValidElement, useMemo, useRef, useState, useCallback, useEffect, useId, createElement, useContext, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Breadcrumb as Breadcrumb$1, BreadcrumbSeparator as BreadcrumbSeparator$1, BreadcrumbPage as BreadcrumbPage$1, BreadcrumbLink as BreadcrumbLink$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbList as BreadcrumbList$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogContent, DialogOverlay as DialogOverlay$1, DialogTrigger as DialogTrigger$1, DropdownMenu, DropdownMenuArrow, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuItem, DropdownMenuViewport, useDropdownMenuContext, DropdownMenuContent, DropdownMenuTrigger, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, useInputContext, InputField as InputField$1, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, useOptionalFieldContext, Select as Select$1, SelectArrow as SelectArrow$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, SelectViewport as SelectViewport$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1, Label as Label$1, Toast as Toast$1, Toaster as Toaster$1 } from '@turkish-technology/spar';
-export { createToaster } from '@turkish-technology/spar';
+export { createDateMask, createNumberMask, createTimeMask, createToaster } from '@turkish-technology/spar';
 import { clsx } from 'clsx';
 import { ChevronBottomIconOutlinedRounded } from '@takeoff-icons/react/chevron-bottom';
 import { ChevronTopIconOutlinedRounded } from '@takeoff-icons/react/chevron-top';
+import { CloseIconOutlinedRounded } from '@takeoff-icons/react/close';
 import { ChevronRightIconOutlinedRounded } from '@takeoff-icons/react/chevron-right';
+import { ChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/chevron-left';
+import { DoubleChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-left';
+import { DoubleChevronRightIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-right';
+import { UI, DayFlag, SelectionState, Animation, DayPicker, MonthCaption, useDayPicker, CaptionLabel, MonthGrid, DayButton, DateLib, defaultLocale, PreviousMonthButton, NextMonthButton, Footer, Day, WeekNumberHeader, WeekNumber, Week, Weeks, Weekday, Weekdays, Dropdown as Dropdown$1, DropdownNav, Month, Months } from 'react-day-picker';
 import { CheckIconOutlinedRounded } from '@takeoff-icons/react/check';
-import { CloseIconOutlinedRounded } from '@takeoff-icons/react/close';
+import { RemoveIconOutlinedRounded } from '@takeoff-icons/react/remove';
+import { InfoIconFilledRounded } from '@takeoff-icons/react/info';
+import { AlertCircleIconFilledRounded } from '@takeoff-icons/react/alert-circle';
+import { EyeClosedIconOutlinedRounded } from '@takeoff-icons/react/eye-closed';
+import { EyeOpenIconOutlinedRounded } from '@takeoff-icons/react/eye-open';
 import { useReactTable, getPaginationRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, functionalUpdate, flexRender } from '@tanstack/react-table';
+import { ArrowBottomIconOutlinedRounded } from '@takeoff-icons/react/arrow-bottom';
+import { ArrowTopIconOutlinedRounded } from '@takeoff-icons/react/arrow-top';
 import { SwapIconOutlinedRounded } from '@takeoff-icons/react/swap';
 import { SearchIconOutlinedRounded } from '@takeoff-icons/react/search';
-import { ArrowLeftIconOutlinedRounded } from '@takeoff-icons/react/arrow-left';
-import { ArrowRightIconOutlinedRounded } from '@takeoff-icons/react/arrow-right';
-import { ChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/chevron-left';
+import { ArrowDownloadIconOutlinedRounded } from '@takeoff-icons/react/arrow-download';
+import { CheckCircleIconFilledRounded } from '@takeoff-icons/react/check-circle';
+import { CloseCircleIconFilledRounded } from '@takeoff-icons/react/close-circle';
 
 // src/provider.tsx
 
@@ -245,7 +256,79 @@ function useControllableState(controlledValue, defaultValue, onChange) {
     },
     [isControlled, onChange]
   );
-  return [value, setValue];
+  return [value, setValue, isControlled];
+}
+var pad = (value) => String(value).padStart(2, "0");
+var toISODate = (value) => `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+var fromISODate = (iso) => {
+  const [year, month, day] = iso.split("-").map(Number);
+  if (!year || !month || !day) return void 0;
+  return new Date(year, month - 1, day);
+};
+function useDatePicker({ min, max, defaultValue, delimiter = "/", format, onValueChange } = {}) {
+  const formatDate = useMemo(
+    () => format ?? ((value2) => `${pad(value2.getDate())}${delimiter}${pad(value2.getMonth() + 1)}${delimiter}${value2.getFullYear()}`),
+    [format, delimiter]
+  );
+  const [value, setValueState] = useState(defaultValue);
+  const [text, setText] = useState(() => defaultValue ? formatDate(defaultValue) : "");
+  const [open, setOpen] = useState(false);
+  const mask = useMemo(
+    () => ({
+      date: true,
+      delimiter,
+      ...min ? { dateMin: toISODate(min) } : {},
+      ...max ? { dateMax: toISODate(max) } : {}
+    }),
+    [delimiter, min, max]
+  );
+  const commit = useCallback(
+    (next) => {
+      setValueState(next);
+      setText(next ? formatDate(next) : "");
+      onValueChange?.(next);
+    },
+    [formatDate, onValueChange]
+  );
+  const handleTyped = useCallback(
+    (next, meta) => {
+      setText(next);
+      if (next === "") {
+        setValueState(void 0);
+        onValueChange?.(void 0);
+        return;
+      }
+      if (!meta.completed || !meta.iso) {
+        setValueState(void 0);
+        return;
+      }
+      const parsed = fromISODate(meta.iso);
+      setValueState(parsed);
+      onValueChange?.(parsed);
+    },
+    [onValueChange]
+  );
+  const handleKeyDown = useCallback((event) => {
+    if (event.key !== "ArrowDown") return;
+    event.preventDefault();
+    setOpen(true);
+  }, []);
+  const handlePicked = useCallback(
+    (next) => {
+      commit(next);
+      setOpen(false);
+    },
+    [commit]
+  );
+  return {
+    value,
+    text,
+    open,
+    setValue: commit,
+    popoverProps: { open, onOpenChange: setOpen },
+    inputProps: { mask, value: text, onValueChange: handleTyped, onKeyDown: handleKeyDown },
+    calendarProps: { value, minDate: min, maxDate: max, onValueChange: handlePicked }
+  };
 }
 
 // src/components/accordion/context.ts
@@ -422,40 +505,6 @@ var AlertActions = (props) => {
   return /* @__PURE__ */ jsx(Component, { ...actionsProps, ref, ...rootAttrs, children });
 };
 AlertActions.displayName = "Alert.Actions";
-var baseSvgProps = {
-  "xmlns": "http://www.w3.org/2000/svg",
-  "width": "1em",
-  "height": "1em",
-  "viewBox": "0 0 24 24",
-  "fill": "none",
-  "stroke": "currentColor",
-  "strokeWidth": 2,
-  "strokeLinecap": "round",
-  "strokeLinejoin": "round",
-  "focusable": false,
-  "aria-hidden": true
-};
-var filledSvgProps = {
-  "xmlns": "http://www.w3.org/2000/svg",
-  "width": "1em",
-  "height": "1em",
-  "viewBox": "0 0 24 24",
-  "fill": "currentColor",
-  "focusable": false,
-  "aria-hidden": true
-};
-var PlaceholderChevronDown = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-down", ...props, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
-var PlaceholderChevronUp = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-up", ...props, children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
-var PlaceholderClose = (props) => /* @__PURE__ */ jsxs("svg", { ...baseSvgProps, "data-placeholder-icon": "close", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-] });
-var PlaceholderInfo = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "info", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(2 2) scale(1.714)", children: /* @__PURE__ */ jsx("path", { d: "M5.83333 0C2.61333 0 0 2.61333 0 5.83333C0 9.05333 2.61333 11.6667 5.83333 11.6667C9.05333 11.6667 11.6667 9.05333 11.6667 5.83333C11.6667 2.61333 9.05333 0 5.83333 0ZM5.83333 8.75C5.5125 8.75 5.25 8.4875 5.25 8.16667V5.83333C5.25 5.5125 5.5125 5.25 5.83333 5.25C6.15417 5.25 6.41667 5.5125 6.41667 5.83333V8.16667C6.41667 8.4875 6.15417 8.75 5.83333 8.75ZM6.41667 4.08333H5.25V2.91667H6.41667V4.08333Z" }) }) });
-var PlaceholderError = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "error", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(2 2) scale(1.714)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M5.83333 0C2.61333 0 0 2.61333 0 5.83333C0 9.05333 2.61333 11.6667 5.83333 11.6667C9.05333 11.6667 11.6667 9.05333 11.6667 5.83333C11.6667 2.61333 9.05333 0 5.83333 0ZM5.83333 2.91667C6.15417 2.91667 6.41667 3.17917 6.41667 3.5V5.83333C6.41667 6.15417 6.15417 6.41667 5.83333 6.41667C5.5125 6.41667 5.25 6.15417 5.25 5.83333V3.5C5.25 3.17917 5.5125 2.91667 5.83333 2.91667ZM5.25 7.58333H6.41667V8.75H5.25V7.58333Z" }) }) });
-var PlaceholderCheck = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5L20 7" }) });
-var PlaceholderRemove = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
-var PlaceholderEye = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(1 4.5) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M9.16667 1.66667C12.325 1.66667 15.1417 3.44167 16.5167 6.25C15.1417 9.05833 12.325 10.8333 9.16667 10.8333C6.00833 10.8333 3.19167 9.05833 1.81667 6.25C3.19167 3.44167 6.00833 1.66667 9.16667 1.66667ZM9.16667 0C5 0 1.44167 2.59167 0 6.25C1.44167 9.90833 5 12.5 9.16667 12.5C13.3333 12.5 16.8917 9.90833 18.3333 6.25C16.8917 2.59167 13.3333 0 9.16667 0ZM9.16667 4.16667C10.3167 4.16667 11.25 5.1 11.25 6.25C11.25 7.4 10.3167 8.33333 9.16667 8.33333C8.01667 8.33333 7.08333 7.4 7.08333 6.25C7.08333 5.1 8.01667 4.16667 9.16667 4.16667ZM9.16667 2.5C7.1 2.5 5.41667 4.18333 5.41667 6.25C5.41667 8.31667 7.1 10 9.16667 10C11.2333 10 12.9167 8.31667 12.9167 6.25C12.9167 4.18333 11.2333 2.5 9.16667 2.5Z" }) }) });
-var PlaceholderEyeOff = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye-off", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(1 2.42) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M9.16667 2.95833C12.325 2.95833 15.1417 4.73333 16.5167 7.54167C16.025 8.55833 15.3333 9.43333 14.5083 10.1417L15.6833 11.3167C16.8417 10.2917 17.7583 9.00833 18.3333 7.54167C16.8917 3.88333 13.3333 1.29167 9.16667 1.29167C8.10833 1.29167 7.09167 1.45833 6.13333 1.76667L7.50833 3.14167C8.05 3.03333 8.6 2.95833 9.16667 2.95833ZM8.275 3.90833L10 5.63333C10.475 5.84167 10.8583 6.225 11.0667 6.7L12.7917 8.425C12.8583 8.14167 12.9083 7.84167 12.9083 7.53333C12.9167 5.46667 11.2333 3.79167 9.16667 3.79167C8.85833 3.79167 8.56667 3.83333 8.275 3.90833ZM0.841667 1.18333L3.075 3.41667C1.71667 4.48333 0.641667 5.9 0 7.54167C1.44167 11.2 5 13.7917 9.16667 13.7917C10.4333 13.7917 11.65 13.55 12.7667 13.1083L15.6167 15.9583L16.7917 14.7833L2.01667 0L0.841667 1.18333ZM7.09167 7.43333L9.26667 9.60833C9.23333 9.61667 9.2 9.625 9.16667 9.625C8.01667 9.625 7.08333 8.69167 7.08333 7.54167C7.08333 7.5 7.09167 7.475 7.09167 7.43333ZM4.25833 4.6L5.71667 6.05833C5.525 6.51667 5.41667 7.01667 5.41667 7.54167C5.41667 9.60833 7.1 11.2917 9.16667 11.2917C9.69167 11.2917 10.1917 11.1833 10.6417 10.9917L11.4583 11.8083C10.725 12.0083 9.95833 12.125 9.16667 12.125C6.00833 12.125 3.19167 10.35 1.81667 7.54167C2.4 6.35 3.25 5.36667 4.25833 4.6Z" }) }) });
 var AlertClose = (props) => {
   const theme = useComponentTheme("AlertClose");
   const { onClose } = useAlertContext("Alert.Close");
@@ -478,7 +527,7 @@ var AlertClose = (props) => {
       "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL),
       onClick: handleClick,
       ...closeRootAttrs,
-      children: hasCustomChildren ? children : /* @__PURE__ */ jsx(PlaceholderClose, {})
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {})
     }
   );
 };
@@ -742,6 +791,650 @@ var Button = (props) => {
 };
 Button.displayName = "Button";
 
+// src/components/calendar/base.ts
+var CalendarBase = createComponentBase({
+  name: "Calendar",
+  slots: [
+    "root",
+    "months",
+    "month",
+    "nav",
+    "previousMonthButton",
+    "nextMonthButton",
+    "previousYearButton",
+    "nextYearButton",
+    "chevron",
+    "monthCaption",
+    "captionLabel",
+    "captionTrigger",
+    "dropdowns",
+    "dropdownRoot",
+    "dropdown",
+    "monthGrid",
+    "monthYearGrid",
+    "monthYearCell",
+    "weekdays",
+    "weekday",
+    "weeks",
+    "week",
+    "weekNumber",
+    "weekNumberHeader",
+    "day",
+    "dayButton",
+    "footer"
+  ],
+  classes: {
+    root: "tk-calendar",
+    months: "tk-calendar-months",
+    month: "tk-calendar-month",
+    nav: "tk-calendar-nav",
+    previousMonthButton: "tk-calendar-nav-previous-month",
+    nextMonthButton: "tk-calendar-nav-next-month",
+    previousYearButton: "tk-calendar-nav-previous-year",
+    nextYearButton: "tk-calendar-nav-next-year",
+    chevron: "tk-calendar-chevron",
+    monthCaption: "tk-calendar-month-caption",
+    captionLabel: "tk-calendar-caption-label",
+    captionTrigger: "tk-calendar-caption-trigger",
+    dropdowns: "tk-calendar-dropdowns",
+    dropdownRoot: "tk-calendar-dropdown-root",
+    dropdown: "tk-calendar-dropdown",
+    monthGrid: "tk-calendar-month-grid",
+    monthYearGrid: "tk-calendar-month-year-grid",
+    monthYearCell: "tk-calendar-month-year-cell",
+    weekdays: "tk-calendar-weekdays",
+    weekday: "tk-calendar-weekday",
+    weeks: "tk-calendar-weeks",
+    week: "tk-calendar-week",
+    weekNumber: "tk-calendar-week-number",
+    weekNumberHeader: "tk-calendar-week-number-header",
+    day: "tk-calendar-day",
+    dayButton: "tk-calendar-day-button",
+    footer: "tk-calendar-footer"
+  }
+});
+var calendarRangeClassNames = {
+  range_start: "tk-calendar-day-range-start",
+  range_middle: "tk-calendar-day-range-middle",
+  range_end: "tk-calendar-day-range-end"
+};
+
+// src/components/calendar/defaults.ts
+var DEFAULT_MODE2 = "single";
+var DEFAULT_SIZE5 = "base";
+var DEFAULT_HEADER_TYPE = "basic";
+var DEFAULT_VIEW = "day";
+
+// src/components/calendar/helpers.ts
+var isSameCalendarDay = (left, right) => left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+var isSameCalendarMonth = (left, right) => left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+var selectionAnchor = (value) => {
+  if (!value) return void 0;
+  if (value instanceof Date) return value;
+  if (Array.isArray(value)) return value.length ? value[value.length - 1] : void 0;
+  return value.from;
+};
+var buildDisabledMatchers = ({ minDate, maxDate, disabledDates, allowedDates, disabledWeekDays }) => {
+  const matchers = [];
+  if (minDate) matchers.push({ before: minDate });
+  if (maxDate) matchers.push({ after: maxDate });
+  if (disabledDates?.length) matchers.push(disabledDates);
+  if (disabledWeekDays?.length) matchers.push({ dayOfWeek: disabledWeekDays });
+  if (allowedDates?.length) {
+    const allowed = allowedDates;
+    matchers.push((date) => !allowed.some((candidate) => isSameCalendarDay(candidate, date)));
+  }
+  return matchers.length ? matchers : void 0;
+};
+var assignRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+};
+var YEARS_PER_PAGE = 12;
+var yearPageStart = (year) => Math.floor(year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+var isMonthInBounds = (year, month, minDate, maxDate) => {
+  if (minDate && new Date(year, month + 1, 0, 23, 59, 59, 999) < minDate) return false;
+  if (maxDate && new Date(year, month, 1) > maxDate) return false;
+  return true;
+};
+var isYearInBounds = (year, minDate, maxDate) => {
+  if (minDate && year < minDate.getFullYear()) return false;
+  if (maxDate && year > maxDate.getFullYear()) return false;
+  return true;
+};
+var isYearPageInBounds = (year, minDate, maxDate) => {
+  const start = yearPageStart(year);
+  return isYearInBounds(start + YEARS_PER_PAGE - 1, minDate, void 0) && isYearInBounds(start, void 0, maxDate);
+};
+var SLOT_TO_UI = {
+  root: UI.Root,
+  months: UI.Months,
+  month: UI.Month,
+  nav: UI.Nav,
+  previousMonthButton: UI.PreviousMonthButton,
+  nextMonthButton: UI.NextMonthButton,
+  chevron: UI.Chevron,
+  monthCaption: UI.MonthCaption,
+  captionLabel: UI.CaptionLabel,
+  dropdowns: UI.Dropdowns,
+  dropdownRoot: UI.DropdownRoot,
+  dropdown: UI.Dropdown,
+  monthGrid: UI.MonthGrid,
+  weekdays: UI.Weekdays,
+  weekday: UI.Weekday,
+  weeks: UI.Weeks,
+  week: UI.Week,
+  weekNumber: UI.WeekNumber,
+  weekNumberHeader: UI.WeekNumberHeader,
+  day: UI.Day,
+  dayButton: UI.DayButton,
+  footer: UI.Footer
+};
+var ENGINE_CLASSNAME_RESET = Object.fromEntries(
+  [...Object.values(UI), ...Object.values(DayFlag), ...Object.values(SelectionState), ...Object.values(Animation)].map((key) => [key, ""])
+);
+var mergeSlotAttrs = (slotAttrs, engineProps) => {
+  const merged = { ...slotAttrs };
+  for (const key in engineProps) {
+    const value = engineProps[key];
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+};
+var CaptionMonthContext = createContext(null);
+var PANEL_COLUMNS = 4;
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var displayContents = { display: "contents" };
+var createEngineComponents = (attrsRef, refRef, viewRef, renderDayRef) => {
+  const withSlot = (Component, slot) => {
+    const Slotted = (props) => /* @__PURE__ */ jsx(Component, { ...mergeSlotAttrs(attrsRef.current[slot], props) });
+    Slotted.displayName = `Calendar.${slot}`;
+    return Slotted;
+  };
+  const Root = ({ rootRef, ...engineProps }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mergeSlotAttrs(attrsRef.current.root, engineProps),
+      ref: (node) => {
+        assignRef(refRef.current, node);
+        assignRef(rootRef, node);
+      }
+    }
+  );
+  Root.displayName = "Calendar.root";
+  const Chevron = ({ orientation = "left", size, ...engineProps }) => {
+    const Icon = orientation === "left" ? ChevronLeftIconOutlinedRounded : orientation === "right" ? ChevronRightIconOutlinedRounded : orientation === "up" ? ChevronTopIconOutlinedRounded : ChevronBottomIconOutlinedRounded;
+    const { disabled: _disabled, ...svgProps } = engineProps;
+    return /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", ...mergeSlotAttrs(attrsRef.current.chevron, { ...svgProps, width: size, height: size }) });
+  };
+  Chevron.displayName = "Calendar.chevron";
+  const useDisplayedMonth = () => {
+    const { months, dayPickerProps } = useDayPicker();
+    const first = dayPickerProps.reverseMonths ? months[months.length - 1] : months[0];
+    return first?.date ?? /* @__PURE__ */ new Date();
+  };
+  const useDateLib = () => {
+    const { locale, timeZone, numerals, dateLib } = useDayPicker().dayPickerProps;
+    return useMemo(
+      // The same merge the engine makes, so a partial `locale` still resolves
+      // against `en-US` rather than leaving fields undefined.
+      () => new DateLib({ locale: { ...defaultLocale, ...locale }, timeZone, numerals }, dateLib),
+      [locale, timeZone, numerals, dateLib]
+    );
+  };
+  const MonthCaption$1 = ({ calendarMonth, displayIndex, ...engineProps }) => /* @__PURE__ */ jsx(CaptionMonthContext.Provider, { value: calendarMonth.date, children: /* @__PURE__ */ jsx(
+    MonthCaption,
+    {
+      calendarMonth,
+      displayIndex,
+      ...mergeSlotAttrs(attrsRef.current.monthCaption, engineProps)
+    }
+  ) });
+  MonthCaption$1.displayName = "Calendar.monthCaption";
+  const CaptionLabel$1 = ({ children, ...engineProps }) => {
+    const { triggersEnabled, view, setView, navigationDisabled, panelId, pendingFocusRef, restoreRef } = viewRef.current;
+    const { formatters, labels } = useDayPicker();
+    const caption = useContext(CaptionMonthContext);
+    const anchor = useDisplayedMonth();
+    const dateLib = useDateLib();
+    const displayed = caption ?? anchor;
+    const slotProps = mergeSlotAttrs(attrsRef.current.captionLabel, engineProps);
+    if (!triggersEnabled || displayed.getTime() !== anchor.getTime())
+      return /* @__PURE__ */ jsx(CaptionLabel, { ...slotProps, children });
+    const trigger = (target, label, describe) => {
+      const opens = view !== target;
+      const disabled = navigationDisabled && opens;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ...mergeSlotAttrs(attrsRef.current.captionTrigger, {
+            "data-view": target,
+            // The engine's own label, so `labels` translates the panel too; a
+            // per-instance override still wins through `slotProps`.
+            "aria-label": attrsRef.current.captionTrigger["aria-label"] ?? `${label}, ${describe}`,
+            "aria-expanded": view === target,
+            "aria-controls": view === target ? panelId : void 0,
+            "aria-disabled": disabled || void 0,
+            "onClick": (event) => {
+              if (disabled) return;
+              const next = opens ? target : "day";
+              restoreRef.current = next === "day" ? null : event.currentTarget;
+              pendingFocusRef.current = next !== "day";
+              setView(next);
+            }
+          }),
+          children: label
+        }
+      );
+    };
+    const monthLabel = formatters.formatMonthDropdown(displayed, dateLib);
+    const yearLabel = formatters.formatYearDropdown(displayed, dateLib);
+    return /* @__PURE__ */ jsxs(
+      CaptionLabel,
+      {
+        ...slotProps,
+        role: void 0,
+        "aria-live": void 0,
+        children: [
+          trigger("month", monthLabel, labels.labelMonthDropdown()),
+          trigger("year", yearLabel, labels.labelYearDropdown()),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", style: visuallyHidden, children: view === "day" ? `${monthLabel} ${yearLabel}` : view === "month" ? labels.labelMonthDropdown() : labels.labelYearDropdown() })
+        ]
+      }
+    );
+  };
+  CaptionLabel$1.displayName = "Calendar.captionLabel";
+  const MonthGrid$1 = ({ children, ...engineProps }) => {
+    const { view, setView, navigationDisabled, minDate, maxDate, panelId, panelRef, pendingFocusRef, restoreRef } = viewRef.current;
+    const { dayPickerProps, formatters, goToMonth, labels } = useDayPicker();
+    const displayed = useDisplayedMonth();
+    const dateLib = useDateLib();
+    useEffect(() => {
+      if (view === "day" || !pendingFocusRef.current) return;
+      pendingFocusRef.current = false;
+      panelRef.current?.querySelector('[role="gridcell"][tabindex="0"]')?.focus();
+    }, [view, panelRef, pendingFocusRef]);
+    if (view === "day") {
+      return /* @__PURE__ */ jsx(MonthGrid, { ...mergeSlotAttrs(attrsRef.current.monthGrid, { ...engineProps, children }) });
+    }
+    const year = displayed.getFullYear();
+    const pageStart = yearPageStart(year);
+    const restoreFocus = () => {
+      const trigger = panelRef.current?.closest('[data-slot="root"]')?.querySelector(`[data-slot="caption-trigger"][data-view="${view}"]`);
+      (restoreRef.current ?? trigger)?.focus();
+    };
+    const items = view === "month" ? Array.from({ length: 12 }, (_, month) => {
+      const date = new Date(year, month, 1);
+      return {
+        key: String(month),
+        // No engine formatter abbreviates a month — the dropdown spells
+        // it out — so this is the one label built from a pattern; the
+        // date library is still the engine's, so locale and numerals
+        // hold.
+        label: dateLib.format(date, "LLL"),
+        name: formatters.formatCaption(date, dateLib.options, dateLib),
+        current: displayed.getMonth() === month,
+        // Picking a cell is navigation, so `disableNavigation` takes the
+        // whole board down with the arrows — `goToMonth` would no-op and
+        // leave an enabled-looking cell that does nothing.
+        enabled: !navigationDisabled && isMonthInBounds(year, month, minDate, maxDate),
+        select: () => {
+          goToMonth(date);
+          setView("day");
+          restoreFocus();
+        }
+      };
+    }) : Array.from({ length: YEARS_PER_PAGE }, (_, offset) => {
+      const candidate = pageStart + offset;
+      const label2 = formatters.formatYearDropdown(new Date(candidate, 0, 1), dateLib);
+      return {
+        key: String(candidate),
+        label: label2,
+        name: label2,
+        current: candidate === year,
+        enabled: !navigationDisabled && isYearInBounds(candidate, minDate, maxDate),
+        select: () => {
+          goToMonth(new Date(candidate, displayed.getMonth(), 1));
+          restoreRef.current = null;
+          pendingFocusRef.current = true;
+          setView("month");
+        }
+      };
+    });
+    const seek = (start, delta, min = 0, max = items.length - 1) => {
+      for (let index = start; index >= min && index <= max; index += delta) if (items[index]?.enabled) return index;
+      return void 0;
+    };
+    const current = items.findIndex((item) => item.current && item.enabled);
+    const activeIndex = current >= 0 ? current : seek(0, 1) ?? -1;
+    const inline = dayPickerProps.dir === "rtl" ? -1 : 1;
+    const move = (event, from) => {
+      const step = { ArrowLeft: -inline, ArrowRight: inline, ArrowUp: -PANEL_COLUMNS, ArrowDown: PANEL_COLUMNS }[event.key];
+      const rowStart = from - from % PANEL_COLUMNS;
+      const rowEnd = rowStart + PANEL_COLUMNS - 1;
+      let next;
+      if (step !== void 0) next = seek(from + step, step);
+      else if (event.key === "Home") next = seek(rowStart, 1, rowStart, rowEnd);
+      else if (event.key === "End") next = seek(rowEnd, -1, rowStart, rowEnd);
+      if (next === void 0) return;
+      event.preventDefault();
+      const cells = event.currentTarget.querySelectorAll('[role="gridcell"]');
+      cells[next]?.focus();
+    };
+    const label = view === "month" ? `${labels.labelMonthDropdown()}, ${formatters.formatYearDropdown(displayed, dateLib)}` : `${labels.labelYearDropdown()}, ${dateLib.formatNumber(pageStart)}\u2013${dateLib.formatNumber(pageStart + YEARS_PER_PAGE - 1)}`;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...mergeSlotAttrs(attrsRef.current.monthYearGrid, {
+          "id": panelId,
+          "role": "grid",
+          "aria-label": attrsRef.current.monthYearGrid["aria-label"] ?? label,
+          "data-view": view,
+          "ref": panelRef,
+          "onKeyDown": (event) => {
+            if (event.key === "Escape") {
+              event.stopPropagation();
+              setView("day");
+              restoreFocus();
+              return;
+            }
+            const cells = [...event.currentTarget.querySelectorAll('[role="gridcell"]')];
+            const from = cells.indexOf(event.target);
+            if (from >= 0) move(event, from);
+          }
+        }),
+        children: Array.from({ length: items.length / PANEL_COLUMNS }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", style: displayContents, children: items.slice(row * PANEL_COLUMNS, row * PANEL_COLUMNS + PANEL_COLUMNS).map((item, column) => {
+          const index = row * PANEL_COLUMNS + column;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !item.enabled,
+              ...mergeSlotAttrs(attrsRef.current.monthYearCell, {
+                "role": "gridcell",
+                "aria-label": item.name,
+                "aria-selected": item.current,
+                "data-selected": item.current || void 0,
+                "data-disabled": item.enabled ? void 0 : true,
+                "tabIndex": index === activeIndex ? 0 : -1,
+                "onClick": item.select
+              }),
+              children: item.label
+            },
+            item.key
+          );
+        }) }, row))
+      }
+    );
+  };
+  MonthGrid$1.displayName = "Calendar.monthGrid";
+  const aroundArrow = (slot) => {
+    const Engine = slot === "previousMonthButton" ? PreviousMonthButton : NextMonthButton;
+    const Arrow = ({ children, ...engineProps }) => {
+      const { view, navigationDisabled, minDate, maxDate } = viewRef.current;
+      const { formatters, goToMonth } = useDayPicker();
+      const displayed = useDisplayedMonth();
+      const dateLib = useDateLib();
+      const slotProps = mergeSlotAttrs(attrsRef.current[slot], engineProps);
+      if (view !== "year") return /* @__PURE__ */ jsx(Engine, { ...slotProps, children });
+      const target = new Date(displayed.getFullYear() + (slot === "previousMonthButton" ? -1 : 1), displayed.getMonth(), 1);
+      const disabled = navigationDisabled || !isYearInBounds(target.getFullYear(), minDate, maxDate);
+      return /* @__PURE__ */ jsx(
+        Engine,
+        {
+          ...slotProps,
+          "aria-label": formatters.formatYearDropdown(target, dateLib),
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? -1 : void 0,
+          onClick: () => {
+            if (!disabled) goToMonth(target);
+          },
+          children
+        }
+      );
+    };
+    Arrow.displayName = `Calendar.${slot}`;
+    return Arrow;
+  };
+  const Nav = (engineProps) => {
+    const { triggersEnabled, view, navigationDisabled, minDate, maxDate } = viewRef.current;
+    const { classNames: engineClassNames, components, formatters, goToMonth, labels } = useDayPicker();
+    const displayed = useDisplayedMonth();
+    const dateLib = useDateLib();
+    const slotProps = mergeSlotAttrs(attrsRef.current.nav, engineProps);
+    const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navAttrs } = slotProps;
+    const singleStep = view === "year" ? 12 : 1;
+    const doubleStep = view === "year" ? YEARS_PER_PAGE * 12 : 12;
+    const singleGrain = view === "year" ? "year" : "month";
+    const doubleGrain = view === "year" ? "page" : "year";
+    const shift = (months) => new Date(displayed.getFullYear(), displayed.getMonth() + months, 1);
+    const reachable = (target, grain) => grain === "month" ? isMonthInBounds(target.getFullYear(), target.getMonth(), minDate, maxDate) : grain === "year" ? isYearInBounds(target.getFullYear(), minDate, maxDate) : isYearPageInBounds(target.getFullYear(), minDate, maxDate);
+    const formatYear = (target) => formatters.formatYearDropdown(target, dateLib);
+    const formatPage = (target) => {
+      const start = yearPageStart(target.getFullYear());
+      return `${dateLib.formatNumber(start)}\u2013${dateLib.formatNumber(start + YEARS_PER_PAGE - 1)}`;
+    };
+    const arrowLabel = (grain, target, previous) => grain === "month" ? previous ? labels.labelPrevious(target) : labels.labelNext(target) : grain === "year" ? formatYear(target) : formatPage(target);
+    const arrow = (slot, months, grain, icon) => {
+      const target = shift(months);
+      const label = arrowLabel(grain, target, months < 0);
+      const engineOwned = slot === "previousMonthButton" || slot === "nextMonthButton";
+      const delegated = engineOwned && view === "day";
+      const disabled = navigationDisabled || (delegated ? !(months < 0 ? previousMonth : nextMonth) : !reachable(target, grain));
+      const Button2 = slot.startsWith("previous") ? PreviousMonthButton : NextMonthButton;
+      return /* @__PURE__ */ jsx(
+        Button2,
+        {
+          type: "button",
+          ...mergeSlotAttrs(attrsRef.current[slot], {
+            "className": engineOwned ? engineClassNames[slot === "previousMonthButton" ? UI.PreviousMonthButton : UI.NextMonthButton] : void 0,
+            "aria-label": label,
+            "aria-disabled": disabled || void 0,
+            "tabIndex": disabled ? -1 : void 0,
+            "onClick": (event) => {
+              if (disabled) return;
+              if (delegated) return months < 0 ? onPreviousClick?.(event) : onNextClick?.(event);
+              goToMonth(target);
+            }
+          }),
+          children: icon
+        }
+      );
+    };
+    const chevron = (orientation) => /* @__PURE__ */ jsx(components.Chevron, { orientation, className: engineClassNames[UI.Chevron] });
+    const doubleChevron = (Icon) => /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", ...mergeSlotAttrs(attrsRef.current.chevron, { className: engineClassNames[UI.Chevron] }) });
+    return /* @__PURE__ */ jsxs("nav", { ...navAttrs, children: [
+      triggersEnabled && arrow("previousYearButton", -doubleStep, doubleGrain, doubleChevron(DoubleChevronLeftIconOutlinedRounded)),
+      arrow("previousMonthButton", -singleStep, singleGrain, chevron("left")),
+      arrow("nextMonthButton", singleStep, singleGrain, chevron("right")),
+      triggersEnabled && arrow("nextYearButton", doubleStep, doubleGrain, doubleChevron(DoubleChevronRightIconOutlinedRounded))
+    ] });
+  };
+  Nav.displayName = "Calendar.nav";
+  const DayButton$1 = ({ day, modifiers, children, ...engineProps }) => {
+    const slotProps = mergeSlotAttrs(attrsRef.current.dayButton, engineProps);
+    return /* @__PURE__ */ jsx(DayButton, { ...slotProps, day, modifiers, children: renderDayRef.current ? renderDayRef.current(day.date, modifiers) : children });
+  };
+  DayButton$1.displayName = "Calendar.dayButton";
+  return {
+    Root,
+    Chevron,
+    CaptionLabel: CaptionLabel$1,
+    MonthCaption: MonthCaption$1,
+    MonthGrid: MonthGrid$1,
+    Nav,
+    Months: withSlot(Months, "months"),
+    Month: withSlot(Month, "month"),
+    PreviousMonthButton: aroundArrow("previousMonthButton"),
+    NextMonthButton: aroundArrow("nextMonthButton"),
+    DropdownNav: withSlot(DropdownNav, "dropdowns"),
+    // The engine hands these props to its own `<select>`, so `dropdown` is the
+    // select's anchor. Its wrapping span (`dropdownRoot`) is class-only — see
+    // `base.ts`.
+    Dropdown: withSlot(Dropdown$1, "dropdown"),
+    Weekdays: withSlot(Weekdays, "weekdays"),
+    Weekday: withSlot(Weekday, "weekday"),
+    Weeks: withSlot(Weeks, "weeks"),
+    Week: withSlot(Week, "week"),
+    WeekNumber: withSlot(WeekNumber, "weekNumber"),
+    WeekNumberHeader: withSlot(WeekNumberHeader, "weekNumberHeader"),
+    Day: withSlot(Day, "day"),
+    DayButton: DayButton$1,
+    Footer: withSlot(Footer, "footer")
+  };
+};
+var Calendar = (props) => {
+  const theme = useComponentTheme("Calendar");
+  const { rootAttrs, rest } = composeRootAttrs(CalendarBase, props, theme, {
+    // `data-size` is takeoff-v2's own visual vocabulary. The engine's root
+    // already emits `data-mode`, `data-multiple-months`, `data-week-numbers`
+    // and `data-nav-layout`, so those are not mirrored here (rule 7).
+    stateAttrs: ({ size = DEFAULT_SIZE5, headerType = DEFAULT_HEADER_TYPE }) => ({
+      "data-size": size,
+      "data-header-type": headerType
+    })
+  });
+  const {
+    mode = DEFAULT_MODE2,
+    value,
+    defaultValue,
+    onValueChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    allowedDates,
+    disabledWeekDays,
+    firstDayOfWeekIndex,
+    size: _size,
+    headerType: _headerType,
+    view: viewProp,
+    defaultView = DEFAULT_VIEW,
+    onViewChange,
+    ref,
+    min,
+    max,
+    excludeDisabled,
+    renderDay,
+    ...engine
+  } = rest;
+  const isControlled = "value" in props;
+  const [uncontrolledValue, setUncontrolledValue] = useState(isControlled ? void 0 : value ?? defaultValue);
+  const selected = isControlled ? value : uncontrolledValue;
+  const setSelected = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const isMonthControlled = engine.month !== void 0;
+  const anchor = selectionAnchor(selected);
+  const [followedMonth, setFollowedMonth] = useState(void 0);
+  const displayedMonthRef = useRef(void 0);
+  const anchorYear = anchor?.getFullYear();
+  const anchorMonth = anchor?.getMonth();
+  useEffect(() => {
+    if (isMonthControlled || anchorYear === void 0 || anchorMonth === void 0) return;
+    const displayed = displayedMonthRef.current;
+    const target = new Date(anchorYear, anchorMonth, 1);
+    if (displayed && isSameCalendarMonth(displayed, target)) return;
+    displayedMonthRef.current = target;
+    setFollowedMonth(target);
+  }, [isMonthControlled, anchorYear, anchorMonth]);
+  const handleMonthChange = (next) => {
+    displayedMonthRef.current = next;
+    setFollowedMonth(next);
+    engine.onMonthChange?.(next);
+  };
+  const triggersEnabled = !engine.captionLayout?.startsWith("dropdown");
+  const isViewControlled = props.view !== void 0;
+  const [uncontrolledView, setUncontrolledView] = useState(viewProp ?? defaultView);
+  const view = isViewControlled ? props.view : uncontrolledView;
+  const setView = (next) => {
+    if (!isViewControlled) setUncontrolledView(next);
+    onViewChange?.(next);
+  };
+  const panelId = useId();
+  const panelRef = useRef(null);
+  const restoreRef = useRef(null);
+  const pendingFocusRef = useRef(false);
+  const navigationDisabled = Boolean(engine.disableNavigation);
+  const viewState = { triggersEnabled, view, setView, navigationDisabled, minDate, maxDate, panelId, panelRef, restoreRef, pendingFocusRef };
+  const viewRef = useRef(viewState);
+  viewRef.current = viewState;
+  const slotAttrs = {};
+  const classNames = { ...ENGINE_CLASSNAME_RESET, ...calendarRangeClassNames };
+  for (const slot of CalendarBase.slots) {
+    const composed = slot === "root" ? (
+      // `data-view` is live state, not a resolved prop, so it is layered on
+      // here rather than through `stateAttrs`.
+      { ...rootAttrs, "data-view": view }
+    ) : buildSlotAttrs(CalendarBase.getSlotProps(slot), slot, {
+      themeSlotProps: theme?.slotProps,
+      themeClassNames: theme?.classNames,
+      instanceSlotProps: props.slotProps,
+      instanceClassNames: props.classNames
+    });
+    const uiKey = SLOT_TO_UI[slot];
+    if (uiKey === void 0) {
+      slotAttrs[slot] = composed;
+      continue;
+    }
+    const { className, ...attrs } = composed;
+    slotAttrs[slot] = attrs;
+    classNames[uiKey] = className ?? "";
+  }
+  const attrsRef = useRef(slotAttrs);
+  attrsRef.current = slotAttrs;
+  const refRef = useRef(ref);
+  refRef.current = ref;
+  const renderDayRef = useRef(renderDay);
+  renderDayRef.current = renderDay;
+  const components = useMemo(() => createEngineComponents(attrsRef, refRef, viewRef, renderDayRef), []);
+  const disabled = buildDisabledMatchers({ minDate, maxDate, disabledDates, allowedDates, disabledWeekDays });
+  const engineProps = {
+    ...engine,
+    // A board belongs to the calendar, not to a month, so only one month is
+    // displayed while one is open — the board would otherwise be repeated per
+    // month, `id` and all. Mapped on the prop rather than by dropping the extra
+    // months from the `Month` override, which would take the engine's
+    // navigation down with them: `navLayout="after"` and `"around"` render it
+    // inside a month.
+    numberOfMonths: view === "day" ? engine.numberOfMonths : 1,
+    // A passed `month` stays in charge; otherwise the month the grid follows is
+    // whatever it was last moved to — by the user's own navigation or by the
+    // selection above. `defaultMonth` still seeds the first render, because
+    // `followedMonth` is undefined until something moves.
+    month: isMonthControlled ? engine.month : followedMonth,
+    onMonthChange: handleMonthChange,
+    mode,
+    selected,
+    onSelect: setSelected,
+    disabled,
+    startMonth: minDate,
+    endMonth: maxDate,
+    weekStartsOn: firstDayOfWeekIndex,
+    min,
+    max,
+    excludeDisabled,
+    classNames,
+    components
+  };
+  return /* @__PURE__ */ jsx(DayPicker, { ...engineProps });
+};
+Calendar.displayName = "Calendar";
+
 // src/components/card/base.ts
 var CardBase = createComponentBase({
   name: "Card",
@@ -783,12 +1476,12 @@ var Card = (props) => {
 Card.displayName = "Card";
 
 // src/components/card/defaults.ts
-var DEFAULT_HEADER_TYPE = "basic";
+var DEFAULT_HEADER_TYPE2 = "basic";
 var DEFAULT_FOOTER_TYPE = "basic";
 var CardHeader = (props) => {
   const theme = useComponentTheme("CardHeader");
   const { rootAttrs, rest } = composeRootAttrs(CardHeaderBase, props, theme, {
-    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE }) => ({
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE2 }) => ({
       "data-header-type": headerType
     })
   });
@@ -866,11 +1559,11 @@ var CheckboxBase = createComponentBase({
 var [CheckboxProvider, useCheckboxOwnContext] = createSafeContext("CheckboxProvider");
 
 // src/components/checkbox/defaults.ts
-var DEFAULT_SIZE5 = "base";
+var DEFAULT_SIZE6 = "base";
 var Checkbox = (props) => {
   const theme = useComponentTheme("Checkbox");
   const { rootAttrs, rest } = composeRootAttrs(CheckboxBase, props, theme, {
-    stateAttrs: ({ size = DEFAULT_SIZE5 }) => ({
+    stateAttrs: ({ size = DEFAULT_SIZE6 }) => ({
       "data-size": size
     })
   });
@@ -938,7 +1631,7 @@ var CheckboxIndicator = (props) => {
     instanceSlotProps: slotProps,
     instanceClassNames: classNames
   });
-  const resolvedChildren = typeof children === "function" ? children({ checked, indeterminate }) : children ?? /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsx(PlaceholderRemove, {}) : /* @__PURE__ */ jsx(PlaceholderCheck, {}) });
+  const resolvedChildren = typeof children === "function" ? children({ checked, indeterminate }) : children ?? /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsx(RemoveIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(CheckIconOutlinedRounded, {}) });
   return /* @__PURE__ */ jsx("span", { ...rest, ...indicatorAttrs, ref, children: resolvedChildren });
 };
 CheckboxIndicator.displayName = "Checkbox.Indicator";
@@ -962,13 +1655,13 @@ var ChipBase = createComponentBase({
 // src/components/chip/defaults.ts
 var DEFAULT_VARIANT4 = "primary";
 var DEFAULT_APPEARANCE4 = "filled";
-var DEFAULT_SIZE6 = "base";
+var DEFAULT_SIZE7 = "base";
 var DEFAULT_REMOVE_LABEL = "Remove";
 var Chip = (props) => {
   const theme = useComponentTheme("Chip");
   const [dismissed, setDismissed] = useState(false);
   const { rootAttrs, rest } = composeRootAttrs(ChipBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT4, appearance = DEFAULT_APPEARANCE4, size = DEFAULT_SIZE6, clickable: clickable2 = false, disabled: disabled2 = false, removable: removable2 = false }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT4, appearance = DEFAULT_APPEARANCE4, size = DEFAULT_SIZE7, clickable: clickable2 = false, disabled: disabled2 = false, removable: removable2 = false }) => ({
       "data-variant": variant,
       "data-type": appearance,
       "data-size": size,
@@ -1063,7 +1756,7 @@ var Chip = (props) => {
         isRenderableNode(children) && /* @__PURE__ */ jsx("span", { ...labelSlotAttrs, children }),
         removable && // The icon-only remove control needs an accessible name. Default it,
         // but let `slotProps.remove` (spread after) override via `aria-label`.
-        /* @__PURE__ */ jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ jsx(PlaceholderClose, {}) })
+        /* @__PURE__ */ jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) })
       ]
     }
   );
@@ -1075,14 +1768,15 @@ var [DrawerProvider, useDrawerOwnContext] = createSafeContext("DrawerProvider");
 
 // src/components/drawer/defaults.ts
 var DEFAULT_PLACEMENT = "right";
-var DEFAULT_HEADER_TYPE2 = "basic";
+var DEFAULT_HEADER_TYPE3 = "basic";
 var DEFAULT_FOOTER_TYPE2 = "basic";
 var DEFAULT_INTENSITY = "base";
+var DEFAULT_CLOSE_LABEL2 = "Close";
 var Drawer = (props) => {
   const theme = useComponentTheme("Drawer");
   const merged = { ...theme?.defaultProps, ...props };
-  const { placement = DEFAULT_PLACEMENT, dismissible = true, disabled = false, children, ...sparProps } = merged;
-  return /* @__PURE__ */ jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsx(Dialog$1, { ...sparProps, disabled, forceMount: true, children }) });
+  const { placement = DEFAULT_PLACEMENT, dismissible = true, disabled = false, forceMount = true, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsx(Dialog$1, { ...sparProps, disabled, forceMount, children }) });
 };
 Drawer.displayName = "Drawer";
 
@@ -1177,7 +1871,7 @@ DrawerPanel.displayName = "Drawer.Panel";
 var DrawerHeader = (props) => {
   const theme = useComponentTheme("DrawerHeader");
   const { rootAttrs, rest } = composeRootAttrs(DrawerHeaderBase, props, theme, {
-    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE2 }) => ({
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE3 }) => ({
       "data-header-type": headerType
     })
   });
@@ -1223,8 +1917,9 @@ DrawerFooter.displayName = "Drawer.Footer";
 var DrawerClose = (props) => {
   const theme = useComponentTheme("DrawerClose");
   const { rootAttrs, rest } = composeRootAttrs(DrawerCloseBase, props, theme);
-  const { children, ref, ...closeProps } = rest;
-  return /* @__PURE__ */ jsx(DialogClose$1, { ...closeProps, ref, ...rootAttrs, children });
+  const { children, ref, "aria-label": ariaLabel, ...closeProps } = rest;
+  const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
+  return /* @__PURE__ */ jsx(DialogClose$1, { ...closeProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL2), ref, ...rootAttrs, children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) });
 };
 DrawerClose.displayName = "Drawer.Close";
 
@@ -1325,8 +2020,9 @@ DialogTrigger.displayName = "Dialog.Trigger";
 
 // src/components/dialog/defaults.ts
 var DEFAULT_INTENSITY2 = "base";
-var DEFAULT_HEADER_TYPE3 = "basic";
+var DEFAULT_HEADER_TYPE4 = "basic";
 var DEFAULT_FOOTER_TYPE3 = "basic";
+var DEFAULT_CLOSE_LABEL3 = "Close";
 var DialogOverlay = (props) => {
   const theme = useComponentTheme("DialogOverlay");
   const { rootAttrs, rest } = composeRootAttrs(DialogOverlayBase, props, theme, {
@@ -1356,7 +2052,7 @@ DialogPanel.displayName = "Dialog.Panel";
 var DialogHeader = (props) => {
   const theme = useComponentTheme("DialogHeader");
   const { rootAttrs, rest } = composeRootAttrs(DialogHeaderBase, props, theme, {
-    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE3 }) => ({
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE4 }) => ({
       "data-header-type": headerType
     })
   });
@@ -1402,8 +2098,9 @@ DialogFooter.displayName = "Dialog.Footer";
 var DialogClose = (props) => {
   const theme = useComponentTheme("DialogClose");
   const { rootAttrs, rest } = composeRootAttrs(DialogCloseBase, props, theme);
-  const { children, ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsx(DialogClose$1, { ...sparProps, ...rootAttrs, ref, children });
+  const { children, ref, "aria-label": ariaLabel, ...sparProps } = rest;
+  const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
+  return /* @__PURE__ */ jsx(DialogClose$1, { ...sparProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL3), ...rootAttrs, ref, children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) });
 };
 DialogClose.displayName = "Dialog.Close";
 
@@ -1462,12 +2159,12 @@ Divider.displayName = "Divider";
 var [DropdownProvider, useDropdownOwnContext] = createSafeContext("DropdownProvider");
 
 // src/components/dropdown/defaults.ts
-var DEFAULT_SIZE7 = "base";
+var DEFAULT_SIZE8 = "base";
 var DEFAULT_CONTENT_WIDTH = "content";
 var Dropdown = (props) => {
   const theme = useComponentTheme("Dropdown");
   const merged = { ...theme?.defaultProps, ...props };
-  const { size = DEFAULT_SIZE7, contentWidth = DEFAULT_CONTENT_WIDTH, children, ...sparProps } = merged;
+  const { size = DEFAULT_SIZE8, contentWidth = DEFAULT_CONTENT_WIDTH, children, ...sparProps } = merged;
   return /* @__PURE__ */ jsx(DropdownProvider, { value: { size, contentWidth }, children: /* @__PURE__ */ jsx(DropdownMenu, { ...sparProps, children }) });
 };
 Dropdown.displayName = "Dropdown";
@@ -1653,7 +2350,7 @@ var FieldDescription = (props) => {
   });
   const hasContent = children != null && children !== "";
   return /* @__PURE__ */ jsxs(FieldDescription$1, { ...spar, ref, ...rootAttrs, children: [
-    hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PlaceholderInfo, {}) }),
+    hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(InfoIconFilledRounded, {}) }),
     children
   ] });
 };
@@ -1670,7 +2367,7 @@ var FieldErrorMessage = (props) => {
   });
   const hasContent = children != null && children !== "";
   return /* @__PURE__ */ jsxs(FieldErrorMessage$1, { ...spar, ref, ...rootAttrs, children: [
-    hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PlaceholderError, {}) }),
+    hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertCircleIconFilledRounded, {}) }),
     children
   ] });
 };
@@ -1759,7 +2456,7 @@ var InputChipsBase = createComponentBase({
 var [InputProvider, useInputOwnContext] = createSafeContext("InputProvider");
 
 // src/components/input/defaults.ts
-var DEFAULT_SIZE8 = "base";
+var DEFAULT_SIZE9 = "base";
 var SEGMENT_COUNT = 4;
 var computeStrength = (value) => {
   let strength = 0;
@@ -1811,11 +2508,11 @@ var Input = (props) => {
     for (const value of clearablesRef.current.values()) value.clear();
   }, []);
   const { rootAttrs, rest } = composeRootAttrs(InputBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE8 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE9 }) => ({
       "data-size": size2
     })
   });
-  const { size = DEFAULT_SIZE8, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE9, children, ref, ...sparProps } = rest;
   const contextValue = useMemo(
     () => ({
       size,
@@ -1999,7 +2696,7 @@ var InputClearButton = (props) => {
       "aria-label": ariaLabel,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      startContent: children ?? /* @__PURE__ */ jsx(PlaceholderClose, {})
+      startContent: children ?? /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {})
     }
   );
 };
@@ -2030,7 +2727,7 @@ var InputDecrement = (props) => {
       disabled: disabled || readOnly,
       "aria-label": ariaLabel,
       onClick: handleClick,
-      startContent: children ?? /* @__PURE__ */ jsx(PlaceholderChevronDown, {})
+      startContent: children ?? /* @__PURE__ */ jsx(ChevronBottomIconOutlinedRounded, {})
     }
   );
 };
@@ -2039,7 +2736,7 @@ var InputField = (props) => {
   const theme = useComponentTheme("InputField");
   const { fieldRef, setFieldNode, setFieldValue, revealed, setRevealed } = useInputOwnContext("Input.Field");
   const { rootAttrs, rest } = composeRootAttrs(InputFieldBase, props, theme);
-  const { as, ref, type, onInput, onChange, ...spar } = rest;
+  const { as, ref, type, onInput, onChange, onValueChange, ...spar } = rest;
   const effectiveType = type === "password" && revealed ? "text" : type;
   const renderedType = as === "textarea" ? void 0 : effectiveType;
   const setFieldRef = useCallback(
@@ -2068,6 +2765,10 @@ var InputField = (props) => {
     onChange?.(event);
     setFieldValue(event.currentTarget.value);
   };
+  const handleValueChange = (value, meta) => {
+    setFieldValue(value);
+    onValueChange?.(value, meta);
+  };
   return /* @__PURE__ */ jsx(
     InputField$1,
     {
@@ -2076,6 +2777,7 @@ var InputField = (props) => {
       type: renderedType,
       onInput: handleInput,
       onChange: handleChange,
+      onValueChange: handleValueChange,
       ref: setFieldRef,
       ...rootAttrs
     }
@@ -2108,7 +2810,7 @@ var InputIncrement = (props) => {
       disabled: disabled || readOnly,
       "aria-label": ariaLabel,
       onClick: handleClick,
-      startContent: children ?? /* @__PURE__ */ jsx(PlaceholderChevronUp, {})
+      startContent: children ?? /* @__PURE__ */ jsx(ChevronTopIconOutlinedRounded, {})
     }
   );
 };
@@ -2167,7 +2869,7 @@ var InputRevealButton = (props) => {
       "aria-label": "Toggle password visibility",
       "aria-pressed": revealed,
       onClick: handleClick,
-      startContent: children ?? (revealed ? /* @__PURE__ */ jsx(PlaceholderEyeOff, {}) : /* @__PURE__ */ jsx(PlaceholderEye, {}))
+      startContent: children ?? (revealed ? /* @__PURE__ */ jsx(EyeClosedIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(EyeOpenIconOutlinedRounded, {}))
     }
   );
 };
@@ -2208,8 +2910,6 @@ var InputTrailingIcon = (props) => {
   return /* @__PURE__ */ jsx(Component, { "aria-hidden": "true", ...rendered, ref, ...rootAttrs, children });
 };
 InputTrailingIcon.displayName = "Input.TrailingIcon";
-
-// src/components/input/index.ts
 var Input2 = Object.assign(Input, {
   Field: InputField,
   Prefix: InputPrefix,
@@ -2271,19 +2971,19 @@ var RADIO_ITEM_CONTEXT_VALUE = { inside: true };
 var [RadioItemProvider, useRadioItemOwnContext] = createSafeContext("RadioItemProvider");
 
 // src/components/radio/defaults.ts
-var DEFAULT_SIZE9 = "base";
+var DEFAULT_SIZE10 = "base";
 var DEFAULT_POSITION = "left";
 var Radio = (props) => {
   const theme = useComponentTheme("Radio");
   const { rootAttrs, rest } = composeRootAttrs(RadioBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE9, position: position2 = DEFAULT_POSITION, spread }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE10, position: position2 = DEFAULT_POSITION, spread }) => ({
       "data-size": size2,
       "data-position": position2,
       "data-spread": spread ? "" : void 0
     })
   });
   const {
-    size = DEFAULT_SIZE9,
+    size = DEFAULT_SIZE10,
     position = DEFAULT_POSITION,
     invalid,
     // `spread` is consumed only as a data-attr above; destructure to keep it
@@ -2402,6 +3102,7 @@ PopoverTrigger.displayName = "Popover.Trigger";
 
 // src/components/popover/defaults.ts
 var DEFAULT_VARIANT5 = "white";
+var DEFAULT_CLOSE_LABEL4 = "Close";
 var PopoverContent = (props) => {
   const theme = useComponentTheme("PopoverContent");
   const { rootAttrs, rest } = composeRootAttrs(PopoverContentBase, props, theme, {
@@ -2437,8 +3138,9 @@ PopoverArrow.displayName = "Popover.Arrow";
 var PopoverClose = (props) => {
   const theme = useComponentTheme("PopoverClose");
   const { rootAttrs, rest } = composeRootAttrs(PopoverCloseBase, props, theme);
-  const { children, ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsx(PopoverClose$1, { ...sparProps, ...rootAttrs, ref, children });
+  const { children, ref, "aria-label": ariaLabel, ...sparProps } = rest;
+  const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
+  return /* @__PURE__ */ jsx(PopoverClose$1, { ...sparProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL4), ...rootAttrs, ref, children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) });
 };
 PopoverClose.displayName = "Popover.Close";
 
@@ -2479,7 +3181,7 @@ var [ProgressProvider, useProgressContext] = createSafeContext("ProgressProvider
 
 // src/components/progress/defaults.ts
 var DEFAULT_APPEARANCE6 = "linear";
-var DEFAULT_SIZE10 = "base";
+var DEFAULT_SIZE11 = "base";
 var DEFAULT_VARIANT6 = "primary";
 var DEFAULT_MIN = 0;
 var DEFAULT_MAX = 100;
@@ -2560,7 +3262,7 @@ var Progress = (props) => {
   const resolveState = ({
     indeterminate: indeterminate2 = false,
     appearance: appearance2 = DEFAULT_APPEARANCE6,
-    size: size2 = DEFAULT_SIZE10,
+    size: size2 = DEFAULT_SIZE11,
     variant: variant2 = DEFAULT_VARIANT6,
     disabled: disabled2 = field?.disabled ?? false
   }) => ({ indeterminate: indeterminate2, appearance: appearance2, size: size2, variant: variant2, disabled: disabled2 });
@@ -2704,17 +3406,17 @@ var SelectArrowBase = createComponentBase({
 var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
 
 // src/components/select/defaults.ts
-var DEFAULT_SIZE11 = "base";
+var DEFAULT_SIZE12 = "base";
 var DEFAULT_CONTENT_WIDTH2 = "trigger";
 var Select = (props) => {
   const theme = useComponentTheme("Select");
   const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE11, invalid: invalid2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE12, invalid: invalid2 }) => ({
       "data-size": size2,
       "data-invalid": invalid2 ? "" : void 0
     })
   });
-  const { size = DEFAULT_SIZE11, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH2, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE12, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH2, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsx(Select$1, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
@@ -2874,7 +3576,7 @@ var [SliderProvider, useSliderContext] = createSafeContext("SliderProvider");
 
 // src/components/slider/defaults.ts
 var DEFAULT_ORIENTATION2 = "horizontal";
-var DEFAULT_SIZE12 = "base";
+var DEFAULT_SIZE13 = "base";
 var DEFAULT_VARIANT7 = "primary";
 var DEFAULT_TOOLTIP = "auto";
 var DEFAULT_TRACK = "normal";
@@ -3174,7 +3876,7 @@ var Slider = (props) => {
   const { rootAttrs, rest } = composeRootAttrs(SliderBase, props, theme, {
     stateAttrs: (merged) => {
       const {
-        size = DEFAULT_SIZE12,
+        size = DEFAULT_SIZE13,
         variant = DEFAULT_VARIANT7,
         orientation: orientation2 = DEFAULT_ORIENTATION2,
         tooltip = DEFAULT_TOOLTIP,
@@ -3397,8 +4099,8 @@ var Slider = (props) => {
         name && !disabled && (range ? (
           // One input per handle so a 3+ thumb range submits every value; a
           // two-handle range keeps the conventional `-min` / `-max` pair.
-          values.map((entry, index) => /* @__PURE__ */ jsx("input", { type: "hidden", name: rangeInputName(name, index, values.length), value: entry, form }, index))
-        ) : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: values[0], form }))
+          values.map((entry, index) => /* @__PURE__ */ jsx(InputField$1, { type: "hidden", name: rangeInputName(name, index, values.length), value: entry, form }, index))
+        ) : /* @__PURE__ */ jsx(InputField$1, { type: "hidden", name, value: values[0], form }))
       ] })
     }
   );
@@ -3462,7 +4164,7 @@ var SpinnerBase = createComponentBase({
 
 // src/components/spinner/defaults.ts
 var DEFAULT_APPEARANCE7 = "rounded";
-var DEFAULT_SIZE13 = "base";
+var DEFAULT_SIZE14 = "base";
 var DEFAULT_VARIANT8 = "neutral";
 var DEFAULT_ARIA_LABEL2 = "Loading";
 var SPINNER_RADIAL_PARTS = 8;
@@ -3501,7 +4203,7 @@ var renderIndicatorContent = (appearance) => {
 var Spinner = (props) => {
   const theme = useComponentTheme("Spinner");
   const { rootAttrs, rest } = composeRootAttrs(SpinnerBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT8, size = DEFAULT_SIZE13, appearance: appearance2 = DEFAULT_APPEARANCE7 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT8, size = DEFAULT_SIZE14, appearance: appearance2 = DEFAULT_APPEARANCE7 }) => ({
       "data-variant": variant,
       "data-size": size,
       "data-type": appearance2
@@ -3558,8 +4260,8 @@ var [StepperItemProvider, useStepperItem] = createSafeContext("Stepper.Item");
 
 // src/components/stepper/defaults.ts
 var DEFAULT_ORIENTATION3 = "horizontal";
-var DEFAULT_MODE2 = "default";
-var DEFAULT_SIZE14 = "base";
+var DEFAULT_MODE3 = "default";
+var DEFAULT_SIZE15 = "base";
 var DEFAULT_ACTIVE = 0;
 var DEFAULT_COMPLETED_LABEL = "completed";
 var DEFAULT_ERROR_LABEL = "error";
@@ -3567,7 +4269,7 @@ var FOCUSABLE_TRIGGER_SELECTOR = '.tk-stepper-trigger:not(:disabled):not([tabind
 var Stepper = (props) => {
   const theme = useComponentTheme("Stepper");
   const { rootAttrs, rest } = composeRootAttrs(StepperBase, props, theme, {
-    stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION3, mode: mode2 = DEFAULT_MODE2, size = DEFAULT_SIZE14, linear: linear2 = false, reverse = false }) => ({
+    stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION3, mode: mode2 = DEFAULT_MODE3, size = DEFAULT_SIZE15, linear: linear2 = false, reverse = false }) => ({
       "data-orientation": orientation2,
       "data-mode": mode2,
       "data-size": size,
@@ -3581,7 +4283,7 @@ var Stepper = (props) => {
     onActiveChange,
     onStepClick,
     orientation = DEFAULT_ORIENTATION3,
-    mode = DEFAULT_MODE2,
+    mode = DEFAULT_MODE3,
     // Consumed only as root data-* hooks above; destructured so the <ol>
     // doesn't receive unknown DOM attributes.
     size: _size,
@@ -3698,7 +4400,7 @@ var StepperTitle = (props) => {
   return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
 };
 StepperTitle.displayName = "Stepper.Title";
-var visuallyHidden = {
+var visuallyHidden2 = {
   position: "absolute",
   width: 1,
   height: 1,
@@ -3784,7 +4486,7 @@ var StepperItem = (props) => {
         children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...indicatorAttrs, children: indicatorContent }),
           /* @__PURE__ */ jsx("span", { ...contentAttrs, children }),
-          statusLabel ? /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: `, ${statusLabel}` }) : null
+          statusLabel ? /* @__PURE__ */ jsx("span", { style: visuallyHidden2, children: `, ${statusLabel}` }) : null
         ]
       }
     )
@@ -3835,12 +4537,12 @@ var SwitchBase = createComponentBase({
 var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
 
 // src/components/switch/defaults.ts
-var DEFAULT_SIZE15 = "base";
+var DEFAULT_SIZE16 = "base";
 var DEFAULT_VARIANT9 = "info";
 var Switch = (props) => {
   const theme = useComponentTheme("Switch");
   const { rootAttrs, rest } = composeRootAttrs(SwitchBase, props, theme, {
-    stateAttrs: ({ size = DEFAULT_SIZE15, variant = DEFAULT_VARIANT9 }) => ({
+    stateAttrs: ({ size = DEFAULT_SIZE16, variant = DEFAULT_VARIANT9 }) => ({
       "data-size": size,
       "data-variant": variant
     })
@@ -3967,7 +4669,7 @@ var TableBase = createComponentBase({
 var [TableProvider, useTableContext] = createSafeContext("Table");
 
 // src/components/table/defaults.ts
-var DEFAULT_SIZE16 = "base";
+var DEFAULT_SIZE17 = "base";
 var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 var DEFAULT_COLUMN_WIDTH = 150;
@@ -4337,7 +5039,7 @@ var TableHeaderCell = ({ header }) => {
       children: /* @__PURE__ */ jsxs("div", { ...slotAttrs("headerContent"), children: [
         canSort ? /* @__PURE__ */ jsxs("button", { ...slotAttrs("sortTrigger"), type: "button", onClick: column.getToggleSortingHandler(), children: [
           content,
-          /* @__PURE__ */ jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsx(ChevronTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ChevronBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(SwapIconOutlinedRounded, {}) })
+          /* @__PURE__ */ jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsx(ArrowTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(SwapIconOutlinedRounded, {}) })
         ] }) : content,
         canFilter && /* @__PURE__ */ jsx(TableColumnFilter, { header })
       ] })
@@ -4391,7 +5093,7 @@ var TablePagination = () => {
           variant: "neutral",
           appearance: "text",
           "aria-label": "First page",
-          startContent: /* @__PURE__ */ jsx(ArrowLeftIconOutlinedRounded, {}),
+          startContent: /* @__PURE__ */ jsx(DoubleChevronLeftIconOutlinedRounded, {}),
           disabled: !table.getCanPreviousPage(),
           onClick: () => table.setPageIndex(0)
         }
@@ -4448,7 +5150,7 @@ var TablePagination = () => {
           variant: "neutral",
           appearance: "text",
           "aria-label": "Last page",
-          startContent: /* @__PURE__ */ jsx(ArrowRightIconOutlinedRounded, {}),
+          startContent: /* @__PURE__ */ jsx(DoubleChevronRightIconOutlinedRounded, {}),
           disabled: !table.getCanNextPage() || pageCount <= 0,
           onClick: () => table.setPageIndex(pageCount - 1)
         }
@@ -4493,7 +5195,7 @@ var Table = (props) => {
     // Visual vocabulary lives on the root so recipes cascade
     // to the portal-free table descendants. `data-loading` mirrors the
     // boolean-presence convention (rule 5).
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE16, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE17, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
       "data-size": size2,
       "data-striped": striped2 ? "" : void 0,
       "data-bordered": bordered2 ? "" : void 0,
@@ -4507,7 +5209,7 @@ var Table = (props) => {
     getRowId,
     manual = false,
     loading = false,
-    size = DEFAULT_SIZE16,
+    size = DEFAULT_SIZE17,
     striped = false,
     bordered = false,
     stickyHeader = false,
@@ -4707,19 +5409,19 @@ var TabsContentBase = createComponentBase({
 var [TabsOwnProvider, useTabsOwnContext] = createSafeContext("Tabs");
 
 // src/components/tabs/defaults.ts
-var DEFAULT_SIZE17 = "base";
+var DEFAULT_SIZE18 = "base";
 var DEFAULT_VARIANT10 = "primary";
 var DEFAULT_APPEARANCE8 = "basic";
 var Tabs = (props) => {
   const theme = useComponentTheme("Tabs");
   const { rootAttrs, rest } = composeRootAttrs(TabsBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE17, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE18, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
       "data-size": size2,
       "data-variant": variant2,
       "data-type": appearance2
     })
   });
-  const { size = DEFAULT_SIZE17, variant = DEFAULT_VARIANT10, appearance = DEFAULT_APPEARANCE8, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE18, variant = DEFAULT_VARIANT10, appearance = DEFAULT_APPEARANCE8, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsx(Tabs$1, { ...sparProps, ...rootAttrs, ref, children }) });
 };
 Tabs.displayName = "Tabs";
@@ -4881,7 +5583,7 @@ var ToastBase = createComponentBase({
 
 // src/components/toast/defaults.ts
 var DEFAULT_TOAST_APPEARANCE = "filled";
-var DEFAULT_CLOSE_LABEL2 = "Dismiss notification";
+var DEFAULT_CLOSE_LABEL5 = "Dismiss notification";
 
 // src/components/toast/utils.ts
 var toastTypeToVariant = (type) => {
@@ -4902,7 +5604,7 @@ var toastTypeToVariant = (type) => {
 var Toast = (props) => {
   const theme = useComponentTheme("Toast");
   const { rootAttrs, rest } = composeRootAttrs(ToastBase, props, theme);
-  const { as, toast, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL2, children, ref, ...toastProps } = rest;
+  const { as, toast, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL5, children, ref, ...toastProps } = rest;
   const Component = as ?? "div";
   const variant = toastTypeToVariant(toast.type);
   return /* @__PURE__ */ jsx(Toast$1.Root, { ...toastProps, as: Component, ref, toast, toaster, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxs(Alert2, { variant, appearance, role: "presentation", children: [
@@ -4922,7 +5624,7 @@ var Toaster = (props) => {
       "data-placement": toaster2.placement
     })
   });
-  const { as, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL2, overlap = false, children, ref, ...toasterProps } = rest;
+  const { as, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL5, overlap = false, children, ref, ...toasterProps } = rest;
   const Component = as ?? "div";
   return /* @__PURE__ */ jsx(Toaster$1, { ...toasterProps, as: Component, ref, toaster, overlap, ...rootAttrs, children: (toast) => (
     // Spar renders each item directly into a mapped array, so the key must
@@ -4971,4 +5673,1041 @@ var Skeleton = (props) => {
 };
 Skeleton.displayName = "Skeleton";
 
-export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Divider, Drawer2 as Drawer, Dropdown2 as Dropdown, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Progress2 as Progress, Radio2 as Radio, Select2 as Select, Skeleton, Slider2 as Slider, Spinner, Stepper2 as Stepper, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, getExportRows, useComponentTheme, useTheme };
+// src/components/upload/base.ts
+var UploadBase = createComponentBase({
+  name: "Upload",
+  slots: ["root"],
+  classes: { root: "tk-upload" }
+});
+var UploadDropzoneBase = createComponentBase({
+  name: "UploadDropzone",
+  slots: ["root"],
+  classes: { root: "tk-upload-dropzone" }
+});
+var UploadActionsBase = createComponentBase({
+  name: "UploadActions",
+  slots: ["root"],
+  classes: { root: "tk-upload-actions" }
+});
+var UploadTriggerBase = createComponentBase({
+  name: "UploadTrigger",
+  slots: ["root"],
+  classes: { root: "tk-upload-trigger" }
+});
+var UploadSubmitBase = createComponentBase({
+  name: "UploadSubmit",
+  slots: ["root"],
+  classes: { root: "tk-upload-submit" }
+});
+var UploadListBase = createComponentBase({
+  name: "UploadList",
+  slots: ["root"],
+  classes: { root: "tk-upload-list" }
+});
+var UploadItemBase = createComponentBase({
+  name: "UploadItem",
+  slots: ["root"],
+  classes: { root: "tk-upload-item" }
+});
+var UploadItemContentBase = createComponentBase({
+  name: "UploadItemContent",
+  slots: ["root", "name", "size", "status", "progress"],
+  classes: {
+    root: "tk-upload-item-content",
+    name: "tk-upload-item-name",
+    size: "tk-upload-item-size",
+    status: "tk-upload-item-status",
+    progress: "tk-upload-item-progress"
+  }
+});
+var UploadItemPreviewBase = createComponentBase({
+  name: "UploadItemPreview",
+  slots: ["root", "image", "icon", "extension"],
+  classes: {
+    root: "tk-upload-item-preview",
+    image: "tk-upload-item-preview-image",
+    icon: "tk-upload-item-preview-icon",
+    extension: "tk-upload-item-preview-extension"
+  }
+});
+var UploadItemActionsBase = createComponentBase({
+  name: "UploadItemActions",
+  slots: ["root"],
+  classes: { root: "tk-upload-item-actions" }
+});
+var UploadItemActionBase = createComponentBase({
+  name: "UploadItemAction",
+  slots: ["root"],
+  classes: { root: "tk-upload-item-action" }
+});
+
+// src/components/upload/context.ts
+var [UploadProvider, useUploadContext] = createSafeContext("UploadProvider");
+var [UploadItemProvider, useUploadItemContext] = createSafeContext("UploadItemProvider");
+
+// src/components/upload/defaults.ts
+var DEFAULT_MULTIPLE = false;
+var DEFAULT_DIRECTORY = false;
+var DEFAULT_STATUS = "idle";
+var DEFAULT_UPLOADING_LABEL = "Uploading\u2026";
+var DEFAULT_PROCESSING_LABEL = "Processing\u2026";
+var DEFAULT_COMPLETED_LABEL2 = "Completed";
+var DEFAULT_ERROR_LABEL2 = "Failed";
+var DEFAULT_PROGRESS_LABEL = "{name} upload progress";
+var DEFAULT_DOWNLOAD_LABEL = "Download {name}";
+var DEFAULT_REMOVE_LABEL2 = "Remove {name}";
+
+// src/components/upload/helpers.ts
+var fileKey = (file) => `${file.webkitRelativePath || file.name}:${file.size}:${file.lastModified}`;
+var idCounter = 0;
+var generateId = () => {
+  const cryptoObj = typeof globalThis !== "undefined" ? globalThis.crypto : void 0;
+  if (cryptoObj && typeof cryptoObj.randomUUID === "function") {
+    try {
+      return cryptoObj.randomUUID();
+    } catch {
+    }
+  }
+  idCounter += 1;
+  return `tk-upload-${idCounter}-${Date.now().toString(36)}`;
+};
+var createUploadFile = (file) => ({
+  id: generateId(),
+  file,
+  name: file.name,
+  size: file.size,
+  type: file.type,
+  status: DEFAULT_STATUS
+});
+var fileName = (item) => item.name ?? item.file?.name ?? "";
+var fileSize = (item) => item.size ?? item.file?.size;
+var fileType = (item) => item.type ?? item.file?.type;
+var fileStatus = (item) => item.status ?? DEFAULT_STATUS;
+var formatFileLabel = (template, name) => template.split("{name}").join(name);
+var isConsumerVeto = (event, preventedOnEntry) => event.defaultPrevented && !preventedOnEntry;
+var SIZE_UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte"];
+var sizeFormatters = /* @__PURE__ */ new Map();
+var sizeFormatter = (exponent) => {
+  let formatter = sizeFormatters.get(exponent);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(void 0, { style: "unit", unit: SIZE_UNITS[exponent], unitDisplay: "short" });
+    sizeFormatters.set(exponent, formatter);
+  }
+  return formatter;
+};
+var roundForUnit = (value, exponent) => exponent === 0 || value >= 100 ? Math.round(value) : Math.round(value * 10) / 10;
+var formatFileSize = (bytes) => {
+  if (!Number.isFinite(bytes) || bytes <= 0) return sizeFormatter(0).format(0);
+  let exponent = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), SIZE_UNITS.length - 1));
+  let rounded = roundForUnit(bytes / 1024 ** exponent, exponent);
+  if (rounded >= 1024 && exponent < SIZE_UNITS.length - 1) {
+    exponent += 1;
+    rounded = roundForUnit(bytes / 1024 ** exponent, exponent);
+  }
+  return sizeFormatter(exponent).format(rounded);
+};
+var OBJECT_URL_TTL_MS = 1e3;
+var canSaveUploadFile = (item) => Boolean(item.file || item.url);
+var saveUploadFile = (item) => {
+  const canCreate = typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
+  const objectUrl = item.file && canCreate ? URL.createObjectURL(item.file) : void 0;
+  const href = objectUrl ?? item.url;
+  if (!href) return;
+  const link = document.createElement("a");
+  link.href = href;
+  link.download = fileName(item);
+  document.body.append(link);
+  link.click();
+  link.remove();
+  if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl), OBJECT_URL_TTL_MS);
+};
+var IMAGE_TYPES = /* @__PURE__ */ new Set(["image/jpeg", "image/png", "image/gif", "image/webp", "image/avif", "image/svg+xml"]);
+var isImageType = (type) => type !== void 0 && IMAGE_TYPES.has(type);
+var nameExtension = (name) => {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot + 1).toUpperCase() : "";
+};
+var ICON_BY_EXTENSION = {
+  DOC: "word",
+  DOCX: "word",
+  JPEG: "jpg",
+  JPG: "jpg",
+  MP4: "mp4",
+  PDF: "pdf",
+  PNG: "png",
+  PPT: "powerpoint",
+  PPTX: "powerpoint",
+  TXT: "text",
+  XLS: "excel",
+  XLSX: "excel",
+  ZIP: "zip"
+};
+var ICON_BY_TYPE = {
+  "application/msword": "word",
+  "application/pdf": "pdf",
+  "application/vnd.ms-excel": "excel",
+  "application/vnd.ms-powerpoint": "powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "powerpoint",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "excel",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "word",
+  "application/zip": "zip",
+  "image/jpeg": "jpg",
+  "image/png": "png",
+  "text/plain": "text",
+  "video/mp4": "mp4"
+};
+var fileIconName = (item) => {
+  const type = fileType(item);
+  return ICON_BY_EXTENSION[nameExtension(fileName(item))] ?? (type ? ICON_BY_TYPE[type.toLowerCase()] : void 0);
+};
+var isWildcard = (token) => token === "*" || token === "*/*";
+var acceptTokens = (accept) => accept ? accept.split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "") : [];
+var acceptsAnything = (tokens) => tokens.length === 0 || tokens.some(isWildcard);
+var tokenMatchesFile = (token, file) => {
+  if (token.startsWith(".")) return file.name.toLowerCase().endsWith(token);
+  const type = file.type.toLowerCase();
+  if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+  return type === token;
+};
+var matchesAccept = (file, accept) => {
+  const tokens = acceptTokens(accept);
+  if (acceptsAnything(tokens)) return true;
+  return tokens.some((token) => tokenMatchesFile(token, file));
+};
+var acceptMatchesType = (type, accept) => {
+  const tokens = acceptTokens(accept);
+  if (acceptsAnything(tokens)) return true;
+  const t = type.toLowerCase();
+  let unjudgeable = false;
+  for (const token of tokens) {
+    if (token.startsWith(".")) {
+      unjudgeable = true;
+      continue;
+    }
+    if (token.endsWith("/*") ? t.startsWith(token.slice(0, -1)) : t === token) return true;
+  }
+  return unjudgeable;
+};
+var validateFiles = (incoming, options) => {
+  const { accept, maxFileSize, maxFileCount, multiple, currentCount } = options;
+  const accepted = [];
+  const rejected = [];
+  const limit = multiple ? maxFileCount : 1;
+  let slots = limit === void 0 ? Number.POSITIVE_INFINITY : Math.max(0, limit - (multiple ? currentCount : 0));
+  for (const file of incoming) {
+    if (!matchesAccept(file, accept)) {
+      rejected.push({ file, code: "file-invalid-type", accept });
+      continue;
+    }
+    if (maxFileSize !== void 0 && file.size > maxFileSize) {
+      rejected.push({ file, code: "file-too-large", maxFileSize });
+      continue;
+    }
+    if (slots <= 0) {
+      rejected.push({ file, code: "too-many-files", maxFileCount: limit });
+      continue;
+    }
+    accepted.push(file);
+    slots -= 1;
+  }
+  return { accepted, rejected };
+};
+var Upload = (props) => {
+  const theme = useComponentTheme("Upload");
+  const field = useOptionalFieldContext();
+  const inputRef = useRef(null);
+  const { rootAttrs, rest } = composeRootAttrs(UploadBase, props, theme);
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    accept,
+    multiple: ownMultiple = DEFAULT_MULTIPLE,
+    directory = DEFAULT_DIRECTORY,
+    maxFileSize,
+    maxFileCount,
+    onFileAccept,
+    onFilesReject,
+    // The status four resolve here, at the destructure site: `??`, so an empty
+    // one is honoured and the support line goes away with its glyph.
+    uploadingLabel = DEFAULT_UPLOADING_LABEL,
+    processingLabel = DEFAULT_PROCESSING_LABEL,
+    completedLabel = DEFAULT_COMPLETED_LABEL2,
+    errorLabel = DEFAULT_ERROR_LABEL2,
+    // The accessible-name three cannot resolve here — see below.
+    progressLabel: ownProgressLabel,
+    downloadLabel: ownDownloadLabel,
+    removeLabel: ownRemoveLabel,
+    disabled: ownDisabled,
+    readOnly: ownReadOnly,
+    invalid: ownInvalid,
+    as,
+    children,
+    ref,
+    ...nativeProps
+  } = rest;
+  const multiple = ownMultiple || directory;
+  const disabled = ownDisabled ?? field?.disabled ?? false;
+  const readOnly = ownReadOnly ?? field?.readOnly ?? false;
+  const invalid = ownInvalid ?? field?.invalid ?? false;
+  const [files = [], setFiles, isControlled] = useControllableState(value, defaultValue ?? [], onValueChange);
+  const latestFiles = useRef(files);
+  latestFiles.current = files;
+  const commitFiles = useCallback(
+    (next) => {
+      if (!isControlled) latestFiles.current = next;
+      setFiles(next);
+    },
+    [isControlled, setFiles]
+  );
+  const processFiles = useCallback(
+    (incoming) => {
+      if (disabled || readOnly) return;
+      const list = Array.from(incoming);
+      if (list.length === 0) return;
+      const current = latestFiles.current;
+      const seen = new Set(current.filter((entry) => entry.file).map((entry) => fileKey(entry.file)));
+      const fresh = list.filter((file) => {
+        const key = fileKey(file);
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      const { accepted, rejected } = validateFiles(fresh, { accept, maxFileSize, maxFileCount, multiple, currentCount: current.length });
+      const added = accepted.map(createUploadFile);
+      if (added.length > 0) {
+        commitFiles(multiple ? [...current, ...added] : added);
+        onFileAccept?.(added);
+      }
+      if (rejected.length > 0) {
+        onFilesReject?.(rejected);
+      }
+    },
+    [disabled, readOnly, accept, maxFileSize, maxFileCount, multiple, commitFiles, onFileAccept, onFilesReject]
+  );
+  const openFileDialog = useCallback(() => {
+    if (disabled || readOnly) return;
+    inputRef.current?.click();
+  }, [disabled, readOnly]);
+  const removeFile = useCallback(
+    (id) => {
+      if (disabled || readOnly) return;
+      commitFiles(latestFiles.current.filter((entry) => entry.id !== id));
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    [disabled, readOnly, commitFiles]
+  );
+  const handleInputChange = (event) => {
+    processFiles(event.target.files ?? []);
+    event.target.value = "";
+  };
+  const progressLabel = ownProgressLabel || DEFAULT_PROGRESS_LABEL;
+  const downloadLabel = ownDownloadLabel || DEFAULT_DOWNLOAD_LABEL;
+  const removeLabel = ownRemoveLabel || DEFAULT_REMOVE_LABEL2;
+  const contextValue = useMemo(
+    () => ({
+      files,
+      disabled,
+      readOnly,
+      invalid,
+      accept,
+      multiple,
+      openFileDialog,
+      removeFile,
+      processFiles,
+      // Keyed by the status it stands for, so a row looks one up rather than
+      // mapping names to states. Built inside this memo rather than one of its
+      // own: it changes exactly when the four strings do, which is when the
+      // context is rebuilt anyway.
+      statusLabels: { uploading: uploadingLabel, processing: processingLabel, completed: completedLabel, error: errorLabel },
+      progressLabel,
+      downloadLabel,
+      removeLabel
+    }),
+    [
+      files,
+      disabled,
+      readOnly,
+      invalid,
+      accept,
+      multiple,
+      openFileDialog,
+      removeFile,
+      processFiles,
+      uploadingLabel,
+      processingLabel,
+      completedLabel,
+      errorLabel,
+      progressLabel,
+      downloadLabel,
+      removeLabel
+    ]
+  );
+  const Component = as ?? "div";
+  const htmlProps = nativeProps;
+  const named = htmlProps["aria-label"] !== void 0 || htmlProps["aria-labelledby"] !== void 0;
+  const groupAttrs = {
+    "id": htmlProps.id ?? field?.fieldId,
+    "role": htmlProps.role ?? "group",
+    "aria-labelledby": named ? htmlProps["aria-labelledby"] : field?.labelId,
+    // Mirrors Spar's own controls: the error message replaces the description
+    // while invalid, rather than both being announced.
+    "aria-describedby": htmlProps["aria-describedby"] ?? (invalid ? field?.errorId : field?.descriptionId)
+  };
+  const stateAttrs = {
+    ...disabled ? { "data-disabled": "" } : null,
+    ...readOnly ? { "data-readonly": "" } : null,
+    ...invalid ? { "data-invalid": "" } : null
+  };
+  return /* @__PURE__ */ jsx(UploadProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(Component, { ...nativeProps, ...groupAttrs, ...rootAttrs, ...stateAttrs, ref, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      InputField$1,
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        ...directory ? { webkitdirectory: "" } : null,
+        disabled: disabled || readOnly,
+        onChange: handleInputChange,
+        hidden: true,
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }
+    )
+  ] }) });
+};
+Upload.displayName = "Upload";
+var UploadActions = (props) => {
+  const theme = useComponentTheme("UploadActions");
+  useUploadContext("Upload.Actions");
+  const { rootAttrs, rest } = composeRootAttrs(UploadActionsBase, props, theme);
+  const { as, children, ref, ...nativeProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
+};
+UploadActions.displayName = "Upload.Actions";
+var dragStateFor = (event, accept) => {
+  const items = event.dataTransfer?.items;
+  if (!items || items.length === 0) return "accept";
+  for (const item of Array.from(items)) {
+    if (item.kind === "file" && !acceptMatchesType(item.type, accept)) return "reject";
+  }
+  return "accept";
+};
+var UploadDropzone = (props) => {
+  const theme = useComponentTheme("UploadDropzone");
+  const { disabled, readOnly, accept, processFiles } = useUploadContext("Upload.Dropzone");
+  const { rootAttrs, rest } = composeRootAttrs(UploadDropzoneBase, props, theme);
+  const {
+    onDragEnter: slotOnDragEnter,
+    onDragOver: slotOnDragOver,
+    onDragLeave: slotOnDragLeave,
+    onDrop: slotOnDrop,
+    ...dropzoneRootAttrs
+  } = rootAttrs;
+  const { as, children, ref, onDragEnter, onDragOver, onDragLeave, onDrop, ...nativeProps } = rest;
+  const [dragState, setDragState] = useState(null);
+  const depth = useRef(0);
+  const active = !disabled && !readOnly;
+  const handleDragEnter = (event) => {
+    onDragEnter?.(event);
+    slotOnDragEnter?.(event);
+    event.preventDefault();
+    if (!active) return;
+    depth.current += 1;
+    setDragState(dragStateFor(event, accept));
+  };
+  const handleDragOver = (event) => {
+    onDragOver?.(event);
+    slotOnDragOver?.(event);
+    event.preventDefault();
+    if (!active) return;
+    if (dragState === null) setDragState(dragStateFor(event, accept));
+  };
+  const handleDragLeave = (event) => {
+    onDragLeave?.(event);
+    slotOnDragLeave?.(event);
+    depth.current = Math.max(0, depth.current - 1);
+    if (depth.current === 0) setDragState(null);
+  };
+  const handleDrop = (event) => {
+    onDrop?.(event);
+    slotOnDrop?.(event);
+    event.preventDefault();
+    depth.current = 0;
+    setDragState(null);
+    if (!active) return;
+    if (event.dataTransfer?.files?.length) processFiles(event.dataTransfer.files);
+  };
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...nativeProps,
+      ...dropzoneRootAttrs,
+      "data-drag-state": dragState ?? void 0,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      ref,
+      children
+    }
+  );
+};
+UploadDropzone.displayName = "Upload.Dropzone";
+var ACTION_ICON = {
+  download: /* @__PURE__ */ jsx(ArrowDownloadIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" }),
+  remove: /* @__PURE__ */ jsx(CloseIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" })
+};
+var isBuiltInAction = (action) => action === "download" || action === "remove";
+var siblingRow = (row) => {
+  const next = row.nextElementSibling;
+  if (next?.matches(".tk-upload-item")) return next;
+  const previous = row.previousElementSibling;
+  return previous?.matches(".tk-upload-item") ? previous : null;
+};
+var moveFocusOffRow = (button) => {
+  const row = button.closest(".tk-upload-item");
+  const neighbour = row ? siblingRow(row) : null;
+  const target = neighbour?.querySelector('[data-action="remove"]') ?? neighbour?.querySelector('button, [role="button"], a[href]') ?? button.closest(".tk-upload")?.querySelector(".tk-upload-trigger") ?? null;
+  target?.focus();
+};
+var DEFAULT_ACTION_APPEARANCE = "outlined";
+var DEFAULT_ACTION_VARIANT = "neutral";
+var DEFAULT_ACTION_SIZE = "small";
+var UploadItemAction = (props) => {
+  const theme = useComponentTheme("UploadItemAction");
+  const { disabled, readOnly, removeFile, downloadLabel, removeLabel } = useUploadContext("Upload.ItemAction");
+  const { item } = useUploadItemContext("Upload.ItemAction");
+  const { rootAttrs, rest } = composeRootAttrs(UploadItemActionBase, props, theme, {
+    // Which action this is: documented for consumers styling one action out of a
+    // row. The look itself comes from Button's variant, not from this hook.
+    stateAttrs: (merged) => ({ "data-action": merged.action })
+  });
+  const { onClick: slotOnClick, ...actionRootAttrs } = rootAttrs;
+  const {
+    as,
+    action,
+    label,
+    children,
+    ref,
+    href,
+    role,
+    onClick,
+    "disabled": ownDisabled,
+    "aria-label": ariaLabel,
+    // An icon button in the row: the anatomy and the look come from Button, so
+    // the appearance knobs live here rather than in the Upload recipe. Applied
+    // at the destructure site (the coding-standards rule) rather than pinned
+    // after the spread, so they layer as defaults — a theme's
+    // `UploadItemAction.defaultProps` is already merged into `rest` by
+    // `composeRootAttrs`, and a value pinned after the spread would silently
+    // outrank it.
+    "appearance": appearance = DEFAULT_ACTION_APPEARANCE,
+    "variant": variant = DEFAULT_ACTION_VARIANT,
+    "size": size = DEFAULT_ACTION_SIZE,
+    ...buttonProps
+  } = rest;
+  const isDisabled = disabled || ownDisabled === true;
+  if (action === "remove" && readOnly) return null;
+  const isButton = (as ?? "button") === "button";
+  const hasHref = !isButton && href !== void 0;
+  if (action === "download" && !canSaveUploadFile(item) && !hasHref && !onClick && !slotOnClick) return null;
+  const nameTemplate = label || (action === "download" ? downloadLabel : action === "remove" ? removeLabel : void 0);
+  const handleClick = (event) => {
+    const button = event.currentTarget;
+    const preventedOnEntry = event.defaultPrevented;
+    onClick?.(event);
+    slotOnClick?.(event);
+    if (isConsumerVeto(event, preventedOnEntry)) return;
+    if (action === "remove") {
+      moveFocusOffRow(button);
+      removeFile(item.id);
+    } else if (action === "download" && !hasHref) saveUploadFile(item);
+  };
+  const renderedHref = isDisabled ? void 0 : href;
+  const resolvedRole = role ?? (!isButton && as === "a" && renderedHref !== void 0 ? "link" : void 0);
+  const roleProps = resolvedRole !== void 0 ? { role: resolvedRole } : void 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...isButton ? null : { href: renderedHref },
+      ...roleProps,
+      ...actionRootAttrs,
+      as,
+      appearance,
+      variant,
+      size,
+      disabled: isDisabled,
+      "aria-label": ariaLabel ?? (nameTemplate ? formatFileLabel(nameTemplate, fileName(item)) : void 0),
+      onClick: handleClick,
+      startContent: isRenderableNode(children) ? children : isBuiltInAction(action) ? ACTION_ICON[action] : null,
+      ref
+    }
+  );
+};
+UploadItemAction.displayName = "Upload.ItemAction";
+var UploadItemActions = (props) => {
+  const theme = useComponentTheme("UploadItemActions");
+  const { readOnly } = useUploadContext("Upload.ItemActions");
+  const { item } = useUploadItemContext("Upload.ItemActions");
+  const { rootAttrs, rest } = composeRootAttrs(UploadItemActionsBase, props, theme);
+  const { as, children, ref, ...nativeProps } = rest;
+  const Component = as ?? "div";
+  const hasChildren = isRenderableNode(children);
+  const showDownload = canSaveUploadFile(item);
+  const showRemove = !readOnly;
+  if (!hasChildren && !showDownload && !showRemove) return null;
+  return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: hasChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    showDownload && /* @__PURE__ */ jsx(UploadItemAction, { action: "download" }),
+    showRemove && /* @__PURE__ */ jsx(UploadItemAction, { action: "remove" })
+  ] }) });
+};
+UploadItemActions.displayName = "Upload.ItemActions";
+var statusLabelOf = (status, statusLabels) => status === "idle" ? null : statusLabels[status];
+var statusIcon = (status) => {
+  switch (status) {
+    case "uploading":
+    case "processing":
+      return /* @__PURE__ */ jsx(Spinner, { size: "small", appearance: "rounded", variant: "info", "aria-hidden": "true" });
+    case "completed":
+      return /* @__PURE__ */ jsx(CheckCircleIconFilledRounded, { "aria-hidden": "true", focusable: "false" });
+    case "error":
+      return /* @__PURE__ */ jsx(CloseCircleIconFilledRounded, { "aria-hidden": "true", focusable: "false" });
+    default:
+      return null;
+  }
+};
+var UploadItemContent = (props) => {
+  const theme = useComponentTheme("UploadItemContent");
+  const { item } = useUploadItemContext("Upload.ItemContent");
+  const { statusLabels, progressLabel } = useUploadContext("Upload.ItemContent");
+  const { rootAttrs, rest } = composeRootAttrs(UploadItemContentBase, props, theme);
+  const { as, children, ref, ...nativeProps } = rest;
+  const slotAttrs = (slot) => buildSlotAttrs(UploadItemContentBase.getSlotProps(slot), slot, {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const Component = as ?? "div";
+  const name = fileName(item);
+  const size = fileSize(item);
+  const status = fileStatus(item);
+  const icon = statusIcon(status);
+  const statusLabel = statusLabelOf(status, statusLabels);
+  const statusText = status === "error" ? item.error ?? statusLabel : statusLabel;
+  const defaultContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ...slotAttrs("name"), children: name }),
+    size !== void 0 && /* @__PURE__ */ jsx("span", { ...slotAttrs("size"), children: formatFileSize(size) }),
+    icon && statusText ? (
+      // Icon plus its label, as one line: the glyph is decorative and the
+      // text carries the meaning, so nothing here needs an aria-label of its
+      // own. `title` keeps a long failure message reachable in full while the
+      // line itself stays one row high.
+      //
+      // No text, no line — a status label emptied at the root takes the glyph
+      // with it. The alternative is a lone `aria-hidden` icon: a mark that
+      // says something to sighted users and nothing to anyone else, which is
+      // the split this line exists to avoid.
+      /* @__PURE__ */ jsxs("span", { ...slotAttrs("status"), title: status === "error" ? item.error : void 0, children: [
+        icon,
+        statusText
+      ] })
+    ) : null,
+    status === "uploading" && typeof item.progress === "number" && // The bar is the *determinate* face of uploading — it only appears once
+    // there is a percentage to show. Without one, the spinner and its
+    // "Uploading…" label above are already the indeterminate indicator, so
+    // a second (looping) bar would say the same thing twice. `processing`
+    // never gets one: a server-side step reports that it is running, not
+    // how far along it is.
+    /* @__PURE__ */ jsx("div", { ...slotAttrs("progress"), children: /* @__PURE__ */ jsx(Progress2, { value: item.progress, size: "small", "aria-label": formatFileLabel(progressLabel, name) }) })
+  ] });
+  return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: isRenderableNode(children) ? children : defaultContent });
+};
+UploadItemContent.displayName = "Upload.ItemContent";
+var FileExcelIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#136C34" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.76722 29L9.49122 24.692L6.91122 20.6H8.51922L10.4572 23.702L12.5272 20.6H14.0872L11.3752 24.728L14.1652 29H12.5512L10.4032 25.694L8.33322 29H6.76722ZM15.5803 29V20.6H16.9243V27.764H20.5843V29H15.5803ZM24.8436 29.18C24.2636 29.18 23.6956 29.098 23.1396 28.934C22.5876 28.766 22.1216 28.526 21.7416 28.214L22.4016 27.188C22.6016 27.36 22.8336 27.508 23.0976 27.632C23.3656 27.756 23.6496 27.852 23.9496 27.92C24.2496 27.984 24.5496 28.016 24.8496 28.016C25.3976 28.016 25.8396 27.912 26.1756 27.704C26.5156 27.496 26.6856 27.192 26.6856 26.792C26.6856 26.492 26.5696 26.238 26.3376 26.03C26.1096 25.822 25.6856 25.63 25.0656 25.454L24.2016 25.202C23.4096 24.974 22.8316 24.672 22.4676 24.296C22.1076 23.92 21.9276 23.452 21.9276 22.892C21.9276 22.52 22.0016 22.184 22.1496 21.884C22.3016 21.584 22.5136 21.324 22.7856 21.104C23.0616 20.884 23.3856 20.716 23.7576 20.6C24.1296 20.484 24.5376 20.426 24.9816 20.426C25.5456 20.426 26.0696 20.508 26.5536 20.672C27.0376 20.836 27.4376 21.056 27.7536 21.332L27.0696 22.328C26.8976 22.172 26.6956 22.038 26.4636 21.926C26.2356 21.814 25.9896 21.728 25.7256 21.668C25.4616 21.608 25.1936 21.578 24.9216 21.578C24.5856 21.578 24.2876 21.628 24.0276 21.728C23.7716 21.824 23.5716 21.964 23.4276 22.148C23.2836 22.332 23.2116 22.556 23.2116 22.82C23.2116 23.012 23.2596 23.18 23.3556 23.324C23.4516 23.468 23.6156 23.6 23.8476 23.72C24.0836 23.836 24.4076 23.954 24.8196 24.074L25.7316 24.344C26.5076 24.572 27.0756 24.87 27.4356 25.238C27.7956 25.602 27.9756 26.076 27.9756 26.66C27.9756 27.16 27.8516 27.6 27.6036 27.98C27.3596 28.356 27.0036 28.65 26.5356 28.862C26.0676 29.074 25.5036 29.18 24.8436 29.18Z",
+      fill: "white"
+    }
+  )
+] });
+var FileJpgIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#EAB308" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8.38769 29.18C8.01169 29.18 7.65369 29.13 7.31369 29.03C6.97769 28.934 6.66169 28.798 6.36569 28.622L6.80369 27.518C7.03969 27.654 7.27369 27.76 7.50569 27.836C7.74169 27.908 7.97969 27.944 8.21969 27.944C8.72369 27.944 9.10969 27.824 9.37769 27.584C9.64569 27.344 9.77969 26.954 9.77969 26.414V20.6H11.1237V26.636C11.1237 27.148 11.0177 27.596 10.8057 27.98C10.5937 28.36 10.2837 28.656 9.87569 28.868C9.46769 29.076 8.97169 29.18 8.38769 29.18ZM13.2951 29V20.6H16.3371C16.9331 20.6 17.4591 20.704 17.9151 20.912C18.3751 21.116 18.7351 21.412 18.9951 21.8C19.2551 22.184 19.3851 22.646 19.3851 23.186C19.3851 23.742 19.2651 24.212 19.0251 24.596C18.7851 24.976 18.4351 25.266 17.9751 25.466C17.5191 25.662 16.9631 25.76 16.3071 25.76H14.6391V29H13.2951ZM14.6391 24.608H16.3251C16.8691 24.608 17.2911 24.494 17.5911 24.266C17.8911 24.034 18.0411 23.684 18.0411 23.216C18.0411 22.752 17.8871 22.396 17.5791 22.148C17.2711 21.9 16.8571 21.776 16.3371 21.776H14.6391V24.608ZM25.0706 29.18C24.4026 29.18 23.7846 29.078 23.2166 28.874C22.6486 28.67 22.1506 28.378 21.7226 27.998C21.2986 27.614 20.9686 27.154 20.7326 26.618C20.4966 26.082 20.3786 25.48 20.3786 24.812C20.3786 24.148 20.4926 23.548 20.7206 23.012C20.9486 22.472 21.2666 22.01 21.6746 21.626C22.0866 21.238 22.5686 20.94 23.1206 20.732C23.6766 20.524 24.2826 20.42 24.9386 20.42C25.2426 20.42 25.5506 20.444 25.8626 20.492C26.1746 20.54 26.4806 20.62 26.7806 20.732C27.0846 20.84 27.3726 20.988 27.6446 21.176L27.0566 22.232C26.7526 22.04 26.4226 21.896 26.0666 21.8C25.7146 21.704 25.3506 21.656 24.9746 21.656C24.4866 21.656 24.0446 21.73 23.6486 21.878C23.2526 22.022 22.9146 22.232 22.6346 22.508C22.3546 22.78 22.1386 23.11 21.9866 23.498C21.8386 23.886 21.7646 24.322 21.7646 24.806C21.7646 25.486 21.9086 26.064 22.1966 26.54C22.4846 27.016 22.8806 27.378 23.3846 27.626C23.8926 27.87 24.4766 27.992 25.1366 27.992C25.4606 27.992 25.7526 27.962 26.0126 27.902C26.2726 27.838 26.4826 27.766 26.6426 27.686V25.658H24.7346V24.542H27.8486V28.466C27.6286 28.614 27.3526 28.742 27.0206 28.85C26.6926 28.958 26.3526 29.04 26.0006 29.096C25.6526 29.152 25.3426 29.18 25.0706 29.18Z",
+      fill: "white"
+    }
+  )
+] });
+var FileMp4Icon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#3B82F6" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.70138 29V20.6H7.00338L10.4294 26.174L9.90738 26.18L13.2074 20.6H14.4854V29H13.1714L13.1894 22.388L13.4474 22.478L10.5914 27.188H9.60738L6.69738 22.478L6.91338 22.388L6.93138 29H5.70138ZM16.6701 29V20.6H19.7121C20.3081 20.6 20.8341 20.704 21.2901 20.912C21.7501 21.116 22.1101 21.412 22.3701 21.8C22.6301 22.184 22.7601 22.646 22.7601 23.186C22.7601 23.742 22.6401 24.212 22.4001 24.596C22.1601 24.976 21.8101 25.266 21.3501 25.466C20.8941 25.662 20.3381 25.76 19.6821 25.76H18.0141V29H16.6701ZM18.0141 24.608H19.7001C20.2441 24.608 20.6661 24.494 20.9661 24.266C21.2661 24.034 21.4161 23.684 21.4161 23.216C21.4161 22.752 21.2621 22.396 20.9541 22.148C20.6461 21.9 20.2321 21.776 19.7121 21.776H18.0141V24.608ZM27.5756 29V27.278H23.3936V26.264L26.4056 20.6H27.7736L24.8036 26.156H27.5756V24.29H28.7336V26.156H30.0296V27.278H28.7336V29H27.5756Z",
+      fill: "white"
+    }
+  )
+] });
+var FilePdfIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#C90019" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.03145 29V20.6H10.0735C10.6695 20.6 11.1955 20.704 11.6515 20.912C12.1115 21.116 12.4715 21.412 12.7315 21.8C12.9915 22.184 13.1215 22.646 13.1215 23.186C13.1215 23.742 13.0015 24.212 12.7615 24.596C12.5215 24.976 12.1715 25.266 11.7115 25.466C11.2555 25.662 10.6995 25.76 10.0435 25.76H8.37545V29H7.03145ZM8.37545 24.608H10.0615C10.6055 24.608 11.0275 24.494 11.3275 24.266C11.6275 24.034 11.7775 23.684 11.7775 23.216C11.7775 22.752 11.6235 22.396 11.3155 22.148C11.0075 21.9 10.5935 21.776 10.0735 21.776H8.37545V24.608ZM14.6369 29V20.6H17.2649C18.1009 20.6 18.8389 20.78 19.4789 21.14C20.1189 21.496 20.6189 21.99 20.9789 22.622C21.3429 23.254 21.5249 23.982 21.5249 24.806C21.5249 25.418 21.4209 25.982 21.2129 26.498C21.0089 27.01 20.7169 27.452 20.3369 27.824C19.9569 28.196 19.5069 28.486 18.9869 28.694C18.4669 28.898 17.8929 29 17.2649 29H14.6369ZM15.9809 27.746H17.1029C17.5549 27.746 17.9649 27.68 18.3329 27.548C18.7049 27.412 19.0229 27.216 19.2869 26.96C19.5549 26.704 19.7609 26.396 19.9049 26.036C20.0489 25.672 20.1209 25.262 20.1209 24.806C20.1209 24.194 19.9949 23.668 19.7429 23.228C19.4949 22.784 19.1449 22.444 18.6929 22.208C18.2409 21.968 17.7109 21.848 17.1029 21.848H15.9809V27.746ZM23.1916 29V20.6H28.3816V21.83H24.5356V24.248H28.0216V25.448H24.5356V29H23.1916Z",
+      fill: "white"
+    }
+  )
+] });
+var FilePngIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#A47D06" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.77169 29V20.6H8.81369C9.40969 20.6 9.93569 20.704 10.3917 20.912C10.8517 21.116 11.2117 21.412 11.4717 21.8C11.7317 22.184 11.8617 22.646 11.8617 23.186C11.8617 23.742 11.7417 24.212 11.5017 24.596C11.2617 24.976 10.9117 25.266 10.4517 25.466C9.99569 25.662 9.43969 25.76 8.78369 25.76H7.11569V29H5.77169ZM7.11569 24.608H8.80169C9.34569 24.608 9.76769 24.494 10.0677 24.266C10.3677 24.034 10.5177 23.684 10.5177 23.216C10.5177 22.752 10.3637 22.396 10.0557 22.148C9.74769 21.9 9.33369 21.776 8.81369 21.776H7.11569V24.608ZM13.3772 29V20.6H14.6612L18.9032 26.702V20.6H20.2112V29H18.9272L14.6912 22.826V29H13.3772ZM26.5706 29.18C25.9026 29.18 25.2846 29.078 24.7166 28.874C24.1486 28.67 23.6506 28.378 23.2226 27.998C22.7986 27.614 22.4686 27.154 22.2326 26.618C21.9966 26.082 21.8786 25.48 21.8786 24.812C21.8786 24.148 21.9926 23.548 22.2206 23.012C22.4486 22.472 22.7666 22.01 23.1746 21.626C23.5866 21.238 24.0686 20.94 24.6206 20.732C25.1766 20.524 25.7826 20.42 26.4386 20.42C26.7426 20.42 27.0506 20.444 27.3626 20.492C27.6746 20.54 27.9806 20.62 28.2806 20.732C28.5846 20.84 28.8726 20.988 29.1446 21.176L28.5566 22.232C28.2526 22.04 27.9226 21.896 27.5666 21.8C27.2146 21.704 26.8506 21.656 26.4746 21.656C25.9866 21.656 25.5446 21.73 25.1486 21.878C24.7526 22.022 24.4146 22.232 24.1346 22.508C23.8546 22.78 23.6386 23.11 23.4866 23.498C23.3386 23.886 23.2646 24.322 23.2646 24.806C23.2646 25.486 23.4086 26.064 23.6966 26.54C23.9846 27.016 24.3806 27.378 24.8846 27.626C25.3926 27.87 25.9766 27.992 26.6366 27.992C26.9606 27.992 27.2526 27.962 27.5126 27.902C27.7726 27.838 27.9826 27.766 28.1426 27.686V25.658H26.2346V24.542H29.3486V28.466C29.1286 28.614 28.8526 28.742 28.5206 28.85C28.1926 28.958 27.8526 29.04 27.5006 29.096C27.1526 29.152 26.8426 29.18 26.5706 29.18Z",
+      fill: "white"
+    }
+  )
+] });
+var FilePowerpointIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#FF6259" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M3.60958 29V20.6H6.65158C7.24758 20.6 7.77358 20.704 8.22958 20.912C8.68958 21.116 9.04958 21.412 9.30958 21.8C9.56958 22.184 9.69958 22.646 9.69958 23.186C9.69958 23.742 9.57958 24.212 9.33958 24.596C9.09958 24.976 8.74958 25.266 8.28958 25.466C7.83358 25.662 7.27758 25.76 6.62158 25.76H4.95358V29H3.60958ZM4.95358 24.608H6.63958C7.18358 24.608 7.60558 24.494 7.90558 24.266C8.20558 24.034 8.35558 23.684 8.35558 23.216C8.35558 22.752 8.20158 22.396 7.89358 22.148C7.58558 21.9 7.17158 21.776 6.65158 21.776H4.95358V24.608ZM11.215 29V20.6H14.257C14.853 20.6 15.379 20.704 15.835 20.912C16.295 21.116 16.655 21.412 16.915 21.8C17.175 22.184 17.305 22.646 17.305 23.186C17.305 23.742 17.185 24.212 16.945 24.596C16.705 24.976 16.355 25.266 15.895 25.466C15.439 25.662 14.883 25.76 14.227 25.76H12.559V29H11.215ZM12.559 24.608H14.245C14.789 24.608 15.211 24.494 15.511 24.266C15.811 24.034 15.961 23.684 15.961 23.216C15.961 22.752 15.807 22.396 15.499 22.148C15.191 21.9 14.777 21.776 14.257 21.776H12.559V24.608ZM20.4165 29V21.83H18.0525V20.6H24.1245V21.83H21.7605V29H20.4165ZM24.7614 29L27.4854 24.692L24.9054 20.6H26.5134L28.4514 23.702L30.5214 20.6H32.0814L29.3694 24.728L32.1594 29H30.5454L28.3974 25.694L26.3274 29H24.7614Z",
+      fill: "white"
+    }
+  )
+] });
+var FileTextIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#3B82F6" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M9.45363 29V21.83H7.08963V20.6H13.1616V21.83H10.7976V29H9.45363ZM13.7985 29L16.5225 24.692L13.9425 20.6H15.5505L17.4885 23.702L19.5585 20.6H21.1185L18.4065 24.728L21.1965 29H19.5825L17.4345 25.694L15.3645 29H13.7985ZM24.2075 29V21.83H21.8435V20.6H27.9155V21.83H25.5515V29H24.2075Z",
+      fill: "white"
+    }
+  )
+] });
+var FileWordIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#295BAC" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.02755 29V20.6H7.65555C8.49155 20.6 9.22955 20.78 9.86955 21.14C10.5095 21.496 11.0095 21.99 11.3695 22.622C11.7335 23.254 11.9155 23.982 11.9155 24.806C11.9155 25.418 11.8115 25.982 11.6035 26.498C11.3995 27.01 11.1075 27.452 10.7275 27.824C10.3475 28.196 9.89755 28.486 9.37755 28.694C8.85755 28.898 8.28355 29 7.65555 29H5.02755ZM6.37155 27.746H7.49355C7.94555 27.746 8.35555 27.68 8.72355 27.548C9.09555 27.412 9.41355 27.216 9.67755 26.96C9.94555 26.704 10.1515 26.396 10.2955 26.036C10.4395 25.672 10.5115 25.262 10.5115 24.806C10.5115 24.194 10.3855 23.668 10.1335 23.228C9.88555 22.784 9.53555 22.444 9.08355 22.208C8.63155 21.968 8.10155 21.848 7.49355 21.848H6.37155V27.746ZM17.5994 29.18C16.9674 29.18 16.3814 29.07 15.8414 28.85C15.3054 28.626 14.8374 28.316 14.4374 27.92C14.0414 27.524 13.7314 27.06 13.5074 26.528C13.2874 25.996 13.1774 25.42 13.1774 24.8C13.1774 24.176 13.2874 23.598 13.5074 23.066C13.7314 22.534 14.0414 22.07 14.4374 21.674C14.8374 21.278 15.3054 20.97 15.8414 20.75C16.3814 20.53 16.9674 20.42 17.5994 20.42C18.2274 20.42 18.8094 20.532 19.3454 20.756C19.8814 20.98 20.3494 21.292 20.7494 21.692C21.1494 22.092 21.4594 22.558 21.6794 23.09C21.9034 23.618 22.0154 24.188 22.0154 24.8C22.0154 25.42 21.9034 25.996 21.6794 26.528C21.4594 27.06 21.1494 27.524 20.7494 27.92C20.3494 28.316 19.8814 28.626 19.3454 28.85C18.8094 29.07 18.2274 29.18 17.5994 29.18ZM17.5994 27.908C18.0234 27.908 18.4174 27.836 18.7814 27.692C19.1494 27.544 19.4694 27.334 19.7414 27.062C20.0134 26.786 20.2254 26.458 20.3774 26.078C20.5334 25.694 20.6114 25.268 20.6114 24.8C20.6114 24.172 20.4774 23.626 20.2094 23.162C19.9454 22.694 19.5854 22.332 19.1294 22.076C18.6734 21.82 18.1634 21.692 17.5994 21.692C17.1754 21.692 16.7794 21.766 16.4114 21.914C16.0474 22.058 15.7274 22.266 15.4514 22.538C15.1794 22.81 14.9654 23.138 14.8094 23.522C14.6574 23.902 14.5814 24.328 14.5814 24.8C14.5814 25.428 14.7154 25.976 14.9834 26.444C15.2514 26.908 15.6114 27.268 16.0634 27.524C16.5194 27.78 17.0314 27.908 17.5994 27.908ZM27.6173 29.18C26.7453 29.18 25.9833 29 25.3313 28.64C24.6793 28.28 24.1713 27.772 23.8073 27.116C23.4473 26.456 23.2673 25.686 23.2673 24.806C23.2673 24.166 23.3733 23.58 23.5853 23.048C23.8013 22.512 24.1033 22.048 24.4913 21.656C24.8833 21.264 25.3453 20.96 25.8773 20.744C26.4093 20.528 26.9933 20.42 27.6293 20.42C28.2693 20.42 28.8213 20.5 29.2853 20.66C29.7533 20.82 30.1613 21.048 30.5093 21.344L29.8133 22.442C29.5493 22.198 29.2413 22.016 28.8893 21.896C28.5373 21.776 28.1493 21.716 27.7253 21.716C27.2573 21.716 26.8353 21.788 26.4593 21.932C26.0833 22.076 25.7613 22.282 25.4933 22.55C25.2293 22.814 25.0253 23.136 24.8813 23.516C24.7413 23.892 24.6713 24.318 24.6713 24.794C24.6713 25.442 24.7973 25.996 25.0493 26.456C25.3053 26.916 25.6653 27.268 26.1293 27.512C26.5973 27.752 27.1493 27.872 27.7853 27.872C28.2093 27.872 28.6173 27.81 29.0093 27.686C29.4053 27.558 29.7753 27.352 30.1193 27.068L30.7433 28.202C30.3393 28.518 29.8773 28.76 29.3573 28.928C28.8413 29.096 28.2613 29.18 27.6173 29.18Z",
+      fill: "white"
+    }
+  )
+] });
+var FileZipIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
+      stroke: "#CACFD8",
+      strokeWidth: "1.875"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#79889A" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8.97569 29V27.878L13.2777 21.83H9.11369V20.6H14.8977V21.716L10.6137 27.764H14.9337V29H8.97569ZM16.5178 29V20.6H17.8618V29H16.5178ZM20.0568 29V20.6H23.0988C23.6948 20.6 24.2208 20.704 24.6768 20.912C25.1368 21.116 25.4968 21.412 25.7568 21.8C26.0168 22.184 26.1468 22.646 26.1468 23.186C26.1468 23.742 26.0268 24.212 25.7868 24.596C25.5468 24.976 25.1968 25.266 24.7368 25.466C24.2808 25.662 23.7248 25.76 23.0688 25.76H21.4008V29H20.0568ZM21.4008 24.608H23.0868C23.6308 24.608 24.0528 24.494 24.3528 24.266C24.6528 24.034 24.8028 23.684 24.8028 23.216C24.8028 22.752 24.6488 22.396 24.3408 22.148C24.0328 21.9 23.6188 21.776 23.0988 21.776H21.4008V24.608Z",
+      fill: "white"
+    }
+  )
+] });
+var FILE_ICONS = {
+  excel: FileExcelIcon,
+  jpg: FileJpgIcon,
+  mp4: FileMp4Icon,
+  pdf: FilePdfIcon,
+  png: FilePngIcon,
+  powerpoint: FilePowerpointIcon,
+  text: FileTextIcon,
+  word: FileWordIcon,
+  zip: FileZipIcon
+};
+var NO_BROKEN_SRCS = [];
+var useImageObjectUrl = (file, type) => {
+  const [objectUrl, setObjectUrl] = useState(null);
+  useEffect(() => {
+    const canCreate = typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
+    if (file && isImageType(type) && canCreate) {
+      const url = URL.createObjectURL(file);
+      setObjectUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setObjectUrl(null);
+  }, [file, type]);
+  return objectUrl;
+};
+var UploadItemPreview = (props) => {
+  const theme = useComponentTheme("UploadItemPreview");
+  const { item } = useUploadItemContext("Upload.ItemPreview");
+  const { rootAttrs, rest } = composeRootAttrs(UploadItemPreviewBase, props, theme);
+  const { as, children, ref, ...nativeProps } = rest;
+  const hasChildren = isRenderableNode(children);
+  const sourceKey = `${item.id}\0${item.thumbUrl ?? ""}\0${item.url ?? ""}\0${item.file ? fileKey(item.file) : ""}`;
+  const [broken, setBroken] = useState({ key: sourceKey, srcs: NO_BROKEN_SRCS });
+  const brokenSrcs = broken.key === sourceKey ? broken.srcs : NO_BROKEN_SRCS;
+  const markBroken = (src2) => setBroken((previous) => {
+    if (previous.key !== sourceKey) return { key: sourceKey, srcs: [src2] };
+    if (previous.srcs.includes(src2)) return previous;
+    return { key: sourceKey, srcs: [...previous.srcs, src2] };
+  });
+  const thumbUsable = item.thumbUrl !== void 0 && !brokenSrcs.includes(item.thumbUrl);
+  const objectUrl = useImageObjectUrl(hasChildren || thumbUsable ? void 0 : item.file, fileType(item));
+  const slotAttrs = (slot) => buildSlotAttrs(UploadItemPreviewBase.getSlotProps(slot), slot, {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const Component = as ?? "span";
+  const remoteImage = item.url && isImageType(fileType(item)) ? item.url : void 0;
+  const src = [item.thumbUrl, objectUrl ?? void 0, remoteImage].find((candidate) => candidate !== void 0 && !brokenSrcs.includes(candidate));
+  const iconName = fileIconName(item);
+  const FileIcon = iconName ? FILE_ICONS[iconName] : void 0;
+  const { onError: slotOnError, ...imageAttrs } = slotAttrs("image");
+  const defaultContent = src ? (
+    // The defaults sit ahead of the slot layer so `slotProps.image` can still
+    // override them — a consumer wanting a real `alt`, or eager loading for an
+    // above-the-fold row, should not have to fight the part for it.
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: "",
+        loading: "lazy",
+        decoding: "async",
+        ...imageAttrs,
+        src,
+        onError: (event) => {
+          markBroken(src);
+          slotOnError?.(event);
+        }
+      }
+    )
+  ) : FileIcon ? /* @__PURE__ */ jsx(FileIcon, { ...slotAttrs("icon") }) : /* @__PURE__ */ jsx("span", { ...slotAttrs("extension"), "aria-hidden": "true", children: nameExtension(fileName(item)) || "FILE" });
+  return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: hasChildren ? children : defaultContent });
+};
+UploadItemPreview.displayName = "Upload.ItemPreview";
+var flattenRowChildren = (children, out = []) => {
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === Fragment$1) flattenRowChildren(child.props.children, out);
+    else out.push(child);
+  });
+  return out;
+};
+var UploadItem = (props) => {
+  const theme = useComponentTheme("UploadItem");
+  const { rootAttrs, rest } = composeRootAttrs(UploadItemBase, props, theme);
+  const { as, file: item, children, ref, ...nativeProps } = rest;
+  const Component = as ?? "div";
+  const previewNodes = [];
+  const contentNodes = [];
+  const actionsNodes = [];
+  const looseNodes = [];
+  for (const child of flattenRowChildren(children)) {
+    const type = isValidElement(child) ? child.type : void 0;
+    if (type === UploadItemPreview) previewNodes.push(child);
+    else if (type === UploadItemContent) contentNodes.push(child);
+    else if (type === UploadItemActions) actionsNodes.push(child);
+    else looseNodes.push(child);
+  }
+  const hasComposedActions = actionsNodes.length > 0;
+  const actionsRegion = hasComposedActions ? actionsNodes : /* @__PURE__ */ jsx(UploadItemActions, { children: looseNodes.length > 0 ? looseNodes : void 0 });
+  return (
+    // The row publishes its own file to its parts, so an `Upload.ItemAction`,
+    // `Upload.ItemContent`, or `Upload.ItemPreview` needs no per-instance wiring
+    // to know which entry it renders.
+    /* @__PURE__ */ jsx(UploadItemProvider, { value: { item }, children: /* @__PURE__ */ jsxs(Component, { ...nativeProps, ...rootAttrs, "data-status": fileStatus(item), ref, children: [
+      previewNodes.length > 0 ? previewNodes : /* @__PURE__ */ jsx(UploadItemPreview, {}),
+      contentNodes.length > 0 ? contentNodes : /* @__PURE__ */ jsx(UploadItemContent, {}),
+      hasComposedActions && looseNodes,
+      actionsRegion
+    ] }) })
+  );
+};
+UploadItem.displayName = "Upload.Item";
+var UploadList = (props) => {
+  const theme = useComponentTheme("UploadList");
+  const { files } = useUploadContext("Upload.List");
+  const { rootAttrs, rest } = composeRootAttrs(UploadListBase, props, theme);
+  const { as, children, ref, ...nativeProps } = rest;
+  if (files.length === 0) return null;
+  const Component = as ?? "div";
+  const rows = typeof children === "function" ? children(files) : isRenderableNode(children) ? children : files.map((item) => /* @__PURE__ */ jsx(UploadItem, { file: item }, item.id));
+  return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: rows });
+};
+UploadList.displayName = "Upload.List";
+var DEFAULT_SUBMIT_APPEARANCE = "outlined";
+var DEFAULT_SUBMIT_VARIANT = "neutral";
+var UploadSubmit = (props) => {
+  const theme = useComponentTheme("UploadSubmit");
+  const { disabled, files } = useUploadContext("Upload.Submit");
+  const { rootAttrs, rest } = composeRootAttrs(UploadSubmitBase, props, theme);
+  const { onClick: slotOnClick, ...submitRootAttrs } = rootAttrs;
+  const {
+    as,
+    children,
+    ref,
+    disabled: ownDisabled,
+    href,
+    onClick,
+    appearance = DEFAULT_SUBMIT_APPEARANCE,
+    variant = DEFAULT_SUBMIT_VARIANT,
+    ...buttonProps
+  } = rest;
+  const handleClick = (event) => {
+    onClick?.(event);
+    slotOnClick?.(event);
+  };
+  const inFlight = files.some((entry) => {
+    const status = fileStatus(entry);
+    return status === "uploading" || status === "processing";
+  });
+  const isDisabled = disabled || ownDisabled || files.length === 0 || inFlight;
+  const isButton = (as ?? "button") === "button";
+  const linkProps = isButton ? void 0 : { href: isDisabled ? void 0 : href };
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, ...linkProps, ...submitRootAttrs, as, appearance, variant, disabled: isDisabled, onClick: handleClick, ref, children });
+};
+UploadSubmit.displayName = "Upload.Submit";
+var DEFAULT_TRIGGER_APPEARANCE = "outlined";
+var DEFAULT_TRIGGER_VARIANT = "neutral";
+var UploadTrigger = (props) => {
+  const theme = useComponentTheme("UploadTrigger");
+  const { disabled, readOnly, openFileDialog } = useUploadContext("Upload.Trigger");
+  const { rootAttrs, rest } = composeRootAttrs(UploadTriggerBase, props, theme);
+  const { onClick: slotOnClick, ...triggerRootAttrs } = rootAttrs;
+  const {
+    as,
+    children,
+    ref,
+    disabled: ownDisabled,
+    href,
+    onClick,
+    appearance = DEFAULT_TRIGGER_APPEARANCE,
+    variant = DEFAULT_TRIGGER_VARIANT,
+    ...buttonProps
+  } = rest;
+  const isDisabled = disabled || readOnly || ownDisabled;
+  const isButton = (as ?? "button") === "button";
+  const linkProps = isButton ? void 0 : { href: isDisabled ? void 0 : href };
+  const handleClick = (event) => {
+    const preventedOnEntry = event.defaultPrevented;
+    onClick?.(event);
+    slotOnClick?.(event);
+    if (isConsumerVeto(event, preventedOnEntry)) return;
+    openFileDialog();
+  };
+  return (
+    // Read-only freezes the Trigger rather than unmounting it, which is the
+    // opposite of what the ItemAction's remove does under the same state. The
+    // asymmetry is the point: a file row without its remove still reads as a
+    // whole row, but the zone's browse button is most of what the zone shows —
+    // drop it and a dashed box is left offering a drop that never lands.
+    /* @__PURE__ */ jsx(Button, { ...buttonProps, ...linkProps, ...triggerRootAttrs, as, appearance, variant, disabled: isDisabled, onClick: handleClick, ref, children })
+  );
+};
+UploadTrigger.displayName = "Upload.Trigger";
+
+// src/components/upload/index.ts
+var Upload2 = Object.assign(Upload, {
+  Dropzone: UploadDropzone,
+  Actions: UploadActions,
+  Trigger: UploadTrigger,
+  Submit: UploadSubmit,
+  List: UploadList,
+  Item: UploadItem,
+  ItemPreview: UploadItemPreview,
+  ItemContent: UploadItemContent,
+  ItemActions: UploadItemActions,
+  ItemAction: UploadItemAction
+});
+
+export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Calendar, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Divider, Drawer2 as Drawer, Dropdown2 as Dropdown, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Progress2 as Progress, Radio2 as Radio, Select2 as Select, Skeleton, Slider2 as Slider, Spinner, Stepper2 as Stepper, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, Upload2 as Upload, getExportRows, useComponentTheme, useDatePicker, useTheme };