@k3-universe/react-kit 0.0.13 → 0.0.15

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, createElement, useLayoutEffect, useState, useRef, useCallback, useEffect, useMemo, useId as useId$2, createContext, useContext, useReducer, useImperativeHandle, Fragment as Fragment$1, memo as memo$1, use, isValidElement, PureComponent, cloneElement } from "react";
+import React__default, { forwardRef, createElement, memo as memo$1, useLayoutEffect, useState, useRef, useCallback, useEffect, useMemo, useId as useId$2, createContext, useContext, useReducer, useImperativeHandle, Fragment as Fragment$1, use, isValidElement, PureComponent, cloneElement } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 import { useLocation, Link as Link$1 } from "@tanstack/react-router";
@@ -7609,7 +7609,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        outline: "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-border dark:hover:bg-input/50",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline"
@@ -8081,6 +8081,58 @@ function TableCaption({
     }
   );
 }
+function FormBuilderActions({
+  onSubmit,
+  onCancel,
+  onReset,
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  resetLabel = "Reset",
+  isSubmitting = false,
+  isValid: isValid2 = true,
+  showReset = false,
+  customActions,
+  className,
+  submitButtonProps,
+  cancelButtonProps,
+  resetButtonProps
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn$1("flex items-center justify-end space-x-4", className), children: [
+    customActions,
+    showReset && onReset && /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        type: "button",
+        variant: "outline",
+        onClick: onReset,
+        disabled: isSubmitting,
+        ...resetButtonProps,
+        children: resetLabel
+      }
+    ),
+    onCancel && /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        type: "button",
+        variant: "outline",
+        onClick: onCancel,
+        disabled: isSubmitting,
+        ...cancelButtonProps,
+        children: cancelLabel
+      }
+    ),
+    onSubmit && /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        type: "submit",
+        onClick: onSubmit,
+        disabled: isSubmitting || !isValid2,
+        ...submitButtonProps,
+        children: isSubmitting ? "Saving..." : submitLabel
+      }
+    )
+  ] });
+}
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
@@ -13377,35 +13429,122 @@ function refine(fn, _params = {}) {
 function superRefine(fn) {
   return _superRefine(fn);
 }
-var NAME$5 = "Label";
-var Label$3 = React.forwardRef((props2, forwardedRef) => {
+function Card({ className, ...props2 }) {
   return /* @__PURE__ */ jsx(
-    Primitive.label,
+    "div",
     {
-      ...props2,
-      ref: forwardedRef,
-      onMouseDown: (event) => {
-        var _a;
-        const target = event.target;
-        if (target.closest("button, input, select, textarea")) return;
-        (_a = props2.onMouseDown) == null ? void 0 : _a.call(props2, event);
-        if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
-      }
+      "data-slot": "card",
+      className: cn$1(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props2
+    }
+  );
+}
+function CardHeader({ className, ...props2 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn$1(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props2
+    }
+  );
+}
+function CardTitle({ className, ...props2 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn$1("leading-none font-semibold", className),
+      ...props2
+    }
+  );
+}
+function CardDescription({ className, ...props2 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn$1("text-muted-foreground text-sm", className),
+      ...props2
+    }
+  );
+}
+function CardAction({ className, ...props2 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn$1(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props2
+    }
+  );
+}
+function CardContent({ className, ...props2 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn$1("px-6", className),
+      ...props2
+    }
+  );
+}
+function CardFooter({ className, ...props2 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn$1("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props2
+    }
+  );
+}
+var NAME$5 = "Separator";
+var DEFAULT_ORIENTATION = "horizontal";
+var ORIENTATIONS = ["horizontal", "vertical"];
+var Separator$3 = React.forwardRef((props2, forwardedRef) => {
+  const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props2;
+  const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
+  const ariaOrientation = orientation === "vertical" ? orientation : void 0;
+  const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
+  return /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      "data-orientation": orientation,
+      ...semanticProps,
+      ...domProps,
+      ref: forwardedRef
     }
   );
 });
-Label$3.displayName = NAME$5;
-var Root$e = Label$3;
-function Label$2({
+Separator$3.displayName = NAME$5;
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var Root$e = Separator$3;
+function Separator$2({
   className,
+  orientation = "horizontal",
+  decorative = true,
   ...props2
 }) {
   return /* @__PURE__ */ jsx(
     Root$e,
     {
-      "data-slot": "label",
+      "data-slot": "separator",
+      decorative,
+      orientation,
       className: cn$1(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       ...props2
@@ -13422,207 +13561,970 @@ function useCallbackRef$2(callback) {
     return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
   }, []);
 }
-function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
-  const onEscapeKeyDown = useCallbackRef$2(onEscapeKeyDownProp);
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS$1 = { bubbles: false, cancelable: true };
+var GROUP_NAME$5 = "RovingFocusGroup";
+var [Collection$5, useCollection$5, createCollectionScope$5] = createCollection(GROUP_NAME$5);
+var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
+  GROUP_NAME$5,
+  [createCollectionScope$5]
+);
+var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME$5);
+var RovingFocusGroup = React.forwardRef(
+  (props2, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Collection$5.Provider, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection$5.Slot, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props2, ref: forwardedRef }) }) });
+  }
+);
+RovingFocusGroup.displayName = GROUP_NAME$5;
+var RovingFocusGroupImpl = React.forwardRef((props2, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = false,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    preventScrollOnEntryFocus = false,
+    ...groupProps
+  } = props2;
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs$1(forwardedRef, ref);
+  const direction = useDirection(dir);
+  const [currentTabStopId, setCurrentTabStopId] = useControllableState$1({
+    prop: currentTabStopIdProp,
+    defaultProp: defaultCurrentTabStopId ?? null,
+    onChange: onCurrentTabStopIdChange,
+    caller: GROUP_NAME$5
+  });
+  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+  const handleEntryFocus = useCallbackRef$2(onEntryFocus);
+  const getItems = useCollection$5(__scopeRovingFocusGroup);
+  const isClickFocusRef = React.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
   React.useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onEscapeKeyDown(event);
-      }
-    };
-    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
-  }, [onEscapeKeyDown, ownerDocument]);
-}
-var DISMISSABLE_LAYER_NAME = "DismissableLayer";
-var CONTEXT_UPDATE = "dismissableLayer.update";
-var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
-var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
-var originalBodyPointerEvents;
-var DismissableLayerContext = React.createContext({
-  layers: /* @__PURE__ */ new Set(),
-  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
-  branches: /* @__PURE__ */ new Set()
+    const node = ref.current;
+    if (node) {
+      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+    }
+  }, [handleEntryFocus]);
+  return /* @__PURE__ */ jsx(
+    RovingFocusProvider,
+    {
+      scope: __scopeRovingFocusGroup,
+      orientation,
+      dir: direction,
+      loop,
+      currentTabStopId,
+      onItemFocus: React.useCallback(
+        (tabStopId) => setCurrentTabStopId(tabStopId),
+        [setCurrentTabStopId]
+      ),
+      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
+      onFocusableItemAdd: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount + 1),
+        []
+      ),
+      onFocusableItemRemove: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount - 1),
+        []
+      ),
+      children: /* @__PURE__ */ jsx(
+        Primitive.div,
+        {
+          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+          "data-orientation": orientation,
+          ...groupProps,
+          ref: composedRefs,
+          style: { outline: "none", ...props2.style },
+          onMouseDown: composeEventHandlers$1(props2.onMouseDown, () => {
+            isClickFocusRef.current = true;
+          }),
+          onFocus: composeEventHandlers$1(props2.onFocus, (event) => {
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS$1);
+              event.currentTarget.dispatchEvent(entryFocusEvent);
+              if (!entryFocusEvent.defaultPrevented) {
+                const items = getItems().filter((item) => item.focusable);
+                const activeItem = items.find((item) => item.active);
+                const currentItem = items.find((item) => item.id === currentTabStopId);
+                const candidateItems = [activeItem, currentItem, ...items].filter(
+                  Boolean
+                );
+                const candidateNodes = candidateItems.map((item) => item.ref.current);
+                focusFirst$3(candidateNodes, preventScrollOnEntryFocus);
+              }
+            }
+            isClickFocusRef.current = false;
+          }),
+          onBlur: composeEventHandlers$1(props2.onBlur, () => setIsTabbingBackOut(false))
+        }
+      )
+    }
+  );
 });
-var DismissableLayer = React.forwardRef(
+var ITEM_NAME$8 = "RovingFocusGroupItem";
+var RovingFocusGroupItem = React.forwardRef(
   (props2, forwardedRef) => {
     const {
-      disableOutsidePointerEvents = false,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss,
-      ...layerProps
+      __scopeRovingFocusGroup,
+      focusable = true,
+      active = false,
+      tabStopId,
+      children,
+      ...itemProps
     } = props2;
-    const context = React.useContext(DismissableLayerContext);
-    const [node, setNode] = React.useState(null);
-    const ownerDocument = (node == null ? void 0 : node.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document);
-    const [, force] = React.useState({});
-    const composedRefs = useComposedRefs$1(forwardedRef, (node2) => setNode(node2));
-    const layers = Array.from(context.layers);
-    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
-    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
-    const index2 = node ? layers.indexOf(node) : -1;
-    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
-    const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const pointerDownOutside = usePointerDownOutside((event) => {
-      const target = event.target;
-      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
-      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
-      onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
-      onInteractOutside == null ? void 0 : onInteractOutside(event);
-      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
-    }, ownerDocument);
-    const focusOutside = useFocusOutside((event) => {
-      const target = event.target;
-      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
-      if (isFocusInBranch) return;
-      onFocusOutside == null ? void 0 : onFocusOutside(event);
-      onInteractOutside == null ? void 0 : onInteractOutside(event);
-      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
-    }, ownerDocument);
-    useEscapeKeydown((event) => {
-      const isHighestLayer = index2 === context.layers.size - 1;
-      if (!isHighestLayer) return;
-      onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
-      if (!event.defaultPrevented && onDismiss) {
-        event.preventDefault();
-        onDismiss();
-      }
-    }, ownerDocument);
+    const autoId = useId$1();
+    const id = tabStopId || autoId;
+    const context = useRovingFocusContext(ITEM_NAME$8, __scopeRovingFocusGroup);
+    const isCurrentTabStop = context.currentTabStopId === id;
+    const getItems = useCollection$5(__scopeRovingFocusGroup);
+    const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
     React.useEffect(() => {
-      if (!node) return;
-      if (disableOutsidePointerEvents) {
-        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-          ownerDocument.body.style.pointerEvents = "none";
-        }
-        context.layersWithOutsidePointerEventsDisabled.add(node);
+      if (focusable) {
+        onFocusableItemAdd();
+        return () => onFocusableItemRemove();
       }
-      context.layers.add(node);
-      dispatchUpdate();
-      return () => {
-        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
-          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
-        }
-      };
-    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-    React.useEffect(() => {
-      return () => {
-        if (!node) return;
-        context.layers.delete(node);
-        context.layersWithOutsidePointerEventsDisabled.delete(node);
-        dispatchUpdate();
-      };
-    }, [node, context]);
-    React.useEffect(() => {
-      const handleUpdate = () => force({});
-      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
-      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
-    }, []);
+    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
     return /* @__PURE__ */ jsx(
-      Primitive.div,
+      Collection$5.ItemSlot,
       {
-        ...layerProps,
-        ref: composedRefs,
-        style: {
-          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
-          ...props2.style
-        },
-        onFocusCapture: composeEventHandlers$1(props2.onFocusCapture, focusOutside.onFocusCapture),
-        onBlurCapture: composeEventHandlers$1(props2.onBlurCapture, focusOutside.onBlurCapture),
-        onPointerDownCapture: composeEventHandlers$1(
-          props2.onPointerDownCapture,
-          pointerDownOutside.onPointerDownCapture
+        scope: __scopeRovingFocusGroup,
+        id,
+        focusable,
+        active,
+        children: /* @__PURE__ */ jsx(
+          Primitive.span,
+          {
+            tabIndex: isCurrentTabStop ? 0 : -1,
+            "data-orientation": context.orientation,
+            ...itemProps,
+            ref: forwardedRef,
+            onMouseDown: composeEventHandlers$1(props2.onMouseDown, (event) => {
+              if (!focusable) event.preventDefault();
+              else context.onItemFocus(id);
+            }),
+            onFocus: composeEventHandlers$1(props2.onFocus, () => context.onItemFocus(id)),
+            onKeyDown: composeEventHandlers$1(props2.onKeyDown, (event) => {
+              if (event.key === "Tab" && event.shiftKey) {
+                context.onItemShiftTab();
+                return;
+              }
+              if (event.target !== event.currentTarget) return;
+              const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+              if (focusIntent !== void 0) {
+                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+                event.preventDefault();
+                const items = getItems().filter((item) => item.focusable);
+                let candidateNodes = items.map((item) => item.ref.current);
+                if (focusIntent === "last") candidateNodes.reverse();
+                else if (focusIntent === "prev" || focusIntent === "next") {
+                  if (focusIntent === "prev") candidateNodes.reverse();
+                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                  candidateNodes = context.loop ? wrapArray$3(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+                }
+                setTimeout(() => focusFirst$3(candidateNodes));
+              }
+            }),
+            children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children
+          }
         )
       }
     );
   }
 );
-DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
-var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React.forwardRef((props2, forwardedRef) => {
-  const context = React.useContext(DismissableLayerContext);
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs$1(forwardedRef, ref);
-  React.useEffect(() => {
-    const node = ref.current;
-    if (node) {
-      context.branches.add(node);
-      return () => {
-        context.branches.delete(node);
-      };
-    }
-  }, [context.branches]);
-  return /* @__PURE__ */ jsx(Primitive.div, { ...props2, ref: composedRefs });
-});
-DismissableLayerBranch.displayName = BRANCH_NAME;
-function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
-  const handlePointerDownOutside = useCallbackRef$2(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React.useRef(false);
-  const handleClickRef = React.useRef(() => {
-  });
-  React.useEffect(() => {
-    const handlePointerDown2 = (event) => {
-      if (event.target && !isPointerInsideReactTreeRef.current) {
-        let handleAndDispatchPointerDownOutsideEvent2 = function() {
-          handleAndDispatchCustomEvent(
-            POINTER_DOWN_OUTSIDE,
-            handlePointerDownOutside,
-            eventDetail,
-            { discrete: true }
-          );
-        };
-        const eventDetail = { originalEvent: event };
-        if (event.pointerType === "touch") {
-          ownerDocument.removeEventListener("click", handleClickRef.current);
-          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
-          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
-        } else {
-          handleAndDispatchPointerDownOutsideEvent2();
-        }
-      } else {
-        ownerDocument.removeEventListener("click", handleClickRef.current);
-      }
-      isPointerInsideReactTreeRef.current = false;
-    };
-    const timerId = window.setTimeout(() => {
-      ownerDocument.addEventListener("pointerdown", handlePointerDown2);
-    }, 0);
-    return () => {
-      window.clearTimeout(timerId);
-      ownerDocument.removeEventListener("pointerdown", handlePointerDown2);
-      ownerDocument.removeEventListener("click", handleClickRef.current);
-    };
-  }, [ownerDocument, handlePointerDownOutside]);
-  return {
-    // ensures we check React component tree (not just DOM tree)
-    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
-  };
+RovingFocusGroupItem.displayName = ITEM_NAME$8;
+var MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
 }
-function useFocusOutside(onFocusOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
-  const handleFocusOutside = useCallbackRef$2(onFocusOutside);
-  const isFocusInsideReactTreeRef = React.useRef(false);
-  React.useEffect(() => {
-    const handleFocus = (event) => {
-      if (event.target && !isFocusInsideReactTreeRef.current) {
-        const eventDetail = { originalEvent: event };
-        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
-          discrete: false
-        });
-      }
-    };
-    ownerDocument.addEventListener("focusin", handleFocus);
-    return () => ownerDocument.removeEventListener("focusin", handleFocus);
-  }, [ownerDocument, handleFocusOutside]);
-  return {
-    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
-    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
-  };
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
 }
-function dispatchUpdate() {
-  const event = new CustomEvent(CONTEXT_UPDATE);
+function focusFirst$3(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray$3(array2, startIndex) {
+  return array2.map((_2, index2) => array2[(startIndex + index2) % array2.length]);
+}
+var Root$d = RovingFocusGroup;
+var Item$2 = RovingFocusGroupItem;
+var TABS_NAME = "Tabs";
+var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
+  createRovingFocusGroupScope
+]);
+var useRovingFocusGroupScope$4 = createRovingFocusGroupScope();
+var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
+var Tabs$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const {
+      __scopeTabs,
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      orientation = "horizontal",
+      dir,
+      activationMode = "automatic",
+      ...tabsProps
+    } = props2;
+    const direction = useDirection(dir);
+    const [value, setValue] = useControllableState$1({
+      prop: valueProp,
+      onChange: onValueChange,
+      defaultProp: defaultValue ?? "",
+      caller: TABS_NAME
+    });
+    return /* @__PURE__ */ jsx(
+      TabsProvider,
+      {
+        scope: __scopeTabs,
+        baseId: useId$1(),
+        value,
+        onValueChange: setValue,
+        orientation,
+        dir: direction,
+        activationMode,
+        children: /* @__PURE__ */ jsx(
+          Primitive.div,
+          {
+            dir: direction,
+            "data-orientation": orientation,
+            ...tabsProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+Tabs$1.displayName = TABS_NAME;
+var TAB_LIST_NAME = "TabsList";
+var TabsList$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeTabs, loop = true, ...listProps } = props2;
+    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope$4(__scopeTabs);
+    return /* @__PURE__ */ jsx(
+      Root$d,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        orientation: context.orientation,
+        dir: context.dir,
+        loop,
+        children: /* @__PURE__ */ jsx(
+          Primitive.div,
+          {
+            role: "tablist",
+            "aria-orientation": context.orientation,
+            ...listProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+TabsList$1.displayName = TAB_LIST_NAME;
+var TRIGGER_NAME$a = "TabsTrigger";
+var TabsTrigger$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeTabs, value, disabled = false, ...triggerProps } = props2;
+    const context = useTabsContext(TRIGGER_NAME$a, __scopeTabs);
+    const rovingFocusGroupScope = useRovingFocusGroupScope$4(__scopeTabs);
+    const triggerId = makeTriggerId$1(context.baseId, value);
+    const contentId = makeContentId$1(context.baseId, value);
+    const isSelected = value === context.value;
+    return /* @__PURE__ */ jsx(
+      Item$2,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !disabled,
+        active: isSelected,
+        children: /* @__PURE__ */ jsx(
+          Primitive.button,
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isSelected,
+            "aria-controls": contentId,
+            "data-state": isSelected ? "active" : "inactive",
+            "data-disabled": disabled ? "" : void 0,
+            disabled,
+            id: triggerId,
+            ...triggerProps,
+            ref: forwardedRef,
+            onMouseDown: composeEventHandlers$1(props2.onMouseDown, (event) => {
+              if (!disabled && event.button === 0 && event.ctrlKey === false) {
+                context.onValueChange(value);
+              } else {
+                event.preventDefault();
+              }
+            }),
+            onKeyDown: composeEventHandlers$1(props2.onKeyDown, (event) => {
+              if ([" ", "Enter"].includes(event.key)) context.onValueChange(value);
+            }),
+            onFocus: composeEventHandlers$1(props2.onFocus, () => {
+              const isAutomaticActivation = context.activationMode !== "manual";
+              if (!isSelected && !disabled && isAutomaticActivation) {
+                context.onValueChange(value);
+              }
+            })
+          }
+        )
+      }
+    );
+  }
+);
+TabsTrigger$1.displayName = TRIGGER_NAME$a;
+var CONTENT_NAME$c = "TabsContent";
+var TabsContent$1 = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeTabs, value, forceMount, children, ...contentProps } = props2;
+    const context = useTabsContext(CONTENT_NAME$c, __scopeTabs);
+    const triggerId = makeTriggerId$1(context.baseId, value);
+    const contentId = makeContentId$1(context.baseId, value);
+    const isSelected = value === context.value;
+    const isMountAnimationPreventedRef = React.useRef(isSelected);
+    React.useEffect(() => {
+      const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+      return () => cancelAnimationFrame(rAF);
+    }, []);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        "data-state": isSelected ? "active" : "inactive",
+        "data-orientation": context.orientation,
+        role: "tabpanel",
+        "aria-labelledby": triggerId,
+        hidden: !present,
+        id: contentId,
+        tabIndex: 0,
+        ...contentProps,
+        ref: forwardedRef,
+        style: {
+          ...props2.style,
+          animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
+        },
+        children: present && children
+      }
+    ) });
+  }
+);
+TabsContent$1.displayName = CONTENT_NAME$c;
+function makeTriggerId$1(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId$1(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+var Root2$a = Tabs$1;
+var List$1 = TabsList$1;
+var Trigger$9 = TabsTrigger$1;
+var Content$4 = TabsContent$1;
+function Tabs({
+  className,
+  ...props2
+}) {
+  return /* @__PURE__ */ jsx(
+    Root2$a,
+    {
+      "data-slot": "tabs",
+      className: cn$1("flex flex-col gap-2", className),
+      ...props2
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props2
+}) {
+  return /* @__PURE__ */ jsx(
+    List$1,
+    {
+      "data-slot": "tabs-list",
+      className: cn$1(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      ),
+      ...props2
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props2
+}) {
+  return /* @__PURE__ */ jsx(
+    Trigger$9,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn$1(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props2
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props2
+}) {
+  return /* @__PURE__ */ jsx(
+    Content$4,
+    {
+      "data-slot": "tabs-content",
+      className: cn$1("flex-1 outline-none", className),
+      ...props2
+    }
+  );
+}
+const GRID_COLS = {
+  base: {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    11: "grid-cols-11",
+    12: "grid-cols-12"
+  },
+  sm: {
+    1: "sm:grid-cols-1",
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-3",
+    4: "sm:grid-cols-4",
+    5: "sm:grid-cols-5",
+    6: "sm:grid-cols-6",
+    7: "sm:grid-cols-7",
+    8: "sm:grid-cols-8",
+    9: "sm:grid-cols-9",
+    10: "sm:grid-cols-10",
+    11: "sm:grid-cols-11",
+    12: "sm:grid-cols-12"
+  },
+  md: {
+    1: "md:grid-cols-1",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4",
+    5: "md:grid-cols-5",
+    6: "md:grid-cols-6",
+    7: "md:grid-cols-7",
+    8: "md:grid-cols-8",
+    9: "md:grid-cols-9",
+    10: "md:grid-cols-10",
+    11: "md:grid-cols-11",
+    12: "md:grid-cols-12"
+  },
+  lg: {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+    5: "lg:grid-cols-5",
+    6: "lg:grid-cols-6",
+    7: "lg:grid-cols-7",
+    8: "lg:grid-cols-8",
+    9: "lg:grid-cols-9",
+    10: "lg:grid-cols-10",
+    11: "lg:grid-cols-11",
+    12: "lg:grid-cols-12"
+  },
+  xl: {
+    1: "xl:grid-cols-1",
+    2: "xl:grid-cols-2",
+    3: "xl:grid-cols-3",
+    4: "xl:grid-cols-4",
+    5: "xl:grid-cols-5",
+    6: "xl:grid-cols-6",
+    7: "xl:grid-cols-7",
+    8: "xl:grid-cols-8",
+    9: "xl:grid-cols-9",
+    10: "xl:grid-cols-10",
+    11: "xl:grid-cols-11",
+    12: "xl:grid-cols-12"
+  }
+};
+const COL_SPAN = {
+  base: {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+    5: "col-span-5",
+    6: "col-span-6",
+    7: "col-span-7",
+    8: "col-span-8",
+    9: "col-span-9",
+    10: "col-span-10",
+    11: "col-span-11",
+    12: "col-span-12"
+  },
+  sm: {
+    1: "sm:col-span-1",
+    2: "sm:col-span-2",
+    3: "sm:col-span-3",
+    4: "sm:col-span-4",
+    5: "sm:col-span-5",
+    6: "sm:col-span-6",
+    7: "sm:col-span-7",
+    8: "sm:col-span-8",
+    9: "sm:col-span-9",
+    10: "sm:col-span-10",
+    11: "sm:col-span-11",
+    12: "sm:col-span-12"
+  },
+  md: {
+    1: "md:col-span-1",
+    2: "md:col-span-2",
+    3: "md:col-span-3",
+    4: "md:col-span-4",
+    5: "md:col-span-5",
+    6: "md:col-span-6",
+    7: "md:col-span-7",
+    8: "md:col-span-8",
+    9: "md:col-span-9",
+    10: "md:col-span-10",
+    11: "md:col-span-11",
+    12: "md:col-span-12"
+  },
+  lg: {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+    5: "lg:col-span-5",
+    6: "lg:col-span-6",
+    7: "lg:col-span-7",
+    8: "lg:col-span-8",
+    9: "lg:col-span-9",
+    10: "lg:col-span-10",
+    11: "lg:col-span-11",
+    12: "lg:col-span-12"
+  },
+  xl: {
+    1: "xl:col-span-1",
+    2: "xl:col-span-2",
+    3: "xl:col-span-3",
+    4: "xl:col-span-4",
+    5: "xl:col-span-5",
+    6: "xl:col-span-6",
+    7: "xl:col-span-7",
+    8: "xl:col-span-8",
+    9: "xl:col-span-9",
+    10: "xl:col-span-10",
+    11: "xl:col-span-11",
+    12: "xl:col-span-12"
+  }
+};
+function gridClasses(options) {
+  const cols = (options == null ? void 0 : options.cols) ?? 1;
+  const sm = options == null ? void 0 : options.smCols;
+  const md = options == null ? void 0 : options.mdCols;
+  const lg = options == null ? void 0 : options.lgCols;
+  const xl = options == null ? void 0 : options.xlCols;
+  const gap = (options == null ? void 0 : options.gap) ?? "gap-4";
+  return cn$1(
+    "grid",
+    GRID_COLS.base[cols],
+    sm ? GRID_COLS.sm[sm] : void 0,
+    md ? GRID_COLS.md[md] : void 0,
+    lg ? GRID_COLS.lg[lg] : void 0,
+    xl ? GRID_COLS.xl[xl] : void 0,
+    gap
+  );
+}
+function flexClasses(options) {
+  const direction = (options == null ? void 0 : options.direction) ?? "col";
+  const wrap = (options == null ? void 0 : options.wrap) ? "flex-wrap" : "flex-nowrap";
+  const gap = (options == null ? void 0 : options.gap) ?? "gap-4";
+  const align = (options == null ? void 0 : options.align) ?? "stretch";
+  const justify = (options == null ? void 0 : options.justify) ?? "start";
+  const alignClass = align === "start" ? "items-start" : align === "center" ? "items-center" : align === "end" ? "items-end" : "items-stretch";
+  const justifyClass = justify === "start" ? "justify-start" : justify === "center" ? "justify-center" : justify === "between" ? "justify-between" : "justify-end";
+  return cn$1("flex", `flex-${direction}`, wrap, gap, alignClass, justifyClass);
+}
+function leafSpanClasses(leaf) {
+  if (!leaf.span) return void 0;
+  const parts = [];
+  if (leaf.span.base) parts.push(COL_SPAN.base[leaf.span.base]);
+  if (leaf.span.sm) parts.push(COL_SPAN.sm[leaf.span.sm]);
+  if (leaf.span.md) parts.push(COL_SPAN.md[leaf.span.md]);
+  if (leaf.span.lg) parts.push(COL_SPAN.lg[leaf.span.lg]);
+  if (leaf.span.xl) parts.push(COL_SPAN.xl[leaf.span.xl]);
+  return parts.join(" ");
+}
+function isLeaf(child) {
+  return child.content !== void 0;
+}
+function shallowEqualSpan(a2, b2) {
+  if (a2 === b2) return true;
+  if (!a2 || !b2) return !a2 && !b2;
+  return a2.base === b2.base && a2.sm === b2.sm && a2.md === b2.md && a2.lg === b2.lg && a2.xl === b2.xl;
+}
+function shallowEqualLeaf(a2, b2) {
+  const renderKeyEqual = (a2.renderKey ?? null) === (b2.renderKey ?? null);
+  return a2.key === b2.key && a2.hidden === b2.hidden && a2.className === b2.className && a2.labelLayout === b2.labelLayout && a2.labelClassName === b2.labelClassName && a2.valueClassName === b2.valueClassName && a2.inlineLabelWidthClass === b2.inlineLabelWidthClass && shallowEqualSpan(a2.span, b2.span) && renderKeyEqual;
+}
+const SectionLeafRenderer = memo$1(
+  function SectionLeafRenderer2({ leaf, renderLeaf }) {
+    if (leaf.hidden) return null;
+    const span = leafSpanClasses(leaf);
+    if (renderLeaf) {
+      return /* @__PURE__ */ jsx("div", { className: cn$1(span, leaf.className), children: renderLeaf(leaf) });
+    }
+    const hasLabel = leaf.label !== void 0 && leaf.label !== null && leaf.label !== "";
+    const layout = leaf.labelLayout ?? "stacked";
+    const labelBaseCls = "text-xs text-muted-foreground";
+    const valueBaseCls = "text-sm leading-6";
+    if (!hasLabel) {
+      return /* @__PURE__ */ jsx("div", { className: cn$1(span, leaf.className, leaf.valueClassName), children: leaf.content });
+    }
+    if (layout === "inline") {
+      const labelWidth = leaf.inlineLabelWidthClass ?? "w-32";
+      return /* @__PURE__ */ jsxs("div", { className: cn$1(span, leaf.className, "flex items-start gap-4"), children: [
+        /* @__PURE__ */ jsx("div", { className: cn$1(labelWidth, labelBaseCls, leaf.labelClassName), children: leaf.label }),
+        /* @__PURE__ */ jsxs("div", { className: cn$1("flex-1", valueBaseCls, leaf.valueClassName), children: [
+          leaf.content,
+          leaf.description ? /* @__PURE__ */ jsx("div", { className: cn$1("mt-1", labelBaseCls), children: leaf.description }) : null
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn$1(span, leaf.className, "flex flex-col"), children: [
+      /* @__PURE__ */ jsx("div", { className: cn$1(labelBaseCls, leaf.labelClassName), children: leaf.label }),
+      /* @__PURE__ */ jsx("div", { className: cn$1(valueBaseCls, leaf.valueClassName), children: leaf.content }),
+      leaf.description ? /* @__PURE__ */ jsx("div", { className: cn$1("mt-1", labelBaseCls), children: leaf.description }) : null
+    ] });
+  },
+  (prev, next) => shallowEqualLeaf(prev.leaf, next.leaf) && prev.renderLeaf === next.renderLeaf
+);
+function SectionNodeRenderer({ node, renderLeaf }) {
+  var _a;
+  if (node.hidden) return null;
+  const layout = node.layout ?? "grid";
+  const containerClass = layout === "grid" ? gridClasses(node.grid) : layout === "flex" ? flexClasses(node.flex) : "";
+  const SectionContainer = ({ children }) => {
+    const title = node.title;
+    const description = node.subtitle;
+    const variant = node.variant ?? "card";
+    const className = node.className;
+    const headerClassName = node.headerClassName;
+    const contentClassName = node.contentClassName;
+    const renderHeader = () => {
+      if (!title && !description) return null;
+      return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-1", headerClassName), children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium leading-none", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+      ] });
+    };
+    const renderContent2 = () => /* @__PURE__ */ jsx("div", { className: cn$1("space-y-4", contentClassName), children });
+    switch (variant) {
+      case "card":
+        return /* @__PURE__ */ jsxs(Card, { className, children: [
+          (title || description) && /* @__PURE__ */ jsxs(CardHeader, { children: [
+            title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
+            description && /* @__PURE__ */ jsx(CardDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: renderContent2() })
+        ] });
+      case "separator":
+        return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-6", className), children: [
+          (title || description) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderHeader(),
+            /* @__PURE__ */ jsx(Separator$2, {})
+          ] }),
+          renderContent2()
+        ] });
+      default:
+        return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-6", className), children: [
+          renderHeader(),
+          renderContent2()
+        ] });
+    }
+  };
+  if (layout === "tabs" && node.tabs && node.tabs.length > 0) {
+    const defaultTabId = node.defaultTabId ?? ((_a = node.tabs[0]) == null ? void 0 : _a.id);
+    return /* @__PURE__ */ jsx(SectionContainer, { children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabId, className: cn$1("space-y-2"), children: [
+      /* @__PURE__ */ jsx(TabsList, { className: cn$1(node.tabsListClassName), children: node.tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.id, className: cn$1(tab.className), children: tab.label }, tab.id)) }),
+      node.tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.id, className: cn$1(node.tabsContentClassName, tab.contentClassName), children: /* @__PURE__ */ jsx(SectionNodeRenderer, { node: tab.node, renderLeaf }) }, tab.id))
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(SectionContainer, { children: /* @__PURE__ */ jsx("div", { className: containerClass, children: (node.children ?? []).map((child) => {
+    if (isLeaf(child)) {
+      return /* @__PURE__ */ jsx(SectionLeafRenderer, { leaf: child, renderLeaf }, child.key);
+    }
+    if (child.hidden) return null;
+    return /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsx(SectionNodeRenderer, { node: child, renderLeaf }) }, child.id);
+  }) }) });
+}
+function SectionBuilder({ sections, className, renderLeaf }) {
+  return /* @__PURE__ */ jsx("div", { className: cn$1("space-y-6", className), children: sections.map((section) => /* @__PURE__ */ jsx(SectionNodeRenderer, { node: section, renderLeaf }, section.id)) });
+}
+var NAME$4 = "Label";
+var Label$3 = React.forwardRef((props2, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Primitive.label,
+    {
+      ...props2,
+      ref: forwardedRef,
+      onMouseDown: (event) => {
+        var _a;
+        const target = event.target;
+        if (target.closest("button, input, select, textarea")) return;
+        (_a = props2.onMouseDown) == null ? void 0 : _a.call(props2, event);
+        if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+      }
+    }
+  );
+});
+Label$3.displayName = NAME$4;
+var Root$c = Label$3;
+function Label$2({
+  className,
+  ...props2
+}) {
+  return /* @__PURE__ */ jsx(
+    Root$c,
+    {
+      "data-slot": "label",
+      className: cn$1(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props2
+    }
+  );
+}
+function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const onEscapeKeyDown = useCallbackRef$2(onEscapeKeyDownProp);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onEscapeKeyDown(event);
+      }
+    };
+    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [onEscapeKeyDown, ownerDocument]);
+}
+var DISMISSABLE_LAYER_NAME = "DismissableLayer";
+var CONTEXT_UPDATE = "dismissableLayer.update";
+var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+var originalBodyPointerEvents;
+var DismissableLayerContext = React.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+var DismissableLayer = React.forwardRef(
+  (props2, forwardedRef) => {
+    const {
+      disableOutsidePointerEvents = false,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      ...layerProps
+    } = props2;
+    const context = React.useContext(DismissableLayerContext);
+    const [node, setNode] = React.useState(null);
+    const ownerDocument = (node == null ? void 0 : node.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document);
+    const [, force] = React.useState({});
+    const composedRefs = useComposedRefs$1(forwardedRef, (node2) => setNode(node2));
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+    const index2 = node ? layers.indexOf(node) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = usePointerDownOutside((event) => {
+      const target = event.target;
+      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+      onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+      onInteractOutside == null ? void 0 : onInteractOutside(event);
+      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
+    }, ownerDocument);
+    const focusOutside = useFocusOutside((event) => {
+      const target = event.target;
+      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (isFocusInBranch) return;
+      onFocusOutside == null ? void 0 : onFocusOutside(event);
+      onInteractOutside == null ? void 0 : onInteractOutside(event);
+      if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
+    }, ownerDocument);
+    useEscapeKeydown((event) => {
+      const isHighestLayer = index2 === context.layers.size - 1;
+      if (!isHighestLayer) return;
+      onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
+      if (!event.defaultPrevented && onDismiss) {
+        event.preventDefault();
+        onDismiss();
+      }
+    }, ownerDocument);
+    React.useEffect(() => {
+      if (!node) return;
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          ownerDocument.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
+      }
+      context.layers.add(node);
+      dispatchUpdate();
+      return () => {
+        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+      };
+    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
+    React.useEffect(() => {
+      return () => {
+        if (!node) return;
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    }, [node, context]);
+    React.useEffect(() => {
+      const handleUpdate = () => force({});
+      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ...layerProps,
+        ref: composedRefs,
+        style: {
+          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+          ...props2.style
+        },
+        onFocusCapture: composeEventHandlers$1(props2.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers$1(props2.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers$1(
+          props2.onPointerDownCapture,
+          pointerDownOutside.onPointerDownCapture
+        )
+      }
+    );
+  }
+);
+DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
+var BRANCH_NAME = "DismissableLayerBranch";
+var DismissableLayerBranch = React.forwardRef((props2, forwardedRef) => {
+  const context = React.useContext(DismissableLayerContext);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs$1(forwardedRef, ref);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return /* @__PURE__ */ jsx(Primitive.div, { ...props2, ref: composedRefs });
+});
+DismissableLayerBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const handlePointerDownOutside = useCallbackRef$2(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {
+  });
+  React.useEffect(() => {
+    const handlePointerDown2 = (event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent2 = function() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            handlePointerDownOutside,
+            eventDetail,
+            { discrete: true }
+          );
+        };
+        const eventDetail = { originalEvent: event };
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
+          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent2();
+        }
+      } else {
+        ownerDocument.removeEventListener("click", handleClickRef.current);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown2);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown2);
+      ownerDocument.removeEventListener("click", handleClickRef.current);
+    };
+  }, [ownerDocument, handlePointerDownOutside]);
+  return {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+function useFocusOutside(onFocusOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
+  const handleFocusOutside = useCallbackRef$2(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
+    const handleFocus = (event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    };
+    ownerDocument.addEventListener("focusin", handleFocus);
+    return () => ownerDocument.removeEventListener("focusin", handleFocus);
+  }, [ownerDocument, handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
   document.dispatchEvent(event);
 }
 function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
@@ -13662,7 +14564,7 @@ function createFocusGuard() {
 }
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
-var EVENT_OPTIONS$1 = { bubbles: false, cancelable: true };
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
 var FocusScope = React.forwardRef((props2, forwardedRef) => {
   const {
@@ -13727,11 +14629,11 @@ var FocusScope = React.forwardRef((props2, forwardedRef) => {
       const previouslyFocusedElement = document.activeElement;
       const hasFocusedCandidate = container.contains(previouslyFocusedElement);
       if (!hasFocusedCandidate) {
-        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS$1);
+        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
         container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
         container.dispatchEvent(mountEvent);
         if (!mountEvent.defaultPrevented) {
-          focusFirst$3(removeLinks(getTabbableCandidates$1(container)), { select: true });
+          focusFirst$2(removeLinks(getTabbableCandidates$1(container)), { select: true });
           if (document.activeElement === previouslyFocusedElement) {
             focus(container);
           }
@@ -13740,7 +14642,7 @@ var FocusScope = React.forwardRef((props2, forwardedRef) => {
       return () => {
         container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
         setTimeout(() => {
-          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS$1);
+          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
           container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
           container.dispatchEvent(unmountEvent);
           if (!unmountEvent.defaultPrevented) {
@@ -13780,7 +14682,7 @@ var FocusScope = React.forwardRef((props2, forwardedRef) => {
   return /* @__PURE__ */ jsx(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
-function focusFirst$3(candidates, { select = false } = {}) {
+function focusFirst$2(candidates, { select = false } = {}) {
   const previouslyFocusedElement = document.activeElement;
   for (const candidate of candidates) {
     focus(candidate, { select });
@@ -15729,7 +16631,7 @@ const arrow = (options, deps) => ({
   ...arrow$1(options),
   options: [options, deps]
 });
-var NAME$4 = "Arrow";
+var NAME$3 = "Arrow";
 var Arrow$1 = React.forwardRef((props2, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props2;
   return /* @__PURE__ */ jsx(
@@ -15745,8 +16647,8 @@ var Arrow$1 = React.forwardRef((props2, forwardedRef) => {
     }
   );
 });
-Arrow$1.displayName = NAME$4;
-var Root$d = Arrow$1;
+Arrow$1.displayName = NAME$3;
+var Root$b = Arrow$1;
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
@@ -15775,8 +16677,8 @@ var PopperAnchor = React.forwardRef(
   }
 );
 PopperAnchor.displayName = ANCHOR_NAME$2;
-var CONTENT_NAME$c = "PopperContent";
-var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$c);
+var CONTENT_NAME$b = "PopperContent";
+var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$b);
 var PopperContent = React.forwardRef(
   (props2, forwardedRef) => {
     var _a, _b, _c, _d, _e2, _f;
@@ -15796,7 +16698,7 @@ var PopperContent = React.forwardRef(
       onPlaced,
       ...contentProps
     } = props2;
-    const context = usePopperContext(CONTENT_NAME$c, __scopePopper);
+    const context = usePopperContext(CONTENT_NAME$b, __scopePopper);
     const [content, setContent] = React.useState(null);
     const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContent(node));
     const [arrow$12, setArrow] = React.useState(null);
@@ -15919,7 +16821,7 @@ var PopperContent = React.forwardRef(
     );
   }
 );
-PopperContent.displayName = CONTENT_NAME$c;
+PopperContent.displayName = CONTENT_NAME$b;
 var ARROW_NAME$8 = "PopperArrow";
 var OPPOSITE_SIDE = {
   top: "bottom",
@@ -15959,7 +16861,7 @@ var PopperArrow = React.forwardRef(function PopperArrow2(props2, forwardedRef) {
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsx(
-          Root$d,
+          Root$b,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -16014,9 +16916,9 @@ function getSideAndAlignFromPlacement(placement) {
   const [side, align = "center"] = placement.split("-");
   return [side, align];
 }
-var Root2$a = Popper;
+var Root2$9 = Popper;
 var Anchor = PopperAnchor;
-var Content$4 = PopperContent;
+var Content$3 = PopperContent;
 var Arrow = PopperArrow;
 var PORTAL_NAME$a = "Portal";
 var Portal$7 = React.forwardRef((props2, forwardedRef) => {
@@ -16852,7 +17754,7 @@ var Popover$1 = (props2) => {
     onChange: onOpenChange,
     caller: POPOVER_NAME
   });
-  return /* @__PURE__ */ jsx(Root2$a, { ...popperScope, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Root2$9, { ...popperScope, children: /* @__PURE__ */ jsx(
     PopoverProvider,
     {
       scope: __scopePopover,
@@ -16885,11 +17787,11 @@ var PopoverAnchor$1 = React.forwardRef(
   }
 );
 PopoverAnchor$1.displayName = ANCHOR_NAME$1;
-var TRIGGER_NAME$a = "PopoverTrigger";
+var TRIGGER_NAME$9 = "PopoverTrigger";
 var PopoverTrigger$1 = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopePopover, ...triggerProps } = props2;
-    const context = usePopoverContext(TRIGGER_NAME$a, __scopePopover);
+    const context = usePopoverContext(TRIGGER_NAME$9, __scopePopover);
     const popperScope = usePopperScope$4(__scopePopover);
     const composedTriggerRef = useComposedRefs$1(forwardedRef, context.triggerRef);
     const trigger = /* @__PURE__ */ jsx(
@@ -16908,7 +17810,7 @@ var PopoverTrigger$1 = React.forwardRef(
     return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: trigger });
   }
 );
-PopoverTrigger$1.displayName = TRIGGER_NAME$a;
+PopoverTrigger$1.displayName = TRIGGER_NAME$9;
 var PORTAL_NAME$9 = "PopoverPortal";
 var [PortalProvider$4, usePortalContext$4] = createPopoverContext(PORTAL_NAME$9, {
   forceMount: void 0
@@ -16919,20 +17821,20 @@ var PopoverPortal = (props2) => {
   return /* @__PURE__ */ jsx(PortalProvider$4, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$7, { asChild: true, container, children }) }) });
 };
 PopoverPortal.displayName = PORTAL_NAME$9;
-var CONTENT_NAME$b = "PopoverContent";
+var CONTENT_NAME$a = "PopoverContent";
 var PopoverContent$1 = React.forwardRef(
   (props2, forwardedRef) => {
-    const portalContext = usePortalContext$4(CONTENT_NAME$b, props2.__scopePopover);
+    const portalContext = usePortalContext$4(CONTENT_NAME$a, props2.__scopePopover);
     const { forceMount = portalContext.forceMount, ...contentProps } = props2;
-    const context = usePopoverContext(CONTENT_NAME$b, props2.__scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$a, props2.__scopePopover);
     return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
   }
 );
-PopoverContent$1.displayName = CONTENT_NAME$b;
+PopoverContent$1.displayName = CONTENT_NAME$a;
 var Slot$3 = /* @__PURE__ */ createSlot("PopoverContent.RemoveScroll");
 var PopoverContentModal = React.forwardRef(
   (props2, forwardedRef) => {
-    const context = usePopoverContext(CONTENT_NAME$b, props2.__scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$a, props2.__scopePopover);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, contentRef);
     const isRightClickOutsideRef = React.useRef(false);
@@ -16973,7 +17875,7 @@ var PopoverContentModal = React.forwardRef(
 );
 var PopoverContentNonModal = React.forwardRef(
   (props2, forwardedRef) => {
-    const context = usePopoverContext(CONTENT_NAME$b, props2.__scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$a, props2.__scopePopover);
     const hasInteractedOutsideRef = React.useRef(false);
     const hasPointerDownOutsideRef = React.useRef(false);
     return /* @__PURE__ */ jsx(
@@ -17027,7 +17929,7 @@ var PopoverContentImpl = React.forwardRef(
       onInteractOutside,
       ...contentProps
     } = props2;
-    const context = usePopoverContext(CONTENT_NAME$b, __scopePopover);
+    const context = usePopoverContext(CONTENT_NAME$a, __scopePopover);
     const popperScope = usePopperScope$4(__scopePopover);
     useFocusGuards();
     return /* @__PURE__ */ jsx(
@@ -17049,7 +17951,7 @@ var PopoverContentImpl = React.forwardRef(
             onFocusOutside,
             onDismiss: () => context.onOpenChange(false),
             children: /* @__PURE__ */ jsx(
-              Content$4,
+              Content$3,
               {
                 "data-state": getState$3(context.open),
                 role: "dialog",
@@ -17105,20 +18007,20 @@ PopoverArrow.displayName = ARROW_NAME$7;
 function getState$3(open) {
   return open ? "open" : "closed";
 }
-var Root2$9 = Popover$1;
+var Root2$8 = Popover$1;
 var Anchor2$1 = PopoverAnchor$1;
-var Trigger$9 = PopoverTrigger$1;
+var Trigger$8 = PopoverTrigger$1;
 var Portal$6 = PopoverPortal;
 var Content2$8 = PopoverContent$1;
 function Popover({
   ...props2
 }) {
-  return /* @__PURE__ */ jsx(Root2$9, { "data-slot": "popover", ...props2 });
+  return /* @__PURE__ */ jsx(Root2$8, { "data-slot": "popover", ...props2 });
 }
 function PopoverTrigger({
   ...props2
 }) {
-  return /* @__PURE__ */ jsx(Trigger$9, { "data-slot": "popover-trigger", ...props2 });
+  return /* @__PURE__ */ jsx(Trigger$8, { "data-slot": "popover-trigger", ...props2 });
 }
 function PopoverContent({
   className,
@@ -17133,7 +18035,7 @@ function PopoverContent({
       align,
       sideOffset,
       className: cn$1(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        "border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
         className
       ),
       ...props2
@@ -17198,11 +18100,11 @@ var Dialog$1 = (props2) => {
   );
 };
 Dialog$1.displayName = DIALOG_NAME;
-var TRIGGER_NAME$9 = "DialogTrigger";
+var TRIGGER_NAME$8 = "DialogTrigger";
 var DialogTrigger$1 = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeDialog, ...triggerProps } = props2;
-    const context = useDialogContext(TRIGGER_NAME$9, __scopeDialog);
+    const context = useDialogContext(TRIGGER_NAME$8, __scopeDialog);
     const composedTriggerRef = useComposedRefs$1(forwardedRef, context.triggerRef);
     return /* @__PURE__ */ jsx(
       Primitive.button,
@@ -17219,7 +18121,7 @@ var DialogTrigger$1 = React.forwardRef(
     );
   }
 );
-DialogTrigger$1.displayName = TRIGGER_NAME$9;
+DialogTrigger$1.displayName = TRIGGER_NAME$8;
 var PORTAL_NAME$8 = "DialogPortal";
 var [PortalProvider$3, usePortalContext$3] = createDialogContext(PORTAL_NAME$8, {
   forceMount: void 0
@@ -17260,19 +18162,19 @@ var DialogOverlayImpl = React.forwardRef(
     );
   }
 );
-var CONTENT_NAME$a = "DialogContent";
+var CONTENT_NAME$9 = "DialogContent";
 var DialogContent$1 = React.forwardRef(
   (props2, forwardedRef) => {
-    const portalContext = usePortalContext$3(CONTENT_NAME$a, props2.__scopeDialog);
+    const portalContext = usePortalContext$3(CONTENT_NAME$9, props2.__scopeDialog);
     const { forceMount = portalContext.forceMount, ...contentProps } = props2;
-    const context = useDialogContext(CONTENT_NAME$a, props2.__scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$9, props2.__scopeDialog);
     return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
   }
 );
-DialogContent$1.displayName = CONTENT_NAME$a;
+DialogContent$1.displayName = CONTENT_NAME$9;
 var DialogContentModal = React.forwardRef(
   (props2, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME$a, props2.__scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$9, props2.__scopeDialog);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, context.contentRef, contentRef);
     React.useEffect(() => {
@@ -17307,7 +18209,7 @@ var DialogContentModal = React.forwardRef(
 );
 var DialogContentNonModal = React.forwardRef(
   (props2, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME$a, props2.__scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$9, props2.__scopeDialog);
     const hasInteractedOutsideRef = React.useRef(false);
     const hasPointerDownOutsideRef = React.useRef(false);
     return /* @__PURE__ */ jsx(
@@ -17350,7 +18252,7 @@ var DialogContentNonModal = React.forwardRef(
 var DialogContentImpl = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props2;
-    const context = useDialogContext(CONTENT_NAME$a, __scopeDialog);
+    const context = useDialogContext(CONTENT_NAME$9, __scopeDialog);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, contentRef);
     useFocusGuards();
@@ -17425,7 +18327,7 @@ function getState$2(open) {
 }
 var TITLE_WARNING_NAME = "DialogTitleWarning";
 var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
-  contentName: CONTENT_NAME$a,
+  contentName: CONTENT_NAME$9,
   titleName: TITLE_NAME$1,
   docsSlug: "dialog"
 });
@@ -17458,11 +18360,11 @@ var DescriptionWarning$1 = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root$c = Dialog$1;
-var Trigger$8 = DialogTrigger$1;
+var Root$a = Dialog$1;
+var Trigger$7 = DialogTrigger$1;
 var Portal$5 = DialogPortal$1;
 var Overlay$1 = DialogOverlay$1;
-var Content$3 = DialogContent$1;
+var Content$2 = DialogContent$1;
 var Title = DialogTitle$1;
 var Description = DialogDescription$1;
 var Close = DialogClose$1;
@@ -17694,7 +18596,7 @@ var N$1 = '[cmdk-group=""]', Y$1 = '[cmdk-group-items=""]', be = '[cmdk-group-he
   }, []), React.createElement(Primitive.div, { ref: composeRefs$1(d, o2), ...c2, "cmdk-list": "", role: "listbox", tabIndex: -1, "aria-activedescendant": p2, "aria-label": u2, id: b2.listId }, B(r2, (m2) => React.createElement("div", { ref: composeRefs$1(f, b2.listInnerRef), "cmdk-list-sizer": "" }, m2)));
 }), xe = React.forwardRef((r2, o2) => {
   let { open: n2, onOpenChange: u2, overlayClassName: c2, contentClassName: d, container: f, ...p2 } = r2;
-  return React.createElement(Root$c, { open: n2, onOpenChange: u2 }, React.createElement(Portal$5, { container: f }, React.createElement(Overlay$1, { "cmdk-overlay": "", className: c2 }), React.createElement(Content$3, { "aria-label": r2.label, "cmdk-dialog": "", className: d }, React.createElement(me, { ref: o2, ...p2 }))));
+  return React.createElement(Root$a, { open: n2, onOpenChange: u2 }, React.createElement(Portal$5, { container: f }, React.createElement(Overlay$1, { "cmdk-overlay": "", className: c2 }), React.createElement(Content$2, { "aria-label": r2.label, "cmdk-dialog": "", className: d }, React.createElement(me, { ref: o2, ...p2 }))));
 }), Ie = React.forwardRef((r2, o2) => P((u2) => u2.filtered.count === 0) ? React.createElement(Primitive.div, { ref: o2, ...r2, "cmdk-empty": "", role: "presentation" }) : null), Pe = React.forwardRef((r2, o2) => {
   let { progress: n2, children: u2, label: c2 = "Loading...", ...d } = r2;
   return React.createElement(Primitive.div, { ref: o2, ...d, "cmdk-loading": "", role: "progressbar", "aria-valuenow": n2, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": c2 }, B(r2, (f) => React.createElement("div", { "aria-hidden": true }, f)));
@@ -17761,12 +18663,12 @@ var Te = { position: "absolute", width: "1px", height: "1px", padding: "0", marg
 function Dialog({
   ...props2
 }) {
-  return /* @__PURE__ */ jsx(Root$c, { "data-slot": "dialog", ...props2 });
+  return /* @__PURE__ */ jsx(Root$a, { "data-slot": "dialog", ...props2 });
 }
 function DialogTrigger({
   ...props2
 }) {
-  return /* @__PURE__ */ jsx(Trigger$8, { "data-slot": "dialog-trigger", ...props2 });
+  return /* @__PURE__ */ jsx(Trigger$7, { "data-slot": "dialog-trigger", ...props2 });
 }
 function DialogPortal({
   ...props2
@@ -17803,7 +18705,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
-      Content$3,
+      Content$2,
       {
         "data-slot": "dialog-content",
         className: cn$1(
@@ -17925,7 +18827,7 @@ function CommandInput({
     "div",
     {
       "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b px-3",
+      className: "flex h-9 items-center gap-2 border-b border-border px-3",
       children: [
         /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ jsx(
@@ -18165,8 +19067,12 @@ function Autocomplete({
     if (controlledValue !== void 0) setValue(controlledValue);
   }, [controlledValue]);
   const labelMapRef = useRef(/* @__PURE__ */ new Map());
+  const rawMapRef = useRef(/* @__PURE__ */ new Map());
   const addToLabelMap = useCallback((opt) => {
     labelMapRef.current.set(opt.value, opt.label);
+    if (Object.prototype.hasOwnProperty.call(opt, "raw") && opt.raw !== void 0) {
+      rawMapRef.current.set(opt.value, opt.raw);
+    }
   }, []);
   const [labelTick, setLabelTick] = useState(0);
   const getLabel2 = useCallback(
@@ -18186,13 +19092,15 @@ function Autocomplete({
         if (controlledValue === void 0) setValue(newValues);
         const selectedOptions = newValues.map((v) => ({
           value: v,
-          label: getLabel2(v)
+          label: getLabel2(v),
+          raw: rawMapRef.current.get(v)
         }));
-        onChange == null ? void 0 : onChange(newValues, selectedOptions);
+        const raws = selectedOptions.map((o2) => o2.raw);
+        onChange == null ? void 0 : onChange(newValues, selectedOptions, raws);
       } else {
         const newValue = next.value;
         if (controlledValue === void 0) setValue(newValue);
-        onChange == null ? void 0 : onChange(newValue, next);
+        onChange == null ? void 0 : onChange(newValue, next, next.raw ?? null);
         setOpen(false);
       }
     },
@@ -18322,16 +19230,16 @@ function Autocomplete({
     [isMultiple, value]
   );
   const selectedOptionsMulti = useMemo(
-    () => selectedValues.map((v) => ({ value: v, label: getLabel2(v) })),
+    () => selectedValues.map((v) => ({ value: v, label: getLabel2(v), raw: rawMapRef.current.get(v) })),
     [getLabel2, selectedValues, labelTick]
   );
   const handleClear = useCallback(() => {
     if (isMultiple) {
       if (controlledValue === void 0) setValue([]);
-      onChange == null ? void 0 : onChange([], []);
+      onChange == null ? void 0 : onChange([], [], []);
     } else {
       if (controlledValue === void 0) setValue(null);
-      onChange == null ? void 0 : onChange(null, null);
+      onChange == null ? void 0 : onChange(null, null, null);
     }
   }, [controlledValue, isMultiple, onChange]);
   const addCustomValue = useCallback(
@@ -18347,13 +19255,15 @@ function Autocomplete({
         if (controlledValue === void 0) setValue(newValues);
         const newOptions = newValues.map((v) => ({
           value: v,
-          label: getLabel2(v)
+          label: getLabel2(v),
+          raw: rawMapRef.current.get(v)
         }));
-        onChange == null ? void 0 : onChange(newValues, newOptions);
+        const raws = newOptions.map((o2) => o2.raw);
+        onChange == null ? void 0 : onChange(newValues, newOptions, raws);
         setSearch("");
       } else {
         if (controlledValue === void 0) setValue(created.value);
-        onChange == null ? void 0 : onChange(created.value, created);
+        onChange == null ? void 0 : onChange(created.value, created, created.raw ?? null);
         setSearch("");
         setOpen(false);
       }
@@ -18378,7 +19288,7 @@ function Autocomplete({
         tabIndex: disabled ? -1 : 0,
         "aria-disabled": disabled || void 0,
         className: cn$1(
-          "w-full inline-flex items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm transition-colors",
+          "w-full inline-flex items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm shadow-sm transition-colors",
           "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           disabled && "opacity-50 pointer-events-none",
           className
@@ -18722,7 +19632,7 @@ function Autocomplete({
   ] });
 }
 function AutocompleteField({ field, value, onChange, className }) {
-  const options = (field.options ?? []).filter((o2) => o2.value !== null && o2.value !== void 0).map((o2) => ({ label: o2.label, value: o2.value }));
+  const options = (field.options ?? []).filter((o2) => o2.value !== null && o2.value !== void 0).map((o2) => ({ label: o2.label, value: o2.value, raw: o2.raw }));
   let defaultValueShaped = void 0;
   if (field.defaultValue !== void 0) {
     if (field.multiple) {
@@ -18755,7 +19665,7 @@ function AutocompleteField({ field, value, onChange, className }) {
       initialSelectedOptions: field.initialSelectedOptions ?? null,
       loadSelected: field.loadSelected,
       value: field.multiple ? Array.isArray(value) ? value : value ? [value] : [] : value ?? null,
-      onChange: (val) => onChange(val),
+      onChange: (val, option, raw) => onChange(val, option, raw),
       placeholder: field.placeholder,
       searchPlaceholder: field.searchPlaceholder,
       renderOption: field.renderOption,
@@ -18771,7 +19681,7 @@ function Input({ className, type, ...props2 }) {
       type,
       "data-slot": "input",
       className: cn$1(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-border flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
@@ -18814,7 +19724,7 @@ function Textarea({ className, ...props2 }) {
     {
       "data-slot": "textarea",
       className: cn$1(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       ),
       ...props2
@@ -18850,7 +19760,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
   whiteSpace: "nowrap",
   wordWrap: "normal"
 });
-var NAME$3 = "VisuallyHidden";
+var NAME$2 = "VisuallyHidden";
 var VisuallyHidden = React.forwardRef(
   (props2, forwardedRef) => {
     return /* @__PURE__ */ jsx(
@@ -18863,14 +19773,14 @@ var VisuallyHidden = React.forwardRef(
     );
   }
 );
-VisuallyHidden.displayName = NAME$3;
-var Root$b = VisuallyHidden;
+VisuallyHidden.displayName = NAME$2;
+var Root$9 = VisuallyHidden;
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var SELECTION_KEYS$1 = [" ", "Enter"];
 var SELECT_NAME = "Select";
-var [Collection$5, useCollection$5, createCollectionScope$5] = createCollection(SELECT_NAME);
+var [Collection$4, useCollection$4, createCollectionScope$4] = createCollection(SELECT_NAME);
 var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
-  createCollectionScope$5,
+  createCollectionScope$4,
   createPopperScope
 ]);
 var usePopperScope$3 = createPopperScope();
@@ -18914,7 +19824,7 @@ var Select$2 = (props2) => {
   const isFormControl = trigger ? form || !!trigger.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx(Root2$a, { ...popperScope, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Root2$9, { ...popperScope, children: /* @__PURE__ */ jsxs(
     SelectProvider,
     {
       required: required2,
@@ -18934,7 +19844,7 @@ var Select$2 = (props2) => {
       triggerPointerDownPosRef,
       disabled,
       children: [
-        /* @__PURE__ */ jsx(Collection$5.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Collection$4.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
           SelectNativeOptionsProvider,
           {
             scope: props2.__scopeSelect,
@@ -18975,15 +19885,15 @@ var Select$2 = (props2) => {
   ) });
 };
 Select$2.displayName = SELECT_NAME;
-var TRIGGER_NAME$8 = "SelectTrigger";
+var TRIGGER_NAME$7 = "SelectTrigger";
 var SelectTrigger$1 = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeSelect, disabled = false, ...triggerProps } = props2;
     const popperScope = usePopperScope$3(__scopeSelect);
-    const context = useSelectContext(TRIGGER_NAME$8, __scopeSelect);
+    const context = useSelectContext(TRIGGER_NAME$7, __scopeSelect);
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs$1(forwardedRef, context.onTriggerChange);
-    const getItems = useCollection$5(__scopeSelect);
+    const getItems = useCollection$4(__scopeSelect);
     const pointerTypeRef = React.useRef("touch");
     const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
       const enabledItems = getItems().filter((item) => !item.disabled);
@@ -19052,7 +19962,7 @@ var SelectTrigger$1 = React.forwardRef(
     ) });
   }
 );
-SelectTrigger$1.displayName = TRIGGER_NAME$8;
+SelectTrigger$1.displayName = TRIGGER_NAME$7;
 var VALUE_NAME = "SelectValue";
 var SelectValue$1 = React.forwardRef(
   (props2, forwardedRef) => {
@@ -19089,10 +19999,10 @@ var SelectPortal = (props2) => {
   return /* @__PURE__ */ jsx(Portal$7, { asChild: true, ...props2 });
 };
 SelectPortal.displayName = PORTAL_NAME$7;
-var CONTENT_NAME$9 = "SelectContent";
+var CONTENT_NAME$8 = "SelectContent";
 var SelectContent$1 = React.forwardRef(
   (props2, forwardedRef) => {
-    const context = useSelectContext(CONTENT_NAME$9, props2.__scopeSelect);
+    const context = useSelectContext(CONTENT_NAME$8, props2.__scopeSelect);
     const [fragment, setFragment] = React.useState();
     useLayoutEffect2(() => {
       setFragment(new DocumentFragment());
@@ -19100,16 +20010,16 @@ var SelectContent$1 = React.forwardRef(
     if (!context.open) {
       const frag = fragment;
       return frag ? ReactDOM.createPortal(
-        /* @__PURE__ */ jsx(SelectContentProvider, { scope: props2.__scopeSelect, children: /* @__PURE__ */ jsx(Collection$5.Slot, { scope: props2.__scopeSelect, children: /* @__PURE__ */ jsx("div", { children: props2.children }) }) }),
+        /* @__PURE__ */ jsx(SelectContentProvider, { scope: props2.__scopeSelect, children: /* @__PURE__ */ jsx(Collection$4.Slot, { scope: props2.__scopeSelect, children: /* @__PURE__ */ jsx("div", { children: props2.children }) }) }),
         frag
       ) : null;
     }
     return /* @__PURE__ */ jsx(SelectContentImpl, { ...props2, ref: forwardedRef });
   }
 );
-SelectContent$1.displayName = CONTENT_NAME$9;
+SelectContent$1.displayName = CONTENT_NAME$8;
 var CONTENT_MARGIN = 10;
-var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME$9);
+var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME$8);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
 var Slot$1 = /* @__PURE__ */ createSlot("SelectContent.RemoveScroll");
 var SelectContentImpl = React.forwardRef(
@@ -19135,7 +20045,7 @@ var SelectContentImpl = React.forwardRef(
       //
       ...contentProps
     } = props2;
-    const context = useSelectContext(CONTENT_NAME$9, __scopeSelect);
+    const context = useSelectContext(CONTENT_NAME$8, __scopeSelect);
     const [content, setContent] = React.useState(null);
     const [viewport, setViewport] = React.useState(null);
     const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContent(node));
@@ -19143,7 +20053,7 @@ var SelectContentImpl = React.forwardRef(
     const [selectedItemText, setSelectedItemText] = React.useState(
       null
     );
-    const getItems = useCollection$5(__scopeSelect);
+    const getItems = useCollection$4(__scopeSelect);
     const [isPositioned, setIsPositioned] = React.useState(false);
     const firstValidItemFoundRef = React.useRef(false);
     React.useEffect(() => {
@@ -19350,12 +20260,12 @@ SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
 var SelectItemAlignedPosition = React.forwardRef((props2, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props2;
-  const context = useSelectContext(CONTENT_NAME$9, __scopeSelect);
-  const contentContext = useSelectContentContext(CONTENT_NAME$9, __scopeSelect);
+  const context = useSelectContext(CONTENT_NAME$8, __scopeSelect);
+  const contentContext = useSelectContentContext(CONTENT_NAME$8, __scopeSelect);
   const [contentWrapper, setContentWrapper] = React.useState(null);
   const [content, setContent] = React.useState(null);
   const composedRefs = useComposedRefs$1(forwardedRef, (node) => setContent(node));
-  const getItems = useCollection$5(__scopeSelect);
+  const getItems = useCollection$4(__scopeSelect);
   const shouldExpandOnScrollRef = React.useRef(false);
   const shouldRepositionRef = React.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
@@ -19521,7 +20431,7 @@ var SelectPopperPosition = React.forwardRef((props2, forwardedRef) => {
   } = props2;
   const popperScope = usePopperScope$3(__scopeSelect);
   return /* @__PURE__ */ jsx(
-    Content$4,
+    Content$3,
     {
       ...popperScope,
       ...popperProps,
@@ -19545,7 +20455,7 @@ var SelectPopperPosition = React.forwardRef((props2, forwardedRef) => {
   );
 });
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
-var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME$9, {});
+var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME$8, {});
 var VIEWPORT_NAME$2 = "SelectViewport";
 var SelectViewport = React.forwardRef(
   (props2, forwardedRef) => {
@@ -19564,7 +20474,7 @@ var SelectViewport = React.forwardRef(
           nonce
         }
       ),
-      /* @__PURE__ */ jsx(Collection$5.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Collection$4.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
         Primitive.div,
         {
           "data-radix-select-viewport": "",
@@ -19614,8 +20524,8 @@ var SelectViewport = React.forwardRef(
   }
 );
 SelectViewport.displayName = VIEWPORT_NAME$2;
-var GROUP_NAME$5 = "SelectGroup";
-var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME$5);
+var GROUP_NAME$4 = "SelectGroup";
+var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME$4);
 var SelectGroup$1 = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeSelect, ...groupProps } = props2;
@@ -19623,7 +20533,7 @@ var SelectGroup$1 = React.forwardRef(
     return /* @__PURE__ */ jsx(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
   }
 );
-SelectGroup$1.displayName = GROUP_NAME$5;
+SelectGroup$1.displayName = GROUP_NAME$4;
 var LABEL_NAME$4 = "SelectLabel";
 var SelectLabel$1 = React.forwardRef(
   (props2, forwardedRef) => {
@@ -19633,8 +20543,8 @@ var SelectLabel$1 = React.forwardRef(
   }
 );
 SelectLabel$1.displayName = LABEL_NAME$4;
-var ITEM_NAME$8 = "SelectItem";
-var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME$8);
+var ITEM_NAME$7 = "SelectItem";
+var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME$7);
 var SelectItem$1 = React.forwardRef(
   (props2, forwardedRef) => {
     const {
@@ -19644,8 +20554,8 @@ var SelectItem$1 = React.forwardRef(
       textValue: textValueProp,
       ...itemProps
     } = props2;
-    const context = useSelectContext(ITEM_NAME$8, __scopeSelect);
-    const contentContext = useSelectContentContext(ITEM_NAME$8, __scopeSelect);
+    const context = useSelectContext(ITEM_NAME$7, __scopeSelect);
+    const contentContext = useSelectContentContext(ITEM_NAME$7, __scopeSelect);
     const isSelected = context.value === value;
     const [textValue, setTextValue] = React.useState(textValueProp ?? "");
     const [isFocused, setIsFocused] = React.useState(false);
@@ -19681,7 +20591,7 @@ var SelectItem$1 = React.forwardRef(
           setTextValue((prevTextValue) => prevTextValue || ((node == null ? void 0 : node.textContent) ?? "").trim());
         }, []),
         children: /* @__PURE__ */ jsx(
-          Collection$5.ItemSlot,
+          Collection$4.ItemSlot,
           {
             scope: __scopeSelect,
             value,
@@ -19741,7 +20651,7 @@ var SelectItem$1 = React.forwardRef(
     );
   }
 );
-SelectItem$1.displayName = ITEM_NAME$8;
+SelectItem$1.displayName = ITEM_NAME$7;
 var ITEM_TEXT_NAME = "SelectItemText";
 var SelectItemText = React.forwardRef(
   (props2, forwardedRef) => {
@@ -19857,7 +20767,7 @@ var SelectScrollButtonImpl = React.forwardRef((props2, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props2;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
   const autoScrollTimerRef = React.useRef(null);
-  const getItems = useCollection$5(__scopeSelect);
+  const getItems = useCollection$4(__scopeSelect);
   const clearAutoScrollTimer = React.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
@@ -19981,7 +20891,7 @@ function findNextItem(items, search, currentItem) {
   const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
   const normalizedSearch = isRepeated ? search[0] : search;
   const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
-  let wrappedItems = wrapArray$3(items, Math.max(currentItemIndex, 0));
+  let wrappedItems = wrapArray$2(items, Math.max(currentItemIndex, 0));
   const excludeCurrentItem = normalizedSearch.length === 1;
   if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);
   const nextItem = wrappedItems.find(
@@ -19989,11 +20899,11 @@ function findNextItem(items, search, currentItem) {
   );
   return nextItem !== currentItem ? nextItem : void 0;
 }
-function wrapArray$3(array2, startIndex) {
+function wrapArray$2(array2, startIndex) {
   return array2.map((_2, index2) => array2[(startIndex + index2) % array2.length]);
 }
-var Root2$8 = Select$2;
-var Trigger$7 = SelectTrigger$1;
+var Root2$7 = Select$2;
+var Trigger$6 = SelectTrigger$1;
 var Value = SelectValue$1;
 var Icon = SelectIcon;
 var Portal$4 = SelectPortal;
@@ -20001,16 +20911,16 @@ var Content2$7 = SelectContent$1;
 var Viewport$2 = SelectViewport;
 var Group$1 = SelectGroup$1;
 var Label$1 = SelectLabel$1;
-var Item$2 = SelectItem$1;
+var Item$1 = SelectItem$1;
 var ItemText = SelectItemText;
 var ItemIndicator$1 = SelectItemIndicator;
 var ScrollUpButton = SelectScrollUpButton$1;
 var ScrollDownButton = SelectScrollDownButton$1;
-var Separator$3 = SelectSeparator$1;
+var Separator$1 = SelectSeparator$1;
 function Select$1({
   ...props2
 }) {
-  return /* @__PURE__ */ jsx(Root2$8, { "data-slot": "select", ...props2 });
+  return /* @__PURE__ */ jsx(Root2$7, { "data-slot": "select", ...props2 });
 }
 function SelectGroup({
   ...props2
@@ -20029,12 +20939,12 @@ function SelectTrigger({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(
-    Trigger$7,
+    Trigger$6,
     {
       "data-slot": "select-trigger",
       "data-size": size2,
       className: cn$1(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props2,
@@ -20098,7 +21008,7 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(
-    Item$2,
+    Item$1,
     {
       "data-slot": "select-item",
       className: cn$1(
@@ -20118,7 +21028,7 @@ function SelectSeparator({
   ...props2
 }) {
   return /* @__PURE__ */ jsx(
-    Separator$3,
+    Separator$1,
     {
       "data-slot": "select-separator",
       className: cn$1("bg-border pointer-events-none -mx-1 my-1 h-px", className),
@@ -20371,14 +21281,14 @@ SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME$2;
 function getState$1(checked) {
   return checked ? "checked" : "unchecked";
 }
-var Root$a = Switch$1;
+var Root$8 = Switch$1;
 var Thumb$1 = SwitchThumb;
 function Switch({
   className,
   ...props2
 }) {
   return /* @__PURE__ */ jsx(
-    Root$a,
+    Root$8,
     {
       "data-slot": "switch",
       className: cn$1(
@@ -20449,215 +21359,6 @@ function SwitchField({ field, fieldPath, value, onChange, className }) {
     ] })
   ] });
 }
-var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
-var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var GROUP_NAME$4 = "RovingFocusGroup";
-var [Collection$4, useCollection$4, createCollectionScope$4] = createCollection(GROUP_NAME$4);
-var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
-  GROUP_NAME$4,
-  [createCollectionScope$4]
-);
-var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME$4);
-var RovingFocusGroup = React.forwardRef(
-  (props2, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Collection$4.Provider, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection$4.Slot, { scope: props2.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props2, ref: forwardedRef }) }) });
-  }
-);
-RovingFocusGroup.displayName = GROUP_NAME$4;
-var RovingFocusGroupImpl = React.forwardRef((props2, forwardedRef) => {
-  const {
-    __scopeRovingFocusGroup,
-    orientation,
-    loop = false,
-    dir,
-    currentTabStopId: currentTabStopIdProp,
-    defaultCurrentTabStopId,
-    onCurrentTabStopIdChange,
-    onEntryFocus,
-    preventScrollOnEntryFocus = false,
-    ...groupProps
-  } = props2;
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs$1(forwardedRef, ref);
-  const direction = useDirection(dir);
-  const [currentTabStopId, setCurrentTabStopId] = useControllableState$1({
-    prop: currentTabStopIdProp,
-    defaultProp: defaultCurrentTabStopId ?? null,
-    onChange: onCurrentTabStopIdChange,
-    caller: GROUP_NAME$4
-  });
-  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
-  const handleEntryFocus = useCallbackRef$2(onEntryFocus);
-  const getItems = useCollection$4(__scopeRovingFocusGroup);
-  const isClickFocusRef = React.useRef(false);
-  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
-  React.useEffect(() => {
-    const node = ref.current;
-    if (node) {
-      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
-      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
-    }
-  }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx(
-    RovingFocusProvider,
-    {
-      scope: __scopeRovingFocusGroup,
-      orientation,
-      dir: direction,
-      loop,
-      currentTabStopId,
-      onItemFocus: React.useCallback(
-        (tabStopId) => setCurrentTabStopId(tabStopId),
-        [setCurrentTabStopId]
-      ),
-      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
-      onFocusableItemAdd: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount + 1),
-        []
-      ),
-      onFocusableItemRemove: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount - 1),
-        []
-      ),
-      children: /* @__PURE__ */ jsx(
-        Primitive.div,
-        {
-          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
-          "data-orientation": orientation,
-          ...groupProps,
-          ref: composedRefs,
-          style: { outline: "none", ...props2.style },
-          onMouseDown: composeEventHandlers$1(props2.onMouseDown, () => {
-            isClickFocusRef.current = true;
-          }),
-          onFocus: composeEventHandlers$1(props2.onFocus, (event) => {
-            const isKeyboardFocus = !isClickFocusRef.current;
-            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
-              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
-              event.currentTarget.dispatchEvent(entryFocusEvent);
-              if (!entryFocusEvent.defaultPrevented) {
-                const items = getItems().filter((item) => item.focusable);
-                const activeItem = items.find((item) => item.active);
-                const currentItem = items.find((item) => item.id === currentTabStopId);
-                const candidateItems = [activeItem, currentItem, ...items].filter(
-                  Boolean
-                );
-                const candidateNodes = candidateItems.map((item) => item.ref.current);
-                focusFirst$2(candidateNodes, preventScrollOnEntryFocus);
-              }
-            }
-            isClickFocusRef.current = false;
-          }),
-          onBlur: composeEventHandlers$1(props2.onBlur, () => setIsTabbingBackOut(false))
-        }
-      )
-    }
-  );
-});
-var ITEM_NAME$7 = "RovingFocusGroupItem";
-var RovingFocusGroupItem = React.forwardRef(
-  (props2, forwardedRef) => {
-    const {
-      __scopeRovingFocusGroup,
-      focusable = true,
-      active = false,
-      tabStopId,
-      children,
-      ...itemProps
-    } = props2;
-    const autoId = useId$1();
-    const id = tabStopId || autoId;
-    const context = useRovingFocusContext(ITEM_NAME$7, __scopeRovingFocusGroup);
-    const isCurrentTabStop = context.currentTabStopId === id;
-    const getItems = useCollection$4(__scopeRovingFocusGroup);
-    const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
-    React.useEffect(() => {
-      if (focusable) {
-        onFocusableItemAdd();
-        return () => onFocusableItemRemove();
-      }
-    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx(
-      Collection$4.ItemSlot,
-      {
-        scope: __scopeRovingFocusGroup,
-        id,
-        focusable,
-        active,
-        children: /* @__PURE__ */ jsx(
-          Primitive.span,
-          {
-            tabIndex: isCurrentTabStop ? 0 : -1,
-            "data-orientation": context.orientation,
-            ...itemProps,
-            ref: forwardedRef,
-            onMouseDown: composeEventHandlers$1(props2.onMouseDown, (event) => {
-              if (!focusable) event.preventDefault();
-              else context.onItemFocus(id);
-            }),
-            onFocus: composeEventHandlers$1(props2.onFocus, () => context.onItemFocus(id)),
-            onKeyDown: composeEventHandlers$1(props2.onKeyDown, (event) => {
-              if (event.key === "Tab" && event.shiftKey) {
-                context.onItemShiftTab();
-                return;
-              }
-              if (event.target !== event.currentTarget) return;
-              const focusIntent = getFocusIntent(event, context.orientation, context.dir);
-              if (focusIntent !== void 0) {
-                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
-                event.preventDefault();
-                const items = getItems().filter((item) => item.focusable);
-                let candidateNodes = items.map((item) => item.ref.current);
-                if (focusIntent === "last") candidateNodes.reverse();
-                else if (focusIntent === "prev" || focusIntent === "next") {
-                  if (focusIntent === "prev") candidateNodes.reverse();
-                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
-                  candidateNodes = context.loop ? wrapArray$2(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
-                }
-                setTimeout(() => focusFirst$2(candidateNodes));
-              }
-            }),
-            children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children
-          }
-        )
-      }
-    );
-  }
-);
-RovingFocusGroupItem.displayName = ITEM_NAME$7;
-var MAP_KEY_TO_FOCUS_INTENT = {
-  ArrowLeft: "prev",
-  ArrowUp: "prev",
-  ArrowRight: "next",
-  ArrowDown: "next",
-  PageUp: "first",
-  Home: "first",
-  PageDown: "last",
-  End: "last"
-};
-function getDirectionAwareKey(key, dir) {
-  if (dir !== "rtl") return key;
-  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-function getFocusIntent(event, orientation, dir) {
-  const key = getDirectionAwareKey(event.key, dir);
-  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
-  return MAP_KEY_TO_FOCUS_INTENT[key];
-}
-function focusFirst$2(candidates, preventScroll = false) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-  for (const candidate of candidates) {
-    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-    candidate.focus({ preventScroll });
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-  }
-}
-function wrapArray$2(array2, startIndex) {
-  return array2.map((_2, index2) => array2[(startIndex + index2) % array2.length]);
-}
-var Root$9 = RovingFocusGroup;
-var Item$1 = RovingFocusGroupItem;
 var RADIO_NAME = "Radio";
 var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
 var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME);
@@ -20794,7 +21495,7 @@ var [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_
   createRovingFocusGroupScope,
   createRadioScope
 ]);
-var useRovingFocusGroupScope$4 = createRovingFocusGroupScope();
+var useRovingFocusGroupScope$3 = createRovingFocusGroupScope();
 var useRadioScope = createRadioScope();
 var [RadioGroupProvider$1, useRadioGroupContext$1] = createRadioGroupContext(RADIO_GROUP_NAME$4);
 var RadioGroup$2 = React.forwardRef(
@@ -20812,7 +21513,7 @@ var RadioGroup$2 = React.forwardRef(
       onValueChange,
       ...groupProps
     } = props2;
-    const rovingFocusGroupScope = useRovingFocusGroupScope$4(__scopeRadioGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope$3(__scopeRadioGroup);
     const direction = useDirection(dir);
     const [value, setValue] = useControllableState$1({
       prop: valueProp,
@@ -20830,7 +21531,7 @@ var RadioGroup$2 = React.forwardRef(
         value,
         onValueChange: setValue,
         children: /* @__PURE__ */ jsx(
-          Root$9,
+          Root$d,
           {
             asChild: true,
             ...rovingFocusGroupScope,
@@ -20862,7 +21563,7 @@ var RadioGroupItem$1 = React.forwardRef(
     const { __scopeRadioGroup, disabled, ...itemProps } = props2;
     const context = useRadioGroupContext$1(ITEM_NAME$6, __scopeRadioGroup);
     const isDisabled = context.disabled || disabled;
-    const rovingFocusGroupScope = useRovingFocusGroupScope$4(__scopeRadioGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope$3(__scopeRadioGroup);
     const radioScope = useRadioScope(__scopeRadioGroup);
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, ref);
@@ -20883,7 +21584,7 @@ var RadioGroupItem$1 = React.forwardRef(
       };
     }, []);
     return /* @__PURE__ */ jsx(
-      Item$1,
+      Item$2,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -20923,7 +21624,7 @@ var RadioGroupIndicator = React.forwardRef(
   }
 );
 RadioGroupIndicator.displayName = INDICATOR_NAME2;
-var Root2$7 = RadioGroup$2;
+var Root2$6 = RadioGroup$2;
 var Item2$4 = RadioGroupItem$1;
 var Indicator$2 = RadioGroupIndicator;
 function RadioGroup$1({
@@ -20931,7 +21632,7 @@ function RadioGroup$1({
   ...props2
 }) {
   return /* @__PURE__ */ jsx(
-    Root2$7,
+    Root2$6,
     {
       "data-slot": "radio-group",
       className: cn$1("grid gap-3", className),
@@ -23324,7 +24025,7 @@ function PreviousMonthButton(props2) {
   const { components: components2 } = useDayPicker();
   return React__default.createElement(components2.Button, { ...props2 });
 }
-function Root$8(props2) {
+function Root$7(props2) {
   const { rootRef, ...rest } = props2;
   return React__default.createElement("div", { ...rest, ref: rootRef });
 }
@@ -23378,7 +24079,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   NextMonthButton,
   Option,
   PreviousMonthButton,
-  Root: Root$8,
+  Root: Root$7,
   Select,
   Week,
   WeekNumber,
@@ -30670,7 +31371,7 @@ function getInvalidValueError(propValue, componentName) {
 
 Defaulting to \`null\`.`;
 }
-var Root$7 = Progress$1;
+var Root$6 = Progress$1;
 var Indicator$1 = ProgressIndicator;
 function Progress({
   className,
@@ -30678,7 +31379,7 @@ function Progress({
   ...props2
 }) {
   return /* @__PURE__ */ jsx(
-    Root$7,
+    Root$6,
     {
       "data-slot": "progress",
       className: cn$1(
@@ -30811,7 +31512,7 @@ var Tooltip$2 = (props2) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ jsx(Root2$a, { ...popperScope, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Root2$9, { ...popperScope, children: /* @__PURE__ */ jsx(
     TooltipContextProvider,
     {
       scope: __scopeTooltip,
@@ -30840,12 +31541,12 @@ var Tooltip$2 = (props2) => {
   ) });
 };
 Tooltip$2.displayName = TOOLTIP_NAME;
-var TRIGGER_NAME$7 = "TooltipTrigger";
+var TRIGGER_NAME$6 = "TooltipTrigger";
 var TooltipTrigger$1 = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeTooltip, ...triggerProps } = props2;
-    const context = useTooltipContext(TRIGGER_NAME$7, __scopeTooltip);
-    const providerContext = useTooltipProviderContext(TRIGGER_NAME$7, __scopeTooltip);
+    const context = useTooltipContext(TRIGGER_NAME$6, __scopeTooltip);
+    const providerContext = useTooltipProviderContext(TRIGGER_NAME$6, __scopeTooltip);
     const popperScope = usePopperScope$2(__scopeTooltip);
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, ref, context.onTriggerChange);
@@ -30889,7 +31590,7 @@ var TooltipTrigger$1 = React.forwardRef(
     ) });
   }
 );
-TooltipTrigger$1.displayName = TRIGGER_NAME$7;
+TooltipTrigger$1.displayName = TRIGGER_NAME$6;
 var PORTAL_NAME$6 = "TooltipPortal";
 var [PortalProvider$2, usePortalContext$2] = createTooltipContext(PORTAL_NAME$6, {
   forceMount: void 0
@@ -30900,18 +31601,18 @@ var TooltipPortal = (props2) => {
   return /* @__PURE__ */ jsx(PortalProvider$2, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$7, { asChild: true, container, children }) }) });
 };
 TooltipPortal.displayName = PORTAL_NAME$6;
-var CONTENT_NAME$8 = "TooltipContent";
+var CONTENT_NAME$7 = "TooltipContent";
 var TooltipContent$1 = React.forwardRef(
   (props2, forwardedRef) => {
-    const portalContext = usePortalContext$2(CONTENT_NAME$8, props2.__scopeTooltip);
+    const portalContext = usePortalContext$2(CONTENT_NAME$7, props2.__scopeTooltip);
     const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props2;
-    const context = useTooltipContext(CONTENT_NAME$8, props2.__scopeTooltip);
+    const context = useTooltipContext(CONTENT_NAME$7, props2.__scopeTooltip);
     return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? /* @__PURE__ */ jsx(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
   }
 );
 var TooltipContentHoverable = React.forwardRef((props2, forwardedRef) => {
-  const context = useTooltipContext(CONTENT_NAME$8, props2.__scopeTooltip);
-  const providerContext = useTooltipProviderContext(CONTENT_NAME$8, props2.__scopeTooltip);
+  const context = useTooltipContext(CONTENT_NAME$7, props2.__scopeTooltip);
+  const providerContext = useTooltipProviderContext(CONTENT_NAME$7, props2.__scopeTooltip);
   const ref = React.useRef(null);
   const composedRefs = useComposedRefs$1(forwardedRef, ref);
   const [pointerGraceArea, setPointerGraceArea] = React.useState(null);
@@ -30982,7 +31683,7 @@ var TooltipContentImpl = React.forwardRef(
       onPointerDownOutside,
       ...contentProps
     } = props2;
-    const context = useTooltipContext(CONTENT_NAME$8, __scopeTooltip);
+    const context = useTooltipContext(CONTENT_NAME$7, __scopeTooltip);
     const popperScope = usePopperScope$2(__scopeTooltip);
     const { onClose } = context;
     React.useEffect(() => {
@@ -31009,7 +31710,7 @@ var TooltipContentImpl = React.forwardRef(
         onFocusOutside: (event) => event.preventDefault(),
         onDismiss: onClose,
         children: /* @__PURE__ */ jsxs(
-          Content$4,
+          Content$3,
           {
             "data-state": context.stateAttribute,
             ...popperScope,
@@ -31028,7 +31729,7 @@ var TooltipContentImpl = React.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsx(Slottable$1, { children }),
-              /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root$b, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root$9, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -31036,7 +31737,7 @@ var TooltipContentImpl = React.forwardRef(
     );
   }
 );
-TooltipContent$1.displayName = CONTENT_NAME$8;
+TooltipContent$1.displayName = CONTENT_NAME$7;
 var ARROW_NAME$5 = "TooltipArrow";
 var TooltipArrow = React.forwardRef(
   (props2, forwardedRef) => {
@@ -31167,7 +31868,7 @@ function getHullPresorted(points) {
 }
 var Provider = TooltipProvider$1;
 var Root3$2 = Tooltip$2;
-var Trigger$6 = TooltipTrigger$1;
+var Trigger$5 = TooltipTrigger$1;
 var Portal$3 = TooltipPortal;
 var Content2$6 = TooltipContent$1;
 var Arrow2$1 = TooltipArrow;
@@ -31192,7 +31893,7 @@ function Tooltip$1({
 function TooltipTrigger({
   ...props2
 }) {
-  return /* @__PURE__ */ jsx(Trigger$6, { "data-slot": "tooltip-trigger", ...props2 });
+  return /* @__PURE__ */ jsx(Trigger$5, { "data-slot": "tooltip-trigger", ...props2 });
 }
 function TooltipContent({
   className,
@@ -31637,85 +32338,6 @@ function FileField({ field, value, onChange, className }) {
     }
   );
 }
-function Card({ className, ...props2 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn$1(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props2
-    }
-  );
-}
-function CardHeader({ className, ...props2 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn$1(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      ),
-      ...props2
-    }
-  );
-}
-function CardTitle({ className, ...props2 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn$1("leading-none font-semibold", className),
-      ...props2
-    }
-  );
-}
-function CardDescription({ className, ...props2 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn$1("text-muted-foreground text-sm", className),
-      ...props2
-    }
-  );
-}
-function CardAction({ className, ...props2 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-action",
-      className: cn$1(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      ),
-      ...props2
-    }
-  );
-}
-function CardContent({ className, ...props2 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn$1("px-6", className),
-      ...props2
-    }
-  );
-}
-function CardFooter({ className, ...props2 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: cn$1("flex items-center px-6 [.border-t]:pt-6", className),
-      ...props2
-    }
-  );
-}
 function ObjectField({ field, control, fieldPath }) {
   if (!field.fields) return null;
   return /* @__PURE__ */ jsxs(Card, { className: cn$1(field.className), children: [
@@ -31886,9 +32508,9 @@ function FormBuilderField({ field, control, onChange, parentPath }) {
     control,
     disabled: field.disabled
   });
-  const handleChange = useCallback((value) => {
+  const handleChange = useCallback((value, ...extras) => {
     controllerField.onChange(value);
-    onChange == null ? void 0 : onChange(value);
+    onChange == null ? void 0 : onChange(value, ...extras);
   }, [controllerField, onChange]);
   const baseClassName = cn$1(
     error && "border-destructive focus-visible:ring-destructive",
@@ -32131,631 +32753,147 @@ function FormBuilderField({ field, control, onChange, parentPath }) {
           ArrayField,
           {
             field,
-            control,
-            fieldPath,
-            value: controllerField.value,
-            onChange: handleChange,
-            className: baseClassName
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx(
-          TextField,
-          {
-            field,
-            control,
-            fieldPath,
-            value: controllerField.value,
-            onChange: handleChange,
-            className: baseClassName
-          }
-        );
-    }
-  };
-  if (field.type === "checkbox" || field.type === "switch") {
-    return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", field.gridCols && `md:col-span-${field.gridCols}`), children: [
-      renderField(),
-      field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
-      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
-    ] });
-  }
-  const placement = field.labelPlacement ?? "stacked";
-  if (placement === "hidden" || field.type === "array") {
-    return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", field.gridCols && `md:col-span-${field.gridCols}`), children: [
-      renderField(),
-      field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
-      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
-    ] });
-  }
-  if (placement === "inline") {
-    return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-1", field.gridCols && `md:col-span-${field.gridCols}`), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Label$2, { htmlFor: fieldPath, className: "text-sm font-medium", children: [
-          field.label,
-          field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
-        ] }),
-        renderField()
-      ] }),
-      field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
-      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", field.gridCols && `md:col-span-${field.gridCols}`), children: [
-    /* @__PURE__ */ jsxs(Label$2, { htmlFor: fieldPath, className: "text-sm font-medium", children: [
-      field.label,
-      field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
-    ] }),
-    renderField(),
-    field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
-    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
-  ] });
-}
-var NAME$2 = "Separator";
-var DEFAULT_ORIENTATION = "horizontal";
-var ORIENTATIONS = ["horizontal", "vertical"];
-var Separator$2 = React.forwardRef((props2, forwardedRef) => {
-  const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props2;
-  const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
-  const ariaOrientation = orientation === "vertical" ? orientation : void 0;
-  const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
-  return /* @__PURE__ */ jsx(
-    Primitive.div,
-    {
-      "data-orientation": orientation,
-      ...semanticProps,
-      ...domProps,
-      ref: forwardedRef
-    }
-  );
-});
-Separator$2.displayName = NAME$2;
-function isValidOrientation(orientation) {
-  return ORIENTATIONS.includes(orientation);
-}
-var Root$6 = Separator$2;
-function Separator$1({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props2
-}) {
-  return /* @__PURE__ */ jsx(
-    Root$6,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn$1(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props2
-    }
-  );
-}
-var TABS_NAME = "Tabs";
-var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
-  createRovingFocusGroupScope
-]);
-var useRovingFocusGroupScope$3 = createRovingFocusGroupScope();
-var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
-var Tabs$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const {
-      __scopeTabs,
-      value: valueProp,
-      onValueChange,
-      defaultValue,
-      orientation = "horizontal",
-      dir,
-      activationMode = "automatic",
-      ...tabsProps
-    } = props2;
-    const direction = useDirection(dir);
-    const [value, setValue] = useControllableState$1({
-      prop: valueProp,
-      onChange: onValueChange,
-      defaultProp: defaultValue ?? "",
-      caller: TABS_NAME
-    });
-    return /* @__PURE__ */ jsx(
-      TabsProvider,
-      {
-        scope: __scopeTabs,
-        baseId: useId$1(),
-        value,
-        onValueChange: setValue,
-        orientation,
-        dir: direction,
-        activationMode,
-        children: /* @__PURE__ */ jsx(
-          Primitive.div,
-          {
-            dir: direction,
-            "data-orientation": orientation,
-            ...tabsProps,
-            ref: forwardedRef
-          }
-        )
-      }
-    );
-  }
-);
-Tabs$1.displayName = TABS_NAME;
-var TAB_LIST_NAME = "TabsList";
-var TabsList$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeTabs, loop = true, ...listProps } = props2;
-    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
-    const rovingFocusGroupScope = useRovingFocusGroupScope$3(__scopeTabs);
-    return /* @__PURE__ */ jsx(
-      Root$9,
-      {
-        asChild: true,
-        ...rovingFocusGroupScope,
-        orientation: context.orientation,
-        dir: context.dir,
-        loop,
-        children: /* @__PURE__ */ jsx(
-          Primitive.div,
-          {
-            role: "tablist",
-            "aria-orientation": context.orientation,
-            ...listProps,
-            ref: forwardedRef
-          }
-        )
-      }
-    );
-  }
-);
-TabsList$1.displayName = TAB_LIST_NAME;
-var TRIGGER_NAME$6 = "TabsTrigger";
-var TabsTrigger$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeTabs, value, disabled = false, ...triggerProps } = props2;
-    const context = useTabsContext(TRIGGER_NAME$6, __scopeTabs);
-    const rovingFocusGroupScope = useRovingFocusGroupScope$3(__scopeTabs);
-    const triggerId = makeTriggerId$1(context.baseId, value);
-    const contentId = makeContentId$1(context.baseId, value);
-    const isSelected = value === context.value;
-    return /* @__PURE__ */ jsx(
-      Item$1,
-      {
-        asChild: true,
-        ...rovingFocusGroupScope,
-        focusable: !disabled,
-        active: isSelected,
-        children: /* @__PURE__ */ jsx(
-          Primitive.button,
+            control,
+            fieldPath,
+            value: controllerField.value,
+            onChange: handleChange,
+            className: baseClassName
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          TextField,
           {
-            type: "button",
-            role: "tab",
-            "aria-selected": isSelected,
-            "aria-controls": contentId,
-            "data-state": isSelected ? "active" : "inactive",
-            "data-disabled": disabled ? "" : void 0,
-            disabled,
-            id: triggerId,
-            ...triggerProps,
-            ref: forwardedRef,
-            onMouseDown: composeEventHandlers$1(props2.onMouseDown, (event) => {
-              if (!disabled && event.button === 0 && event.ctrlKey === false) {
-                context.onValueChange(value);
-              } else {
-                event.preventDefault();
-              }
-            }),
-            onKeyDown: composeEventHandlers$1(props2.onKeyDown, (event) => {
-              if ([" ", "Enter"].includes(event.key)) context.onValueChange(value);
-            }),
-            onFocus: composeEventHandlers$1(props2.onFocus, () => {
-              const isAutomaticActivation = context.activationMode !== "manual";
-              if (!isSelected && !disabled && isAutomaticActivation) {
-                context.onValueChange(value);
-              }
-            })
+            field,
+            control,
+            fieldPath,
+            value: controllerField.value,
+            onChange: handleChange,
+            className: baseClassName
           }
-        )
-      }
-    );
-  }
-);
-TabsTrigger$1.displayName = TRIGGER_NAME$6;
-var CONTENT_NAME$7 = "TabsContent";
-var TabsContent$1 = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeTabs, value, forceMount, children, ...contentProps } = props2;
-    const context = useTabsContext(CONTENT_NAME$7, __scopeTabs);
-    const triggerId = makeTriggerId$1(context.baseId, value);
-    const contentId = makeContentId$1(context.baseId, value);
-    const isSelected = value === context.value;
-    const isMountAnimationPreventedRef = React.useRef(isSelected);
-    React.useEffect(() => {
-      const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
-      return () => cancelAnimationFrame(rAF);
-    }, []);
-    return /* @__PURE__ */ jsx(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx(
-      Primitive.div,
-      {
-        "data-state": isSelected ? "active" : "inactive",
-        "data-orientation": context.orientation,
-        role: "tabpanel",
-        "aria-labelledby": triggerId,
-        hidden: !present,
-        id: contentId,
-        tabIndex: 0,
-        ...contentProps,
-        ref: forwardedRef,
-        style: {
-          ...props2.style,
-          animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
-        },
-        children: present && children
-      }
-    ) });
-  }
-);
-TabsContent$1.displayName = CONTENT_NAME$7;
-function makeTriggerId$1(baseId, value) {
-  return `${baseId}-trigger-${value}`;
-}
-function makeContentId$1(baseId, value) {
-  return `${baseId}-content-${value}`;
-}
-var Root2$6 = Tabs$1;
-var List$1 = TabsList$1;
-var Trigger$5 = TabsTrigger$1;
-var Content$2 = TabsContent$1;
-function Tabs({
-  className,
-  ...props2
-}) {
-  return /* @__PURE__ */ jsx(
-    Root2$6,
-    {
-      "data-slot": "tabs",
-      className: cn$1("flex flex-col gap-2", className),
-      ...props2
-    }
-  );
-}
-function TabsList({
-  className,
-  ...props2
-}) {
-  return /* @__PURE__ */ jsx(
-    List$1,
-    {
-      "data-slot": "tabs-list",
-      className: cn$1(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
-      ),
-      ...props2
-    }
-  );
-}
-function TabsTrigger({
-  className,
-  ...props2
-}) {
-  return /* @__PURE__ */ jsx(
-    Trigger$5,
-    {
-      "data-slot": "tabs-trigger",
-      className: cn$1(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props2
-    }
-  );
-}
-function TabsContent({
-  className,
-  ...props2
-}) {
-  return /* @__PURE__ */ jsx(
-    Content$2,
-    {
-      "data-slot": "tabs-content",
-      className: cn$1("flex-1 outline-none", className),
-      ...props2
+        );
     }
-  );
-}
-const GRID_COLS = {
-  base: {
-    1: "grid-cols-1",
-    2: "grid-cols-2",
-    3: "grid-cols-3",
-    4: "grid-cols-4",
-    5: "grid-cols-5",
-    6: "grid-cols-6",
-    7: "grid-cols-7",
-    8: "grid-cols-8",
-    9: "grid-cols-9",
-    10: "grid-cols-10",
-    11: "grid-cols-11",
-    12: "grid-cols-12"
-  },
-  sm: {
-    1: "sm:grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-3",
-    4: "sm:grid-cols-4",
-    5: "sm:grid-cols-5",
-    6: "sm:grid-cols-6",
-    7: "sm:grid-cols-7",
-    8: "sm:grid-cols-8",
-    9: "sm:grid-cols-9",
-    10: "sm:grid-cols-10",
-    11: "sm:grid-cols-11",
-    12: "sm:grid-cols-12"
-  },
-  md: {
-    1: "md:grid-cols-1",
-    2: "md:grid-cols-2",
-    3: "md:grid-cols-3",
-    4: "md:grid-cols-4",
-    5: "md:grid-cols-5",
-    6: "md:grid-cols-6",
-    7: "md:grid-cols-7",
-    8: "md:grid-cols-8",
-    9: "md:grid-cols-9",
-    10: "md:grid-cols-10",
-    11: "md:grid-cols-11",
-    12: "md:grid-cols-12"
-  },
-  lg: {
-    1: "lg:grid-cols-1",
-    2: "lg:grid-cols-2",
-    3: "lg:grid-cols-3",
-    4: "lg:grid-cols-4",
-    5: "lg:grid-cols-5",
-    6: "lg:grid-cols-6",
-    7: "lg:grid-cols-7",
-    8: "lg:grid-cols-8",
-    9: "lg:grid-cols-9",
-    10: "lg:grid-cols-10",
-    11: "lg:grid-cols-11",
-    12: "lg:grid-cols-12"
-  },
-  xl: {
-    1: "xl:grid-cols-1",
-    2: "xl:grid-cols-2",
-    3: "xl:grid-cols-3",
-    4: "xl:grid-cols-4",
-    5: "xl:grid-cols-5",
-    6: "xl:grid-cols-6",
-    7: "xl:grid-cols-7",
-    8: "xl:grid-cols-8",
-    9: "xl:grid-cols-9",
-    10: "xl:grid-cols-10",
-    11: "xl:grid-cols-11",
-    12: "xl:grid-cols-12"
+  };
+  if (field.type === "checkbox" || field.type === "switch") {
+    return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", field.gridCols && `md:col-span-${field.gridCols}`), children: [
+      renderField(),
+      field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
+    ] });
   }
-};
-const COL_SPAN = {
-  base: {
-    1: "col-span-1",
-    2: "col-span-2",
-    3: "col-span-3",
-    4: "col-span-4",
-    5: "col-span-5",
-    6: "col-span-6",
-    7: "col-span-7",
-    8: "col-span-8",
-    9: "col-span-9",
-    10: "col-span-10",
-    11: "col-span-11",
-    12: "col-span-12"
-  },
-  sm: {
-    1: "sm:col-span-1",
-    2: "sm:col-span-2",
-    3: "sm:col-span-3",
-    4: "sm:col-span-4",
-    5: "sm:col-span-5",
-    6: "sm:col-span-6",
-    7: "sm:col-span-7",
-    8: "sm:col-span-8",
-    9: "sm:col-span-9",
-    10: "sm:col-span-10",
-    11: "sm:col-span-11",
-    12: "sm:col-span-12"
-  },
-  md: {
-    1: "md:col-span-1",
-    2: "md:col-span-2",
-    3: "md:col-span-3",
-    4: "md:col-span-4",
-    5: "md:col-span-5",
-    6: "md:col-span-6",
-    7: "md:col-span-7",
-    8: "md:col-span-8",
-    9: "md:col-span-9",
-    10: "md:col-span-10",
-    11: "md:col-span-11",
-    12: "md:col-span-12"
-  },
-  lg: {
-    1: "lg:col-span-1",
-    2: "lg:col-span-2",
-    3: "lg:col-span-3",
-    4: "lg:col-span-4",
-    5: "lg:col-span-5",
-    6: "lg:col-span-6",
-    7: "lg:col-span-7",
-    8: "lg:col-span-8",
-    9: "lg:col-span-9",
-    10: "lg:col-span-10",
-    11: "lg:col-span-11",
-    12: "lg:col-span-12"
-  },
-  xl: {
-    1: "xl:col-span-1",
-    2: "xl:col-span-2",
-    3: "xl:col-span-3",
-    4: "xl:col-span-4",
-    5: "xl:col-span-5",
-    6: "xl:col-span-6",
-    7: "xl:col-span-7",
-    8: "xl:col-span-8",
-    9: "xl:col-span-9",
-    10: "xl:col-span-10",
-    11: "xl:col-span-11",
-    12: "xl:col-span-12"
+  const placement = field.labelPlacement ?? "stacked";
+  if (placement === "hidden" || field.type === "array") {
+    return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", field.gridCols && `md:col-span-${field.gridCols}`), children: [
+      renderField(),
+      field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
+    ] });
   }
-};
-function gridClasses(options) {
-  const cols = (options == null ? void 0 : options.cols) ?? 1;
-  const sm = options == null ? void 0 : options.smCols;
-  const md = options == null ? void 0 : options.mdCols;
-  const lg = options == null ? void 0 : options.lgCols;
-  const xl = options == null ? void 0 : options.xlCols;
-  const gap = (options == null ? void 0 : options.gap) ?? "gap-4";
-  return cn$1(
-    "grid",
-    GRID_COLS.base[cols],
-    sm ? GRID_COLS.sm[sm] : void 0,
-    md ? GRID_COLS.md[md] : void 0,
-    lg ? GRID_COLS.lg[lg] : void 0,
-    xl ? GRID_COLS.xl[xl] : void 0,
-    gap
-  );
-}
-function flexClasses(options) {
-  const direction = (options == null ? void 0 : options.direction) ?? "col";
-  const wrap = (options == null ? void 0 : options.wrap) ? "flex-wrap" : "flex-nowrap";
-  const gap = (options == null ? void 0 : options.gap) ?? "gap-4";
-  const align = (options == null ? void 0 : options.align) ?? "stretch";
-  const justify = (options == null ? void 0 : options.justify) ?? "start";
-  const alignClass = align === "start" ? "items-start" : align === "center" ? "items-center" : align === "end" ? "items-end" : "items-stretch";
-  const justifyClass = justify === "start" ? "justify-start" : justify === "center" ? "justify-center" : justify === "between" ? "justify-between" : "justify-end";
-  return cn$1("flex", `flex-${direction}`, wrap, gap, alignClass, justifyClass);
-}
-function leafSpanClasses(leaf) {
-  if (!leaf.span) return void 0;
-  const parts = [];
-  if (leaf.span.base) parts.push(COL_SPAN.base[leaf.span.base]);
-  if (leaf.span.sm) parts.push(COL_SPAN.sm[leaf.span.sm]);
-  if (leaf.span.md) parts.push(COL_SPAN.md[leaf.span.md]);
-  if (leaf.span.lg) parts.push(COL_SPAN.lg[leaf.span.lg]);
-  if (leaf.span.xl) parts.push(COL_SPAN.xl[leaf.span.xl]);
-  return parts.join(" ");
-}
-function isLeaf(child) {
-  return child.content !== void 0;
-}
-function shallowEqualSpan(a2, b2) {
-  if (a2 === b2) return true;
-  if (!a2 || !b2) return !a2 && !b2;
-  return a2.base === b2.base && a2.sm === b2.sm && a2.md === b2.md && a2.lg === b2.lg && a2.xl === b2.xl;
-}
-function shallowEqualLeaf(a2, b2) {
-  const renderKeyEqual = (a2.renderKey ?? null) === (b2.renderKey ?? null);
-  return a2.key === b2.key && a2.hidden === b2.hidden && a2.className === b2.className && a2.labelLayout === b2.labelLayout && a2.labelClassName === b2.labelClassName && a2.valueClassName === b2.valueClassName && a2.inlineLabelWidthClass === b2.inlineLabelWidthClass && shallowEqualSpan(a2.span, b2.span) && renderKeyEqual;
-}
-const SectionLeafRenderer = memo$1(
-  function SectionLeafRenderer2({ leaf, renderLeaf }) {
-    if (leaf.hidden) return null;
-    const span = leafSpanClasses(leaf);
-    if (renderLeaf) {
-      return /* @__PURE__ */ jsx("div", { className: cn$1(span, leaf.className), children: renderLeaf(leaf) });
-    }
-    const hasLabel = leaf.label !== void 0 && leaf.label !== null && leaf.label !== "";
-    const layout = leaf.labelLayout ?? "stacked";
-    const labelBaseCls = "text-xs text-muted-foreground";
-    const valueBaseCls = "text-sm leading-6";
-    if (!hasLabel) {
-      return /* @__PURE__ */ jsx("div", { className: cn$1(span, leaf.className, leaf.valueClassName), children: leaf.content });
-    }
-    if (layout === "inline") {
-      const labelWidth = leaf.inlineLabelWidthClass ?? "w-32";
-      return /* @__PURE__ */ jsxs("div", { className: cn$1(span, leaf.className, "flex items-start gap-4"), children: [
-        /* @__PURE__ */ jsx("div", { className: cn$1(labelWidth, labelBaseCls, leaf.labelClassName), children: leaf.label }),
-        /* @__PURE__ */ jsxs("div", { className: cn$1("flex-1", valueBaseCls, leaf.valueClassName), children: [
-          leaf.content,
-          leaf.description ? /* @__PURE__ */ jsx("div", { className: cn$1("mt-1", labelBaseCls), children: leaf.description }) : null
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs("div", { className: cn$1(span, leaf.className, "flex flex-col"), children: [
-      /* @__PURE__ */ jsx("div", { className: cn$1(labelBaseCls, leaf.labelClassName), children: leaf.label }),
-      /* @__PURE__ */ jsx("div", { className: cn$1(valueBaseCls, leaf.valueClassName), children: leaf.content }),
-      leaf.description ? /* @__PURE__ */ jsx("div", { className: cn$1("mt-1", labelBaseCls), children: leaf.description }) : null
+  if (placement === "inline") {
+    return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-1", field.gridCols && `md:col-span-${field.gridCols}`), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(Label$2, { htmlFor: fieldPath, className: "text-sm font-medium", children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+        ] }),
+        renderField()
+      ] }),
+      field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
     ] });
-  },
-  (prev, next) => shallowEqualLeaf(prev.leaf, next.leaf) && prev.renderLeaf === next.renderLeaf
-);
-function SectionNodeRenderer({ node, renderLeaf }) {
-  var _a;
-  if (node.hidden) return null;
-  const layout = node.layout ?? "grid";
-  const containerClass = layout === "grid" ? gridClasses(node.grid) : layout === "flex" ? flexClasses(node.flex) : "";
-  const SectionContainer = ({ children }) => {
-    const title = node.title;
-    const description = node.subtitle;
-    const variant = node.variant ?? "card";
-    const className = node.className;
-    const headerClassName = node.headerClassName;
-    const contentClassName = node.contentClassName;
-    const renderHeader = () => {
-      if (!title && !description) return null;
-      return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-1", headerClassName), children: [
-        title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium leading-none", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
-      ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", field.gridCols && `md:col-span-${field.gridCols}`), children: [
+    /* @__PURE__ */ jsxs(Label$2, { htmlFor: fieldPath, className: "text-sm font-medium", children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
+    renderField(),
+    field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error.message })
+  ] });
+}
+function buildSectionNodes(options) {
+  const {
+    sections,
+    control,
+    handleFieldDependencies,
+    handleFieldChange,
+    onFieldChange,
+    getValues
+  } = options;
+  const buildLeavesFromFields = (fields) => (fields ?? []).map((field) => {
+    const fieldState = handleFieldDependencies(field);
+    if (field.hidden || fieldState.hidden) return null;
+    const spanMd = Math.max(1, Math.min(12, field.gridCols ?? 1));
+    return {
+      key: field.name,
+      span: { base: 1, md: spanMd },
+      className: field.wrapperClassName,
+      hidden: field.hidden,
+      content: /* @__PURE__ */ jsx(
+        FormBuilderField,
+        {
+          field: {
+            ...field,
+            disabled: field.disabled || fieldState.disabled
+          },
+          control,
+          onChange: (value, ...extras) => {
+            handleFieldChange(field, value, ...extras);
+            onFieldChange == null ? void 0 : onFieldChange(field.name, value, getValues());
+          },
+          onFieldChange
+        },
+        field.name
+      )
     };
-    const renderContent2 = () => /* @__PURE__ */ jsx("div", { className: cn$1("space-y-4", contentClassName), children });
-    switch (variant) {
-      case "card":
-        return /* @__PURE__ */ jsxs(Card, { className, children: [
-          (title || description) && /* @__PURE__ */ jsxs(CardHeader, { children: [
-            title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
-            description && /* @__PURE__ */ jsx(CardDescription, { children: description })
-          ] }),
-          /* @__PURE__ */ jsx(CardContent, { children: renderContent2() })
-        ] });
-      case "separator":
-        return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-6", className), children: [
-          (title || description) && /* @__PURE__ */ jsxs(Fragment, { children: [
-            renderHeader(),
-            /* @__PURE__ */ jsx(Separator$1, {})
-          ] }),
-          renderContent2()
-        ] });
-      default:
-        return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-6", className), children: [
-          renderHeader(),
-          renderContent2()
-        ] });
+  }).filter(Boolean);
+  const buildSectionNode = (section, sectionIndex) => {
+    var _a;
+    const baseNode = {
+      id: section.id ?? `section-${sectionIndex}`,
+      title: section.title,
+      subtitle: section.description,
+      variant: section.variant ?? "plain",
+      className: section.className,
+      layout: section.layout ?? (section.tabs && section.tabs.length > 0 ? "tabs" : "grid"),
+      grid: section.grid ?? { cols: 1, mdCols: 2, gap: "gap-4" },
+      flex: section.flex,
+      hidden: section.hidden
+    };
+    if (baseNode.layout === "tabs" && section.tabs && section.tabs.length > 0) {
+      baseNode.defaultTabId = section.defaultTabId ?? ((_a = section.tabs[0]) == null ? void 0 : _a.id);
+      baseNode.tabsListClassName = section.tabsListClassName;
+      baseNode.tabsContentClassName = section.tabsContentClassName;
+      baseNode.tabs = section.tabs.map((tab, _tabIdx) => {
+        const nestedNodes = tab.sections.map((subSection, subIdx) => buildSectionNode(subSection, subIdx));
+        const containerNode = {
+          id: `${baseNode.id}-tab-${tab.id}`,
+          variant: "plain",
+          layout: "grid",
+          grid: section.grid ?? { cols: 1, mdCols: 2, gap: "gap-4" },
+          children: nestedNodes
+        };
+        return {
+          id: tab.id,
+          label: tab.label,
+          className: tab.className,
+          contentClassName: tab.contentClassName,
+          node: containerNode
+        };
+      });
+      return baseNode;
     }
+    baseNode.children = buildLeavesFromFields(section.fields);
+    return baseNode;
   };
-  if (layout === "tabs" && node.tabs && node.tabs.length > 0) {
-    const defaultTabId = node.defaultTabId ?? ((_a = node.tabs[0]) == null ? void 0 : _a.id);
-    return /* @__PURE__ */ jsx(SectionContainer, { children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabId, className: cn$1("space-y-2"), children: [
-      /* @__PURE__ */ jsx(TabsList, { className: cn$1(node.tabsListClassName), children: node.tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.id, className: cn$1(tab.className), children: tab.label }, tab.id)) }),
-      node.tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.id, className: cn$1(node.tabsContentClassName, tab.contentClassName), children: /* @__PURE__ */ jsx(SectionNodeRenderer, { node: tab.node, renderLeaf }) }, tab.id))
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(SectionContainer, { children: /* @__PURE__ */ jsx("div", { className: containerClass, children: (node.children ?? []).map((child) => {
-    if (isLeaf(child)) {
-      return /* @__PURE__ */ jsx(SectionLeafRenderer, { leaf: child, renderLeaf }, child.key);
-    }
-    if (child.hidden) return null;
-    return /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsx(SectionNodeRenderer, { node: child, renderLeaf }) }, child.id);
-  }) }) });
-}
-function SectionBuilder({ sections, className, renderLeaf }) {
-  return /* @__PURE__ */ jsx("div", { className: cn$1("space-y-6", className), children: sections.map((section) => /* @__PURE__ */ jsx(SectionNodeRenderer, { node: section, renderLeaf }, section.id)) });
+  return sections.map((section, sectionIndex) => buildSectionNode(section, sectionIndex));
 }
+const FormBuilderContext = createContext(null);
 function FormBuilder({
   sections,
   schema,
-  defaultValues = {},
+  defaultValues,
   onSubmit,
   onCancel,
   onReset,
@@ -32769,7 +32907,8 @@ function FormBuilder({
   actionsClassName,
   showActions = true,
   customActions,
-  showActionsSeparator = true
+  showActionsSeparator = true,
+  form
 }) {
   const generatedSchema = useMemo(() => {
     if (schema) return schema;
@@ -32977,7 +33116,7 @@ function FormBuilder({
     return object(schemaObject);
   }, [sections, schema]);
   const generatedDefaultValues = useMemo(() => {
-    const values = { ...defaultValues };
+    const values = { ...defaultValues ?? {} };
     const processFields = (fields) => {
       for (const field of fields) {
         if (values[field.name] === void 0 && field.defaultValue !== void 0) {
@@ -33014,13 +33153,14 @@ function FormBuilder({
     forEachSection(sections);
     return values;
   }, [sections, defaultValues]);
-  const form = useForm({
+  const internalForm = useForm({
     // Dynamic schema shape: cast to any to satisfy resolver generics
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     resolver: a$2(generatedSchema),
     defaultValues: generatedDefaultValues
   });
-  const { control, handleSubmit, reset: reset2, setValue, getValues } = form;
+  const activeForm = form ?? internalForm;
+  const { control, handleSubmit, reset: reset2, setValue, getValues } = activeForm;
   const dependencyFields = useMemo(() => {
     const set2 = /* @__PURE__ */ new Set();
     const forEachField = (secs) => {
@@ -33098,9 +33238,10 @@ function FormBuilder({
     }
     pendingValueUpdatesRef.current = [];
     for (const [name, value] of updatesMap) {
-      const current = getValues(name);
+      const pathName = name;
+      const current = getValues(pathName);
       if (current !== value) {
-        setValue(name, value, {
+        setValue(pathName, value, {
           shouldDirty: false,
           shouldTouch: false,
           shouldValidate: false
@@ -33109,9 +33250,9 @@ function FormBuilder({
     }
   }, [setValue, getValues]);
   const handleFieldChange = useCallback(
-    (field, value) => {
+    (field, value, ...extras) => {
       if (field.onChange) {
-        field.onChange(value, setValue, getValues);
+        field.onChange(value, extras, setValue, getValues);
       }
     },
     [setValue, getValues]
@@ -33130,85 +33271,29 @@ function FormBuilder({
     reset2(generatedDefaultValues);
     onReset == null ? void 0 : onReset();
   }, [reset2, generatedDefaultValues, onReset]);
-  const sectionNodes = useMemo(() => {
-    const buildLeavesFromFields = (fields) => (fields ?? []).map((field) => {
-      const fieldState = handleFieldDependencies(field);
-      if (field.hidden || fieldState.hidden) return null;
-      const spanMd = Math.max(1, Math.min(12, field.gridCols ?? 1));
-      return {
-        key: field.name,
-        span: { base: 1, md: spanMd },
-        className: field.wrapperClassName,
-        hidden: field.hidden,
-        content: /* @__PURE__ */ jsx(
-          FormBuilderField,
-          {
-            field: {
-              ...field,
-              disabled: field.disabled || fieldState.disabled
-            },
-            control,
-            onChange: (value) => {
-              handleFieldChange(field, value);
-              onFieldChange == null ? void 0 : onFieldChange(field.name, value, getValues());
-            },
-            onFieldChange
-          },
-          field.name
-        )
-      };
-    }).filter(Boolean);
-    const buildSectionNode = (section, sectionIndex) => {
-      var _a;
-      const baseNode = {
-        id: section.id ?? `section-${sectionIndex}`,
-        title: section.title,
-        subtitle: section.description,
-        variant: section.variant ?? "plain",
-        className: section.className,
-        layout: section.layout ?? (section.tabs && section.tabs.length > 0 ? "tabs" : "grid"),
-        grid: section.grid ?? { cols: 1, mdCols: 2, gap: "gap-4" },
-        flex: section.flex,
-        hidden: section.hidden
-      };
-      if (baseNode.layout === "tabs" && section.tabs && section.tabs.length > 0) {
-        baseNode.defaultTabId = section.defaultTabId ?? ((_a = section.tabs[0]) == null ? void 0 : _a.id);
-        baseNode.tabsListClassName = section.tabsListClassName;
-        baseNode.tabsContentClassName = section.tabsContentClassName;
-        baseNode.tabs = section.tabs.map((tab, _tabIdx) => {
-          const nestedNodes = tab.sections.map((subSection, subIdx) => buildSectionNode(subSection, subIdx));
-          const containerNode = {
-            id: `${baseNode.id}-tab-${tab.id}`,
-            title: void 0,
-            subtitle: void 0,
-            variant: "plain",
-            layout: "grid",
-            grid: section.grid ?? { cols: 1, mdCols: 2, gap: "gap-4" },
-            children: nestedNodes
-          };
-          return {
-            id: tab.id,
-            label: tab.label,
-            className: tab.className,
-            contentClassName: tab.contentClassName,
-            node: containerNode
-          };
-        });
-        return baseNode;
-      }
-      baseNode.children = buildLeavesFromFields(section.fields);
-      return baseNode;
-    };
-    return sections.map((section, sectionIndex) => buildSectionNode(section, sectionIndex));
-  }, [
-    sections,
-    control,
-    handleFieldDependencies,
-    handleFieldChange,
-    onFieldChange,
-    getValues
-  ]);
-  return /* @__PURE__ */ jsx("div", { className: cn$1("space-y-6", className), children: /* @__PURE__ */ jsxs(
+  const sectionNodes = useMemo(
+    () => buildSectionNodes({
+      sections,
+      control,
+      handleFieldDependencies,
+      handleFieldChange,
+      onFieldChange,
+      getValues
+    }),
+    [sections, control, handleFieldDependencies, handleFieldChange, onFieldChange, getValues]
+  );
+  const contextValue = useMemo(
+    () => ({
+      control,
+      getValues,
+      setValue,
+      onFieldChange,
+      handleFieldDependencies,
+      handleFieldChange
+    }),
+    [control, getValues, setValue, onFieldChange, handleFieldDependencies, handleFieldChange]
+  );
+  return /* @__PURE__ */ jsx(FormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn$1("space-y-6", className), children: /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: handleSubmit(handleFormSubmit),
@@ -33260,8 +33345,331 @@ function FormBuilder({
         )
       ]
     }
-  ) });
+  ) }) });
 }
+const commonValidations = {
+  email: string().email("Please enter a valid email address"),
+  phone: string().regex(/^[\+]?[1-9][\d]{0,15}$/, "Please enter a valid phone number"),
+  url: string().url("Please enter a valid URL"),
+  password: string().min(8, "Password must be at least 8 characters"),
+  strongPassword: string().min(8, "Password must be at least 8 characters").regex(
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,
+    "Password must contain uppercase, lowercase, number and special character"
+  ),
+  required: string().min(1, "This field is required"),
+  optionalString: string().optional(),
+  positiveNumber: number().positive("Must be a positive number"),
+  nonNegativeNumber: number().min(0, "Must be 0 or greater")
+};
+const createField = {
+  text: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "text",
+    required: false,
+    ...options
+  }),
+  email: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "email",
+    required: false,
+    validation: commonValidations.email,
+    ...options
+  }),
+  password: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "password",
+    required: false,
+    validation: commonValidations.password,
+    ...options
+  }),
+  number: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "number",
+    required: false,
+    ...options
+  }),
+  textarea: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "textarea",
+    required: false,
+    gridCols: 2,
+    // Default to full width
+    ...options
+  }),
+  select: (name, label, options, fieldOptions = {}) => ({
+    name,
+    label,
+    type: "select",
+    options,
+    required: false,
+    ...fieldOptions
+  }),
+  checkbox: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "checkbox",
+    required: false,
+    defaultValue: false,
+    ...options
+  }),
+  switch: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "switch",
+    required: false,
+    defaultValue: false,
+    ...options
+  }),
+  radio: (name, label, options, fieldOptions = {}) => ({
+    name,
+    label,
+    type: "radio",
+    options,
+    required: false,
+    ...fieldOptions
+  }),
+  date: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "date",
+    required: false,
+    ...options
+  }),
+  file: (name, label, options = {}) => ({
+    name,
+    label,
+    type: "file",
+    required: false,
+    ...options
+  }),
+  object: (name, label, fields, options = {}) => ({
+    name,
+    label,
+    type: "object",
+    fields,
+    required: false,
+    gridCols: 2,
+    // Default to full width
+    ...options
+  }),
+  array: (name, label, fields, options = {}) => ({
+    name,
+    label,
+    type: "array",
+    fields,
+    required: false,
+    gridCols: 2,
+    // Default to full width
+    defaultValue: [],
+    ...options
+  })
+};
+const createSection = {
+  card: (title, fields, options = {}) => ({
+    title,
+    fields,
+    variant: "card",
+    ...options
+  }),
+  separator: (title, fields, options = {}) => ({
+    title,
+    fields,
+    variant: "separator",
+    ...options
+  }),
+  plain: (fields, options = {}) => ({
+    fields,
+    variant: "plain",
+    ...options
+  })
+};
+const createDependency = {
+  showWhen: (field, condition) => ({
+    field,
+    condition,
+    action: "show"
+  }),
+  hideWhen: (field, condition) => ({
+    field,
+    condition,
+    action: "hide"
+  }),
+  enableWhen: (field, condition) => ({
+    field,
+    condition,
+    action: "enable"
+  }),
+  disableWhen: (field, condition) => ({
+    field,
+    condition,
+    action: "disable"
+  }),
+  setValueWhen: (field, condition, value) => ({
+    field,
+    condition,
+    action: "setValue",
+    value
+  })
+};
+const conditions = {
+  equals: (value) => (fieldValue) => fieldValue === value,
+  notEquals: (value) => (fieldValue) => fieldValue !== value,
+  includes: (value) => (fieldValue) => Array.isArray(fieldValue) && fieldValue.includes(value),
+  notIncludes: (value) => (fieldValue) => Array.isArray(fieldValue) && !fieldValue.includes(value),
+  isEmpty: () => (fieldValue) => !fieldValue || Array.isArray(fieldValue) && fieldValue.length === 0,
+  isNotEmpty: () => (fieldValue) => fieldValue && (!Array.isArray(fieldValue) || fieldValue.length > 0),
+  greaterThan: (value) => (fieldValue) => Number(fieldValue) > value,
+  lessThan: (value) => (fieldValue) => Number(fieldValue) < value,
+  isTrue: () => (fieldValue) => fieldValue === true,
+  isFalse: () => (fieldValue) => fieldValue === false
+};
+const transformers = {
+  // Transform form data before submission
+  cleanEmptyStrings: (data) => {
+    const clean = (obj) => {
+      if (Array.isArray(obj)) {
+        return obj.map(clean).filter((item) => item !== null && item !== void 0);
+      }
+      if (obj && typeof obj === "object") {
+        const cleaned = {};
+        Object.keys(obj).forEach((key) => {
+          const value = clean(obj[key]);
+          if (value !== "" && value !== null && value !== void 0) {
+            cleaned[key] = value;
+          }
+        });
+        return cleaned;
+      }
+      return obj === "" ? void 0 : obj;
+    };
+    return clean(data);
+  },
+  // Convert string numbers to actual numbers
+  parseNumbers: (data, numberFields) => {
+    const parsed = { ...data };
+    const parseValue = (obj, path = []) => {
+      if (Array.isArray(obj)) {
+        return obj.map(
+          (item, index2) => parseValue(item, [...path, String(index2)])
+        );
+      }
+      if (obj && typeof obj === "object") {
+        const result = {};
+        Object.keys(obj).forEach((key) => {
+          const currentPath = [...path, key].join(".");
+          result[key] = parseValue(obj[key], [...path, key]);
+          if (numberFields.includes(currentPath) && typeof result[key] === "string") {
+            const num = Number(result[key]);
+            if (!isNaN(num)) {
+              result[key] = num;
+            }
+          }
+        });
+        return result;
+      }
+      return obj;
+    };
+    return parseValue(parsed);
+  },
+  // Convert dates to ISO strings
+  formatDates: (data, dateFields) => {
+    const formatted = { ...data };
+    const formatValue = (obj, path = []) => {
+      if (Array.isArray(obj)) {
+        return obj.map(
+          (item, index2) => formatValue(item, [...path, String(index2)])
+        );
+      }
+      if (obj && typeof obj === "object") {
+        const result = {};
+        Object.keys(obj).forEach((key) => {
+          const currentPath = [...path, key].join(".");
+          result[key] = formatValue(obj[key], [...path, key]);
+          if (dateFields.includes(currentPath) && result[key] instanceof Date) {
+            result[key] = result[key].toISOString();
+          }
+        });
+        return result;
+      }
+      return obj;
+    };
+    return formatValue(formatted);
+  }
+};
+const validators = {
+  // Create conditional validation
+  when: (condition, schema) => any().refine(condition, { message: "Condition not met" }).pipe(schema),
+  // Cross-field validation - returns a refinement function to be used on object schemas
+  matchField: (fieldName, targetField) => (data) => data[fieldName] === data[targetField],
+  // Array validation
+  minItems: (min2, message2) => array(any()).min(min2, message2 || `Must have at least ${min2} items`),
+  maxItems: (max2, message2) => array(any()).max(max2, message2 || `Must have at most ${max2} items`)
+};
+const commonForms = {
+  // User registration form
+  userRegistration: () => [
+    createSection.card("Personal Information", [
+      createField.text("firstName", "First Name", { required: true }),
+      createField.text("lastName", "Last Name", { required: true }),
+      createField.email("email", "Email Address", { required: true }),
+      createField.password("password", "Password", { required: true }),
+      createField.password("confirmPassword", "Confirm Password", {
+        required: true
+      })
+    ]),
+    createSection.card("Additional Information", [
+      createField.text("phone", "Phone Number", {
+        validation: commonValidations.phone
+      }),
+      createField.date("dateOfBirth", "Date of Birth"),
+      createField.checkbox(
+        "agreeToTerms",
+        "I agree to the terms and conditions",
+        { required: true }
+      )
+    ])
+  ],
+  // Contact form
+  contact: () => [
+    createSection.plain([
+      createField.text("name", "Full Name", { required: true }),
+      createField.email("email", "Email Address", { required: true }),
+      createField.text("subject", "Subject", { required: true }),
+      createField.textarea("message", "Message", {
+        required: true,
+        gridCols: 2
+      })
+    ])
+  ],
+  // Address form
+  address: () => [
+    createSection.card("Address Information", [
+      createField.text("street", "Street Address", {
+        required: true,
+        gridCols: 2
+      }),
+      createField.text("city", "City", { required: true }),
+      createField.text("state", "State/Province", { required: true }),
+      createField.text("postalCode", "Postal Code", { required: true }),
+      createField.select(
+        "country",
+        "Country",
+        [
+          { label: "United States", value: "US" },
+          { label: "Canada", value: "CA" },
+          { label: "United Kingdom", value: "UK" }
+          // Add more countries as needed
+        ],
+        { required: true }
+      )
+    ])
+  ]
+};
 function DataTablePagination({ table }) {
   const pagination = table.getState().pagination ?? { pageIndex: 0, pageSize: 10 };
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
@@ -33398,7 +33806,7 @@ var Menu$1 = (props2) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  return /* @__PURE__ */ jsx(Root2$a, { ...popperScope, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Root2$9, { ...popperScope, children: /* @__PURE__ */ jsx(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -33606,7 +34014,7 @@ var MenuContentImpl = React.forwardRef(
                 onInteractOutside,
                 onDismiss,
                 children: /* @__PURE__ */ jsx(
-                  Root$9,
+                  Root$d,
                   {
                     asChild: true,
                     ...rovingFocusGroupScope,
@@ -33620,7 +34028,7 @@ var MenuContentImpl = React.forwardRef(
                     }),
                     preventScrollOnEntryFocus: true,
                     children: /* @__PURE__ */ jsx(
-                      Content$4,
+                      Content$3,
                       {
                         role: "menu",
                         "aria-orientation": "vertical",
@@ -33769,7 +34177,7 @@ var MenuItemImpl = React.forwardRef(
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx(Item$1, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Item$2, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx(
           Primitive.div,
           {
             role: "menuitem",
@@ -33931,7 +34339,7 @@ var MenuSub = (props2) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx(Root2$a, { ...popperScope, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Root2$9, { ...popperScope, children: /* @__PURE__ */ jsx(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -40470,7 +40878,7 @@ var useDialogScope = createDialogScope();
 var AlertDialog$1 = (props2) => {
   const { __scopeAlertDialog, ...alertDialogProps } = props2;
   const dialogScope = useDialogScope(__scopeAlertDialog);
-  return /* @__PURE__ */ jsx(Root$c, { ...dialogScope, ...alertDialogProps, modal: true });
+  return /* @__PURE__ */ jsx(Root$a, { ...dialogScope, ...alertDialogProps, modal: true });
 };
 AlertDialog$1.displayName = ROOT_NAME;
 var TRIGGER_NAME$4 = "AlertDialogTrigger";
@@ -40478,7 +40886,7 @@ var AlertDialogTrigger$1 = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeAlertDialog, ...triggerProps } = props2;
     const dialogScope = useDialogScope(__scopeAlertDialog);
-    return /* @__PURE__ */ jsx(Trigger$8, { ...dialogScope, ...triggerProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx(Trigger$7, { ...dialogScope, ...triggerProps, ref: forwardedRef });
   }
 );
 AlertDialogTrigger$1.displayName = TRIGGER_NAME$4;
@@ -40515,7 +40923,7 @@ var AlertDialogContent$1 = React.forwardRef(
         titleName: TITLE_NAME,
         docsSlug: "alert-dialog",
         children: /* @__PURE__ */ jsx(AlertDialogContentProvider, { scope: __scopeAlertDialog, cancelRef, children: /* @__PURE__ */ jsxs(
-          Content$3,
+          Content$2,
           {
             role: "alertdialog",
             ...dialogScope,
@@ -40811,381 +41219,6 @@ function DialogProvider({ children }) {
   ] });
 }
 const useDialog = useDialogController;
-function FormBuilderActions({
-  onSubmit,
-  onCancel,
-  onReset,
-  submitLabel = "Save",
-  cancelLabel = "Cancel",
-  resetLabel = "Reset",
-  isSubmitting = false,
-  isValid: isValid2 = true,
-  showReset = false,
-  customActions,
-  className,
-  submitButtonProps,
-  cancelButtonProps,
-  resetButtonProps
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn$1("flex items-center justify-end space-x-4", className), children: [
-    customActions,
-    showReset && onReset && /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        type: "button",
-        variant: "outline",
-        onClick: onReset,
-        disabled: isSubmitting,
-        ...resetButtonProps,
-        children: resetLabel
-      }
-    ),
-    onCancel && /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        type: "button",
-        variant: "outline",
-        onClick: onCancel,
-        disabled: isSubmitting,
-        ...cancelButtonProps,
-        children: cancelLabel
-      }
-    ),
-    onSubmit && /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        type: "submit",
-        onClick: onSubmit,
-        disabled: isSubmitting || !isValid2,
-        ...submitButtonProps,
-        children: isSubmitting ? "Saving..." : submitLabel
-      }
-    )
-  ] });
-}
-const commonValidations = {
-  email: string().email("Please enter a valid email address"),
-  phone: string().regex(/^[\+]?[1-9][\d]{0,15}$/, "Please enter a valid phone number"),
-  url: string().url("Please enter a valid URL"),
-  password: string().min(8, "Password must be at least 8 characters"),
-  strongPassword: string().min(8, "Password must be at least 8 characters").regex(
-    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,
-    "Password must contain uppercase, lowercase, number and special character"
-  ),
-  required: string().min(1, "This field is required"),
-  optionalString: string().optional(),
-  positiveNumber: number().positive("Must be a positive number"),
-  nonNegativeNumber: number().min(0, "Must be 0 or greater")
-};
-const createField = {
-  text: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "text",
-    required: false,
-    ...options
-  }),
-  email: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "email",
-    required: false,
-    validation: commonValidations.email,
-    ...options
-  }),
-  password: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "password",
-    required: false,
-    validation: commonValidations.password,
-    ...options
-  }),
-  number: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "number",
-    required: false,
-    ...options
-  }),
-  textarea: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "textarea",
-    required: false,
-    gridCols: 2,
-    // Default to full width
-    ...options
-  }),
-  select: (name, label, options, fieldOptions = {}) => ({
-    name,
-    label,
-    type: "select",
-    options,
-    required: false,
-    ...fieldOptions
-  }),
-  checkbox: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "checkbox",
-    required: false,
-    defaultValue: false,
-    ...options
-  }),
-  switch: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "switch",
-    required: false,
-    defaultValue: false,
-    ...options
-  }),
-  radio: (name, label, options, fieldOptions = {}) => ({
-    name,
-    label,
-    type: "radio",
-    options,
-    required: false,
-    ...fieldOptions
-  }),
-  date: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "date",
-    required: false,
-    ...options
-  }),
-  file: (name, label, options = {}) => ({
-    name,
-    label,
-    type: "file",
-    required: false,
-    ...options
-  }),
-  object: (name, label, fields, options = {}) => ({
-    name,
-    label,
-    type: "object",
-    fields,
-    required: false,
-    gridCols: 2,
-    // Default to full width
-    ...options
-  }),
-  array: (name, label, fields, options = {}) => ({
-    name,
-    label,
-    type: "array",
-    fields,
-    required: false,
-    gridCols: 2,
-    // Default to full width
-    defaultValue: [],
-    ...options
-  })
-};
-const createSection = {
-  card: (title, fields, options = {}) => ({
-    title,
-    fields,
-    variant: "card",
-    ...options
-  }),
-  separator: (title, fields, options = {}) => ({
-    title,
-    fields,
-    variant: "separator",
-    ...options
-  }),
-  plain: (fields, options = {}) => ({
-    fields,
-    variant: "plain",
-    ...options
-  })
-};
-const createDependency = {
-  showWhen: (field, condition) => ({
-    field,
-    condition,
-    action: "show"
-  }),
-  hideWhen: (field, condition) => ({
-    field,
-    condition,
-    action: "hide"
-  }),
-  enableWhen: (field, condition) => ({
-    field,
-    condition,
-    action: "enable"
-  }),
-  disableWhen: (field, condition) => ({
-    field,
-    condition,
-    action: "disable"
-  }),
-  setValueWhen: (field, condition, value) => ({
-    field,
-    condition,
-    action: "setValue",
-    value
-  })
-};
-const conditions = {
-  equals: (value) => (fieldValue) => fieldValue === value,
-  notEquals: (value) => (fieldValue) => fieldValue !== value,
-  includes: (value) => (fieldValue) => Array.isArray(fieldValue) && fieldValue.includes(value),
-  notIncludes: (value) => (fieldValue) => Array.isArray(fieldValue) && !fieldValue.includes(value),
-  isEmpty: () => (fieldValue) => !fieldValue || Array.isArray(fieldValue) && fieldValue.length === 0,
-  isNotEmpty: () => (fieldValue) => fieldValue && (!Array.isArray(fieldValue) || fieldValue.length > 0),
-  greaterThan: (value) => (fieldValue) => Number(fieldValue) > value,
-  lessThan: (value) => (fieldValue) => Number(fieldValue) < value,
-  isTrue: () => (fieldValue) => fieldValue === true,
-  isFalse: () => (fieldValue) => fieldValue === false
-};
-const transformers = {
-  // Transform form data before submission
-  cleanEmptyStrings: (data) => {
-    const clean = (obj) => {
-      if (Array.isArray(obj)) {
-        return obj.map(clean).filter((item) => item !== null && item !== void 0);
-      }
-      if (obj && typeof obj === "object") {
-        const cleaned = {};
-        Object.keys(obj).forEach((key) => {
-          const value = clean(obj[key]);
-          if (value !== "" && value !== null && value !== void 0) {
-            cleaned[key] = value;
-          }
-        });
-        return cleaned;
-      }
-      return obj === "" ? void 0 : obj;
-    };
-    return clean(data);
-  },
-  // Convert string numbers to actual numbers
-  parseNumbers: (data, numberFields) => {
-    const parsed = { ...data };
-    const parseValue = (obj, path = []) => {
-      if (Array.isArray(obj)) {
-        return obj.map(
-          (item, index2) => parseValue(item, [...path, String(index2)])
-        );
-      }
-      if (obj && typeof obj === "object") {
-        const result = {};
-        Object.keys(obj).forEach((key) => {
-          const currentPath = [...path, key].join(".");
-          result[key] = parseValue(obj[key], [...path, key]);
-          if (numberFields.includes(currentPath) && typeof result[key] === "string") {
-            const num = Number(result[key]);
-            if (!isNaN(num)) {
-              result[key] = num;
-            }
-          }
-        });
-        return result;
-      }
-      return obj;
-    };
-    return parseValue(parsed);
-  },
-  // Convert dates to ISO strings
-  formatDates: (data, dateFields) => {
-    const formatted = { ...data };
-    const formatValue = (obj, path = []) => {
-      if (Array.isArray(obj)) {
-        return obj.map(
-          (item, index2) => formatValue(item, [...path, String(index2)])
-        );
-      }
-      if (obj && typeof obj === "object") {
-        const result = {};
-        Object.keys(obj).forEach((key) => {
-          const currentPath = [...path, key].join(".");
-          result[key] = formatValue(obj[key], [...path, key]);
-          if (dateFields.includes(currentPath) && result[key] instanceof Date) {
-            result[key] = result[key].toISOString();
-          }
-        });
-        return result;
-      }
-      return obj;
-    };
-    return formatValue(formatted);
-  }
-};
-const validators = {
-  // Create conditional validation
-  when: (condition, schema) => any().refine(condition, { message: "Condition not met" }).pipe(schema),
-  // Cross-field validation - returns a refinement function to be used on object schemas
-  matchField: (fieldName, targetField) => (data) => data[fieldName] === data[targetField],
-  // Array validation
-  minItems: (min2, message2) => array(any()).min(min2, message2 || `Must have at least ${min2} items`),
-  maxItems: (max2, message2) => array(any()).max(max2, message2 || `Must have at most ${max2} items`)
-};
-const commonForms = {
-  // User registration form
-  userRegistration: () => [
-    createSection.card("Personal Information", [
-      createField.text("firstName", "First Name", { required: true }),
-      createField.text("lastName", "Last Name", { required: true }),
-      createField.email("email", "Email Address", { required: true }),
-      createField.password("password", "Password", { required: true }),
-      createField.password("confirmPassword", "Confirm Password", {
-        required: true
-      })
-    ]),
-    createSection.card("Additional Information", [
-      createField.text("phone", "Phone Number", {
-        validation: commonValidations.phone
-      }),
-      createField.date("dateOfBirth", "Date of Birth"),
-      createField.checkbox(
-        "agreeToTerms",
-        "I agree to the terms and conditions",
-        { required: true }
-      )
-    ])
-  ],
-  // Contact form
-  contact: () => [
-    createSection.plain([
-      createField.text("name", "Full Name", { required: true }),
-      createField.email("email", "Email Address", { required: true }),
-      createField.text("subject", "Subject", { required: true }),
-      createField.textarea("message", "Message", {
-        required: true,
-        gridCols: 2
-      })
-    ])
-  ],
-  // Address form
-  address: () => [
-    createSection.card("Address Information", [
-      createField.text("street", "Street Address", {
-        required: true,
-        gridCols: 2
-      }),
-      createField.text("city", "City", { required: true }),
-      createField.text("state", "State/Province", { required: true }),
-      createField.text("postalCode", "Postal Code", { required: true }),
-      createField.select(
-        "country",
-        "Country",
-        [
-          { label: "United States", value: "US" },
-          { label: "Canada", value: "CA" },
-          { label: "United Kingdom", value: "UK" }
-          // Add more countries as needed
-        ],
-        { required: true }
-      )
-    ])
-  ]
-};
 const widthToClass = {
   full: "max-w-none",
   sm: "max-w-screen-sm",
@@ -41299,19 +41332,19 @@ function StackDialogRenderer(props2) {
   const handleCloseDialog = (id) => () => {
     props2.closeDialog(id);
   };
-  return props2.dialogs.map((dialog) => /* @__PURE__ */ jsx(
+  return props2.dialogs.map((dialog, i2) => /* @__PURE__ */ jsx(
     Dialog,
     {
-      open: true,
-      onOpenChange: (open) => !open && handleCloseDialog(dialog.id),
+      open: !!props2.dialogs[i2],
+      onOpenChange: handleCloseDialog(dialog.id),
       children: /* @__PURE__ */ jsx(
-        DialogContent$1,
+        DialogContent,
         {
           onEscapeKeyDown: (e) => {
-            if (!dialog.closeOnEscapePressed) e.preventDefault();
+            if (dialog.closeOnEscapePressed === false) e.preventDefault();
           },
           onInteractOutside: (e) => {
-            if (!dialog.closeOnInteractOutside) e.preventDefault();
+            if (dialog.closeOnInteractOutside === false) e.preventDefault();
           },
           children: dialog.template
         }
@@ -41340,7 +41373,8 @@ function StackDialogContextProvider(props2) {
   const handleCloseDialog = useCallback((id) => {
     setActiveDialogs((prev) => {
       const clone2 = [...prev];
-      clone2.splice(clone2.findIndex((d) => d.id === (id || "")));
+      if (!id) clone2.splice(clone2.length - 1, 1);
+      else clone2.splice(clone2.findIndex((d) => d.id === id));
       return clone2;
     });
   }, [setActiveDialogs]);
@@ -41442,12 +41476,12 @@ function useIsMobile() {
   return !!isMobile;
 }
 function Sheet({ ...props2 }) {
-  return /* @__PURE__ */ jsx(Root$c, { "data-slot": "sheet", ...props2 });
+  return /* @__PURE__ */ jsx(Root$a, { "data-slot": "sheet", ...props2 });
 }
 function SheetTrigger({
   ...props2
 }) {
-  return /* @__PURE__ */ jsx(Trigger$8, { "data-slot": "sheet-trigger", ...props2 });
+  return /* @__PURE__ */ jsx(Trigger$7, { "data-slot": "sheet-trigger", ...props2 });
 }
 function SheetClose({
   ...props2
@@ -41484,7 +41518,7 @@ function SheetContent({
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
-      Content$3,
+      Content$2,
       {
         "data-slot": "sheet-content",
         className: cn$1(
@@ -41835,7 +41869,7 @@ function SidebarSeparator({
   ...props2
 }) {
   return /* @__PURE__ */ jsx(
-    Separator$1,
+    Separator$2,
     {
       "data-slot": "sidebar-separator",
       "data-sidebar": "separator",
@@ -42462,7 +42496,7 @@ function AdminLayoutContent({
           /* @__PURE__ */ jsx(SidebarGroupLabel, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-2 group-data-[collapsible=icon]:hidden", children: group.label }),
           /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "group-data-[collapsible=icon]:items-center", children: group.items.map((item) => renderItem(item, 0)) }) })
         ] }),
-        idx < sidebarGroups.length - 1 && /* @__PURE__ */ jsx(Separator$1, { orientation: "horizontal", className: "bg-sidebar-border group-data-[collapsible=icon]:hidden" })
+        idx < sidebarGroups.length - 1 && /* @__PURE__ */ jsx(Separator$2, { orientation: "horizontal", className: "bg-sidebar-border group-data-[collapsible=icon]:hidden" })
       ] }, group.id)) }),
       /* @__PURE__ */ jsx(SidebarFooter, { className: "bg-sidebar border-t border-sidebar-border px-2 py-3", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { className: "group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:justify-center", children: /* @__PURE__ */ jsx(
         SidebarMenuButton,
@@ -52508,7 +52542,7 @@ function Root$3({ open: openProp, onOpenChange, children, onDrag: onDragProp, on
   }, [
     modal
   ]);
-  return /* @__PURE__ */ React__default.createElement(Root$c, {
+  return /* @__PURE__ */ React__default.createElement(Root$a, {
     defaultOpen,
     onOpenChange: (open) => {
       if (!dismissible && !open) return;
@@ -52619,7 +52653,7 @@ const Content$1 = /* @__PURE__ */ React__default.forwardRef(function({ onPointer
     wasBeyondThePointRef.current = false;
     onRelease(event);
   }
-  return /* @__PURE__ */ React__default.createElement(Content$3, {
+  return /* @__PURE__ */ React__default.createElement(Content$2, {
     "data-vaul-drawer-direction": direction,
     "data-vaul-drawer": "",
     "data-vaul-delayed-snap-points": delayedSnapPoints ? "true" : "false",
@@ -52782,7 +52816,7 @@ const Drawer$1 = {
   Root: Root$3,
   Content: Content$1,
   Overlay,
-  Trigger: Trigger$8,
+  Trigger: Trigger$7,
   Portal: Portal$1,
   Close,
   Title,
@@ -53057,7 +53091,7 @@ var HoverCard$1 = (props2) => {
       onDismiss: handleDismiss,
       hasSelectionRef,
       isPointerDownOnContentRef,
-      children: /* @__PURE__ */ jsx(Root2$a, { ...popperScope, children })
+      children: /* @__PURE__ */ jsx(Root2$9, { ...popperScope, children })
     }
   );
 };
@@ -53177,7 +53211,7 @@ var HoverCardContentImpl = React.forwardRef((props2, forwardedRef) => {
       }),
       onDismiss: context.onDismiss,
       children: /* @__PURE__ */ jsx(
-        Content$4,
+        Content$3,
         {
           ...popperScope,
           ...contentProps,
@@ -53566,7 +53600,7 @@ var Menubar$1 = React.forwardRef(
         dir: direction,
         loop,
         children: /* @__PURE__ */ jsx(Collection$2.Provider, { scope: __scopeMenubar, children: /* @__PURE__ */ jsx(Collection$2.Slot, { scope: __scopeMenubar, children: /* @__PURE__ */ jsx(
-          Root$9,
+          Root$d,
           {
             asChild: true,
             ...rovingFocusGroupScope,
@@ -53636,7 +53670,7 @@ var MenubarTrigger$1 = React.forwardRef(
     const [isFocused, setIsFocused] = React.useState(false);
     const open = context.value === menuContext.value;
     return /* @__PURE__ */ jsx(Collection$2.ItemSlot, { scope: __scopeMenubar, value: menuContext.value, disabled, children: /* @__PURE__ */ jsx(
-      Item$1,
+      Item$2,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -54491,7 +54525,7 @@ var NavigationMenuTrigger$1 = React.forwardRef((props2, forwardedRef) => {
     ) }) }),
     open && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        Root$b,
+        Root$9,
         {
           "aria-hidden": true,
           tabIndex: 0,
@@ -59914,7 +59948,7 @@ var ToggleGroupImpl = React__default.forwardRef(
     const direction = useDirection(dir);
     const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
     return /* @__PURE__ */ jsx(ToggleGroupContext$1, { scope: __scopeToggleGroup, rovingFocus, disabled, children: rovingFocus ? /* @__PURE__ */ jsx(
-      Root$9,
+      Root$d,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -59937,7 +59971,7 @@ var ToggleGroupItem$1 = React__default.forwardRef(
     const commonProps = { ...props2, pressed, disabled };
     const ref = React__default.useRef(null);
     return context.rovingFocus ? /* @__PURE__ */ jsx(
-      Item$1,
+      Item$2,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -60263,7 +60297,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-  Separator$1 as Separator,
+  Separator$2 as Separator,
   Sheet,
   SheetClose,
   SheetContent,