@classic-homes/theme-react 0.1.51 → 0.1.52

package/dist/index.js

@@ -59,6 +59,7 @@ __export(index_exports, {
   Input: () => Input,
   Label: () => Label,
   PageHeader: () => PageHeader,
+  PasswordInput: () => PasswordInput,
   Separator: () => Separator,
   Switch: () => Switch,
   badgeVariants: () => badgeVariants,
@@ -184,21 +185,91 @@ var Input = React3.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/components/Label.tsx
+// src/components/PasswordInput.tsx
 var React4 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var EyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "svg",
+  {
+    width: 18,
+    height: 18,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+    ]
+  }
+);
+var EyeOffIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "svg",
+  {
+    width: 18,
+    height: 18,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22" })
+  }
+);
+var PasswordInput = React4.forwardRef(
+  ({ className, disabled, showLabel = "Show password", hideLabel = "Hide password", ...props }, ref) => {
+    const [showPassword, setShowPassword] = React4.useState(false);
+    const toggleVisibility = () => {
+      setShowPassword((prev) => !prev);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          type: showPassword ? "text" : "password",
+          className: cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          disabled,
+          ref,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "absolute right-0 top-0 h-10 w-10 flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-r-md disabled:pointer-events-none disabled:opacity-50",
+          onClick: toggleVisibility,
+          disabled,
+          "aria-label": showPassword ? hideLabel : showLabel,
+          children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EyeIcon, {})
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// src/components/Label.tsx
+var React5 = __toESM(require("react"));
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority2.cva)(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/Badge.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
   "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -215,9 +286,9 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
     }
   }
 );
-var Badge = React5.forwardRef(
+var Badge = React6.forwardRef(
   ({ className, variant, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         ref,
@@ -231,10 +302,10 @@ var Badge = React5.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Separator.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Separator = React6.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Separator = React7.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -251,12 +322,14 @@ var Separator = React6.forwardRef(({ className, orientation = "horizontal", deco
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/Switch.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Switch = React7.forwardRef(
-  ({ className, size = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    SwitchPrimitives.Root,
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SwitchRoot = SwitchPrimitives.Root;
+var SwitchThumb = SwitchPrimitives.Thumb;
+var Switch = React8.forwardRef(
+  ({ className, size = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    SwitchRoot,
     {
       className: cn(
         "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
@@ -264,10 +337,10 @@ var Switch = React7.forwardRef(
         size === "sm" && "h-5 w-9",
         className
       ),
-      ...props,
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        SwitchPrimitives.Thumb,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        SwitchThumb,
         {
           className: cn(
             "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
@@ -282,10 +355,10 @@ var Switch = React7.forwardRef(
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/Avatar.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -294,7 +367,7 @@ var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -303,7 +376,7 @@ var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -317,15 +390,19 @@ var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__P
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Dialog.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PrimitiveOverlay = DialogPrimitive.Overlay;
+var PrimitiveContent = DialogPrimitive.Content;
+var PrimitiveTitle = DialogPrimitive.Title;
+var PrimitiveDescription = DialogPrimitive.Description;
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  DialogPrimitive.Overlay,
+var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  PrimitiveOverlay,
   {
     ref,
     className: cn(
@@ -336,10 +413,10 @@ var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    DialogPrimitive.Content,
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    PrimitiveContent,
     {
       ref,
       className: cn(
@@ -352,9 +429,9 @@ var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) =
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -362,8 +439,8 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  DialogPrimitive.Title,
+var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  PrimitiveTitle,
   {
     ref,
     className: cn("text-lg font-semibold leading-none tracking-tight", className),
@@ -371,8 +448,8 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-  DialogPrimitive.Description,
+var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  PrimitiveDescription,
   {
     ref,
     className: cn("text-sm text-muted-foreground", className),
@@ -382,9 +459,9 @@ var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/PageHeader.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var pageHeaderContainerVariants = (0, import_class_variance_authority4.cva)("", {
   variants: {
     variant: {
@@ -433,17 +510,17 @@ var pageHeaderActionsVariants = (0, import_class_variance_authority4.cva)("flex
     variant: "default"
   }
 });
-var PageHeader = React10.forwardRef(
-  ({ className, variant, title, subtitle, actions, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var PageHeader = React11.forwardRef(
+  ({ className, variant, title, subtitle, actions, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "header",
     {
       ref,
       className: cn(pageHeaderContainerVariants({ variant }), className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: pageHeaderTitleVariants({ variant }), children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { className: pageHeaderTitleVariants({ variant }), children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
       ]
     }
   )
@@ -451,10 +528,15 @@ var PageHeader = React10.forwardRef(
 PageHeader.displayName = "PageHeader";
 
 // src/components/DataPanel.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_data_panel_core = require("@classic-homes/data-panel-core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DropdownTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownContent = DropdownMenuPrimitive.Content;
+var DropdownLabel = DropdownMenuPrimitive.Label;
+var DropdownItem = DropdownMenuPrimitive.Item;
+var DropdownSeparator = DropdownMenuPrimitive.Separator;
 function useDataPanel(options = {}) {
   const {
     persistKey,
@@ -464,28 +546,28 @@ function useDataPanel(options = {}) {
     constraints = {}
   } = options;
   const resolvedConstraints = { ...import_data_panel_core.DEFAULT_CONSTRAINTS, ...constraints };
-  const [persistedState] = React11.useState(() => {
+  const [persistedState] = React12.useState(() => {
     if (persistKey && typeof window !== "undefined") {
       return (0, import_data_panel_core.loadPanelState)(persistKey);
     }
     return null;
   });
-  const [mode, setMode] = React11.useState(persistedState?.mode ?? initialMode);
-  const [edge, setEdge] = React11.useState(persistedState?.edge ?? initialEdge);
-  const [isExpanded, setIsExpanded] = React11.useState(
+  const [mode, setMode] = React12.useState(persistedState?.mode ?? initialMode);
+  const [edge, setEdge] = React12.useState(persistedState?.edge ?? initialEdge);
+  const [isExpanded, setIsExpanded] = React12.useState(
     persistedState?.isExpanded ?? initialExpanded
   );
-  const [detachedPosition, setDetachedPosition] = React11.useState(
+  const [detachedPosition, setDetachedPosition] = React12.useState(
     persistedState?.detachedPosition ?? import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition
   );
-  const [detachedSize, setDetachedSize] = React11.useState(
+  const [detachedSize, setDetachedSize] = React12.useState(
     persistedState?.detachedSize ?? import_data_panel_core.DEFAULT_PANEL_STATE.detachedSize
   );
-  const [pinnedSize, setPinnedSize] = React11.useState(
+  const [pinnedSize, setPinnedSize] = React12.useState(
     persistedState?.pinnedSize ?? import_data_panel_core.DEFAULT_PANEL_STATE.pinnedSize
   );
-  const saveTimeoutRef = React11.useRef(null);
-  const debouncedSave = React11.useCallback(() => {
+  const saveTimeoutRef = React12.useRef(null);
+  const debouncedSave = React12.useCallback(() => {
     if (!persistKey) return;
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current);
@@ -503,7 +585,7 @@ function useDataPanel(options = {}) {
       });
     }, 300);
   }, [persistKey, mode, edge, isExpanded, detachedPosition, detachedSize, pinnedSize]);
-  const handleSetMode = React11.useCallback(
+  const handleSetMode = React12.useCallback(
     (newMode) => {
       setMode(newMode);
       if (newMode === "detached" && typeof window !== "undefined" && detachedPosition.x === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.y) {
@@ -514,7 +596,7 @@ function useDataPanel(options = {}) {
     },
     [detachedPosition, detachedSize]
   );
-  const handleSetDetachedPosition = React11.useCallback(
+  const handleSetDetachedPosition = React12.useCallback(
     (position) => {
       if (typeof window === "undefined") {
         setDetachedPosition(position);
@@ -526,13 +608,13 @@ function useDataPanel(options = {}) {
     },
     [detachedSize]
   );
-  const handleSetDetachedSize = React11.useCallback(
+  const handleSetDetachedSize = React12.useCallback(
     (size) => {
       setDetachedSize((0, import_data_panel_core.constrainSize)(size, resolvedConstraints));
     },
     [resolvedConstraints]
   );
-  const handleSetPinnedSize = React11.useCallback(
+  const handleSetPinnedSize = React12.useCallback(
     (size) => {
       if (typeof window === "undefined") {
         setPinnedSize(size);
@@ -546,7 +628,7 @@ function useDataPanel(options = {}) {
     },
     [edge, resolvedConstraints]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     debouncedSave();
   }, [debouncedSave]);
   return {
@@ -564,7 +646,7 @@ function useDataPanel(options = {}) {
     setPinnedSize: handleSetPinnedSize
   };
 }
-var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -576,10 +658,10 @@ var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m18 15-6-6-6 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m18 15-6-6-6 6" })
   }
 );
-var MoreVerticalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var MoreVerticalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -592,13 +674,13 @@ var MoreVerticalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "19", r: "1" })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "19", r: "1" })
     ]
   }
 );
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -611,8 +693,8 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m6 6 12 12" })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 6 12 12" })
     ]
   }
 );
@@ -622,7 +704,7 @@ var edgeLabels = {
   top: "Pin to top",
   bottom: "Pin to bottom"
 };
-var DataPanelHeader = React11.forwardRef(
+var DataPanelHeader = React12.forwardRef(
   ({
     title,
     subtitle,
@@ -640,7 +722,7 @@ var DataPanelHeader = React11.forwardRef(
     className,
     draggable = false
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         ref,
@@ -651,13 +733,13 @@ var DataPanelHeader = React11.forwardRef(
         ),
         "data-panel-header": true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col min-w-0 flex-1", children: headerContent ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-sm font-semibold leading-none truncate", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col min-w-0 flex-1", children: headerContent ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-sm font-semibold leading-none truncate", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: subtitle })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
             headerActions,
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 type: "button",
@@ -665,29 +747,29 @@ var DataPanelHeader = React11.forwardRef(
                 onClick: () => onExpandedChange?.(!isExpanded),
                 "aria-label": isExpanded ? "Collapse panel" : "Expand panel",
                 "aria-expanded": isExpanded,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("transition-transform", !isExpanded && "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronUpIcon, {}) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("transition-transform", !isExpanded && "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronUpIcon, {}) })
               }
             ),
-            !disableModeSwitch && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenuPrimitive.Root, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            !disableModeSwitch && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuPrimitive.Root, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   type: "button",
                   className: "flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                   "aria-label": "Panel options",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MoreVerticalIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MoreVerticalIcon, {})
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                DropdownMenuPrimitive.Content,
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                DropdownContent,
                 {
                   className: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
                   sideOffset: 4,
                   align: "end",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Label, { className: "px-2 py-1.5 text-sm font-semibold", children: "Panel Position" }),
-                    ["left", "right", "top", "bottom"].map((e) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                      DropdownMenuPrimitive.Item,
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownLabel, { className: "px-2 py-1.5 text-sm font-semibold", children: "Panel Position" }),
+                    ["left", "right", "top", "bottom"].map((e) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      DropdownItem,
                       {
                         className: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
                         onSelect: () => {
@@ -696,20 +778,20 @@ var DataPanelHeader = React11.forwardRef(
                         },
                         children: [
                           edgeLabels[e],
-                          mode === "pinned" && edge === e && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-auto text-xs", children: "\u2713" })
+                          mode === "pinned" && edge === e && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-auto text-xs", children: "\u2713" })
                         ]
                       },
                       e
                     )),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Separator, { className: "-mx-1 my-1 h-px bg-muted" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                      DropdownMenuPrimitive.Item,
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownSeparator, { className: "-mx-1 my-1 h-px bg-muted" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      DropdownItem,
                       {
                         className: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
                         onSelect: () => onModeChange?.("detached"),
                         children: [
                           "Detach",
-                          mode === "detached" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-auto text-xs", children: "\u2713" })
+                          mode === "detached" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-auto text-xs", children: "\u2713" })
                         ]
                       }
                     )
@@ -717,14 +799,14 @@ var DataPanelHeader = React11.forwardRef(
                 }
               ) })
             ] }),
-            !disableClose && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            !disableClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 type: "button",
                 className: "flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 onClick: onClose,
                 "aria-label": "Close panel",
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, {})
               }
             )
           ] })
@@ -734,13 +816,13 @@ var DataPanelHeader = React11.forwardRef(
   }
 );
 DataPanelHeader.displayName = "DataPanelHeader";
-var DataPanelContent = React11.forwardRef(
+var DataPanelContent = React12.forwardRef(
   ({ children, className }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: cn("flex-1 overflow-auto p-4", className), children });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("flex-1 overflow-auto p-4", className), children });
   }
 );
 DataPanelContent.displayName = "DataPanelContent";
-var DataPanelFooter = React11.forwardRef(
+var DataPanelFooter = React12.forwardRef(
   ({ actions = [], footerContent, footerActions, className }, ref) => {
     if (!footerContent && actions.length === 0 && !footerActions) {
       return null;
@@ -749,7 +831,7 @@ var DataPanelFooter = React11.forwardRef(
       if (variant === "primary") return "default";
       return variant ?? "default";
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         ref,
@@ -757,9 +839,9 @@ var DataPanelFooter = React11.forwardRef(
           "flex items-center justify-end gap-2 border-t border-border bg-muted/30 px-4 py-3",
           className
         ),
-        children: footerContent ? footerContent : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        children: footerContent ? footerContent : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
           footerActions,
-          actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Button,
             {
               variant: mapVariant(action.variant),
@@ -776,7 +858,7 @@ var DataPanelFooter = React11.forwardRef(
   }
 );
 DataPanelFooter.displayName = "DataPanelFooter";
-var DataPanelTab = React11.forwardRef(
+var DataPanelTab = React12.forwardRef(
   ({ title = "Panel", edge, onClick, className }, ref) => {
     const positionClasses = {
       left: "left-0 top-1/2 -translate-y-1/2 rounded-r-md border-l-0",
@@ -791,7 +873,7 @@ var DataPanelTab = React11.forwardRef(
       top: "rotate-180",
       bottom: ""
     }[edge];
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "button",
       {
         ref,
@@ -805,15 +887,15 @@ var DataPanelTab = React11.forwardRef(
         onClick,
         "aria-label": `Expand ${title} panel`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("shrink-0", iconRotation), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronUpIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn(isVertical && "rotate-180"), children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn("shrink-0", iconRotation), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronUpIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn(isVertical && "rotate-180"), children: title })
         ]
       }
     );
   }
 );
 DataPanelTab.displayName = "DataPanelTab";
-var DataPanel = React11.forwardRef(
+var DataPanel = React12.forwardRef(
   ({
     open: controlledOpen,
     onOpenChange,
@@ -842,31 +924,31 @@ var DataPanel = React11.forwardRef(
     className
   }, ref) => {
     const resolvedConstraints = { ...import_data_panel_core.DEFAULT_CONSTRAINTS, ...constraints };
-    const [internalOpen, setInternalOpen] = React11.useState(true);
-    const [internalMode, setInternalMode] = React11.useState(import_data_panel_core.DEFAULT_PANEL_STATE.mode);
-    const [internalEdge, setInternalEdge] = React11.useState(import_data_panel_core.DEFAULT_PANEL_STATE.edge);
-    const [internalExpanded, setInternalExpanded] = React11.useState(
+    const [internalOpen, setInternalOpen] = React12.useState(true);
+    const [internalMode, setInternalMode] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.mode);
+    const [internalEdge, setInternalEdge] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.edge);
+    const [internalExpanded, setInternalExpanded] = React12.useState(
       import_data_panel_core.DEFAULT_PANEL_STATE.isExpanded
     );
-    const [detachedPosition, setDetachedPosition] = React11.useState(
+    const [detachedPosition, setDetachedPosition] = React12.useState(
       import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition
     );
-    const [detachedSize, setDetachedSize] = React11.useState(import_data_panel_core.DEFAULT_PANEL_STATE.detachedSize);
-    const [pinnedSize, setPinnedSize] = React11.useState(import_data_panel_core.DEFAULT_PANEL_STATE.pinnedSize);
-    const [isDragging, setIsDragging] = React11.useState(false);
-    const [isResizing, setIsResizing] = React11.useState(false);
-    const [snapPreview, setSnapPreview] = React11.useState(null);
-    const [isPinnedDragging, setIsPinnedDragging] = React11.useState(false);
-    const [pullOffset, setPullOffset] = React11.useState(0);
-    const dragStateRef = React11.useRef({
+    const [detachedSize, setDetachedSize] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.detachedSize);
+    const [pinnedSize, setPinnedSize] = React12.useState(import_data_panel_core.DEFAULT_PANEL_STATE.pinnedSize);
+    const [isDragging, setIsDragging] = React12.useState(false);
+    const [isResizing, setIsResizing] = React12.useState(false);
+    const [snapPreview, setSnapPreview] = React12.useState(null);
+    const [isPinnedDragging, setIsPinnedDragging] = React12.useState(false);
+    const [pullOffset, setPullOffset] = React12.useState(0);
+    const dragStateRef = React12.useRef({
       startPosition: { x: 0, y: 0 },
       startPanelPosition: { x: 0, y: 0 }
     });
-    const pinnedDragStateRef = React11.useRef({
+    const pinnedDragStateRef = React12.useRef({
       startPosition: { x: 0, y: 0 },
       hasDetached: false
     });
-    const resizeStateRef = React11.useRef({
+    const resizeStateRef = React12.useRef({
       handle: null,
       startPosition: { x: 0, y: 0 },
       startSize: { width: 0, height: 0 },
@@ -876,8 +958,8 @@ var DataPanel = React11.forwardRef(
     const mode = controlledMode ?? internalMode;
     const edge = controlledEdge ?? internalEdge;
     const isExpanded = controlledExpanded ?? internalExpanded;
-    const saveTimeoutRef = React11.useRef(null);
-    const debouncedSave = React11.useCallback(() => {
+    const saveTimeoutRef = React12.useRef(null);
+    const debouncedSave = React12.useCallback(() => {
       if (!persistKey) return;
       if (saveTimeoutRef.current) {
         clearTimeout(saveTimeoutRef.current);
@@ -903,7 +985,7 @@ var DataPanel = React11.forwardRef(
       detachedSize,
       pinnedSize
     ]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (!persistKey) return;
       const persisted = (0, import_data_panel_core.loadPanelState)(persistKey);
       if (persisted) {
@@ -916,7 +998,7 @@ var DataPanel = React11.forwardRef(
         if (persisted.pinnedSize) setPinnedSize(persisted.pinnedSize);
       }
     }, [persistKey, controlledMode, controlledEdge, controlledExpanded]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (mode === "detached" && detachedPosition.x === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === import_data_panel_core.DEFAULT_PANEL_STATE.detachedPosition.y) {
         setDetachedPosition(
           (0, import_data_panel_core.getInitialDetachedPosition)(detachedSize, window.innerWidth, window.innerHeight)
@@ -974,7 +1056,7 @@ var DataPanel = React11.forwardRef(
         document.body.style.userSelect = "none";
       }
     };
-    const handleDragMove = React11.useCallback(
+    const handleDragMove = React12.useCallback(
       (e) => {
         if (!isDragging) return;
         const currentPos = (0, import_data_panel_core.getPointerPosition)(e);
@@ -1001,7 +1083,7 @@ var DataPanel = React11.forwardRef(
       },
       [isDragging, detachedSize, snapThreshold]
     );
-    const handleDragEnd = React11.useCallback(() => {
+    const handleDragEnd = React12.useCallback(() => {
       if (!isDragging) return;
       setIsDragging(false);
       document.body.style.cursor = "";
@@ -1014,7 +1096,7 @@ var DataPanel = React11.forwardRef(
         debouncedSave();
       }
     }, [isDragging, snapPreview, handleModeChange, handleEdgeChange, debouncedSave]);
-    const handlePinnedDragMove = React11.useCallback(
+    const handlePinnedDragMove = React12.useCallback(
       (e) => {
         if (!isPinnedDragging) return;
         const currentPos = (0, import_data_panel_core.getPointerPosition)(e);
@@ -1050,7 +1132,7 @@ var DataPanel = React11.forwardRef(
       },
       [isPinnedDragging, edge, detachThreshold, pinnedSize, detachedSize, handleModeChange]
     );
-    const handlePinnedDragEnd = React11.useCallback(() => {
+    const handlePinnedDragEnd = React12.useCallback(() => {
       if (!isPinnedDragging) return;
       setIsPinnedDragging(false);
       setPullOffset(0);
@@ -1072,7 +1154,7 @@ var DataPanel = React11.forwardRef(
       document.body.style.cursor = (0, import_data_panel_core.getResizeCursor)(handle);
       document.body.style.userSelect = "none";
     };
-    const handleResizeMove = React11.useCallback(
+    const handleResizeMove = React12.useCallback(
       (e) => {
         if (!isResizing || !resizeStateRef.current.handle) return;
         const currentPos = (0, import_data_panel_core.getPointerPosition)(e);
@@ -1110,7 +1192,7 @@ var DataPanel = React11.forwardRef(
       },
       [isResizing, mode, edge, resolvedConstraints]
     );
-    const handleResizeEnd = React11.useCallback(() => {
+    const handleResizeEnd = React12.useCallback(() => {
       if (!isResizing) return;
       setIsResizing(false);
       resizeStateRef.current.handle = null;
@@ -1118,7 +1200,7 @@ var DataPanel = React11.forwardRef(
       document.body.style.userSelect = "";
       debouncedSave();
     }, [isResizing, debouncedSave]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (isDragging) {
         window.addEventListener("pointermove", handleDragMove);
         window.addEventListener("pointerup", handleDragEnd);
@@ -1128,7 +1210,7 @@ var DataPanel = React11.forwardRef(
         };
       }
     }, [isDragging, handleDragMove, handleDragEnd]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (isPinnedDragging) {
         window.addEventListener("pointermove", handlePinnedDragMove);
         window.addEventListener("pointerup", handlePinnedDragEnd);
@@ -1138,7 +1220,7 @@ var DataPanel = React11.forwardRef(
         };
       }
     }, [isPinnedDragging, handlePinnedDragMove, handlePinnedDragEnd]);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (isResizing) {
         window.addEventListener("pointermove", handleResizeMove);
         window.addEventListener("pointerup", handleResizeEnd);
@@ -1148,7 +1230,7 @@ var DataPanel = React11.forwardRef(
         };
       }
     }, [isResizing, handleResizeMove, handleResizeEnd]);
-    const panelStyles = React11.useMemo(() => {
+    const panelStyles = React12.useMemo(() => {
       if (mode === "pinned") {
         const baseStyles = (0, import_data_panel_core.getPinnedPositionStyles)(edge, pinnedSize);
         if (pullOffset > 0) {
@@ -1173,10 +1255,10 @@ var DataPanel = React11.forwardRef(
     }[edge] : "animate-scale-in";
     if (!open) return null;
     if (!isExpanded && mode === "pinned") {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataPanelTab, { title, edge, onClick: () => handleExpandedChange(true) });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DataPanelTab, { title, edge, onClick: () => handleExpandedChange(true) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      snapPreview && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      snapPreview && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: cn(
@@ -1188,7 +1270,7 @@ var DataPanel = React11.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "div",
         {
           ref,
@@ -1206,7 +1288,7 @@ var DataPanel = React11.forwardRef(
           "aria-labelledby": title ? "data-panel-title" : void 0,
           onPointerDown: handleDragStart,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               DataPanelHeader,
               {
                 title,
@@ -1225,8 +1307,8 @@ var DataPanel = React11.forwardRef(
                 draggable: !disableDrag && (mode === "detached" || mode === "pinned" && detachThreshold > 0)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataPanelContent, { children }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DataPanelContent, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               DataPanelFooter,
               {
                 actions,
@@ -1234,36 +1316,36 @@ var DataPanel = React11.forwardRef(
                 footerActions
               }
             ),
-            !disableResize && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: mode === "detached" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            !disableResize && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: mode === "detached" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--horizontal resize-handle--top",
                   onPointerDown: (e) => handleResizeStart(e, "top")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--horizontal resize-handle--bottom",
                   onPointerDown: (e) => handleResizeStart(e, "bottom")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--vertical resize-handle--left",
                   onPointerDown: (e) => handleResizeStart(e, "left")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--vertical resize-handle--right",
                   onPointerDown: (e) => handleResizeStart(e, "right")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--corner resize-handle--top-left",
@@ -1271,7 +1353,7 @@ var DataPanel = React11.forwardRef(
                   onPointerDown: (e) => handleResizeStart(e, "top-left")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--corner resize-handle--top-right",
@@ -1279,7 +1361,7 @@ var DataPanel = React11.forwardRef(
                   onPointerDown: (e) => handleResizeStart(e, "top-right")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--corner resize-handle--bottom-left",
@@ -1287,7 +1369,7 @@ var DataPanel = React11.forwardRef(
                   onPointerDown: (e) => handleResizeStart(e, "bottom-left")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   className: "resize-handle resize-handle--corner resize-handle--bottom-right",
@@ -1295,7 +1377,7 @@ var DataPanel = React11.forwardRef(
                   onPointerDown: (e) => handleResizeStart(e, "bottom-right")
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "div",
               {
                 className: cn(
@@ -1346,6 +1428,7 @@ DataPanel.displayName = "DataPanel";
   Input,
   Label,
   PageHeader,
+  PasswordInput,
   Separator,
   Switch,
   badgeVariants,