@takeoff-ui/react-spar 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -6,13 +6,25 @@ var spar = require('@turkish-technology/spar');
 var clsx = require('clsx');
 var chevronBottom = require('@takeoff-icons/react/chevron-bottom');
 var chevronTop = require('@takeoff-icons/react/chevron-top');
-var reactTable = require('@tanstack/react-table');
+var close = require('@takeoff-icons/react/close');
 var chevronRight = require('@takeoff-icons/react/chevron-right');
+var check = require('@takeoff-icons/react/check');
+var remove = require('@takeoff-icons/react/remove');
+var info = require('@takeoff-icons/react/info');
+var alertCircle = require('@takeoff-icons/react/alert-circle');
+var eyeClosed = require('@takeoff-icons/react/eye-closed');
+var eyeOpen = require('@takeoff-icons/react/eye-open');
+var reactTable = require('@tanstack/react-table');
+var arrowBottom = require('@takeoff-icons/react/arrow-bottom');
+var arrowTop = require('@takeoff-icons/react/arrow-top');
 var swap = require('@takeoff-icons/react/swap');
 var search = require('@takeoff-icons/react/search');
-var arrowLeft = require('@takeoff-icons/react/arrow-left');
-var arrowRight = require('@takeoff-icons/react/arrow-right');
 var chevronLeft = require('@takeoff-icons/react/chevron-left');
+var doubleChevronLeft = require('@takeoff-icons/react/double-chevron-left');
+var doubleChevronRight = require('@takeoff-icons/react/double-chevron-right');
+var arrowDownload = require('@takeoff-icons/react/arrow-download');
+var checkCircle = require('@takeoff-icons/react/check-circle');
+var closeCircle = require('@takeoff-icons/react/close-circle');
 
 // src/provider.tsx
 
@@ -146,6 +158,10 @@ var resolveDisclosureIndicator = (children, isOpen) => {
   if (typeof children === "function") return children({ isOpen });
   return children ?? (isOpen ? DEFAULT_DISCLOSURE_COLLAPSE_ICON : DEFAULT_DISCLOSURE_EXPAND_ICON);
 };
+var renderPointerArrow = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "tk-arrow-border", points: "0,0 5,5 10,0" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "tk-arrow-fill", points: "-0.086,-1.5 5,3.586 10.086,-1.5" })
+] });
 
 // src/components/accordion/base.ts
 var AccordionBase = createComponentBase({
@@ -196,6 +212,37 @@ function createSafeContext(displayName) {
   };
   return [Provider, useSafeContext];
 }
+var resolveStaticWidth = (mode) => {
+  if (mode === "trigger" || mode === "content") return void 0;
+  return typeof mode === "number" ? `${mode}px` : mode;
+};
+var useContentWidthStyle = (mode, triggerRef) => {
+  const [triggerWidth, setTriggerWidth] = react.useState(null);
+  react.useEffect(() => {
+    if (mode !== "trigger") return;
+    const node = triggerRef.current;
+    if (!node) return;
+    const measure = () => setTriggerWidth(Math.round(node.getBoundingClientRect().width));
+    measure();
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    });
+    observer.observe(node);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [mode, triggerRef]);
+  return react.useMemo(() => {
+    if (mode === "trigger") {
+      return triggerWidth != null ? { width: triggerWidth } : void 0;
+    }
+    const staticWidth = resolveStaticWidth(mode);
+    return staticWidth != null ? { width: staticWidth } : void 0;
+  }, [mode, triggerWidth]);
+};
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
   const { current: isControlled } = react.useRef(controlledValue !== void 0);
@@ -209,7 +256,7 @@ function useControllableState(controlledValue, defaultValue, onChange) {
     },
     [isControlled, onChange]
   );
-  return [value, setValue];
+  return [value, setValue, isControlled];
 }
 
 // src/components/accordion/context.ts
@@ -386,40 +433,6 @@ var AlertActions = (props) => {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-down", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
-var PlaceholderChevronUp = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-up", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 15-6-6-6 6" }) });
-var PlaceholderClose = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseSvgProps, "data-placeholder-icon": "close", ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
-] });
-var PlaceholderInfo = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "info", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(2 2) scale(1.714)", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "error", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(2 2) scale(1.714)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l5 5L20 7" }) });
-var PlaceholderRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) });
-var PlaceholderEye = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(1 4.5) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye-off", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(1 2.42) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.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");
@@ -442,7 +455,7 @@ var AlertClose = (props) => {
       "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL),
       onClick: handleClick,
       ...closeRootAttrs,
-      children: hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderClose, {})
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {})
     }
   );
 };
@@ -569,7 +582,6 @@ var [BreadcrumbProvider] = createSafeContext("BreadcrumbProvider");
 // src/components/breadcrumb/defaults.ts
 var DEFAULT_SIZE3 = "base";
 var DEFAULT_TYPE2 = "basic";
-var DEFAULT_SEPARATOR_VARIANT = "chevron";
 var Breadcrumb = (props) => {
   const theme = useComponentTheme("Breadcrumb");
   const { rootAttrs, rest } = composeRootAttrs(BreadcrumbBase, props, theme, {
@@ -611,17 +623,11 @@ var BreadcrumbPage = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbPage, { ...spar$1, ref, ...rootAttrs, children });
 };
 BreadcrumbPage.displayName = "Breadcrumb.Page";
-var DEFAULT_SEPARATOR_ICON = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var BreadcrumbSeparator = (props) => {
   const theme = useComponentTheme("BreadcrumbSeparator");
-  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme, {
-    stateAttrs: ({ variant: variant2 = DEFAULT_SEPARATOR_VARIANT }) => ({
-      "data-variant": variant2
-    })
-  });
-  const { variant = DEFAULT_SEPARATOR_VARIANT, children, ref, ...spar$1 } = rest;
-  const fallback = variant === "chevron" ? DEFAULT_SEPARATOR_ICON : null;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbSeparator, { ...spar$1, ref, ...rootAttrs, children: children ?? fallback });
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbSeparator, { ...spar$1, ref, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRightIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" }) });
 };
 BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
 
@@ -850,56 +856,47 @@ var Checkbox = (props) => {
     // Visual props are consumed via `stateAttrs`; destructured to keep them
     // off the rendered DOM where they would leak as raw HTML attributes.
     size: _size,
-    // `invalid` is forwarded to Spar as `invalid` (same name).
-    invalid = false,
     // takeoff-spar tri-state vocabulary; mapped to Spar's `CheckedState` below.
     checked,
     defaultChecked,
     indeterminate = false,
     onChange,
-    // Behavior props owned by Spar — defaults are restated here so they also
-    // flow into the context for compound sub-components (asterisk on Label).
-    disabled = false,
-    readOnly = false,
-    required = false,
     children,
     ref,
+    // `invalid`, `disabled`, `readOnly` and `required` are intentionally NOT
+    // destructured (so no eager `= false` default is applied) — they flow to
+    // Spar via `...sparProps` untouched. Defaulting them here would turn an
+    // omitted prop into an explicit `false`, defeating Spar's
+    // `prop ?? fieldCtx?.x` inheritance and silently overriding a wrapping
+    // `<Field disabled>`. Their resolved values are read back off Spar's
+    // render-prop `state` below for the compound context. See Radio/Input/
+    // Select wrappers for the same pass-through pattern.
     ...sparProps
   } = rest;
   const sparChecked = indeterminate ? "indeterminate" : checked;
   const sparDefaultChecked = indeterminate ? "indeterminate" : defaultChecked;
   const handleSparChange = onChange ? (next) => onChange(next === true) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    spar.Checkbox,
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Checkbox, { ...sparProps, checked: sparChecked, defaultChecked: sparDefaultChecked, onChange: handleSparChange, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+    CheckboxProvider,
     {
-      ...sparProps,
-      checked: sparChecked,
-      defaultChecked: sparDefaultChecked,
-      onChange: handleSparChange,
-      disabled,
-      readOnly,
-      required,
-      invalid,
-      ref,
-      ...rootAttrs,
-      children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
-        CheckboxProvider,
-        {
-          value: {
-            classNames,
-            slotProps,
-            required,
-            invalid,
-            disabled: state.disabled,
-            readOnly: state.readOnly,
-            checked: state.checked === true,
-            indeterminate: state.checked === "indeterminate"
-          },
-          children: typeof children === "function" ? children(state) : children
-        }
-      )
+      value: {
+        classNames,
+        slotProps,
+        // Read the *resolved* behavior state off Spar's render-prop so the
+        // compound context reflects Field-inherited values, not the raw
+        // props. `state.required` / `state.invalid` already fold in
+        // `fieldCtx`, so `<Field disabled>` / `<Field invalid>` reach the
+        // Label asterisk and slotted styling correctly.
+        required: state.required,
+        invalid: state.invalid,
+        disabled: state.disabled,
+        readOnly: state.readOnly,
+        checked: state.checked === true,
+        indeterminate: state.checked === "indeterminate"
+      },
+      children: typeof children === "function" ? children(state) : children
     }
-  );
+  ) });
 };
 Checkbox.displayName = "Checkbox";
 var CheckboxIndicator = (props) => {
@@ -918,7 +915,7 @@ var CheckboxIndicator = (props) => {
     instanceSlotProps: slotProps,
     instanceClassNames: classNames
   });
-  const resolvedChildren = typeof children === "function" ? children({ checked, indeterminate }) : children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderRemove, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderCheck, {}) });
+  const resolvedChildren = typeof children === "function" ? children({ checked, indeterminate }) : children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(remove.RemoveIconOutlinedRounded, {}) : /* @__PURE__ */ jsxRuntime.jsx(check.CheckIconOutlinedRounded, {}) });
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, ...indicatorAttrs, ref, children: resolvedChildren });
 };
 CheckboxIndicator.displayName = "Checkbox.Indicator";
@@ -1043,7 +1040,7 @@ var Chip = (props) => {
         isRenderableNode(children) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderClose, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {}) })
       ]
     }
   );
@@ -1058,6 +1055,7 @@ var DEFAULT_PLACEMENT = "right";
 var DEFAULT_HEADER_TYPE2 = "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 };
@@ -1203,8 +1201,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__ */ jsxRuntime.jsx(spar.DialogClose, { ...closeProps, ref, ...rootAttrs, children });
+  const { children, ref, "aria-label": ariaLabel, ...closeProps } = rest;
+  const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogClose, { ...closeProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL2), ref, ...rootAttrs, children: hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {}) });
 };
 DrawerClose.displayName = "Drawer.Close";
 
@@ -1307,6 +1306,7 @@ DialogTrigger.displayName = "Dialog.Trigger";
 var DEFAULT_INTENSITY2 = "base";
 var DEFAULT_HEADER_TYPE3 = "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, {
@@ -1382,8 +1382,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__ */ jsxRuntime.jsx(spar.DialogClose, { ...sparProps, ...rootAttrs, ref, children });
+  const { children, ref, "aria-label": ariaLabel, ...sparProps } = rest;
+  const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogClose, { ...sparProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL3), ...rootAttrs, ref, children: hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {}) });
 };
 DialogClose.displayName = "Dialog.Close";
 
@@ -1400,6 +1401,182 @@ var Dialog2 = Object.assign(Dialog, {
   Close: DialogClose
 });
 
+// src/components/divider/base.ts
+var DividerBase = createComponentBase({
+  name: "Divider",
+  slots: ["root", "label"],
+  classes: {
+    root: "tk-divider",
+    label: "tk-divider-label"
+  }
+});
+
+// src/components/divider/defaults.ts
+var DEFAULT_ORIENTATION = "horizontal";
+var DEFAULT_APPEARANCE5 = "solid";
+var DEFAULT_ALIGN = "center";
+var hasRenderableDividerLabel = (node) => Array.isArray(node) ? node.some(hasRenderableDividerLabel) : isRenderableNode(node);
+var Divider = (props) => {
+  const theme = useComponentTheme("Divider");
+  const { rootAttrs, rest } = composeRootAttrs(DividerBase, props, theme, {
+    // role/aria-orientation live here alongside the data-* hooks so consumer
+    // slotProps cannot silently strip the separator semantics.
+    stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION, appearance = DEFAULT_APPEARANCE5, align = DEFAULT_ALIGN, decorative: decorative2 = false }) => ({
+      "role": decorative2 ? "none" : "separator",
+      "data-orientation": orientation2,
+      "data-type": appearance,
+      "data-align": align
+    })
+  });
+  const { orientation = DEFAULT_ORIENTATION, appearance: _appearance, align: _align, decorative = false, children, ref, ...nativeProps } = rest;
+  const labelSlotAttrs = buildSlotAttrs(DividerBase.getSlotProps("label"), "label", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, "aria-orientation": decorative ? void 0 : orientation, ref, children: hasRenderableDividerLabel(children) && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }) });
+};
+Divider.displayName = "Divider";
+
+// src/components/dropdown/context.ts
+var [DropdownProvider, useDropdownOwnContext] = createSafeContext("DropdownProvider");
+
+// src/components/dropdown/defaults.ts
+var DEFAULT_SIZE7 = "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;
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { value: { size, contentWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenu, { ...sparProps, children }) });
+};
+Dropdown.displayName = "Dropdown";
+
+// src/components/dropdown/base.ts
+var DropdownTriggerBase = createComponentBase({
+  name: "DropdownTrigger",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-trigger" }
+});
+var DropdownContentBase = createComponentBase({
+  name: "DropdownContent",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-content" }
+});
+var DropdownViewportBase = createComponentBase({
+  name: "DropdownViewport",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-viewport" }
+});
+var DropdownItemBase = createComponentBase({
+  name: "DropdownItem",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-item" }
+});
+var DropdownGroupBase = createComponentBase({
+  name: "DropdownGroup",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-group" }
+});
+var DropdownLabelBase = createComponentBase({
+  name: "DropdownLabel",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-label" }
+});
+var DropdownSeparatorBase = createComponentBase({
+  name: "DropdownSeparator",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-separator" }
+});
+var DropdownArrowBase = createComponentBase({
+  name: "DropdownArrow",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-arrow" }
+});
+var DropdownArrow = (props) => {
+  const theme = useComponentTheme("DropdownArrow");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownArrowBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
+};
+DropdownArrow.displayName = "Dropdown.Arrow";
+var DropdownContent = (props) => {
+  const theme = useComponentTheme("DropdownContent");
+  const { size, contentWidth } = useDropdownOwnContext("Dropdown.Content");
+  const { triggerRef } = spar.useDropdownMenuContext();
+  const widthStyle = useContentWidthStyle(contentWidth, triggerRef);
+  const { rootAttrs, rest } = composeRootAttrs(DropdownContentBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size
+    })
+  });
+  const { children, ref, style: userStyle, ...sparProps } = rest;
+  const { style: rootStyle, ...rootRest } = rootAttrs;
+  const mergedStyle = widthStyle || rootStyle || userStyle ? { ...widthStyle, ...rootStyle, ...userStyle } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuContent, { ...sparProps, ...rootRest, ref, style: mergedStyle, children });
+};
+DropdownContent.displayName = "Dropdown.Content";
+var DropdownGroup = (props) => {
+  const theme = useComponentTheme("DropdownGroup");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownGroupBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuGroup, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownGroup.displayName = "Dropdown.Group";
+var DropdownItem = (props) => {
+  const theme = useComponentTheme("DropdownItem");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownItemBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuItem, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownItem.displayName = "Dropdown.Item";
+var DropdownLabel = (props) => {
+  const theme = useComponentTheme("DropdownLabel");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownLabelBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuLabel, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownLabel.displayName = "Dropdown.Label";
+var DropdownSeparator = (props) => {
+  const theme = useComponentTheme("DropdownSeparator");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownSeparatorBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuSeparator, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownSeparator.displayName = "Dropdown.Separator";
+var DropdownTrigger = (props) => {
+  const theme = useComponentTheme("DropdownTrigger");
+  const { size } = useDropdownOwnContext("Dropdown.Trigger");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownTriggerBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size
+    })
+  });
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuTrigger, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownTrigger.displayName = "Dropdown.Trigger";
+var DropdownViewport = (props) => {
+  const theme = useComponentTheme("DropdownViewport");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownViewportBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuViewport, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownViewport.displayName = "Dropdown.Viewport";
+
+// src/components/dropdown/index.ts
+var Dropdown2 = Object.assign(Dropdown, {
+  Trigger: DropdownTrigger,
+  Content: DropdownContent,
+  Viewport: DropdownViewport,
+  Item: DropdownItem,
+  Group: DropdownGroup,
+  Label: DropdownLabel,
+  Separator: DropdownSeparator,
+  Arrow: DropdownArrow
+});
+
 // src/components/field/base.ts
 var FieldBase = createComponentBase({
   name: "Field",
@@ -1457,7 +1634,7 @@ var FieldDescription = (props) => {
   });
   const hasContent = children != null && children !== "";
   return /* @__PURE__ */ jsxRuntime.jsxs(spar.FieldDescription, { ...spar$1, ref, ...rootAttrs, children: [
-    hasContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInfo, {}) }),
+    hasContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(info.InfoIconFilledRounded, {}) }),
     children
   ] });
 };
@@ -1474,7 +1651,7 @@ var FieldErrorMessage = (props) => {
   });
   const hasContent = children != null && children !== "";
   return /* @__PURE__ */ jsxRuntime.jsxs(spar.FieldErrorMessage, { ...spar$1, ref, ...rootAttrs, children: [
-    hasContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderError, {}) }),
+    hasContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(alertCircle.AlertCircleIconFilledRounded, {}) }),
     children
   ] });
 };
@@ -1563,7 +1740,7 @@ var InputChipsBase = createComponentBase({
 var [InputProvider, useInputOwnContext] = createSafeContext("InputProvider");
 
 // src/components/input/defaults.ts
-var DEFAULT_SIZE7 = "base";
+var DEFAULT_SIZE8 = "base";
 var SEGMENT_COUNT = 4;
 var computeStrength = (value) => {
   let strength = 0;
@@ -1615,11 +1792,11 @@ var Input = (props) => {
     for (const value of clearablesRef.current.values()) value.clear();
   }, []);
   const { rootAttrs, rest } = composeRootAttrs(InputBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE7 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE8 }) => ({
       "data-size": size2
     })
   });
-  const { size = DEFAULT_SIZE7, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE8, children, ref, ...sparProps } = rest;
   const contextValue = react.useMemo(
     () => ({
       size,
@@ -1803,7 +1980,7 @@ var InputClearButton = (props) => {
       "aria-label": ariaLabel,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderClose, {})
+      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {})
     }
   );
 };
@@ -1834,7 +2011,7 @@ var InputDecrement = (props) => {
       disabled: disabled || readOnly,
       "aria-label": ariaLabel,
       onClick: handleClick,
-      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderChevronDown, {})
+      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(chevronBottom.ChevronBottomIconOutlinedRounded, {})
     }
   );
 };
@@ -1912,7 +2089,7 @@ var InputIncrement = (props) => {
       disabled: disabled || readOnly,
       "aria-label": ariaLabel,
       onClick: handleClick,
-      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderChevronUp, {})
+      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(chevronTop.ChevronTopIconOutlinedRounded, {})
     }
   );
 };
@@ -1971,7 +2148,7 @@ var InputRevealButton = (props) => {
       "aria-label": "Toggle password visibility",
       "aria-pressed": revealed,
       onClick: handleClick,
-      startContent: children ?? (revealed ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderEyeOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderEye, {}))
+      startContent: children ?? (revealed ? /* @__PURE__ */ jsxRuntime.jsx(eyeClosed.EyeClosedIconOutlinedRounded, {}) : /* @__PURE__ */ jsxRuntime.jsx(eyeOpen.EyeOpenIconOutlinedRounded, {}))
     }
   );
 };
@@ -2075,19 +2252,19 @@ var RADIO_ITEM_CONTEXT_VALUE = { inside: true };
 var [RadioItemProvider, useRadioItemOwnContext] = createSafeContext("RadioItemProvider");
 
 // src/components/radio/defaults.ts
-var DEFAULT_SIZE8 = "base";
+var DEFAULT_SIZE9 = "base";
 var DEFAULT_POSITION = "left";
 var Radio = (props) => {
   const theme = useComponentTheme("Radio");
   const { rootAttrs, rest } = composeRootAttrs(RadioBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE8, position: position2 = DEFAULT_POSITION, spread }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE9, position: position2 = DEFAULT_POSITION, spread }) => ({
       "data-size": size2,
       "data-position": position2,
       "data-spread": spread ? "" : void 0
     })
   });
   const {
-    size = DEFAULT_SIZE8,
+    size = DEFAULT_SIZE9,
     position = DEFAULT_POSITION,
     invalid,
     // `spread` is consumed only as a data-attr above; destructure to keep it
@@ -2206,6 +2383,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, {
@@ -2234,15 +2412,16 @@ PopoverDescription.displayName = "Popover.Description";
 var PopoverArrow = (props) => {
   const theme = useComponentTheme("PopoverArrow");
   const { rootAttrs, rest } = composeRootAttrs(PopoverArrowBase, props, theme);
-  const { ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverArrow, { ...sparProps, ...rootAttrs, ref });
+  const { ref, children, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
 };
 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__ */ jsxRuntime.jsx(spar.PopoverClose, { ...sparProps, ...rootAttrs, ref, children });
+  const { children, ref, "aria-label": ariaLabel, ...sparProps } = rest;
+  const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverClose, { ...sparProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL4), ...rootAttrs, ref, children: hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {}) });
 };
 PopoverClose.displayName = "Popover.Close";
 
@@ -2256,6 +2435,193 @@ var Popover2 = Object.assign(Popover, {
   Close: PopoverClose
 });
 
+// src/components/progress/base.ts
+var ProgressBase = createComponentBase({
+  name: "Progress",
+  slots: ["root"],
+  classes: { root: "tk-progress" }
+});
+var ProgressTrackBase = createComponentBase({
+  name: "ProgressTrack",
+  slots: ["root", "rail"],
+  classes: { root: "tk-progress-track", rail: "tk-progress-rail" }
+});
+var ProgressIndicatorBase = createComponentBase({
+  name: "ProgressIndicator",
+  slots: ["root"],
+  classes: { root: "tk-progress-indicator" }
+});
+var ProgressValueBase = createComponentBase({
+  name: "ProgressValue",
+  slots: ["root"],
+  classes: { root: "tk-progress-value" }
+});
+
+// src/components/progress/context.ts
+var [ProgressProvider, useProgressContext] = createSafeContext("ProgressProvider");
+
+// src/components/progress/defaults.ts
+var DEFAULT_APPEARANCE6 = "linear";
+var DEFAULT_SIZE10 = "base";
+var DEFAULT_VARIANT6 = "primary";
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
+var DEFAULT_RANGE = 100;
+var DEFAULT_ARIA_LABEL = "Progress";
+var RING_VIEWBOX = "0 0 40 40";
+var RING_CENTER = 20;
+var RING_RADIUS = 18;
+var ProgressIndicator = (props) => {
+  const theme = useComponentTheme("ProgressIndicator");
+  const { value, min, max, appearance, indeterminate } = useProgressContext("Progress.Indicator");
+  const percent = Math.min(100, Math.max(0, (value - min) * 100 / (max - min)));
+  const { rootAttrs, rest } = composeRootAttrs(ProgressIndicatorBase, props, theme, {
+    stateAttrs: () => ({
+      "data-type": appearance,
+      "data-indeterminate": indeterminate ? "" : void 0
+    })
+  });
+  const { ref, style, ...nativeProps } = rest;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  if (appearance === "circular") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: RING_CENTER,
+        cy: RING_CENTER,
+        r: RING_RADIUS,
+        ...nativeProps,
+        ...slotAttrs,
+        pathLength: "100",
+        style: { ...style, ...slotStyle, strokeDasharray: 100, strokeDashoffset: indeterminate ? void 0 : 100 - percent },
+        ref
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...slotAttrs, "aria-hidden": "true", style: { ...style, ...slotStyle, width: indeterminate ? void 0 : `${percent}%` }, ref });
+};
+ProgressIndicator.displayName = "Progress.Indicator";
+var ProgressTrack = (props) => {
+  const theme = useComponentTheme("ProgressTrack");
+  const { appearance } = useProgressContext("Progress.Track");
+  const { rootAttrs, rest } = composeRootAttrs(ProgressTrackBase, props, theme, {
+    stateAttrs: () => ({ "data-type": appearance })
+  });
+  const { children, ref, ...nativeProps } = rest;
+  const content = children ?? /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, {});
+  if (appearance === "circular") {
+    const railAttrs = buildSlotAttrs(ProgressTrackBase.getSlotProps("rail"), "rail", {
+      themeSlotProps: theme?.slotProps,
+      themeClassNames: theme?.classNames,
+      instanceSlotProps: props.slotProps,
+      instanceClassNames: props.classNames
+    });
+    return (
+      // The decorative role and the ring geometry are design-system
+      // invariants (the value is announced by the root; the viewBox must
+      // agree with the rail/arc circles) — layered after the spreads so
+      // neither instance nor slot props can override them.
+      /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", focusable: "false", viewBox: RING_VIEWBOX, ref, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { ...railAttrs, cx: RING_CENTER, cy: RING_CENTER, r: RING_RADIUS }),
+        content
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, ref, children: content });
+};
+ProgressTrack.displayName = "Progress.Track";
+var resolveRange = ({ value: rawValue, min: rawMin = DEFAULT_MIN, max: rawMax = DEFAULT_MAX }) => {
+  const min = Number.isFinite(rawMin) ? rawMin : DEFAULT_MIN;
+  const max = Number.isFinite(rawMax) && rawMax > min ? rawMax : min + DEFAULT_RANGE;
+  const value = typeof rawValue === "number" && Number.isFinite(rawValue) ? Math.min(Math.max(rawValue, min), max) : min;
+  return { min, max, value };
+};
+var warnedRanges = /* @__PURE__ */ new Set();
+var Progress = (props) => {
+  const theme = useComponentTheme("Progress");
+  const field = spar.useOptionalFieldContext();
+  const resolveState = ({
+    indeterminate: indeterminate2 = false,
+    appearance: appearance2 = DEFAULT_APPEARANCE6,
+    size: size2 = DEFAULT_SIZE10,
+    variant: variant2 = DEFAULT_VARIANT6,
+    disabled: disabled2 = field?.disabled ?? false
+  }) => ({ indeterminate: indeterminate2, appearance: appearance2, size: size2, variant: variant2, disabled: disabled2 });
+  const { rootAttrs, rest } = composeRootAttrs(ProgressBase, props, theme);
+  const {
+    // Consumed through resolveState/resolveRange (and as the root data-* hooks
+    // below); destructured so the <div> doesn't receive unknown DOM
+    // attributes.
+    value: _value,
+    min: _min,
+    max: rawMax,
+    indeterminate: _indeterminate,
+    appearance: _appearance,
+    disabled: _disabled,
+    size: _size,
+    variant: _variant,
+    as,
+    children,
+    ref,
+    ...nativeProps
+  } = rest;
+  const { indeterminate, appearance, size, variant, disabled } = resolveState(rest);
+  const { min, max, value } = resolveRange(rest);
+  const dataAttrs = {
+    "data-type": appearance,
+    "data-size": size,
+    "data-variant": variant,
+    "data-disabled": disabled ? "" : void 0,
+    "data-indeterminate": indeterminate ? "" : void 0,
+    // Styling hook for the finished state (e.g. a success fill at 100%);
+    // meaningless while indeterminate, so dropped alongside the value.
+    "data-complete": !indeterminate && value === max ? "" : void 0
+  };
+  if (isDevelopment() && typeof rawMax === "number" && Number.isFinite(rawMax) && rawMax <= min) {
+    const message = `[Progress] \`max\` (${rawMax}) must be greater than \`min\` (${min}); falling back to ${max}.`;
+    if (!warnedRanges.has(message)) {
+      warnedRanges.add(message);
+      console.warn(message);
+    }
+  }
+  const consumerLabelledBy = nativeProps["aria-labelledby"];
+  const accessibilityAttrs = {
+    "role": nativeProps.role ?? "progressbar",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    // Per the progressbar pattern, an indeterminate bar exposes no
+    // aria-valuenow — assistive tech then announces it as busy rather than
+    // stuck at a bogus percentage.
+    "aria-valuenow": indeterminate ? void 0 : value,
+    // aria-valuetext accompanies aria-valuenow; drop it while indeterminate so
+    // a consumer-formatted value can't linger next to a busy bar.
+    "aria-valuetext": indeterminate ? void 0 : nativeProps["aria-valuetext"],
+    "aria-labelledby": consumerLabelledBy ?? field?.labelId,
+    "aria-label": nativeProps["aria-label"] ?? (consumerLabelledBy ? void 0 : DEFAULT_ARIA_LABEL),
+    "aria-disabled": disabled || void 0
+  };
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(ProgressProvider, { value: { value, min, max, appearance, indeterminate }, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...accessibilityAttrs, ...rootAttrs, ...dataAttrs, ref, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(ProgressTrack, {}) }) });
+};
+Progress.displayName = "Progress";
+var ProgressValue = (props) => {
+  const theme = useComponentTheme("ProgressValue");
+  const { appearance } = useProgressContext("Progress.Value");
+  const { rootAttrs, rest } = composeRootAttrs(ProgressValueBase, props, theme, {
+    stateAttrs: () => ({ "data-type": appearance })
+  });
+  const { children, ref, ...nativeProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children });
+};
+ProgressValue.displayName = "Progress.Value";
+
+// src/components/progress/index.ts
+var Progress2 = Object.assign(Progress, {
+  Track: ProgressTrack,
+  Indicator: ProgressIndicator,
+  Value: ProgressValue
+});
+
 // src/components/select/base.ts
 var SelectBase = createComponentBase({
   name: "Select",
@@ -2286,6 +2652,11 @@ var SelectContentBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-content" }
 });
+var SelectViewportBase = createComponentBase({
+  name: "SelectViewport",
+  slots: ["root"],
+  classes: { root: "tk-select-viewport" }
+});
 var SelectItemBase = createComponentBase({
   name: "SelectItem",
   slots: ["root"],
@@ -2306,22 +2677,27 @@ var SelectSeparatorBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-separator" }
 });
+var SelectArrowBase = createComponentBase({
+  name: "SelectArrow",
+  slots: ["root"],
+  classes: { root: "tk-select-arrow" }
+});
 
 // src/components/select/context.ts
 var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
 
 // src/components/select/defaults.ts
-var DEFAULT_SIZE9 = "base";
-var DEFAULT_CONTENT_WIDTH = "trigger";
+var DEFAULT_SIZE11 = "base";
+var DEFAULT_CONTENT_WIDTH2 = "trigger";
 var Select = (props) => {
   const theme = useComponentTheme("Select");
   const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE9, invalid: invalid2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE11, invalid: invalid2 }) => ({
       "data-size": size2,
       "data-invalid": invalid2 ? "" : void 0
     })
   });
-  const { size = DEFAULT_SIZE9, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE11, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH2, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Select, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
@@ -2372,44 +2748,29 @@ var SelectIndicator = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
 };
 SelectIndicator.displayName = "Select.Indicator";
-var resolveStaticWidth = (mode) => {
-  if (mode === "trigger" || mode === "content") return void 0;
-  return typeof mode === "number" ? `${mode}px` : mode;
-};
 var SelectContent = (props) => {
   const theme = useComponentTheme("SelectContent");
   const { size, contentWidth } = useSelectOwnContext("Select.Content");
   const { triggerRef } = spar.useSelectContext();
-  const [triggerWidth, setTriggerWidth] = react.useState(null);
-  react.useEffect(() => {
-    if (contentWidth !== "trigger") return;
-    const node = triggerRef.current;
-    if (!node) return;
-    setTriggerWidth(node.offsetWidth);
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) setTriggerWidth(Math.round(entry.contentRect.width + 2));
-    });
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [contentWidth, triggerRef]);
+  const widthStyle = useContentWidthStyle(contentWidth, triggerRef);
   const { rootAttrs, rest } = composeRootAttrs(SelectContentBase, props, theme, {
     stateAttrs: () => ({
       "data-size": size
     })
   });
   const { children, ref, style: userStyle, ...spar$1 } = rest;
-  const widthStyle = react.useMemo(() => {
-    if (contentWidth === "trigger") {
-      return triggerWidth != null ? { width: triggerWidth } : void 0;
-    }
-    const staticWidth = resolveStaticWidth(contentWidth);
-    return staticWidth != null ? { width: staticWidth } : void 0;
-  }, [contentWidth, triggerWidth]);
-  const mergedStyle = widthStyle || userStyle ? { ...widthStyle, ...userStyle } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectContent, { ...spar$1, ref, style: mergedStyle, ...rootAttrs, children });
+  const { style: rootStyle, ...rootRest } = rootAttrs;
+  const mergedStyle = widthStyle || rootStyle || userStyle ? { ...widthStyle, ...rootStyle, ...userStyle } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectContent, { ...spar$1, ...rootRest, ref, style: mergedStyle, children });
 };
 SelectContent.displayName = "Select.Content";
+var SelectViewport = (props) => {
+  const theme = useComponentTheme("SelectViewport");
+  const { rootAttrs, rest } = composeRootAttrs(SelectViewportBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectViewport, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectViewport.displayName = "Select.Viewport";
 var SelectItem = (props) => {
   const theme = useComponentTheme("SelectItem");
   const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
@@ -2438,90 +2799,1007 @@ var SelectSeparator = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectSeparator, { ...spar$1, ref, ...rootAttrs, children });
 };
 SelectSeparator.displayName = "Select.Separator";
+var SelectArrow = (props) => {
+  const theme = useComponentTheme("SelectArrow");
+  const { rootAttrs, rest } = composeRootAttrs(SelectArrowBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
+};
+SelectArrow.displayName = "Select.Arrow";
 
 // src/components/select/index.ts
 var Select2 = Object.assign(Select, {
   Trigger: SelectTrigger,
   Indicator: SelectIndicator,
   Content: SelectContent,
+  Viewport: SelectViewport,
   Item: SelectItem,
   Group: SelectGroup,
   Label: SelectLabel,
-  Separator: SelectSeparator
+  Separator: SelectSeparator,
+  Arrow: SelectArrow
 });
 
-// src/components/spinner/base.ts
-var SpinnerBase = createComponentBase({
-  name: "Spinner",
-  slots: ["root", "indicator"],
-  classes: {
-    root: "tk-spinner",
-    indicator: "tk-spinner-indicator"
-  }
+// src/components/slider/base.ts
+var SliderBase = createComponentBase({
+  name: "Slider",
+  slots: ["root"],
+  classes: { root: "tk-slider" }
+});
+var SliderTrackBase = createComponentBase({
+  name: "SliderTrack",
+  slots: ["root"],
+  classes: { root: "tk-slider-track" }
+});
+var SliderRangeBase = createComponentBase({
+  name: "SliderRange",
+  slots: ["root"],
+  classes: { root: "tk-slider-range" }
+});
+var SliderThumbBase = createComponentBase({
+  name: "SliderThumb",
+  slots: ["root", "tooltip", "arrow"],
+  classes: { root: "tk-slider-thumb", tooltip: "tk-slider-tooltip", arrow: "tk-slider-arrow" }
+});
+var SliderTicksBase = createComponentBase({
+  name: "SliderTicks",
+  slots: ["root", "tick"],
+  classes: { root: "tk-slider-ticks", tick: "tk-slider-tick" }
+});
+var SliderValueBase = createComponentBase({
+  name: "SliderValue",
+  slots: ["root"],
+  classes: { root: "tk-slider-value" }
 });
 
-// src/components/spinner/defaults.ts
-var DEFAULT_APPEARANCE5 = "rounded";
-var DEFAULT_SIZE10 = "base";
-var DEFAULT_VARIANT6 = "neutral";
-var DEFAULT_ARIA_LABEL = "Loading";
-var SPINNER_RADIAL_PARTS = 8;
-var SPINNER_THREE_DOT_PARTS = 3;
-var renderIndicatorContent = (appearance) => {
-  if (appearance === "rounded") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "16.6667" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 36.6667 20" }) })
-    ] });
-  }
-  if (appearance === "loader") {
-    return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 31.7851 8.2149" }) });
+// src/components/slider/context.ts
+var [SliderProvider, useSliderContext] = createSafeContext("SliderProvider");
+
+// src/components/slider/defaults.ts
+var DEFAULT_ORIENTATION2 = "horizontal";
+var DEFAULT_SIZE12 = "base";
+var DEFAULT_VARIANT7 = "primary";
+var DEFAULT_TOOLTIP = "auto";
+var DEFAULT_TRACK = "normal";
+var DEFAULT_MIN_DISTANCE = 0;
+var DEFAULT_MIN2 = 0;
+var DEFAULT_MAX2 = 100;
+var DEFAULT_STEP = 1;
+var DEFAULT_SPAN = 100;
+var PAGE_STEP_MULTIPLIER = 10;
+var MAX_TICKS = 100;
+var RANGE_VALUE_SEPARATOR = " \u2013 ";
+var RANGE_THUMB_LABELS = ["Minimum", "Maximum"];
+
+// src/components/slider/helpers.ts
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var decimalsOf = (value) => {
+  if (!Number.isFinite(value)) return 0;
+  const text = String(value);
+  const exponent = text.indexOf("e-");
+  if (exponent !== -1) {
+    const fraction = text.slice(0, exponent).split(".")[1]?.length ?? 0;
+    return fraction + Number(text.slice(exponent + 2));
   }
-  if (appearance === "dots") {
-    return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-dot" }, index));
+  const dot = text.indexOf(".");
+  return dot === -1 ? 0 : text.length - dot - 1;
+};
+var roundTo = (value, decimals) => decimals > 0 ? Number(value.toFixed(Math.min(decimals, 15))) : Math.round(value);
+var resolveBounds = (rawMin = DEFAULT_MIN2, rawMax = DEFAULT_MAX2, rawStep = DEFAULT_STEP) => {
+  const min = Number.isFinite(rawMin) ? rawMin : DEFAULT_MIN2;
+  const max = Number.isFinite(rawMax) && rawMax > min ? rawMax : min + DEFAULT_SPAN;
+  const step = Number.isFinite(rawStep) && rawStep > 0 ? rawStep : DEFAULT_STEP;
+  return { min, max, step };
+};
+var snap = (value, { min, max, step }) => {
+  if (!Number.isFinite(value)) return min;
+  const steps = Math.round((value - min) / step);
+  const snapped = min + steps * step;
+  return clamp(roundTo(snapped, Math.max(decimalsOf(step), decimalsOf(min))), min, max);
+};
+var toPercent = (value, { min, max }) => clamp((value - min) * 100 / (max - min), 0, 100);
+var fromRatio = (ratio, { min, max }) => min + ratio * (max - min);
+var pointerCoord = (event, orientation) => orientation === "vertical" ? event.clientY : event.clientX;
+var valueFromPointer = (rect, point, bounds, orientation) => {
+  const ratio = orientation === "vertical" ? rect.height === 0 ? 0 : (rect.bottom - point) / rect.height : rect.width === 0 ? 0 : (point - rect.left) / rect.width;
+  return snap(fromRatio(clamp(ratio, 0, 1), bounds), bounds);
+};
+var offsetStyle = (percent, orientation) => orientation === "vertical" ? { insetBlockEnd: `${percent}%` } : { insetInlineStart: `${percent}%` };
+var bandStyle = (start, end, orientation) => orientation === "vertical" ? { insetBlockEnd: `${start}%`, height: `${end - start}%` } : { insetInlineStart: `${start}%`, width: `${end - start}%` };
+var normalizeValues = (value, range, bounds) => {
+  if (range) {
+    const seeded = Array.isArray(value) && value.length >= 2 ? value : [bounds.min, bounds.max];
+    return seeded.map((entry) => snap(entry, bounds)).sort((a, b) => a - b);
   }
-  if (appearance === "lines") {
-    return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-line" }, index));
+  return [snap(Array.isArray(value) ? value[0] : value ?? bounds.min, bounds)];
+};
+var toCommittedValue = (values, range) => range ? [...values] : values[0];
+var rangeInputName = (name, index, count) => count === 2 ? index === 0 ? `${name}-min` : `${name}-max` : `${name}-${index + 1}`;
+var valuesEqual = (a, b) => a.length === b.length && a.every((entry, index) => entry === b[index]);
+var thumbLabel = (index, count) => {
+  if (count < 2) return void 0;
+  if (count === 2) return RANGE_THUMB_LABELS[index];
+  return `Value ${index + 1}`;
+};
+var closestThumbIndex = (values, target, disabled = []) => {
+  let index = 0;
+  let best = Infinity;
+  let found = false;
+  values.forEach((entry, current) => {
+    if (disabled[current]) return;
+    const distance = Math.abs(entry - target);
+    if (distance <= best) {
+      best = distance;
+      index = current;
+      found = true;
+    }
+  });
+  if (found) return index;
+  values.forEach((entry, current) => {
+    const distance = Math.abs(entry - target);
+    if (distance <= best) {
+      best = distance;
+      index = current;
+    }
+  });
+  return index;
+};
+var thumbBounds = (values, index, bounds, minDistance = 0) => {
+  const hardLower = index > 0 ? values[index - 1] : bounds.min;
+  const hardUpper = index < values.length - 1 ? values[index + 1] : bounds.max;
+  const lower = index > 0 ? hardLower + minDistance : bounds.min;
+  const upper = index < values.length - 1 ? hardUpper - minDistance : bounds.max;
+  return lower <= upper ? { min: lower, max: upper } : { min: hardLower, max: hardUpper };
+};
+var withThumbClamped = (values, index, next, bounds, minDistance = 0) => {
+  const { min: lower, max: upper } = thumbBounds(values, index, bounds, minDistance);
+  const updated = [...values];
+  updated[index] = clamp(snap(next, bounds), lower, upper);
+  return updated;
+};
+var withThumbSwapped = (values, index, next, bounds, minDistance = 0, disabled = []) => {
+  const lowerBlocked = index > 0 && disabled[index - 1];
+  const upperBlocked = index < values.length - 1 && disabled[index + 1];
+  if (minDistance > 0 || lowerBlocked || upperBlocked) {
+    const { min: lower, max: upper } = thumbBounds(values, index, bounds, minDistance);
+    const updated2 = [...values];
+    updated2[index] = clamp(snap(next, bounds), lower, upper);
+    return { values: updated2, index };
   }
-  if (appearance === "threeDots") {
-    return Array.from({ length: SPINNER_THREE_DOT_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-dot" }, index));
+  const updated = [...values];
+  updated[index] = snap(next, bounds);
+  let active = index;
+  while (active > 0 && updated[active] < updated[active - 1]) {
+    [updated[active], updated[active - 1]] = [updated[active - 1], updated[active]];
+    active -= 1;
   }
-  if (appearance === "logo") {
-    return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 48 48", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        clipRule: "evenodd",
-        d: "M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24V4C48 1.79086 46.2091 0 44 0H24ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z",
-        fillRule: "evenodd"
-      }
-    ) });
+  while (active < updated.length - 1 && updated[active] > updated[active + 1]) {
+    [updated[active], updated[active + 1]] = [updated[active + 1], updated[active]];
+    active += 1;
   }
-  return null;
-};
-var Spinner = (props) => {
-  const theme = useComponentTheme("Spinner");
-  const { rootAttrs, rest } = composeRootAttrs(SpinnerBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT6, size = DEFAULT_SIZE10, appearance: appearance2 = DEFAULT_APPEARANCE5 }) => ({
-      "data-variant": variant,
-      "data-size": size,
-      "data-type": appearance2
-    })
+  return { values: updated, index: active };
+};
+var formatValueText = (value, formatValue) => formatValue?.(value) ?? String(value);
+var tickPercents = ({ min, max, step }, limit) => {
+  const raw = (max - min) / step;
+  const steps = Math.abs(raw - Math.round(raw)) < 1e-9 ? Math.round(raw) : Math.floor(raw);
+  const count = steps + 1;
+  if (count > limit) return null;
+  return Array.from({ length: count }, (_, index) => toPercent(min + index * step, { min, max}));
+};
+var SliderRange = (props) => {
+  const theme = useComponentTheme("SliderRange");
+  const { values, bounds, range, orientation } = useSliderContext("Slider.Range");
+  const start = range ? toPercent(values[0], bounds) : 0;
+  const end = toPercent(range ? values[values.length - 1] : values[0], bounds);
+  const { rootAttrs, rest } = composeRootAttrs(SliderRangeBase, props, theme);
+  const { ref, style, ...nativeProps } = rest;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...slotAttrs, "aria-hidden": "true", style: { ...style, ...slotStyle, ...bandStyle(start, end, orientation) }, ref });
+};
+SliderRange.displayName = "Slider.Range";
+var SliderThumb = (props) => {
+  const theme = useComponentTheme("SliderThumb");
+  const {
+    values,
+    bounds,
+    range,
+    minDistance,
+    orientation,
+    disabled,
+    readOnly,
+    invalid,
+    required,
+    draggingIndex,
+    formatValue,
+    setThumbValue,
+    startDrag,
+    thumbRefs,
+    thumbDisabledRef,
+    fieldId,
+    labelId,
+    describedBy,
+    rootAriaLabel,
+    rootAriaLabelledby
+  } = useSliderContext("Slider.Thumb");
+  const [isFocused, setIsFocused] = react.useState(false);
+  const { rootAttrs, rest } = composeRootAttrs(SliderThumbBase, props, theme);
+  const { index = 0, disabled: ownDisabled, children, ref, style, onKeyDown, onPointerDown, onFocus, onBlur, ...nativeProps } = rest;
+  const value = values[index] ?? bounds.min;
+  const isDragging = draggingIndex === index;
+  const isDisabled = disabled || Boolean(ownDisabled);
+  thumbDisabledRef.current[index] = isDisabled;
+  const { min: lowerBound, max: upperBound } = thumbBounds(values, index, bounds, minDistance);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (isDisabled || readOnly || event.defaultPrevented) return;
+    const page = bounds.step * PAGE_STEP_MULTIPLIER;
+    const next = {
+      ArrowRight: value + bounds.step,
+      ArrowUp: value + bounds.step,
+      ArrowLeft: value - bounds.step,
+      ArrowDown: value - bounds.step,
+      PageUp: value + page,
+      PageDown: value - page,
+      Home: bounds.min,
+      End: bounds.max
+    }[event.key];
+    if (next === void 0) return;
+    event.preventDefault();
+    setThumbValue(index, next);
+  };
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    if (isDisabled || readOnly || event.defaultPrevented || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    startDrag(index, pointerCoord(event, orientation), false, event.pointerId);
+  };
+  const tooltipAttrs = buildSlotAttrs(SliderThumbBase.getSlotProps("tooltip"), "tooltip", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
   });
-  const { variant: _variant, size: _size, appearance = DEFAULT_APPEARANCE5, ref, ...nativeProps } = rest;
-  const indicatorSlotAttrs = buildSlotAttrs(SpinnerBase.getSlotProps("indicator"), "indicator", {
+  const arrowAttrs = buildSlotAttrs(SliderThumbBase.getSlotProps("arrow"), "arrow", {
     themeSlotProps: theme?.slotProps,
     themeClassNames: theme?.classNames,
     instanceSlotProps: props.slotProps,
     instanceClassNames: props.classNames
   });
-  const isDecorative = nativeProps["aria-hidden"] === true || nativeProps["aria-hidden"] === "true";
-  const accessibilityAttrs = isDecorative ? {} : {
-    "role": nativeProps.role ?? "status",
-    "aria-label": nativeProps["aria-label"] ?? (nativeProps["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL)
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...accessibilityAttrs, ...nativeProps, ...rootAttrs, ref, children: /* @__PURE__ */ jsxRuntime.jsx("span", { ...indicatorSlotAttrs, "aria-hidden": "true", children: renderIndicatorContent(appearance) }) });
-};
-Spinner.displayName = "Spinner";
+  const formattedText = formatValueText(value, formatValue);
+  const formatted = formatValue ? formattedText : void 0;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  const bubbleContent = children === void 0 ? formattedText : typeof children === "function" ? children({ value, formatted: formattedText, index, isDragging, isFocused }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...nativeProps,
+      ...slotAttrs,
+      role: "slider",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-valuemin": lowerBound,
+      "aria-valuemax": upperBound,
+      "aria-valuenow": value,
+      "aria-valuetext": formatted,
+      "aria-orientation": orientation,
+      "aria-disabled": isDisabled || void 0,
+      "aria-readonly": readOnly || void 0,
+      "aria-invalid": invalid || void 0,
+      "aria-required": required || void 0,
+      "aria-label": nativeProps["aria-label"] ?? thumbLabel(index, values.length) ?? rootAriaLabel,
+      "aria-labelledby": nativeProps["aria-labelledby"] ?? (range ? void 0 : rootAriaLabelledby ?? labelId),
+      "aria-describedby": nativeProps["aria-describedby"] ?? describedBy,
+      id: nativeProps.id ?? (index === 0 ? fieldId : void 0),
+      "data-thumb": range ? index === 0 ? "min" : index === values.length - 1 ? "max" : void 0 : void 0,
+      "data-dragging": isDragging ? "" : void 0,
+      "data-focus": isFocused ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      onKeyDown: handleKeyDown,
+      onPointerDown: handlePointerDown,
+      onFocus: (event) => {
+        onFocus?.(event);
+        setIsFocused(true);
+      },
+      onBlur: (event) => {
+        onBlur?.(event);
+        setIsFocused(false);
+      },
+      style: { ...style, ...slotStyle, ...offsetStyle(toPercent(value, bounds), orientation) },
+      ref: (node) => {
+        thumbRefs.current[index] = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { ...tooltipAttrs, "aria-hidden": "true", children: [
+        bubbleContent,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { ...arrowAttrs, "aria-hidden": "true" })
+      ] })
+    }
+  );
+};
+SliderThumb.displayName = "Slider.Thumb";
+var SliderTrack = (props) => {
+  const theme = useComponentTheme("SliderTrack");
+  const { values, disabled, readOnly, orientation, valueFromPoint, startDrag, trackRef, thumbDisabledRef } = useSliderContext("Slider.Track");
+  const { rootAttrs, rest } = composeRootAttrs(SliderTrackBase, props, theme);
+  const { children, ref, onPointerDown, ...nativeProps } = rest;
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    if (disabled || readOnly || event.defaultPrevented || event.button !== 0) return;
+    event.preventDefault();
+    const point = pointerCoord(event, orientation);
+    startDrag(closestThumbIndex(values, valueFromPoint(point), thumbDisabledRef.current), point, true, event.pointerId);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...nativeProps,
+      ...rootAttrs,
+      onPointerDown: handlePointerDown,
+      ref: (node) => {
+        trackRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SliderRange, {}),
+        values.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(SliderThumb, { index }, index))
+      ] })
+    }
+  );
+};
+SliderTrack.displayName = "Slider.Track";
+var warnedRanges2 = /* @__PURE__ */ new Set();
+var Slider = (props) => {
+  const theme = useComponentTheme("Slider");
+  const field = spar.useOptionalFieldContext();
+  const { rootAttrs, rest } = composeRootAttrs(SliderBase, props, theme, {
+    stateAttrs: (merged) => {
+      const {
+        size = DEFAULT_SIZE12,
+        variant = DEFAULT_VARIANT7,
+        orientation: orientation2 = DEFAULT_ORIENTATION2,
+        tooltip = DEFAULT_TOOLTIP,
+        track = DEFAULT_TRACK,
+        range: range2,
+        disabled: disabled2,
+        readOnly: readOnly2,
+        invalid: invalid2,
+        required: required2
+      } = merged;
+      return {
+        "data-size": size,
+        "data-variant": variant,
+        "data-orientation": orientation2,
+        "data-tooltip": tooltip,
+        "data-track": track,
+        "data-range": range2 ? "" : void 0,
+        "data-disabled": disabled2 ?? field?.disabled ? "" : void 0,
+        "data-readonly": readOnly2 ?? field?.readOnly ? "" : void 0,
+        "data-invalid": invalid2 ?? field?.invalid ? "" : void 0,
+        "data-required": required2 ?? field?.required ? "" : void 0
+      };
+    }
+  });
+  const {
+    // Consumed through the resolved state below (and as the root data-* hooks);
+    // destructured so the <div> doesn't receive unknown DOM attributes.
+    min: rawMin,
+    max: rawMax,
+    step: rawStep,
+    range = false,
+    value,
+    defaultValue,
+    onValueChange,
+    onValueChangeEnd,
+    disabled: ownDisabled,
+    readOnly: ownReadOnly,
+    invalid: ownInvalid,
+    required: ownRequired,
+    minDistance = DEFAULT_MIN_DISTANCE,
+    orientation = DEFAULT_ORIENTATION2,
+    size: _size,
+    variant: _variant,
+    // Consumed as the `data-tooltip` / `data-track` root hooks above (the recipe
+    // drives the value bubble and the inverted/none fill off them); pulled out
+    // so they never land on the <div> as unknown attributes.
+    tooltip: _tooltip,
+    track: _track,
+    formatValue,
+    name,
+    form,
+    as,
+    children,
+    ref,
+    ...nativeProps
+  } = rest;
+  const disabled = ownDisabled ?? field?.disabled ?? false;
+  const readOnly = ownReadOnly ?? field?.readOnly ?? false;
+  const invalid = ownInvalid ?? field?.invalid ?? false;
+  const required = ownRequired ?? field?.required ?? false;
+  const bounds = resolveBounds(rawMin, rawMax, rawStep);
+  if (isDevelopment() && typeof rawMax === "number" && Number.isFinite(rawMax) && rawMax <= bounds.min) {
+    const message = `[Slider] \`max\` (${rawMax}) must be greater than \`min\` (${bounds.min}); falling back to ${bounds.max}.`;
+    if (!warnedRanges2.has("inverted-range")) {
+      warnedRanges2.add("inverted-range");
+      console.warn(message);
+    }
+  }
+  const controlledValues = value === void 0 ? void 0 : normalizeValues(value, range, bounds);
+  const initialValues = normalizeValues(defaultValue, range, bounds);
+  const onValueChangeRef = react.useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
+  const handleCommit = react.useCallback((next) => onValueChangeRef.current?.(toCommittedValue(next, range)), [range]);
+  const [rawValues = initialValues, setValues] = useControllableState(controlledValues, initialValues, handleCommit);
+  const values = react.useMemo(() => normalizeValues(toCommittedValue(rawValues, range), range, bounds), [rawValues, range, bounds.min, bounds.max, bounds.step]);
+  const onValueChangeEndRef = react.useRef(onValueChangeEnd);
+  onValueChangeEndRef.current = onValueChangeEnd;
+  const emitChangeEnd = react.useCallback((vals) => onValueChangeEndRef.current?.(toCommittedValue(vals, range)), [range]);
+  const emitChangeEndRef = react.useRef(emitChangeEnd);
+  emitChangeEndRef.current = emitChangeEnd;
+  const [draggingIndex, setDraggingIndex] = react.useState(null);
+  const trackRef = react.useRef(null);
+  const thumbRefs = react.useRef([]);
+  const thumbDisabledRef = react.useRef([]);
+  const gestureStartRef = react.useRef(null);
+  const dragPointerRef = react.useRef(null);
+  const valuesRef = react.useRef(values);
+  valuesRef.current = values;
+  thumbDisabledRef.current.length = values.length;
+  const valueFromPoint = react.useCallback(
+    (point) => {
+      const track = trackRef.current;
+      if (!track) return bounds.min;
+      return valueFromPointer(track.getBoundingClientRect(), point, bounds, orientation);
+    },
+    [bounds.min, bounds.max, bounds.step, orientation]
+  );
+  const commit = react.useCallback(
+    (next) => {
+      if (!valuesEqual(next, valuesRef.current)) setValues(next);
+    },
+    [setValues]
+  );
+  const setThumbValue = react.useCallback(
+    (index, next) => {
+      if (disabled || readOnly || thumbDisabledRef.current[index]) return;
+      const before = valuesRef.current;
+      const updated = withThumbClamped(before, index, next, bounds, minDistance);
+      commit(updated);
+      if (!valuesEqual(updated, before)) emitChangeEnd(updated);
+    },
+    [disabled, readOnly, commit, emitChangeEnd, minDistance, bounds.min, bounds.max, bounds.step]
+  );
+  const startDrag = react.useCallback(
+    (index, point, seek, pointerId) => {
+      if (disabled || readOnly || thumbDisabledRef.current[index]) return;
+      gestureStartRef.current = valuesRef.current;
+      dragPointerRef.current = pointerId;
+      if (!seek) {
+        setDraggingIndex(index);
+        thumbRefs.current[index]?.focus();
+        return;
+      }
+      const { values: next, index: active } = withThumbSwapped(valuesRef.current, index, valueFromPoint(point), bounds, minDistance, thumbDisabledRef.current);
+      setDraggingIndex(active);
+      thumbRefs.current[active]?.focus();
+      commit(next);
+    },
+    [disabled, readOnly, commit, valueFromPoint, minDistance, bounds.min, bounds.max, bounds.step]
+  );
+  react.useEffect(() => {
+    if (draggingIndex === null) return;
+    const ownerId = dragPointerRef.current;
+    const isOwner = (event) => ownerId === null || event.pointerId === ownerId;
+    const settle = () => {
+      setDraggingIndex(null);
+      if (gestureStartRef.current && !valuesEqual(valuesRef.current, gestureStartRef.current)) emitChangeEnd(valuesRef.current);
+      gestureStartRef.current = null;
+      dragPointerRef.current = null;
+    };
+    const handleMove = (event) => {
+      if (!isOwner(event)) return;
+      if (event.buttons === 0) {
+        settle();
+        return;
+      }
+      const { values: next, index: active } = withThumbSwapped(
+        valuesRef.current,
+        draggingIndex,
+        valueFromPoint(pointerCoord(event, orientation)),
+        bounds,
+        minDistance,
+        thumbDisabledRef.current
+      );
+      if (active !== draggingIndex) {
+        setDraggingIndex(active);
+        thumbRefs.current[active]?.focus();
+      }
+      commit(next);
+    };
+    const handleEnd = (event) => {
+      if (!isOwner(event)) return;
+      settle();
+    };
+    document.addEventListener("pointermove", handleMove);
+    document.addEventListener("pointerup", handleEnd);
+    document.addEventListener("pointercancel", handleEnd);
+    return () => {
+      document.removeEventListener("pointermove", handleMove);
+      document.removeEventListener("pointerup", handleEnd);
+      document.removeEventListener("pointercancel", handleEnd);
+    };
+  }, [draggingIndex, valueFromPoint, commit, emitChangeEnd, minDistance, orientation, bounds.min, bounds.max, bounds.step]);
+  react.useEffect(
+    () => () => {
+      if (gestureStartRef.current && !valuesEqual(valuesRef.current, gestureStartRef.current)) emitChangeEndRef.current(valuesRef.current);
+      gestureStartRef.current = null;
+    },
+    []
+  );
+  const Component = as ?? "div";
+  const htmlProps = nativeProps;
+  const groupAttrs = range ? {
+    "role": htmlProps.role ?? "group",
+    "aria-labelledby": htmlProps["aria-labelledby"] ?? field?.labelId
+  } : {};
+  const { "aria-label": rootAriaLabel, "aria-labelledby": rootAriaLabelledby, ...singleWrapperProps } = htmlProps;
+  const wrapperProps = range ? nativeProps : singleWrapperProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SliderProvider,
+    {
+      value: {
+        values,
+        bounds,
+        range,
+        minDistance,
+        orientation,
+        disabled,
+        readOnly,
+        invalid,
+        required,
+        draggingIndex,
+        trackRef,
+        thumbRefs,
+        thumbDisabledRef,
+        formatValue,
+        setThumbValue,
+        startDrag,
+        valueFromPoint,
+        fieldId: field?.fieldId,
+        labelId: field?.labelId,
+        describedBy: invalid ? field?.errorId : field?.descriptionId,
+        // Only a single slider forwards the root name to its thumb; a range
+        // carries it on the group wrapper above.
+        rootAriaLabel: range ? void 0 : rootAriaLabel,
+        rootAriaLabelledby: range ? void 0 : rootAriaLabelledby
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...wrapperProps, ...groupAttrs, ...rootAttrs, ref, children: [
+        children ?? /* @__PURE__ */ jsxRuntime.jsx(SliderTrack, {}),
+        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__ */ jsxRuntime.jsx(spar.InputField, { type: "hidden", name: rangeInputName(name, index, values.length), value: entry, form }, index))
+        ) : /* @__PURE__ */ jsxRuntime.jsx(spar.InputField, { type: "hidden", name, value: values[0], form }))
+      ] })
+    }
+  );
+};
+Slider.displayName = "Slider";
+var warnedGrids = /* @__PURE__ */ new Set();
+var SliderTicks = (props) => {
+  const theme = useComponentTheme("SliderTicks");
+  const { bounds, orientation } = useSliderContext("Slider.Ticks");
+  const { rootAttrs, rest } = composeRootAttrs(SliderTicksBase, props, theme);
+  const { ref, ...nativeProps } = rest;
+  const percents = tickPercents(bounds, MAX_TICKS);
+  if (percents === null) {
+    if (isDevelopment()) {
+      const message = `[Slider.Ticks] needs at most ${MAX_TICKS} marks, but min ${bounds.min} / max ${bounds.max} / step ${bounds.step} produces more; the ticks are not rendered.`;
+      if (!warnedGrids.has("ticks-too-dense")) {
+        warnedGrids.add("ticks-too-dense");
+        console.warn(message);
+      }
+    }
+    return null;
+  }
+  const tickAttrs = buildSlotAttrs(SliderTicksBase.getSlotProps("tick"), "tick", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children: percents.map((percent, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...tickAttrs, style: offsetStyle(percent, orientation) }, index)) });
+};
+SliderTicks.displayName = "Slider.Ticks";
+var SliderValue = (props) => {
+  const theme = useComponentTheme("SliderValue");
+  const { values, range, formatValue } = useSliderContext("Slider.Value");
+  const { rootAttrs, rest } = composeRootAttrs(SliderValueBase, props, theme);
+  const { children, ref, ...nativeProps } = rest;
+  const formatted = values.map((value) => formatValueText(value, formatValue));
+  const state = { values, formatted, range };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children: typeof children === "function" ? children(state) : children ?? formatted.join(RANGE_VALUE_SEPARATOR) });
+};
+SliderValue.displayName = "Slider.Value";
+
+// src/components/slider/index.ts
+var Slider2 = Object.assign(Slider, {
+  Track: SliderTrack,
+  Range: SliderRange,
+  Thumb: SliderThumb,
+  Ticks: SliderTicks,
+  Value: SliderValue
+});
+
+// src/components/spinner/base.ts
+var SpinnerBase = createComponentBase({
+  name: "Spinner",
+  slots: ["root", "indicator"],
+  classes: {
+    root: "tk-spinner",
+    indicator: "tk-spinner-indicator"
+  }
+});
+
+// src/components/spinner/defaults.ts
+var DEFAULT_APPEARANCE7 = "rounded";
+var DEFAULT_SIZE13 = "base";
+var DEFAULT_VARIANT8 = "neutral";
+var DEFAULT_ARIA_LABEL2 = "Loading";
+var SPINNER_RADIAL_PARTS = 8;
+var SPINNER_THREE_DOT_PARTS = 3;
+var renderIndicatorContent = (appearance) => {
+  if (appearance === "rounded") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "16.6667" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 36.6667 20" }) })
+    ] });
+  }
+  if (appearance === "loader") {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 31.7851 8.2149" }) });
+  }
+  if (appearance === "dots") {
+    return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-dot" }, index));
+  }
+  if (appearance === "lines") {
+    return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-line" }, index));
+  }
+  if (appearance === "threeDots") {
+    return Array.from({ length: SPINNER_THREE_DOT_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-dot" }, index));
+  }
+  if (appearance === "logo") {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 48 48", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24V4C48 1.79086 46.2091 0 44 0H24ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z",
+        fillRule: "evenodd"
+      }
+    ) });
+  }
+  return null;
+};
+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 }) => ({
+      "data-variant": variant,
+      "data-size": size,
+      "data-type": appearance2
+    })
+  });
+  const { variant: _variant, size: _size, appearance = DEFAULT_APPEARANCE7, ref, ...nativeProps } = rest;
+  const indicatorSlotAttrs = buildSlotAttrs(SpinnerBase.getSlotProps("indicator"), "indicator", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const isDecorative = nativeProps["aria-hidden"] === true || nativeProps["aria-hidden"] === "true";
+  const accessibilityAttrs = isDecorative ? {} : {
+    "role": nativeProps.role ?? "status",
+    "aria-label": nativeProps["aria-label"] ?? (nativeProps["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL2)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...accessibilityAttrs, ...nativeProps, ...rootAttrs, ref, children: /* @__PURE__ */ jsxRuntime.jsx("span", { ...indicatorSlotAttrs, "aria-hidden": "true", children: renderIndicatorContent(appearance) }) });
+};
+Spinner.displayName = "Spinner";
+
+// src/components/stepper/base.ts
+var StepperBase = createComponentBase({
+  name: "Stepper",
+  slots: ["root"],
+  classes: { root: "tk-stepper" }
+});
+var StepperItemBase = createComponentBase({
+  name: "StepperItem",
+  slots: ["root", "trigger", "rail", "indicator", "content"],
+  classes: {
+    root: "tk-stepper-item",
+    trigger: "tk-stepper-trigger",
+    rail: "tk-stepper-rail",
+    indicator: "tk-stepper-indicator",
+    content: "tk-stepper-content"
+  }
+});
+var StepperTitleBase = createComponentBase({
+  name: "StepperTitle",
+  slots: ["root"],
+  classes: { root: "tk-stepper-title" }
+});
+var StepperDescriptionBase = createComponentBase({
+  name: "StepperDescription",
+  slots: ["root"],
+  classes: { root: "tk-stepper-description" }
+});
+
+// src/components/stepper/context.ts
+var [StepperProvider, useStepperContext] = createSafeContext("StepperProvider");
+var [StepperItemIndexProvider, useStepperItemIndex] = createSafeContext("StepperItemIndexProvider");
+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_ACTIVE = 0;
+var DEFAULT_COMPLETED_LABEL = "completed";
+var DEFAULT_ERROR_LABEL = "error";
+var FOCUSABLE_TRIGGER_SELECTOR = '.tk-stepper-trigger:not(:disabled):not([tabindex="-1"])';
+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 }) => ({
+      "data-orientation": orientation2,
+      "data-mode": mode2,
+      "data-size": size,
+      "data-linear": linear2 ? "" : void 0,
+      "data-reverse": reverse ? "" : void 0
+    })
+  });
+  const {
+    active: controlledActive,
+    defaultActive = DEFAULT_ACTIVE,
+    onActiveChange,
+    onStepClick,
+    orientation = DEFAULT_ORIENTATION3,
+    mode = DEFAULT_MODE2,
+    // Consumed only as root data-* hooks above; destructured so the <ol>
+    // doesn't receive unknown DOM attributes.
+    size: _size,
+    linear = false,
+    reverse: _reverse,
+    completedLabel = DEFAULT_COMPLETED_LABEL,
+    errorLabel = DEFAULT_ERROR_LABEL,
+    onKeyDown: nativeOnKeyDown,
+    as,
+    children,
+    ref,
+    ...nativeProps
+  } = rest;
+  const onActiveChangeRef = react.useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+  const stableOnActiveChange = react.useCallback((index) => {
+    onActiveChangeRef.current?.(index);
+  }, []);
+  const onStepClickRef = react.useRef(onStepClick);
+  onStepClickRef.current = onStepClick;
+  const stableOnStepClick = react.useCallback((detail) => {
+    onStepClickRef.current?.(detail);
+  }, []);
+  const [activeValue, setActive] = useControllableState(controlledActive, defaultActive, stableOnActiveChange);
+  const active = activeValue ?? DEFAULT_ACTIVE;
+  const [stepsMeta, setStepsMeta] = react.useState(/* @__PURE__ */ new Map());
+  const { items, renderStepsMeta } = react.useMemo(() => {
+    const meta = /* @__PURE__ */ new Map();
+    let stepIndex = 0;
+    const items2 = react.Children.toArray(children).map((child) => {
+      if (!react.isValidElement(child)) return child;
+      const index = stepIndex++;
+      const { error = false, disabled = false, isClickable = true } = child.props;
+      meta.set(index, { error, disabled, isClickable });
+      return /* @__PURE__ */ jsxRuntime.jsx(StepperItemIndexProvider, { value: { index }, children: child }, child.key ?? index);
+    });
+    return { items: items2, renderStepsMeta: meta };
+  }, [children]);
+  const registerStep = react.useCallback((index, meta) => {
+    setStepsMeta((previous) => new Map(previous).set(index, meta));
+    return () => {
+      setStepsMeta((previous) => {
+        const next = new Map(previous);
+        next.delete(index);
+        return next;
+      });
+    };
+  }, []);
+  const contextValue = react.useMemo(() => {
+    const canSelectStep = (index, selfMeta) => {
+      const target = stepsMeta.get(index) ?? selfMeta ?? renderStepsMeta.get(index);
+      if (!target || target.disabled || !target.isClickable) return false;
+      if (!linear) return true;
+      if (index < active) return true;
+      if (index === active + 1) {
+        const current = stepsMeta.get(active) ?? renderStepsMeta.get(active);
+        return !current?.error && !current?.disabled;
+      }
+      return false;
+    };
+    const getStepStatus = (options) => {
+      const { index } = options;
+      if (index < active) return "completed";
+      if (index === active) return "active";
+      return "inactive";
+    };
+    return {
+      active,
+      mode,
+      completedLabel,
+      errorLabel,
+      getStepStatus,
+      registerStep,
+      canSelectStep,
+      selectStep: (index) => {
+        if (index !== active && canSelectStep(index)) {
+          setActive(index);
+        }
+      },
+      emitStepClick: (detail) => {
+        stableOnStepClick(detail);
+      }
+    };
+  }, [active, mode, completedLabel, errorLabel, linear, stepsMeta, renderStepsMeta, registerStep, setActive, stableOnStepClick]);
+  const { onKeyDown: slotOnKeyDown, ...restRootAttrs } = rootAttrs;
+  const userOnKeyDown = slotOnKeyDown ?? nativeOnKeyDown;
+  const handleKeyDown = (event) => {
+    userOnKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const forwardKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const backwardKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    if (event.key !== forwardKey && event.key !== backwardKey && event.key !== "Home" && event.key !== "End") return;
+    const pressedTrigger = event.target instanceof HTMLElement ? event.target.closest(".tk-stepper-trigger") : null;
+    if (!pressedTrigger || pressedTrigger.closest(".tk-stepper") !== event.currentTarget) return;
+    event.preventDefault();
+    const triggers = Array.from(event.currentTarget.querySelectorAll(FOCUSABLE_TRIGGER_SELECTOR)).filter(
+      (trigger) => trigger.closest(".tk-stepper") === event.currentTarget
+    );
+    const currentIndex = triggers.indexOf(pressedTrigger);
+    if (triggers.length === 0 || currentIndex === -1 && event.key !== "Home" && event.key !== "End") return;
+    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : event.key === forwardKey ? currentIndex + 1 : currentIndex - 1;
+    triggers[nextIndex]?.focus();
+  };
+  const Component = as ?? "ol";
+  return /* @__PURE__ */ jsxRuntime.jsx(StepperProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...restRootAttrs, ref, onKeyDown: handleKeyDown, children: items }) });
+};
+Stepper.displayName = "Stepper";
+var StepperTitle = (props) => {
+  const theme = useComponentTheme("StepperTitle");
+  useStepperContext("Stepper.Title");
+  const { rootAttrs, rest } = composeRootAttrs(StepperTitleBase, props, theme);
+  const { as, children, ref, ...nativeProps } = rest;
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
+};
+StepperTitle.displayName = "Stepper.Title";
+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 StepperItem = (props) => {
+  const theme = useComponentTheme("StepperItem");
+  const { active, mode, completedLabel, errorLabel, getStepStatus, registerStep, canSelectStep, selectStep, emitStepClick } = useStepperContext("Stepper.Item");
+  const { index } = useStepperItemIndex("Stepper.Item");
+  const { rootAttrs, rest } = composeRootAttrs(StepperItemBase, props, theme, {
+    stateAttrs: ({ error: error2 = false, disabled: disabled2 = false, isClickable: isClickable2 = true }) => ({
+      "data-state": getStepStatus({ index }),
+      "data-error": error2 ? "" : void 0,
+      "data-disabled": disabled2 ? "" : void 0,
+      // The active step is excluded: pressing it re-emits `onStepClick` but
+      // can never change the selection, which is what this hook advertises.
+      "data-clickable": index !== active && canSelectStep(index, { error: error2, disabled: disabled2, isClickable: isClickable2 }) ? "" : void 0
+    })
+  });
+  const { error = false, disabled = false, isClickable = true, indicator, as, children, ref, ...nativeProps } = rest;
+  react.useEffect(() => registerStep(index, { error, disabled, isClickable }), [registerStep, index, error, disabled, isClickable]);
+  const status = getStepStatus({ index });
+  const selectable = canSelectStep(index, { error, disabled, isClickable });
+  const isActive = index === active;
+  const ariaDisabled = selectable || isActive ? void 0 : true;
+  const statusLabel = error ? errorLabel : status === "completed" ? completedLabel : void 0;
+  const [descriptionId, setDescriptionId] = react.useState();
+  const registerDescription = react.useCallback((id) => {
+    setDescriptionId(id);
+    return () => {
+      setDescriptionId((current) => current === id ? void 0 : current);
+    };
+  }, []);
+  const itemContextValue = react.useMemo(() => ({ registerDescription }), [registerDescription]);
+  const slotLayering = {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  };
+  const triggerSlotAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("trigger"), "trigger", slotLayering);
+  const { onClick: triggerSlotOnClick, ...triggerAttrs } = triggerSlotAttrs;
+  const railAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("rail"), "rail", slotLayering);
+  const indicatorAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("indicator"), "indicator", slotLayering);
+  const contentAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("content"), "content", slotLayering);
+  const resolvedIndicator = typeof indicator === "function" ? indicator({ status, index }) : indicator;
+  let indicatorContent = null;
+  if (!disabled) {
+    if (resolvedIndicator != null) {
+      indicatorContent = resolvedIndicator;
+    } else if (error) {
+      indicatorContent = /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {});
+    } else if (status === "completed") {
+      indicatorContent = /* @__PURE__ */ jsxRuntime.jsx(check.CheckIconOutlinedRounded, {});
+    }
+  }
+  const handleTriggerClick = (event) => {
+    triggerSlotOnClick?.(event);
+    if (event.defaultPrevented) return;
+    if (!selectable && !(isActive && isClickable)) return;
+    emitStepClick({ index, status });
+    selectStep(index);
+  };
+  const Component = as ?? "li";
+  return /* @__PURE__ */ jsxRuntime.jsx(StepperItemProvider, { value: itemContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...nativeProps, ...rootAttrs, ref, children: [
+    mode !== "compact" && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...railAttrs }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ...triggerAttrs,
+        type: "button",
+        disabled,
+        onClick: handleTriggerClick,
+        "aria-current": isActive ? "step" : void 0,
+        "aria-disabled": ariaDisabled,
+        "aria-describedby": descriptionId,
+        tabIndex: isClickable ? void 0 : -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...indicatorAttrs, children: indicatorContent }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentAttrs, children }),
+          statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: visuallyHidden, children: `, ${statusLabel}` }) : null
+        ]
+      }
+    )
+  ] }) });
+};
+StepperItem.displayName = "Stepper.Item";
+var StepperDescription = (props) => {
+  const theme = useComponentTheme("StepperDescription");
+  const { registerDescription } = useStepperItem("Stepper.Description");
+  const { rootAttrs, rest } = composeRootAttrs(StepperDescriptionBase, props, theme);
+  const { as, children, ref, id: idProp, ...nativeProps } = rest;
+  const autoId = react.useId();
+  const id = idProp ?? autoId;
+  react.useEffect(() => registerDescription(id), [registerDescription, id]);
+  const Component = as ?? "span";
+  return (
+    // Locked after the spread: the id must match the trigger's
+    // `aria-describedby` registration, and `aria-hidden` keeps the description
+    // out of the trigger's accessible NAME — it still reaches assistive
+    // technology as the trigger's description, since `aria-describedby` may
+    // reference hidden elements.
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, id, "aria-hidden": "true", children })
+  );
+};
+StepperDescription.displayName = "Stepper.Description";
+
+// src/components/stepper/index.ts
+var Stepper2 = Object.assign(Stepper, {
+  Item: StepperItem,
+  Title: StepperTitle,
+  Description: StepperDescription
+});
 
 // src/components/switch/base.ts
 var SwitchBase = createComponentBase({
@@ -2540,12 +3818,12 @@ var SwitchBase = createComponentBase({
 var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
 
 // src/components/switch/defaults.ts
-var DEFAULT_SIZE11 = "base";
-var DEFAULT_VARIANT7 = "info";
+var DEFAULT_SIZE15 = "base";
+var DEFAULT_VARIANT9 = "info";
 var Switch = (props) => {
   const theme = useComponentTheme("Switch");
   const { rootAttrs, rest } = composeRootAttrs(SwitchBase, props, theme, {
-    stateAttrs: ({ size = DEFAULT_SIZE11, variant = DEFAULT_VARIANT7 }) => ({
+    stateAttrs: ({ size = DEFAULT_SIZE15, variant = DEFAULT_VARIANT9 }) => ({
       "data-size": size,
       "data-variant": variant
     })
@@ -2556,13 +3834,17 @@ var Switch = (props) => {
     // off the rendered DOM where they would leak as raw HTML attributes.
     size: _size,
     variant: _variant,
-    // `invalid` is forwarded to Spar as `invalid` (same name).
-    invalid = false,
     children,
     ref,
+    // `invalid`, `disabled`, `readOnly` and `required` are intentionally NOT
+    // destructured (so no eager `= false` default is applied) — they flow to
+    // Spar via `...sparProps` untouched. Defaulting `invalid` here would turn
+    // an omitted prop into an explicit `false`, defeating Spar's
+    // `invalid ?? fieldCtx?.invalid` inheritance and silently overriding a
+    // wrapping `<Field invalid>`. Mirrors the Radio/Input/Select pass-through.
     ...sparProps
   } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.Switch, { ...sparProps, invalid, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Switch, { ...sparProps, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
     SwitchProvider,
     {
       value: {
@@ -2668,7 +3950,7 @@ var TableBase = createComponentBase({
 var [TableProvider, useTableContext] = createSafeContext("Table");
 
 // src/components/table/defaults.ts
-var DEFAULT_SIZE12 = "base";
+var DEFAULT_SIZE16 = "base";
 var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 var DEFAULT_COLUMN_WIDTH = 150;
@@ -3038,7 +4320,7 @@ var TableHeaderCell = ({ header }) => {
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...slotAttrs("headerContent"), children: [
         canSort ? /* @__PURE__ */ jsxRuntime.jsxs("button", { ...slotAttrs("sortTrigger"), type: "button", onClick: column.getToggleSortingHandler(), children: [
           content,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronTop.ChevronTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronBottom.ChevronBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsxRuntime.jsx(swap.SwapIconOutlinedRounded, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(arrowTop.ArrowTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(arrowBottom.ArrowBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsxRuntime.jsx(swap.SwapIconOutlinedRounded, {}) })
         ] }) : content,
         canFilter && /* @__PURE__ */ jsxRuntime.jsx(TableColumnFilter, { header })
       ] })
@@ -3092,7 +4374,7 @@ var TablePagination = () => {
           variant: "neutral",
           appearance: "text",
           "aria-label": "First page",
-          startContent: /* @__PURE__ */ jsxRuntime.jsx(arrowLeft.ArrowLeftIconOutlinedRounded, {}),
+          startContent: /* @__PURE__ */ jsxRuntime.jsx(doubleChevronLeft.DoubleChevronLeftIconOutlinedRounded, {}),
           disabled: !table.getCanPreviousPage(),
           onClick: () => table.setPageIndex(0)
         }
@@ -3149,7 +4431,7 @@ var TablePagination = () => {
           variant: "neutral",
           appearance: "text",
           "aria-label": "Last page",
-          startContent: /* @__PURE__ */ jsxRuntime.jsx(arrowRight.ArrowRightIconOutlinedRounded, {}),
+          startContent: /* @__PURE__ */ jsxRuntime.jsx(doubleChevronRight.DoubleChevronRightIconOutlinedRounded, {}),
           disabled: !table.getCanNextPage() || pageCount <= 0,
           onClick: () => table.setPageIndex(pageCount - 1)
         }
@@ -3194,7 +4476,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_SIZE12, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE16, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
       "data-size": size2,
       "data-striped": striped2 ? "" : void 0,
       "data-bordered": bordered2 ? "" : void 0,
@@ -3208,7 +4490,7 @@ var Table = (props) => {
     getRowId,
     manual = false,
     loading = false,
-    size = DEFAULT_SIZE12,
+    size = DEFAULT_SIZE16,
     striped = false,
     bordered = false,
     stickyHeader = false,
@@ -3408,19 +4690,19 @@ var TabsContentBase = createComponentBase({
 var [TabsOwnProvider, useTabsOwnContext] = createSafeContext("Tabs");
 
 // src/components/tabs/defaults.ts
-var DEFAULT_SIZE13 = "base";
-var DEFAULT_VARIANT8 = "primary";
-var DEFAULT_APPEARANCE6 = "basic";
+var DEFAULT_SIZE17 = "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_SIZE13, variant: variant2 = DEFAULT_VARIANT8, appearance: appearance2 = DEFAULT_APPEARANCE6 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE17, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
       "data-size": size2,
       "data-variant": variant2,
       "data-type": appearance2
     })
   });
-  const { size = DEFAULT_SIZE13, variant = DEFAULT_VARIANT8, appearance = DEFAULT_APPEARANCE6, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE17, variant = DEFAULT_VARIANT10, appearance = DEFAULT_APPEARANCE8, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Tabs, { ...sparProps, ...rootAttrs, ref, children }) });
 };
 Tabs.displayName = "Tabs";
@@ -3520,11 +4802,11 @@ var TooltipTrigger = (props) => {
 TooltipTrigger.displayName = "Tooltip.Trigger";
 
 // src/components/tooltip/defaults.ts
-var DEFAULT_VARIANT9 = "white";
+var DEFAULT_VARIANT11 = "white";
 var TooltipContent = (props) => {
   const theme = useComponentTheme("TooltipContent");
   const { rootAttrs, rest } = composeRootAttrs(TooltipContentBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT9 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT11 }) => ({
       "data-variant": variant
     })
   });
@@ -3549,8 +4831,8 @@ TooltipDescription.displayName = "Tooltip.Description";
 var TooltipArrow = (props) => {
   const theme = useComponentTheme("TooltipArrow");
   const { rootAttrs, rest } = composeRootAttrs(TooltipArrowBase, props, theme);
-  const { ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipArrow, { ...sparProps, ...rootAttrs, ref });
+  const { ref, children, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
 };
 TooltipArrow.displayName = "Tooltip.Arrow";
 
@@ -3582,7 +4864,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) => {
@@ -3603,7 +4885,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__ */ jsxRuntime.jsx(spar.Toast.Root, { ...toastProps, as: Component, ref, toast, toaster, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(Alert2, { variant, appearance, role: "presentation", children: [
@@ -3623,7 +4905,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__ */ jsxRuntime.jsx(spar.Toaster, { ...toasterProps, as: Component, ref, toaster, overlap, ...rootAttrs, children: (toast) => (
     // Spar renders each item directly into a mapped array, so the key must
@@ -3634,6 +4916,1081 @@ var Toaster = (props) => {
 };
 Toaster.displayName = "Toaster";
 
+// src/components/skeleton/base.ts
+var SkeletonBase = createComponentBase({
+  name: "Skeleton",
+  slots: ["root", "shimmer"],
+  classes: {
+    root: "tk-skeleton",
+    shimmer: "tk-skeleton-shimmer"
+  }
+});
+
+// src/components/skeleton/defaults.ts
+var DEFAULT_SHAPE = "rectangle";
+var DEFAULT_ANIMATION = "shimmer";
+var toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
+var Skeleton = (props) => {
+  const theme = useComponentTheme("Skeleton");
+  const { rootAttrs, rest } = composeRootAttrs(SkeletonBase, props, theme, {
+    stateAttrs: ({ shape = DEFAULT_SHAPE, animation = DEFAULT_ANIMATION }) => ({
+      "data-type": shape,
+      "data-animation": animation
+    })
+  });
+  const { shape: _shape, animation: _animation, width, height, ref, style, ...nativeProps } = rest;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  const shimmerSlotAttrs = buildSlotAttrs(SkeletonBase.getSlotProps("shimmer"), "shimmer", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const sizeVars = {
+    ...width !== void 0 && { "--tk-skeleton-width": toCssSize(width) },
+    ...height !== void 0 && { "--tk-skeleton-height": toCssSize(height) }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...nativeProps, ...slotAttrs, style: { ...style, ...slotStyle, ...sizeVars }, ref, children: /* @__PURE__ */ jsxRuntime.jsx("span", { ...shimmerSlotAttrs, "aria-hidden": "true" }) });
+};
+Skeleton.displayName = "Skeleton";
+
+// 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 = spar.useOptionalFieldContext();
+  const inputRef = react.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 = react.useRef(files);
+  latestFiles.current = files;
+  const commitFiles = react.useCallback(
+    (next) => {
+      if (!isControlled) latestFiles.current = next;
+      setFiles(next);
+    },
+    [isControlled, setFiles]
+  );
+  const processFiles = react.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 = react.useCallback(() => {
+    if (disabled || readOnly) return;
+    inputRef.current?.click();
+  }, [disabled, readOnly]);
+  const removeFile = react.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 = react.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__ */ jsxRuntime.jsx(UploadProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...nativeProps, ...groupAttrs, ...rootAttrs, ...stateAttrs, ref, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      spar.InputField,
+      {
+        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__ */ jsxRuntime.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] = react.useState(null);
+  const depth = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(arrowDownload.ArrowDownloadIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" }),
+  remove: /* @__PURE__ */ jsxRuntime.jsx(close.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: hasChildren ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showDownload && /* @__PURE__ */ jsxRuntime.jsx(UploadItemAction, { action: "download" }),
+    showRemove && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Spinner, { size: "small", appearance: "rounded", variant: "info", "aria-hidden": "true" });
+    case "completed":
+      return /* @__PURE__ */ jsxRuntime.jsx(checkCircle.CheckCircleIconFilledRounded, { "aria-hidden": "true", focusable: "false" });
+    case "error":
+      return /* @__PURE__ */ jsxRuntime.jsx(closeCircle.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { ...slotAttrs("name"), children: name }),
+    size !== void 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ...slotAttrs("progress"), children: /* @__PURE__ */ jsxRuntime.jsx(Progress2, { value: item.progress, size: "small", "aria-label": formatFileLabel(progressLabel, name) }) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: isRenderableNode(children) ? children : defaultContent });
+};
+UploadItemContent.displayName = "Upload.ItemContent";
+var FileExcelIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#136C34" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#EAB308" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#3B82F6" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#C90019" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#A47D06" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#FF6259" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#3B82F6" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#295BAC" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#79889A" }),
+  /* @__PURE__ */ jsxRuntime.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] = react.useState(null);
+  react.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] = react.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__ */ jsxRuntime.jsx(
+      "img",
+      {
+        alt: "",
+        loading: "lazy",
+        decoding: "async",
+        ...imageAttrs,
+        src,
+        onError: (event) => {
+          markBroken(src);
+          slotOnError?.(event);
+        }
+      }
+    )
+  ) : FileIcon ? /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { ...slotAttrs("icon") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { ...slotAttrs("extension"), "aria-hidden": "true", children: nameExtension(fileName(item)) || "FILE" });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: hasChildren ? children : defaultContent });
+};
+UploadItemPreview.displayName = "Upload.ItemPreview";
+var flattenRowChildren = (children, out = []) => {
+  react.Children.forEach(children, (child) => {
+    if (react.isValidElement(child) && child.type === react.Fragment) 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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(UploadItemProvider, { value: { item }, children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...nativeProps, ...rootAttrs, "data-status": fileStatus(item), ref, children: [
+      previewNodes.length > 0 ? previewNodes : /* @__PURE__ */ jsxRuntime.jsx(UploadItemPreview, {}),
+      contentNodes.length > 0 ? contentNodes : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(UploadItem, { file: item }, item.id));
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
+});
+
 Object.defineProperty(exports, "createToaster", {
   enumerable: true,
   get: function () { return spar.createToaster; }
@@ -3647,14 +6004,20 @@ exports.Card = Card2;
 exports.Checkbox = Checkbox2;
 exports.Chip = Chip;
 exports.Dialog = Dialog2;
+exports.Divider = Divider;
 exports.Drawer = Drawer2;
+exports.Dropdown = Dropdown2;
 exports.Field = Field2;
 exports.Input = Input2;
 exports.Label = Label;
 exports.Popover = Popover2;
+exports.Progress = Progress2;
 exports.Radio = Radio2;
 exports.Select = Select2;
+exports.Skeleton = Skeleton;
+exports.Slider = Slider2;
 exports.Spinner = Spinner;
+exports.Stepper = Stepper2;
 exports.Switch = Switch2;
 exports.Table = Table;
 exports.Tabs = Tabs2;
@@ -3662,6 +6025,7 @@ exports.TakeoffSparProvider = TakeoffSparProvider;
 exports.Toast = Toast;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip2;
+exports.Upload = Upload2;
 exports.getExportRows = getExportRows;
 exports.useComponentTheme = useComponentTheme;
 exports.useTheme = useTheme;