doodleui-react 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -16,6 +16,21 @@ var ToastPrimitive = require('@radix-ui/react-toast');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var SliderPrimitive = require('@radix-ui/react-slider');
+var LabelPrimitive = require('@radix-ui/react-label');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var cmdk = require('cmdk');
+var TogglePrimitive = require('@radix-ui/react-toggle');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var inputOtp = require('input-otp');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var ResizablePrimitive = require('react-resizable-panels');
+var HoverCardPrimitive = require('@radix-ui/react-hover-card');
+var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
+var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
+var MenubarPrimitive = require('@radix-ui/react-menubar');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -49,6 +64,19 @@ var ToastPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
+var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrimitive);
+var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
+var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
+var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
+var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
 
 // src/types.ts
 function toRoughOptions(props) {
@@ -3732,12 +3760,3494 @@ var Stepper = react.forwardRef(
     );
   }
 );
+var Label2 = react.forwardRef(function Label3({
+  className,
+  style,
+  children,
+  required,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const resolvedSeed = useResolvedSeed(seed);
+  const shouldAnimate = useAnimate(animate);
+  const markRef = react.useRef(null);
+  useDrawIn(markRef, DRAW_IN_MARK_MS, shouldAnimate);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    LabelPrimitive__namespace.Root,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 13,
+        fontWeight: doodleUiFontWeight(600),
+        color: ink,
+        cursor: "default",
+        ...style
+      },
+      ...rest,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ref: markRef,
+            "aria-hidden": "true",
+            style: { position: "relative", width: 10, height: 10, flexShrink: 0 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "ellipse",
+                roughness: (roughness ?? 1.5) * 0.9,
+                seed: resolvedSeed,
+                sketchColor: SKETCH_COLORS.accent,
+                bowing,
+                fillStyle: "solid",
+                fill: SKETCH_COLORS.accent,
+                strokeWidth: strokeWidth ?? 1.2,
+                inset: 1
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var CHEVRON_PATH4 = "M 6 4 L 12 10 L 6 16";
+var CollapsibleSketchContext = react.createContext(null);
+function useCollapsibleSketch() {
+  const ctx = react.useContext(CollapsibleSketchContext);
+  if (!ctx) {
+    throw new Error(
+      "Collapsible parts must be used inside <Collapsible>."
+    );
+  }
+  return ctx;
+}
+var Collapsible = react.forwardRef(
+  function Collapsible2({
+    className,
+    style,
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    disabled,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const [uncontrolled, setUncontrolled] = react.useState(defaultOpen ?? false);
+    const isOpen = open ?? uncontrolled;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsibleSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          fillStyle,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          open: isOpen
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          CollapsiblePrimitive__namespace.Root,
+          {
+            ref,
+            open: isOpen,
+            disabled,
+            className: cn(className),
+            style,
+            onOpenChange: (next) => {
+              setUncontrolled(next);
+              onOpenChange?.(next);
+            },
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var CollapsibleTrigger = react.forwardRef(function CollapsibleTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useCollapsibleSketch();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    CollapsiblePrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "10px 4px",
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 15,
+        fontWeight: doodleUiFontWeight(600),
+        color: sketch.ink,
+        textAlign: "left",
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 18,
+              height: 18,
+              flexShrink: 0,
+              transform: sketch.open ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "transform 180ms ease"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: CHEVRON_PATH4,
+                roughness: (sketch.roughness ?? 1.5) * 0.7,
+                seed: sketch.resolvedSeed,
+                sketchColor: sketch.ink,
+                bowing: sketch.bowing,
+                strokeWidth: (sketch.strokeWidth ?? 1.6) + 0.2,
+                inset: 0
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+var CollapsibleContent = react.forwardRef(function CollapsibleContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useCollapsibleSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsiblePrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "0 4px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        lineHeight: 1.5,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var PopoverSketchContext = react.createContext(
+  null
+);
+function usePopoverSketch() {
+  const ctx = react.useContext(PopoverSketchContext);
+  if (!ctx) {
+    throw new Error("Popover parts must be used inside <Popover>.");
+  }
+  return ctx;
+}
+function Popover({
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { ...rest, children })
+    }
+  );
+}
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
+var PopoverClose = PopoverPrimitive__namespace.Close;
+var PopoverContent = react.forwardRef(
+  function PopoverContent2({ className, style, children, sideOffset = 8, ...rest }, ref) {
+    const sketch = usePopoverSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverPrimitive__namespace.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(className),
+        style: { zIndex: 80, outline: "none", ...style },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SketchBox,
+          {
+            roughness: sketch.roughness,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing,
+            fillStyle: sketch.fillStyle ?? "solid",
+            fill: "#f7f6f2",
+            strokeWidth: sketch.strokeWidth ?? 1.5,
+            shadow: true,
+            animate: sketch.animate,
+            contentStyle: { padding: "14px 16px", minWidth: 200 },
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+var PopoverArrow = react.forwardRef(
+  function PopoverArrow2(props, ref) {
+    const sketch = usePopoverSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { ref, fill: sketch.ink, ...props });
+  }
+);
+var DropdownMenuSketchContext = react.createContext(null);
+function useDropdownMenuSketch() {
+  const ctx = react.useContext(DropdownMenuSketchContext);
+  if (!ctx) {
+    throw new Error(
+      "DropdownMenu parts must be used inside <DropdownMenu>."
+    );
+  }
+  return ctx;
+}
+function DropdownMenu({
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Root, { ...rest, children })
+    }
+  );
+}
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
+var DropdownMenuContent = react.forwardRef(function DropdownMenuContent2({ className, style, children, sideOffset = 6, align = "start", ...rest }, ref) {
+  const sketch = useDropdownMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Content,
+    {
+      ref,
+      sideOffset,
+      align,
+      className: cn(className),
+      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SketchBox,
+        {
+          roughness: sketch.roughness,
+          seed: sketch.resolvedSeed,
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing,
+          fillStyle: sketch.fillStyle ?? "solid",
+          fill: "#f7f6f2",
+          strokeWidth: sketch.strokeWidth ?? 1.5,
+          shadow: true,
+          animate: sketch.animate,
+          contentStyle: { padding: "6px 4px" },
+          children
+        }
+      )
+    }
+  ) });
+});
+function useMark(highlighted) {
+  const sketch = useDropdownMenuSketch();
+  return { sketch, mark: highlighted };
+}
+var DropdownMenuItem = react.forwardRef(function DropdownMenuItem2({ className, style, children, inset, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenuPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      onFocus: () => setHighlighted(true),
+      onBlur: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: inset ? "7px 12px 7px 26px" : "7px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var CHECK_PATH2 = "M 2 6 L 5 9 L 10 3";
+var DropdownMenuCheckboxItem = react.forwardRef(function DropdownMenuCheckboxItem2({ className, style, children, checked, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenuPrimitive__namespace.CheckboxItem,
+    {
+      ref,
+      checked,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "7px 12px 7px 26px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 12,
+              height: 12,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: CHECK_PATH2,
+                roughness: (sketch.roughness ?? 1.5) * 0.7,
+                seed: deriveSeed(sketch.resolvedSeed, "checkbox-mark"),
+                sketchColor: SKETCH_COLORS.accent,
+                bowing: sketch.bowing,
+                strokeWidth: 1.6,
+                inset: 0
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var DropdownMenuRadioItem = react.forwardRef(function DropdownMenuRadioItem2({ className, style, children, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenuPrimitive__namespace.RadioItem,
+    {
+      ref,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "7px 12px 7px 26px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 8,
+              height: 8,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "ellipse",
+                roughness: (sketch.roughness ?? 1.5) * 0.8,
+                seed: deriveSeed(sketch.resolvedSeed, "radio-mark"),
+                sketchColor: SKETCH_COLORS.accent,
+                bowing: sketch.bowing,
+                fillStyle: "solid",
+                fill: SKETCH_COLORS.accent,
+                strokeWidth: 1.2,
+                inset: 0
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var DropdownMenuLabel = react.forwardRef(function DropdownMenuLabel2({ className, style, children, ...rest }, ref) {
+  const sketch = useDropdownMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Label,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "6px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        fontWeight: 700,
+        color: sketch.ink,
+        opacity: 0.6,
+        textTransform: "uppercase",
+        letterSpacing: 0.4,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var DropdownMenuSeparator = react.forwardRef(function DropdownMenuSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useDropdownMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Separator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 0", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "separator"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: 1.2,
+          inset: 6,
+          style: { opacity: 0.5 }
+        }
+      )
+    }
+  );
+});
+var DialogSketchContext = react.createContext(
+  null
+);
+function useDialogSketch() {
+  const ctx = react.useContext(DialogSketchContext);
+  if (!ctx) {
+    throw new Error("Dialog parts must be used inside <Dialog>.");
+  }
+  return ctx;
+}
+function Dialog2({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        open: isOpen
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Dialog__namespace.Root,
+        {
+          open: isOpen,
+          onOpenChange: (next) => {
+            setUncontrolled(next);
+            onOpenChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var DialogTrigger = Dialog__namespace.Trigger;
+var DialogPortal = Dialog__namespace.Portal;
+var DialogClose = Dialog__namespace.Close;
+var DialogOverlay = react.forwardRef(
+  function DialogOverlay2({ style, ...rest }, ref) {
+    const sketch = useDialogSketch();
+    const shouldAnimate = useAnimate(sketch.animate);
+    return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: shouldAnimate ? { opacity: 0 } : false,
+        animate: { opacity: 1 },
+        exit: shouldAnimate ? { opacity: 0 } : void 0,
+        transition: shouldAnimate ? { duration: 0.2, ease: "easeOut" } : { duration: 0 },
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(31, 29, 26, 0.38)",
+          zIndex: 70,
+          ...style
+        }
+      }
+    ) });
+  }
+);
+var DialogContent = react.forwardRef(
+  function DialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+    const sketch = useDialogSketch();
+    const shouldAnimate = useAnimate(sketch.animate);
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 80,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none",
+            padding: 16
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              className: cn(className),
+              initial: shouldAnimate ? { opacity: 0, scale: 0.96, y: 10 } : false,
+              animate: { opacity: 1, scale: 1, y: 0 },
+              exit: shouldAnimate ? { opacity: 0, scale: 0.96, y: 8 } : void 0,
+              transition: shouldAnimate ? { duration: 0.22, ease: "easeOut" } : { duration: 0 },
+              style: {
+                width: "min(420px, calc(100vw - 32px))",
+                outline: "none",
+                pointerEvents: "auto",
+                ...style
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SketchBox,
+                {
+                  roughness: sketch.roughness,
+                  seed: sketch.resolvedSeed,
+                  sketchColor: sketch.ink,
+                  bowing: sketch.bowing,
+                  fillStyle: sketch.fillStyle ?? "solid",
+                  fill: "#f7f6f2",
+                  strokeWidth: sketch.strokeWidth ?? 2,
+                  animate: sketch.animate,
+                  contentStyle: { padding: 20, ...contentStyle },
+                  children
+                }
+              )
+            }
+          ) })
+        }
+      )
+    ] }) : null });
+  }
+);
+function DialogHeader({ children, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        marginBottom: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+function DialogFooter({ children, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 8,
+        marginTop: 16,
+        ...style
+      },
+      children
+    }
+  );
+}
+var DialogTitle = react.forwardRef(
+  function DialogTitle2({ style, ...rest }, ref) {
+    const sketch = useDialogSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Dialog__namespace.Title,
+      {
+        ref,
+        style: {
+          margin: 0,
+          fontSize: 18,
+          fontWeight: doodleUiFontWeight(700),
+          fontFamily: doodleUiFontFamily,
+          color: sketch.ink,
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+var DialogDescription = react.forwardRef(function DialogDescription2({ style, ...rest }, ref) {
+  const sketch = useDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Dialog__namespace.Description,
+    {
+      ref,
+      style: {
+        margin: 0,
+        fontSize: 14,
+        lineHeight: 1.5,
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        opacity: 0.8,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var AlertDialogSketchContext = react.createContext(null);
+function useAlertDialogSketch() {
+  const ctx = react.useContext(AlertDialogSketchContext);
+  if (!ctx) {
+    throw new Error(
+      "AlertDialog parts must be used inside <AlertDialog>."
+    );
+  }
+  return ctx;
+}
+function AlertDialog({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        open: isOpen
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        AlertDialogPrimitive__namespace.Root,
+        {
+          open: isOpen,
+          onOpenChange: (next) => {
+            setUncontrolled(next);
+            onOpenChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+var AlertDialogOverlay = react.forwardRef(function AlertDialogOverlay2({ style, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  const shouldAnimate = useAnimate(sketch.animate);
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Overlay, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: shouldAnimate ? { opacity: 0 } : false,
+      animate: { opacity: 1 },
+      exit: shouldAnimate ? { opacity: 0 } : void 0,
+      transition: shouldAnimate ? { duration: 0.2, ease: "easeOut" } : { duration: 0 },
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(31, 29, 26, 0.38)",
+        zIndex: 70,
+        ...style
+      }
+    }
+  ) });
+});
+var AlertDialogContent = react.forwardRef(function AlertDialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  const shouldAnimate = useAnimate(sketch.animate);
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPrimitive__namespace.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 80,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
+          padding: 16
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Content, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            className: cn(className),
+            initial: shouldAnimate ? { opacity: 0, scale: 0.96, y: 10 } : false,
+            animate: { opacity: 1, scale: 1, y: 0 },
+            exit: shouldAnimate ? { opacity: 0, scale: 0.96, y: 8 } : void 0,
+            transition: shouldAnimate ? { duration: 0.22, ease: "easeOut" } : { duration: 0 },
+            style: {
+              width: "min(420px, calc(100vw - 32px))",
+              outline: "none",
+              pointerEvents: "auto",
+              ...style
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SketchBox,
+              {
+                roughness: sketch.roughness,
+                seed: sketch.resolvedSeed,
+                sketchColor: sketch.ink,
+                bowing: sketch.bowing,
+                fillStyle: sketch.fillStyle ?? "solid",
+                fill: "#f7f6f2",
+                strokeWidth: sketch.strokeWidth ?? 2,
+                animate: sketch.animate,
+                contentStyle: { padding: 20, ...contentStyle },
+                children
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] }) : null });
+});
+function AlertDialogHeader({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        marginBottom: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+function AlertDialogFooter({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 8,
+        marginTop: 16,
+        ...style
+      },
+      children
+    }
+  );
+}
+var AlertDialogTitle = react.forwardRef(function AlertDialogTitle2({ style, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Title,
+    {
+      ref,
+      style: {
+        margin: 0,
+        fontSize: 18,
+        fontWeight: doodleUiFontWeight(700),
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var AlertDialogDescription = react.forwardRef(function AlertDialogDescription2({ style, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Description,
+    {
+      ref,
+      style: {
+        margin: 0,
+        fontSize: 14,
+        lineHeight: 1.5,
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        opacity: 0.8,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var AlertDialogAction = react.forwardRef(function AlertDialogAction2({ children, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ref,
+      variant: "primary",
+      sketchColor: sketch.sketchColor,
+      roughness: sketch.roughness,
+      seed: sketch.resolvedSeed,
+      bowing: sketch.bowing,
+      animate: sketch.animate,
+      ...rest,
+      children
+    }
+  ) });
+});
+var AlertDialogCancel = react.forwardRef(function AlertDialogCancel2({ children, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ref,
+      variant: "outline",
+      sketchColor: sketch.sketchColor,
+      roughness: sketch.roughness,
+      seed: sketch.resolvedSeed,
+      bowing: sketch.bowing,
+      animate: sketch.animate,
+      ...rest,
+      children
+    }
+  ) });
+});
+var CommandSketchContext = react.createContext(
+  null
+);
+function useCommandSketch() {
+  const ctx = react.useContext(CommandSketchContext);
+  if (!ctx) {
+    throw new Error("Command parts must be used inside <Command>.");
+  }
+  return ctx;
+}
+var Command = react.forwardRef(
+  function Command2({
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommandSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          fillStyle,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          animate
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SketchBox,
+          {
+            className: cn(className),
+            style,
+            roughness,
+            seed: resolvedSeed,
+            sketchColor: ink,
+            bowing,
+            fillStyle: fillStyle ?? "solid",
+            fill: "#f7f6f2",
+            strokeWidth: strokeWidth ?? 1.5,
+            animate,
+            contentStyle: { padding: 0, display: "flex", flexDirection: "column" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command, { ref, ...rest, children })
+          }
+        )
+      }
+    );
+  }
+);
+var CommandInput = react.forwardRef(
+  function CommandInput2({ className, style, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", padding: "10px 12px 12px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        cmdk.CommandInput,
+        {
+          ref,
+          className: cn(className),
+          style: {
+            width: "100%",
+            boxSizing: "border-box",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            color: sketch.ink,
+            fontFamily: doodleUiFontFamily,
+            fontSize: 15,
+            padding: "2px 2px 8px",
+            ...style
+          },
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "command-divider"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.6,
+          strokeWidth: 1.2,
+          inset: 4,
+          style: { position: "absolute", bottom: 0, left: 0, right: 0, height: 8, opacity: 0.4 }
+        }
+      )
+    ] });
+  }
+);
+var CommandList = react.forwardRef(
+  function CommandList2({ className, style, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.CommandList,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          maxHeight: 280,
+          overflowY: "auto",
+          padding: "4px 4px 8px",
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+var CommandEmpty = react.forwardRef(
+  function CommandEmpty2({ className, style, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.CommandEmpty,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          padding: "16px 12px",
+          textAlign: "center",
+          fontFamily: doodleUiFontFamily,
+          fontSize: 14,
+          color: sketch.ink,
+          opacity: 0.6,
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+var CommandGroup = react.forwardRef(
+  function CommandGroup2({ className, style, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.CommandGroup,
+      {
+        ref,
+        className: cn(className),
+        style: { padding: "4px 2px", color: sketch.ink, ...style },
+        ...rest
+      }
+    );
+  }
+);
+var CommandItem = react.forwardRef(
+  function CommandItem2({ className, style, children, onMouseEnter, onMouseLeave, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    const [highlighted, setHighlighted] = react.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      cmdk.CommandItem,
+      {
+        ref,
+        className: cn(className),
+        onMouseEnter: (event) => {
+          setHighlighted(true);
+          onMouseEnter?.(event);
+        },
+        onMouseLeave: (event) => {
+          setHighlighted(false);
+          onMouseLeave?.(event);
+        },
+        style: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "7px 10px",
+          borderRadius: 4,
+          fontFamily: doodleUiFontFamily,
+          fontSize: 14,
+          color: sketch.ink,
+          cursor: "pointer",
+          userSelect: "none",
+          outline: "none",
+          ...style
+        },
+        ...rest,
+        children: [
+          highlighted ? /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "line",
+              roughness: (sketch.roughness ?? 1.5) + 0.4,
+              seed: sketch.resolvedSeed,
+              sketchColor: sketch.ink,
+              bowing: sketch.bowing ?? 1.6,
+              strokeWidth: 1.3,
+              inset: 3,
+              style: { opacity: 0.4 }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1, flex: 1 }, children })
+        ]
+      }
+    );
+  }
+);
+var CommandSeparator = react.forwardRef(function CommandSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useCommandSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.CommandSeparator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 4px", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "command-separator"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: 1.2,
+          inset: 4,
+          style: { opacity: 0.4 }
+        }
+      )
+    }
+  );
+});
+function CommandShortcut({
+  children,
+  className,
+  style
+}) {
+  const sketch = useCommandSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(className),
+      style: {
+        marginLeft: "auto",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        color: sketch.ink,
+        opacity: 0.5,
+        letterSpacing: 0.4,
+        ...style
+      },
+      children
+    }
+  );
+}
+var CHEVRON_PATH5 = "M 4 6 L 10 12 L 16 6";
+function Combobox({
+  options,
+  placeholder = "Select\u2026",
+  searchPlaceholder = "Search\u2026",
+  emptyMessage = "No results.",
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
+  const selectedValue = value ?? uncontrolled;
+  const selectedOption = options.find(
+    (option) => option.value === selectedValue
+  );
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const resolvedSeed = useResolvedSeed(seed);
+  const shouldAnimate = useAnimate(animate);
+  const triggerRef = react.useRef(null);
+  useDrawIn(triggerRef, DRAW_IN_DURATION_MS, shouldAnimate);
+  function handleSelect(nextValue) {
+    setUncontrolled(nextValue);
+    onValueChange?.(nextValue);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: (node) => assignRef(triggerRef, node),
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-label": ariaLabel,
+        disabled,
+        className: cn(className),
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          width: "100%",
+          minWidth: 200,
+          minHeight: 38,
+          padding: "8px 12px",
+          border: "none",
+          background: "transparent",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          color: ink,
+          fontFamily: doodleUiFontFamily,
+          fontSize: 15,
+          lineHeight: 1.2,
+          outline: "none",
+          textAlign: "left",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed: resolvedSeed,
+              sketchColor: open ? SKETCH_COLORS.accent : ink,
+              bowing,
+              fillStyle,
+              strokeWidth: open ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                position: "relative",
+                zIndex: 1,
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: selectedOption?.label ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { position: "relative", zIndex: 1, width: 18, height: 18, flexShrink: 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: CHEVRON_PATH5,
+                  roughness: roughness ? roughness * 0.7 : 1.05,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing,
+                  strokeWidth: (strokeWidth ?? 1.6) + 0.2,
+                  inset: 0
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverPrimitive__namespace.Content,
+      {
+        align: "start",
+        sideOffset: 8,
+        style: {
+          zIndex: 80,
+          outline: "none",
+          width: "var(--radix-popover-trigger-width)"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Command,
+          {
+            roughness,
+            seed: resolvedSeed,
+            sketchColor: ink,
+            bowing,
+            fillStyle,
+            strokeWidth,
+            animate,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: searchPlaceholder }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: emptyMessage }),
+                /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                  CommandItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    onSelect: handleSelect,
+                    children: option.label
+                  },
+                  option.value
+                )) })
+              ] })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+var Kbd = react.forwardRef(function Kbd2({
+  children,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SketchBox,
+    {
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        verticalAlign: "middle",
+        ...style
+      },
+      contentStyle: {
+        padding: "2px 7px",
+        fontSize: 11,
+        fontFamily: doodleUiFontFamily,
+        lineHeight: 1.35,
+        letterSpacing: "0.04em"
+      },
+      fill: SKETCH_COLORS.secondaryFill,
+      fillStyle: fillStyle ?? "hachure",
+      roughness,
+      seed,
+      sketchColor: ink,
+      bowing,
+      strokeWidth: strokeWidth ?? 1.3,
+      animate,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "kbd",
+        {
+          ref,
+          style: {
+            border: "none",
+            background: "transparent",
+            padding: 0,
+            font: "inherit",
+            color: "inherit"
+          },
+          children
+        }
+      )
+    }
+  );
+});
+var SPINNER_ARC = "M 12 3 A 9 9 0 1 1 11.5 3";
+var SIZE_PX = {
+  sm: 18,
+  md: 24,
+  lg: 32
+};
+var Spinner = react.forwardRef(
+  function Spinner2({
+    className,
+    style,
+    size = "md",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const px = SIZE_PX[size];
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const shouldSpin = useAnimate(animate);
+    const boxStyle = {
+      position: "relative",
+      width: px,
+      height: px,
+      flexShrink: 0,
+      display: "inline-block",
+      ...style
+    };
+    const arc = /* @__PURE__ */ jsxRuntime.jsx(
+      RoughSvg,
+      {
+        shape: "path",
+        path: SPINNER_ARC,
+        width: px,
+        height: px,
+        roughness: roughness ?? 1.6,
+        seed: resolvedSeed,
+        sketchColor: ink,
+        bowing: bowing ?? 1.2,
+        fillStyle,
+        strokeWidth: strokeWidth ?? 2,
+        inset: 2
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-label": "Loading",
+        className: cn(className),
+        style: boxStyle,
+        ...rest,
+        children: shouldSpin ? /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            style: { position: "absolute", inset: 0 },
+            animate: { rotate: 360 },
+            transition: {
+              duration: 0.9,
+              ease: "linear",
+              repeat: Infinity
+            },
+            children: arc
+          }
+        ) : arc
+      }
+    );
+  }
+);
+var SIZE_STYLES2 = {
+  sm: { fontSize: 13, padding: "4px 10px", minHeight: 30 },
+  md: { fontSize: 15, padding: "7px 14px", minHeight: 38 },
+  lg: { fontSize: 17, padding: "10px 18px", minHeight: 46 }
+};
+var Toggle = react.forwardRef(
+  function Toggle2({
+    className,
+    style,
+    size = "md",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    pressed,
+    defaultPressed,
+    onPressedChange,
+    disabled,
+    animate,
+    children,
+    ...rest
+  }, ref) {
+    const rootRef = react.useRef(null);
+    const [uncontrolled, setUncontrolled] = react.useState(defaultPressed === true);
+    const isPressed = pressed ?? uncontrolled;
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const pressSeed = deriveSeed(resolvedSeed, isPressed ? "on" : "off");
+    const sketchSeed = shouldAnimate ? pressSeed : resolvedSeed;
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      TogglePrimitive__namespace.Root,
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
+        pressed,
+        defaultPressed,
+        onPressedChange: (next) => {
+          setUncontrolled(next);
+          onPressedChange?.(next);
+        },
+        disabled,
+        className: cn(className),
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          border: "none",
+          background: "transparent",
+          cursor: disabled ? "not-allowed" : "pointer",
+          color: ink,
+          fontFamily: doodleUiFontFamily,
+          fontWeight: doodleUiFontWeight(600),
+          opacity: disabled ? 0.45 : 1,
+          outline: "none",
+          ...SIZE_STYLES2[size],
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed: sketchSeed,
+              sketchColor: isPressed ? SKETCH_COLORS.accent : ink,
+              bowing,
+              fillStyle: fillStyle ?? "hachure",
+              fill: isPressed ? SKETCH_COLORS.accentFill : void 0,
+              strokeWidth: strokeWidth ?? 1.6
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+        ]
+      }
+    );
+  }
+);
+var ToggleGroupSketchContext = react.createContext(null);
+function useToggleGroupSketch() {
+  const ctx = react.useContext(ToggleGroupSketchContext);
+  if (!ctx) {
+    throw new Error("ToggleGroupItem must be used inside <ToggleGroup>.");
+  }
+  return ctx;
+}
+function ToggleGroup(props) {
+  const {
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    size = "md",
+    animate,
+    type = "single",
+    ...rest
+  } = props;
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const rootStyle = { display: "inline-flex", gap: 6, flexWrap: "wrap" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        size
+      },
+      children: type === "multiple" ? /* @__PURE__ */ jsxRuntime.jsx(
+        ToggleGroupPrimitive__namespace.Root,
+        {
+          type: "multiple",
+          style: rootStyle,
+          ...rest,
+          children
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        ToggleGroupPrimitive__namespace.Root,
+        {
+          type: "single",
+          style: rootStyle,
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var ITEM_SIZE = {
+  sm: { fontSize: 13, padding: "4px 10px", minHeight: 30 },
+  md: { fontSize: 15, padding: "7px 14px", minHeight: 38 },
+  lg: { fontSize: 17, padding: "10px 18px", minHeight: 46 }
+};
+var ToggleGroupItem = react.forwardRef(function ToggleGroupItem2({ className, style, children, value, disabled, ...rest }, ref) {
+  const sketch = useToggleGroupSketch();
+  const rootRef = react.useRef(null);
+  const [pressed, setPressed] = react.useState(false);
+  const shouldAnimate = useAnimate(sketch.animate);
+  const pressSeed = deriveSeed(
+    sketch.resolvedSeed,
+    `${value}-${pressed ? "on" : "off"}`
+  );
+  const sketchSeed = shouldAnimate ? pressSeed : sketch.resolvedSeed;
+  react.useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const sync = () => setPressed(el.getAttribute("data-state") === "on");
+    sync();
+    const obs = new MutationObserver(sync);
+    obs.observe(el, { attributes: true, attributeFilter: ["data-state"] });
+    return () => obs.disconnect();
+  }, [value]);
+  useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ToggleGroupPrimitive__namespace.Item,
+    {
+      ref: (node) => {
+        rootRef.current = node;
+        assignRef(ref, node);
+      },
+      value,
+      disabled,
+      className: cn(className),
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "none",
+        background: "transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        color: sketch.ink,
+        fontFamily: doodleUiFontFamily,
+        fontWeight: doodleUiFontWeight(600),
+        opacity: disabled ? 0.45 : 1,
+        outline: "none",
+        ...ITEM_SIZE[sketch.size],
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "rectangle",
+            roughness: sketch.roughness,
+            seed: sketchSeed,
+            sketchColor: pressed ? SKETCH_COLORS.accent : sketch.ink,
+            bowing: sketch.bowing,
+            fillStyle: sketch.fillStyle ?? "hachure",
+            fill: pressed ? SKETCH_COLORS.accentFill : void 0,
+            strokeWidth: sketch.strokeWidth ?? 1.6
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var InputGroupSketchContext = react.createContext(null);
+function useInputGroupSketch() {
+  const ctx = react.useContext(InputGroupSketchContext);
+  if (!ctx) {
+    throw new Error("InputGroup parts must be used inside <InputGroup>.");
+  }
+  return ctx;
+}
+function InputGroup({
+  children,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const [focused, setFocused] = react.useState(false);
+  const shouldAnimate = useAnimate(animate);
+  const focusSeed = deriveSeed(resolvedSeed, "focus");
+  const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputGroupSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        focused,
+        setFocused
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(className),
+          style: { position: "relative", width: "100%", ...style },
+          onFocus: (event) => {
+            setFocused(true);
+            onFocus?.(event);
+          },
+          onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              setFocused(false);
+            }
+            onBlur?.(event);
+          },
+          ...rest,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            SketchBox,
+            {
+              roughness,
+              seed: sketchSeed,
+              sketchColor: focused ? SKETCH_COLORS.accent : ink,
+              bowing,
+              fillStyle,
+              strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth,
+              animate,
+              drawInKey: sketchSeed,
+              contentStyle: {
+                display: "flex",
+                alignItems: "stretch",
+                minHeight: 38
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var InputGroupAddon = react.forwardRef(
+  function InputGroupAddon2({ className, style, align = "inline-start", children, ...rest }, ref) {
+    const sketch = useInputGroupSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn(className),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          padding: align === "inline-start" ? "0 0 0 10px" : "0 10px 0 0",
+          fontFamily: doodleUiFontFamily,
+          fontSize: 14,
+          color: sketch.ink,
+          flexShrink: 0,
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var InputGroupInput = react.forwardRef(function InputGroupInput2({ className, style, ...rest }, ref) {
+  const sketch = useInputGroupSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        flex: 1,
+        minWidth: 0,
+        border: "none",
+        outline: "none",
+        background: "transparent",
+        color: sketch.ink,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 15,
+        padding: "8px 10px",
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var InputGroupButton = react.forwardRef(function InputGroupButton2({ className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "0 6px 0 0",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var InputOTPSketchContext = react.createContext(
+  null
+);
+function useInputOTPSketch() {
+  const ctx = react.useContext(InputOTPSketchContext);
+  if (!ctx) {
+    throw new Error("InputOTP parts must be used inside <InputOTP>.");
+  }
+  return ctx;
+}
+var InputOTP = react.forwardRef(
+  function InputOTP2({
+    className,
+    containerClassName,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    animate,
+    children,
+    ...rest
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InputOTPSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          fillStyle,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          animate
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          inputOtp.OTPInput,
+          {
+            ref,
+            containerClassName: cn(className, containerClassName),
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var InputOTPGroup = react.forwardRef(
+  function InputOTPGroup2({ className, style, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        style: { display: "flex", alignItems: "center", gap: 8, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var InputOTPSlot = react.forwardRef(
+  function InputOTPSlot2({ index, className, style, ...rest }, ref) {
+    const inputContext = react.useContext(inputOtp.OTPInputContext);
+    const sketch = useInputOTPSketch();
+    const slotRef = react.useRef(null);
+    const shouldAnimate = useAnimate(sketch.animate);
+    const { char, isActive, hasFakeCaret } = inputContext?.slots[index] ?? {
+      char: null,
+      isActive: false,
+      hasFakeCaret: false
+    };
+    const slotSeed = deriveSeed(
+      sketch.resolvedSeed,
+      `slot-${index}-${isActive ? "active" : "idle"}`
+    );
+    useDrawIn(slotRef, DRAW_IN_DURATION_MS, shouldAnimate, slotSeed);
+    if (!inputContext) {
+      throw new Error("InputOTPSlot must be used inside <InputOTP>.");
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: (node) => {
+          slotRef.current = node;
+          assignRef(ref, node);
+        },
+        className: cn(className),
+        style: {
+          position: "relative",
+          width: 40,
+          height: 44,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontFamily: doodleUiFontFamily,
+          fontSize: 18,
+          color: sketch.ink,
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness: sketch.roughness,
+              seed: slotSeed,
+              sketchColor: isActive ? SKETCH_COLORS.accent : sketch.ink,
+              bowing: sketch.bowing,
+              fillStyle: sketch.fillStyle,
+              strokeWidth: isActive ? (sketch.strokeWidth ?? 1.75) + 0.15 : sketch.strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { position: "relative", zIndex: 1 }, children: [
+            char,
+            hasFakeCaret ? /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.span,
+              {
+                "aria-hidden": true,
+                style: {
+                  display: "inline-block",
+                  width: 2,
+                  height: "0.85em",
+                  marginLeft: 2,
+                  background: sketch.ink,
+                  verticalAlign: "middle"
+                },
+                animate: shouldAnimate ? { opacity: [1, 0, 1] } : { opacity: 1 },
+                transition: shouldAnimate ? { duration: 1, repeat: Infinity, ease: "linear" } : void 0
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+var InputOTPSeparator = react.forwardRef(function InputOTPSeparator2({ children = "\u2013", className, style, ...rest }, ref) {
+  const sketch = useInputOTPSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      role: "separator",
+      className: cn(className),
+      style: {
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        opacity: 0.5,
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var ScrollAreaSketchContext = react.createContext(null);
+function useScrollAreaSketch() {
+  const ctx = react.useContext(ScrollAreaSketchContext);
+  if (!ctx) {
+    throw new Error("ScrollArea parts must be used inside <ScrollArea>.");
+  }
+  return ctx;
+}
+var ScrollArea = react.forwardRef(function ScrollArea2({
+  className,
+  style,
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ScrollAreaPrimitive__namespace.Root,
+        {
+          ref,
+          className: cn(className),
+          style: { position: "relative", overflow: "hidden", ...style },
+          ...rest,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            SketchBox,
+            {
+              roughness,
+              seed: resolvedSeed,
+              sketchColor: ink,
+              bowing,
+              fillStyle: fillStyle ?? "solid",
+              fill: "#f7f6f2",
+              strokeWidth: strokeWidth ?? 1.5,
+              animate,
+              contentStyle: { padding: 0, height: "100%" },
+              style: { height: "100%" },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+});
+var ScrollAreaViewport = react.forwardRef(function ScrollAreaViewport2({ className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaPrimitive__namespace.Viewport,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        width: "100%",
+        height: "100%",
+        borderRadius: 0,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var ScrollBar = react.forwardRef(
+  function ScrollBar2({ className, style, orientation = "vertical", ...rest }, ref) {
+    const sketch = useScrollAreaSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+      {
+        ref,
+        orientation,
+        className: cn(className),
+        style: {
+          display: "flex",
+          touchAction: "none",
+          userSelect: "none",
+          padding: 2,
+          ...orientation === "vertical" ? { width: 12, flexDirection: "column" } : { height: 12, flexDirection: "row" },
+          ...style
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: orientation === "vertical" ? "line-vertical" : "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.3,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing,
+            strokeWidth: sketch.strokeWidth ?? 2.2,
+            inset: 1
+          }
+        ) }) })
+      }
+    );
+  }
+);
+var ScrollAreaCorner = ScrollAreaPrimitive__namespace.Corner;
+function ResizablePanelGroup({
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResizablePrimitive__namespace.PanelGroup,
+    {
+      className: cn(className),
+      style: { display: "flex", width: "100%", height: "100%", ...style },
+      ...rest
+    }
+  );
+}
+var ResizablePanel = ResizablePrimitive__namespace.Panel;
+function ResizableHandle({
+  className,
+  style,
+  withHandle = true,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  strokeWidth,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const handleSeed = deriveSeed(resolvedSeed, "handle");
+  const base = {
+    position: "relative",
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "transparent",
+    touchAction: "none",
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResizablePrimitive__namespace.PanelResizeHandle,
+    {
+      className: cn(className),
+      style: base,
+      ...rest,
+      children: withHandle ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: 14,
+            height: 28,
+            zIndex: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "line-vertical",
+                roughness: roughness ?? 1.8,
+                seed: handleSeed,
+                sketchColor: ink,
+                bowing: bowing ?? 1.5,
+                strokeWidth: strokeWidth ?? 2.4,
+                width: 14,
+                height: 28,
+                inset: 2
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "ellipse",
+                roughness: (roughness ?? 1.5) + 0.2,
+                seed: deriveSeed(handleSeed, "dot-a"),
+                sketchColor: ink,
+                width: 14,
+                height: 28,
+                strokeWidth: 1.2,
+                inset: 5,
+                style: { opacity: 0.55 }
+              }
+            )
+          ]
+        }
+      ) : null
+    }
+  );
+}
+var HoverCardSketchContext = react.createContext(
+  null
+);
+function useHoverCardSketch() {
+  const ctx = react.useContext(HoverCardSketchContext);
+  if (!ctx) {
+    throw new Error("HoverCard parts must be used inside <HoverCard>.");
+  }
+  return ctx;
+}
+function HoverCard({
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HoverCardSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardPrimitive__namespace.Root, { ...rest, children })
+    }
+  );
+}
+var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
+var HoverCardContent = react.forwardRef(function HoverCardContent2({ className, style, children, sideOffset = 6, align = "center", ...rest }, ref) {
+  const sketch = useHoverCardSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(HoverCardPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    HoverCardPrimitive__namespace.Content,
+    {
+      ref,
+      sideOffset,
+      align,
+      className: cn(className),
+      style: { zIndex: 75, outline: "none", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SketchBox,
+        {
+          roughness: sketch.roughness,
+          seed: sketch.resolvedSeed,
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing,
+          fillStyle: sketch.fillStyle ?? "solid",
+          fill: "#f7f6f2",
+          strokeWidth: sketch.strokeWidth ?? 1.5,
+          shadow: true,
+          animate: sketch.animate,
+          contentStyle: { padding: 14, maxWidth: 320, fontSize: 14 },
+          children
+        }
+      )
+    }
+  ) });
+});
+var HoverCardArrow = HoverCardPrimitive__namespace.Arrow;
+var ContextMenuSketchContext = react.createContext(null);
+function useContextMenuSketch() {
+  const ctx = react.useContext(ContextMenuSketchContext);
+  if (!ctx) {
+    throw new Error(
+      "ContextMenu parts must be used inside <ContextMenu>."
+    );
+  }
+  return ctx;
+}
+function ContextMenu({
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenuSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Root, { ...rest, children })
+    }
+  );
+}
+var ContextMenuTrigger = ContextMenuPrimitive__namespace.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive__namespace.Group;
+var ContextMenuRadioGroup = ContextMenuPrimitive__namespace.RadioGroup;
+var ContextMenuSub = ContextMenuPrimitive__namespace.Sub;
+var ContextMenuContent = react.forwardRef(function ContextMenuContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useContextMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenuPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(className),
+      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SketchBox,
+        {
+          roughness: sketch.roughness,
+          seed: sketch.resolvedSeed,
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing,
+          fillStyle: sketch.fillStyle ?? "solid",
+          fill: "#f7f6f2",
+          strokeWidth: sketch.strokeWidth ?? 1.5,
+          shadow: true,
+          animate: sketch.animate,
+          contentStyle: { padding: "6px 4px" },
+          children
+        }
+      )
+    }
+  ) });
+});
+function useMark2(highlighted) {
+  const sketch = useContextMenuSketch();
+  return { sketch, mark: highlighted };
+}
+var ContextMenuItem = react.forwardRef(function ContextMenuItem2({ className, style, children, inset, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark2(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ContextMenuPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      onFocus: () => setHighlighted(true),
+      onBlur: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: inset ? "7px 12px 7px 26px" : "7px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var CHECK_PATH3 = "M 2 6 L 5 9 L 10 3";
+var ContextMenuCheckboxItem = react.forwardRef(function ContextMenuCheckboxItem2({ className, style, children, checked, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark2(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ContextMenuPrimitive__namespace.CheckboxItem,
+    {
+      ref,
+      checked,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "7px 12px 7px 26px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 12,
+              height: 12,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: CHECK_PATH3,
+                roughness: (sketch.roughness ?? 1.5) * 0.7,
+                seed: deriveSeed(sketch.resolvedSeed, "checkbox-mark"),
+                sketchColor: SKETCH_COLORS.accent,
+                bowing: sketch.bowing,
+                strokeWidth: 1.6,
+                inset: 0
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var ContextMenuRadioItem = react.forwardRef(function ContextMenuRadioItem2({ className, style, children, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark2(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ContextMenuPrimitive__namespace.RadioItem,
+    {
+      ref,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "7px 12px 7px 26px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 8,
+              height: 8,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "ellipse",
+                roughness: (sketch.roughness ?? 1.5) * 0.8,
+                seed: deriveSeed(sketch.resolvedSeed, "radio-mark"),
+                sketchColor: SKETCH_COLORS.accent,
+                bowing: sketch.bowing,
+                fillStyle: "solid",
+                fill: SKETCH_COLORS.accent,
+                strokeWidth: 1.2,
+                inset: 0
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var ContextMenuLabel = react.forwardRef(function ContextMenuLabel2({ className, style, children, ...rest }, ref) {
+  const sketch = useContextMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenuPrimitive__namespace.Label,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "6px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        fontWeight: 700,
+        color: sketch.ink,
+        opacity: 0.6,
+        textTransform: "uppercase",
+        letterSpacing: 0.4,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var ContextMenuSeparator = react.forwardRef(function ContextMenuSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useContextMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenuPrimitive__namespace.Separator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 0", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "separator"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: 1.2,
+          inset: 6,
+          style: { opacity: 0.5 }
+        }
+      )
+    }
+  );
+});
+var NavigationMenuSketchContext = react.createContext(null);
+function useNavigationMenuSketch() {
+  const ctx = react.useContext(NavigationMenuSketchContext);
+  if (!ctx) {
+    throw new Error("NavigationMenu parts must be used inside <NavigationMenu>.");
+  }
+  return ctx;
+}
+function NavigationMenu({
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenuSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuPrimitive__namespace.Root, { ...rest, children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuViewport, {})
+      ] })
+    }
+  );
+}
+var NavigationMenuList = react.forwardRef(function NavigationMenuList2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenuPrimitive__namespace.List,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var NavigationMenuItem = NavigationMenuPrimitive__namespace.Item;
+var NavigationMenuTrigger = react.forwardRef(function NavigationMenuTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenuPrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        position: "relative",
+        border: "none",
+        background: "transparent",
+        fontFamily: doodleUiFontFamily,
+        fontWeight: doodleUiFontWeight(600),
+        fontSize: 14,
+        color: sketch.ink,
+        padding: "8px 12px",
+        cursor: "pointer",
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var NavigationMenuContent = react.forwardRef(function NavigationMenuContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenuPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(className),
+      style: { outline: "none", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SketchBox,
+        {
+          roughness: sketch.roughness,
+          seed: sketch.resolvedSeed,
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing,
+          fillStyle: sketch.fillStyle ?? "solid",
+          fill: "#f7f6f2",
+          strokeWidth: sketch.strokeWidth ?? 1.5,
+          shadow: true,
+          animate: sketch.animate,
+          contentStyle: { padding: 12, minWidth: 200 },
+          children
+        }
+      )
+    }
+  );
+});
+var NavigationMenuLink = NavigationMenuPrimitive__namespace.Link;
+var NavigationMenuViewport = react.forwardRef(function NavigationMenuViewport2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: "100%", left: 0, perspective: 2e3 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenuPrimitive__namespace.Viewport,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        position: "relative",
+        marginTop: 6,
+        overflow: "hidden",
+        ...style
+      },
+      ...rest
+    }
+  ) });
+});
+var NavigationMenuIndicator = react.forwardRef(function NavigationMenuIndicator2({ className, style, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenuPrimitive__namespace.Indicator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 6, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "nav-indicator"),
+          sketchColor: sketch.ink,
+          strokeWidth: 2,
+          inset: 2
+        }
+      )
+    }
+  );
+});
+var NavigationMenuItemLink = react.forwardRef(function NavigationMenuItemLink2({ className, style, active, children, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  const [hovered, setHovered] = react.useState(false);
+  const showMark = active || hovered;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    NavigationMenuPrimitive__namespace.Link,
+    {
+      ref,
+      className: cn(className),
+      onPointerEnter: () => setHovered(true),
+      onPointerLeave: () => setHovered(false),
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        padding: "8px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        textDecoration: "none",
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        showMark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.3,
+            seed: deriveSeed(sketch.resolvedSeed, "nav-link"),
+            sketchColor: sketch.ink,
+            strokeWidth: 1.4,
+            inset: 4,
+            style: { opacity: 0.35 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var MenubarSketchContext = react.createContext(
+  null
+);
+function useMenubarSketch() {
+  const ctx = react.useContext(MenubarSketchContext);
+  if (!ctx) {
+    throw new Error("Menubar parts must be used inside <Menubar>.");
+  }
+  return ctx;
+}
+function Menubar({
+  children,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenubarSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        MenubarPrimitive__namespace.Root,
+        {
+          className: cn(className),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            padding: 4,
+            ...style
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var MenubarMenu = MenubarPrimitive__namespace.Menu;
+var MenubarTrigger = react.forwardRef(function MenubarTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenubarPrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        border: "none",
+        background: "transparent",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        padding: "6px 10px",
+        cursor: "pointer",
+        color: sketch.ink,
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var MenubarContent = react.forwardRef(function MenubarContent2({ className, style, children, align = "start", sideOffset = 6, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(MenubarPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    MenubarPrimitive__namespace.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(className),
+      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SketchBox,
+        {
+          roughness: sketch.roughness,
+          seed: sketch.resolvedSeed,
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing,
+          fillStyle: sketch.fillStyle ?? "solid",
+          fill: "#f7f6f2",
+          strokeWidth: sketch.strokeWidth ?? 1.5,
+          shadow: true,
+          animate: sketch.animate,
+          contentStyle: { padding: "6px 4px" },
+          children
+        }
+      )
+    }
+  ) });
+});
+function useMark3(highlighted) {
+  const sketch = useMenubarSketch();
+  return { sketch, mark: highlighted };
+}
+var MenubarItem = react.forwardRef(function MenubarItem2({ className, style, children, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark3(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MenubarPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "7px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var MenubarSeparator = react.forwardRef(function MenubarSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenubarPrimitive__namespace.Separator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 0", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "separator"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: 1.2,
+          inset: 6,
+          style: { opacity: 0.5 }
+        }
+      )
+    }
+  );
+});
+var MenubarLabel = react.forwardRef(function MenubarLabel2({ className, style, children, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenubarPrimitive__namespace.Label,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "6px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        fontWeight: 700,
+        color: sketch.ink,
+        opacity: 0.6,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var MenubarShortcut = react.forwardRef(function MenubarShortcut2({ className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        marginLeft: "auto",
+        fontSize: 12,
+        opacity: 0.55,
+        letterSpacing: 0.04,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var MenubarSub = MenubarPrimitive__namespace.Sub;
+var MenubarSubTrigger = MenubarPrimitive__namespace.SubTrigger;
+var MenubarSubContent = MenubarPrimitive__namespace.SubContent;
+var MenubarCheckboxItem = MenubarPrimitive__namespace.CheckboxItem;
+var MenubarRadioGroup = MenubarPrimitive__namespace.RadioGroup;
+var MenubarRadioItem = MenubarPrimitive__namespace.RadioItem;
+var SlidingPanelSketchContext = react.createContext(null);
+function useSlidingPanelSketch() {
+  const ctx = react.useContext(SlidingPanelSketchContext);
+  if (!ctx) {
+    throw new Error("Sliding panel parts must be used inside the panel root.");
+  }
+  return ctx;
+}
+function SlidingPanelRoot({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  side = "right",
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SlidingPanelSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        open: isOpen,
+        side
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Dialog__namespace.Root,
+        {
+          open: isOpen,
+          onOpenChange: (next) => {
+            setUncontrolled(next);
+            onOpenChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var SlidingPanelTrigger = Dialog__namespace.Trigger;
+var SlidingPanelClose = Dialog__namespace.Close;
+function slideVariants(side, shouldAnimate) {
+  if (!shouldAnimate) {
+    return { hidden: {}, visible: {} };
+  }
+  const offset = 420;
+  const hidden = side === "left" ? { x: -offset } : side === "right" ? { x: offset } : side === "top" ? { y: -offset } : { y: offset };
+  return {
+    hidden: { ...hidden, opacity: 0.85 },
+    visible: { x: 0, y: 0, opacity: 1 }
+  };
+}
+function panelPosition(side) {
+  switch (side) {
+    case "left":
+      return {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: "min(420px, 100vw)"
+      };
+    case "right":
+      return {
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: "min(420px, 100vw)"
+      };
+    case "top":
+      return {
+        top: 0,
+        left: 0,
+        right: 0,
+        height: "min(420px, 90vh)"
+      };
+    default:
+      return {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "min(420px, 90vh)"
+      };
+  }
+}
+var SlidingPanelOverlay = react.forwardRef(function SlidingPanelOverlay2({ style, ...rest }, ref) {
+  const sketch = useSlidingPanelSketch();
+  const shouldAnimate = useAnimate(sketch.animate);
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: shouldAnimate ? { opacity: 0 } : false,
+      animate: { opacity: 1 },
+      exit: shouldAnimate ? { opacity: 0 } : void 0,
+      transition: shouldAnimate ? { duration: 0.22, ease: "easeOut" } : { duration: 0 },
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(31, 29, 26, 0.38)",
+        zIndex: 70,
+        ...style
+      }
+    }
+  ) });
+});
+var SlidingPanelContent = react.forwardRef(function SlidingPanelContent2({ className, style, contentStyle, children, chrome, ...rest }, ref) {
+  const sketch = useSlidingPanelSketch();
+  const shouldAnimate = useAnimate(sketch.animate);
+  const variants = slideVariants(sketch.side, shouldAnimate);
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SlidingPanelOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: cn(className),
+        initial: shouldAnimate ? "hidden" : false,
+        animate: "visible",
+        exit: shouldAnimate ? "hidden" : void 0,
+        variants,
+        transition: shouldAnimate ? { duration: 0.28, ease: "easeOut" } : { duration: 0 },
+        style: {
+          position: "fixed",
+          zIndex: 80,
+          outline: "none",
+          pointerEvents: "auto",
+          ...panelPosition(sketch.side),
+          ...style
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          SketchBox,
+          {
+            roughness: sketch.roughness,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing,
+            fillStyle: sketch.fillStyle ?? "solid",
+            fill: "#f7f6f2",
+            strokeWidth: sketch.strokeWidth ?? 2,
+            animate: sketch.animate,
+            contentStyle: {
+              padding: 20,
+              height: "100%",
+              boxSizing: "border-box",
+              display: "flex",
+              flexDirection: "column",
+              ...contentStyle
+            },
+            style: { height: "100%" },
+            children: [
+              chrome,
+              children
+            ]
+          }
+        )
+      }
+    ) })
+  ] }) : null });
+});
+function SlidingPanelHeader({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        marginBottom: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+function SlidingPanelFooter({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        gap: 8,
+        marginTop: "auto",
+        paddingTop: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+var SlidingPanelTitle = react.forwardRef(function SlidingPanelTitle2({ className, style, ...rest }, ref) {
+  const sketch = useSlidingPanelSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Dialog__namespace.Title,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontWeight: doodleUiFontWeight(700),
+        fontSize: 20,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var SlidingPanelDescription = react.forwardRef(function SlidingPanelDescription2({ className, style, ...rest }, ref) {
+  const sketch = useSlidingPanelSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Dialog__namespace.Description,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        opacity: 0.75,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+function Sheet({ side = "right", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SlidingPanelRoot, { side, ...rest });
+}
+var SheetTrigger = SlidingPanelTrigger;
+var SheetClose = SlidingPanelClose;
+var SheetContent = react.forwardRef(
+  function SheetContent2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SlidingPanelContent, { ref, ...props });
+  }
+);
+var SheetHeader = SlidingPanelHeader;
+var SheetFooter = SlidingPanelFooter;
+var SheetTitle = SlidingPanelTitle;
+var SheetDescription = SlidingPanelDescription;
+function Drawer(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SlidingPanelRoot, { side: "bottom", ...props });
+}
+var DrawerTrigger = SlidingPanelTrigger;
+var DrawerClose = SlidingPanelClose;
+var DrawerHandle = react.forwardRef(
+  function DrawerHandle2({ className }, ref) {
+    const sketch = useSlidingPanelSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className,
+        style: {
+          position: "relative",
+          width: 48,
+          height: 10,
+          margin: "0 auto 12px"
+        },
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.3,
+            seed: deriveSeed(sketch.resolvedSeed, "drawer-handle"),
+            sketchColor: sketch.sketchColor ?? SKETCH_COLORS.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 2.4,
+            width: 48,
+            height: 10,
+            inset: 2
+          }
+        )
+      }
+    );
+  }
+);
+var DrawerContent = react.forwardRef(
+  function DrawerContent2({ children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SlidingPanelContent,
+      {
+        ref,
+        chrome: /* @__PURE__ */ jsxRuntime.jsx(DrawerHandle, {}),
+        contentStyle: { paddingTop: 8 },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var DrawerHeader = SlidingPanelHeader;
+var DrawerFooter = SlidingPanelFooter;
+var DrawerTitle = SlidingPanelTitle;
+var DrawerDescription = SlidingPanelDescription;
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
 exports.AccordionTrigger = AccordionTrigger;
 exports.Alert = Alert;
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogOverlay = AlertDialogOverlay;
+exports.AlertDialogPortal = AlertDialogPortal;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
@@ -3745,6 +7255,29 @@ exports.BreadcrumbItem = BreadcrumbItem;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.Combobox = Combobox;
+exports.Command = Command;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuGroup = ContextMenuGroup;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuLabel = ContextMenuLabel;
+exports.ContextMenuRadioGroup = ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = ContextMenuRadioItem;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.ContextMenuSub = ContextMenuSub;
+exports.ContextMenuTrigger = ContextMenuTrigger;
 exports.DEFAULT_BOWING = DEFAULT_BOWING;
 exports.DEFAULT_INK = DEFAULT_INK;
 exports.DEFAULT_ROUGHNESS = DEFAULT_ROUGHNESS;
@@ -3753,21 +7286,101 @@ exports.DRAW_IN_ALERT_MS = DRAW_IN_ALERT_MS;
 exports.DRAW_IN_DURATION_MS = DRAW_IN_DURATION_MS;
 exports.DRAW_IN_MARK_MS = DRAW_IN_MARK_MS;
 exports.DRAW_IN_TOOLTIP_MS = DRAW_IN_TOOLTIP_MS;
+exports.Dialog = Dialog2;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
 exports.Divider = Divider;
 exports.DoodleUIProvider = DoodleUIProvider;
+exports.Drawer = Drawer;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHandle = DrawerHandle;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuSub = DropdownMenuSub;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.HoverCard = HoverCard;
+exports.HoverCardArrow = HoverCardArrow;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;
 exports.Input = Input;
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPSeparator = InputOTPSeparator;
+exports.InputOTPSlot = InputOTPSlot;
+exports.Kbd = Kbd;
+exports.Label = Label2;
+exports.Menubar = Menubar;
+exports.MenubarCheckboxItem = MenubarCheckboxItem;
+exports.MenubarContent = MenubarContent;
+exports.MenubarItem = MenubarItem;
+exports.MenubarLabel = MenubarLabel;
+exports.MenubarMenu = MenubarMenu;
+exports.MenubarRadioGroup = MenubarRadioGroup;
+exports.MenubarRadioItem = MenubarRadioItem;
+exports.MenubarSeparator = MenubarSeparator;
+exports.MenubarShortcut = MenubarShortcut;
+exports.MenubarSub = MenubarSub;
+exports.MenubarSubContent = MenubarSubContent;
+exports.MenubarSubTrigger = MenubarSubTrigger;
+exports.MenubarTrigger = MenubarTrigger;
 exports.Modal = Modal;
 exports.ModalClose = ModalClose;
 exports.ModalDescription = ModalDescription;
 exports.ModalRoot = ModalRoot;
 exports.ModalTitle = ModalTitle;
 exports.ModalTrigger = ModalTrigger;
+exports.NavigationMenu = NavigationMenu;
+exports.NavigationMenuContent = NavigationMenuContent;
+exports.NavigationMenuIndicator = NavigationMenuIndicator;
+exports.NavigationMenuItem = NavigationMenuItem;
+exports.NavigationMenuItemLink = NavigationMenuItemLink;
+exports.NavigationMenuLink = NavigationMenuLink;
+exports.NavigationMenuList = NavigationMenuList;
+exports.NavigationMenuTrigger = NavigationMenuTrigger;
+exports.NavigationMenuViewport = NavigationMenuViewport;
 exports.Pagination = Pagination;
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverArrow = PopoverArrow;
+exports.PopoverClose = PopoverClose;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.ResizableHandle = ResizableHandle;
+exports.ResizablePanel = ResizablePanel;
+exports.ResizablePanelGroup = ResizablePanelGroup;
 exports.RoughSvg = RoughSvg;
 exports.SKETCH_COLORS = SKETCH_COLORS;
+exports.ScrollArea = ScrollArea;
+exports.ScrollAreaCorner = ScrollAreaCorner;
+exports.ScrollAreaViewport = ScrollAreaViewport;
+exports.ScrollBar = ScrollBar;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -3777,10 +7390,19 @@ exports.SelectRoot = SelectRoot;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
+exports.Sheet = Sheet;
+exports.SheetClose = SheetClose;
+exports.SheetContent = SheetContent;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
+exports.SheetTitle = SheetTitle;
+exports.SheetTrigger = SheetTrigger;
 exports.Skeleton = Skeleton;
 exports.SketchBox = SketchBox;
 exports.SketchSeedProvider = SketchSeedProvider;
 exports.Slider = Slider;
+exports.Spinner = Spinner;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
 exports.TABLE_STAGGER_MS = TABLE_STAGGER_MS;
@@ -3803,6 +7425,9 @@ exports.ToastProvider = ToastProvider;
 exports.ToastRoot = ToastRoot;
 exports.ToastTitle = ToastTitle;
 exports.ToastViewport = ToastViewport;
+exports.Toggle = Toggle;
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
 exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;
 exports.deriveSeed = deriveSeed;