doodleui-react 0.4.0 → 0.6.0

package/dist/index.js

@@ -20,6 +20,17 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Command as Command$1, CommandInput as CommandInput$1, CommandList as CommandList$1, CommandEmpty as CommandEmpty$1, CommandGroup as CommandGroup$1, CommandItem as CommandItem$1, CommandSeparator as CommandSeparator$1 } from 'cmdk';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import useEmblaCarousel from 'embla-carousel-react';
 
 // src/types.ts
 function toRoughOptions(props) {
@@ -5175,7 +5186,3335 @@ function Combobox({
     ) })
   ] });
 }
+var Kbd = forwardRef(function Kbd2({
+  children,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ 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__ */ 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 = 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__ */ 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__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-label": "Loading",
+        className: cn(className),
+        style: boxStyle,
+        ...rest,
+        children: shouldSpin ? /* @__PURE__ */ jsx(
+          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 = forwardRef(
+  function Toggle2({
+    className,
+    style,
+    size = "md",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    pressed,
+    defaultPressed,
+    onPressedChange,
+    disabled,
+    animate,
+    children,
+    ...rest
+  }, ref) {
+    const rootRef = useRef(null);
+    const [uncontrolled, setUncontrolled] = 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__ */ jsxs(
+      TogglePrimitive.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__ */ 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__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+        ]
+      }
+    );
+  }
+);
+var ToggleGroupSketchContext = createContext(null);
+function useToggleGroupSketch() {
+  const ctx = 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__ */ jsx(
+    ToggleGroupSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        size
+      },
+      children: type === "multiple" ? /* @__PURE__ */ jsx(
+        ToggleGroupPrimitive.Root,
+        {
+          type: "multiple",
+          style: rootStyle,
+          ...rest,
+          children
+        }
+      ) : /* @__PURE__ */ jsx(
+        ToggleGroupPrimitive.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 = forwardRef(function ToggleGroupItem2({ className, style, children, value, disabled, ...rest }, ref) {
+  const sketch = useToggleGroupSketch();
+  const rootRef = useRef(null);
+  const [pressed, setPressed] = useState(false);
+  const shouldAnimate = useAnimate(sketch.animate);
+  const pressSeed = deriveSeed(
+    sketch.resolvedSeed,
+    `${value}-${pressed ? "on" : "off"}`
+  );
+  const sketchSeed = shouldAnimate ? pressSeed : sketch.resolvedSeed;
+  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__ */ jsxs(
+    ToggleGroupPrimitive.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__ */ 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__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var InputGroupSketchContext = createContext(null);
+function useInputGroupSketch() {
+  const ctx = 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] = useState(false);
+  const shouldAnimate = useAnimate(animate);
+  const focusSeed = deriveSeed(resolvedSeed, "focus");
+  const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
+  return /* @__PURE__ */ jsx(
+    InputGroupSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        focused,
+        setFocused
+      },
+      children: /* @__PURE__ */ 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__ */ 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 = forwardRef(
+  function InputGroupAddon2({ className, style, align = "inline-start", children, ...rest }, ref) {
+    const sketch = useInputGroupSketch();
+    return /* @__PURE__ */ 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 = forwardRef(function InputGroupInput2({ className, style, ...rest }, ref) {
+  const sketch = useInputGroupSketch();
+  return /* @__PURE__ */ 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 = forwardRef(function InputGroupButton2({ className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "0 6px 0 0",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var InputOTPSketchContext = createContext(
+  null
+);
+function useInputOTPSketch() {
+  const ctx = useContext(InputOTPSketchContext);
+  if (!ctx) {
+    throw new Error("InputOTP parts must be used inside <InputOTP>.");
+  }
+  return ctx;
+}
+var InputOTP = 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__ */ jsx(
+      InputOTPSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          fillStyle,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          animate
+        },
+        children: /* @__PURE__ */ jsx(
+          OTPInput,
+          {
+            ref,
+            containerClassName: cn(className, containerClassName),
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var InputOTPGroup = forwardRef(
+  function InputOTPGroup2({ className, style, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        style: { display: "flex", alignItems: "center", gap: 8, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var InputOTPSlot = forwardRef(
+  function InputOTPSlot2({ index, className, style, ...rest }, ref) {
+    const inputContext = useContext(OTPInputContext);
+    const sketch = useInputOTPSketch();
+    const slotRef = 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__ */ 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__ */ 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__ */ jsxs("span", { style: { position: "relative", zIndex: 1 }, children: [
+            char,
+            hasFakeCaret ? /* @__PURE__ */ jsx(
+              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 = forwardRef(function InputOTPSeparator2({ children = "\u2013", className, style, ...rest }, ref) {
+  const sketch = useInputOTPSketch();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "separator",
+      className: cn(className),
+      style: {
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        opacity: 0.5,
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var ScrollAreaSketchContext = createContext(null);
+function useScrollAreaSketch() {
+  const ctx = useContext(ScrollAreaSketchContext);
+  if (!ctx) {
+    throw new Error("ScrollArea parts must be used inside <ScrollArea>.");
+  }
+  return ctx;
+}
+var ScrollArea = 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__ */ jsx(
+    ScrollAreaSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.Root,
+        {
+          ref,
+          className: cn(className),
+          style: { position: "relative", overflow: "hidden", ...style },
+          ...rest,
+          children: /* @__PURE__ */ 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 = forwardRef(function ScrollAreaViewport2({ className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Viewport,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        width: "100%",
+        height: "100%",
+        borderRadius: 0,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var ScrollBar = forwardRef(
+  function ScrollBar2({ className, style, orientation = "vertical", ...rest }, ref) {
+    const sketch = useScrollAreaSketch();
+    return /* @__PURE__ */ jsx(
+      ScrollAreaPrimitive.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__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { asChild: true, children: /* @__PURE__ */ jsx("div", { style: { position: "relative", flex: 1 }, children: /* @__PURE__ */ 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.Corner;
+function ResizablePanelGroup({
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.PanelGroup,
+    {
+      className: cn(className),
+      style: { display: "flex", width: "100%", height: "100%", ...style },
+      ...rest
+    }
+  );
+}
+var ResizablePanel = ResizablePrimitive.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__ */ jsx(
+    ResizablePrimitive.PanelResizeHandle,
+    {
+      className: cn(className),
+      style: base,
+      ...rest,
+      children: withHandle ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: 14,
+            height: 28,
+            zIndex: 1
+          },
+          children: [
+            /* @__PURE__ */ 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__ */ 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 = createContext(
+  null
+);
+function useHoverCardSketch() {
+  const ctx = 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__ */ jsx(
+    HoverCardSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { ...rest, children })
+    }
+  );
+}
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = forwardRef(function HoverCardContent2({ className, style, children, sideOffset = 6, align = "center", ...rest }, ref) {
+  const sketch = useHoverCardSketch();
+  return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    HoverCardPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      align,
+      className: cn(className),
+      style: { zIndex: 75, outline: "none", ...style },
+      ...rest,
+      children: /* @__PURE__ */ 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.Arrow;
+var ContextMenuSketchContext = createContext(null);
+function useContextMenuSketch() {
+  const ctx = 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__ */ jsx(
+    ContextMenuSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Root, { ...rest, children })
+    }
+  );
+}
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+var ContextMenuSub = ContextMenuPrimitive.Sub;
+var ContextMenuContent = forwardRef(function ContextMenuContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useContextMenuSketch();
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(className),
+      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      ...rest,
+      children: /* @__PURE__ */ 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 = forwardRef(function ContextMenuItem2({ className, style, children, inset, ...rest }, ref) {
+  const [highlighted, setHighlighted] = useState(false);
+  const { sketch, mark } = useMark2(highlighted);
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.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__ */ 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__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var CHECK_PATH3 = "M 2 6 L 5 9 L 10 3";
+var ContextMenuCheckboxItem = forwardRef(function ContextMenuCheckboxItem2({ className, style, children, checked, ...rest }, ref) {
+  const [highlighted, setHighlighted] = useState(false);
+  const { sketch, mark } = useMark2(highlighted);
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.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__ */ 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__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 12,
+              height: 12,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ 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__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var ContextMenuRadioItem = forwardRef(function ContextMenuRadioItem2({ className, style, children, ...rest }, ref) {
+  const [highlighted, setHighlighted] = useState(false);
+  const { sketch, mark } = useMark2(highlighted);
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.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__ */ 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__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 8,
+              height: 8,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ 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__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var ContextMenuLabel = forwardRef(function ContextMenuLabel2({ className, style, children, ...rest }, ref) {
+  const sketch = useContextMenuSketch();
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.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 = forwardRef(function ContextMenuSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useContextMenuSketch();
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Separator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 0", ...style },
+      ...rest,
+      children: /* @__PURE__ */ 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 = createContext(null);
+function useNavigationMenuSketch() {
+  const ctx = 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__ */ jsx(
+    NavigationMenuSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Root, { ...rest, children: [
+        children,
+        /* @__PURE__ */ jsx(NavigationMenuViewport, {})
+      ] })
+    }
+  );
+}
+var NavigationMenuList = forwardRef(function NavigationMenuList2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.List,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var NavigationMenuItem = NavigationMenuPrimitive.Item;
+var NavigationMenuTrigger = forwardRef(function NavigationMenuTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.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 = forwardRef(function NavigationMenuContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(className),
+      style: { outline: "none", ...style },
+      ...rest,
+      children: /* @__PURE__ */ 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.Link;
+var NavigationMenuViewport = forwardRef(function NavigationMenuViewport2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: "100%", left: 0, perspective: 2e3 }, children: /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Viewport,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        position: "relative",
+        marginTop: 6,
+        overflow: "hidden",
+        ...style
+      },
+      ...rest
+    }
+  ) });
+});
+var NavigationMenuIndicator = forwardRef(function NavigationMenuIndicator2({ className, style, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Indicator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 6, ...style },
+      ...rest,
+      children: /* @__PURE__ */ 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 = forwardRef(function NavigationMenuItemLink2({ className, style, active, children, ...rest }, ref) {
+  const sketch = useNavigationMenuSketch();
+  const [hovered, setHovered] = useState(false);
+  const showMark = active || hovered;
+  return /* @__PURE__ */ jsxs(
+    NavigationMenuPrimitive.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__ */ 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__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var MenubarSketchContext = createContext(
+  null
+);
+function useMenubarSketch() {
+  const ctx = 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__ */ jsx(
+    MenubarSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsx(
+        MenubarPrimitive.Root,
+        {
+          className: cn(className),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            padding: 4,
+            ...style
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var MenubarMenu = MenubarPrimitive.Menu;
+var MenubarTrigger = forwardRef(function MenubarTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsx(
+    MenubarPrimitive.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 = forwardRef(function MenubarContent2({ className, style, children, align = "start", sideOffset = 6, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    MenubarPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(className),
+      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      ...rest,
+      children: /* @__PURE__ */ 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 = forwardRef(function MenubarItem2({ className, style, children, ...rest }, ref) {
+  const [highlighted, setHighlighted] = useState(false);
+  const { sketch, mark } = useMark3(highlighted);
+  return /* @__PURE__ */ jsxs(
+    MenubarPrimitive.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__ */ 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__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var MenubarSeparator = forwardRef(function MenubarSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsx(
+    MenubarPrimitive.Separator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 0", ...style },
+      ...rest,
+      children: /* @__PURE__ */ 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 = forwardRef(function MenubarLabel2({ className, style, children, ...rest }, ref) {
+  const sketch = useMenubarSketch();
+  return /* @__PURE__ */ jsx(
+    MenubarPrimitive.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 = forwardRef(function MenubarShortcut2({ className, style, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        marginLeft: "auto",
+        fontSize: 12,
+        opacity: 0.55,
+        letterSpacing: 0.04,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var MenubarSub = MenubarPrimitive.Sub;
+var MenubarSubTrigger = MenubarPrimitive.SubTrigger;
+var MenubarSubContent = MenubarPrimitive.SubContent;
+var MenubarCheckboxItem = MenubarPrimitive.CheckboxItem;
+var MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+var MenubarRadioItem = MenubarPrimitive.RadioItem;
+var SlidingPanelSketchContext = createContext(null);
+function useSlidingPanelSketch() {
+  const ctx = 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] = useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  return /* @__PURE__ */ jsx(
+    SlidingPanelSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        open: isOpen,
+        side
+      },
+      children: /* @__PURE__ */ jsx(
+        Dialog.Root,
+        {
+          open: isOpen,
+          onOpenChange: (next) => {
+            setUncontrolled(next);
+            onOpenChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var SlidingPanelTrigger = Dialog.Trigger;
+var SlidingPanelClose = Dialog.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 = forwardRef(function SlidingPanelOverlay2({ style, ...rest }, ref) {
+  const sketch = useSlidingPanelSketch();
+  const shouldAnimate = useAnimate(sketch.animate);
+  return /* @__PURE__ */ jsx(Dialog.Overlay, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsx(
+    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 = 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__ */ jsx(AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxs(Dialog.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsx(SlidingPanelOverlay, {}),
+    /* @__PURE__ */ jsx(Dialog.Content, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsx(
+      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__ */ 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__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        marginBottom: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+function SlidingPanelFooter({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        gap: 8,
+        marginTop: "auto",
+        paddingTop: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+var SlidingPanelTitle = forwardRef(function SlidingPanelTitle2({ className, style, ...rest }, ref) {
+  const sketch = useSlidingPanelSketch();
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontWeight: doodleUiFontWeight(700),
+        fontSize: 20,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var SlidingPanelDescription = forwardRef(function SlidingPanelDescription2({ className, style, ...rest }, ref) {
+  const sketch = useSlidingPanelSketch();
+  return /* @__PURE__ */ jsx(
+    Dialog.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__ */ jsx(SlidingPanelRoot, { side, ...rest });
+}
+var SheetTrigger = SlidingPanelTrigger;
+var SheetClose = SlidingPanelClose;
+var SheetContent = forwardRef(
+  function SheetContent2(props, ref) {
+    return /* @__PURE__ */ jsx(SlidingPanelContent, { ref, ...props });
+  }
+);
+var SheetHeader = SlidingPanelHeader;
+var SheetFooter = SlidingPanelFooter;
+var SheetTitle = SlidingPanelTitle;
+var SheetDescription = SlidingPanelDescription;
+function Drawer(props) {
+  return /* @__PURE__ */ jsx(SlidingPanelRoot, { side: "bottom", ...props });
+}
+var DrawerTrigger = SlidingPanelTrigger;
+var DrawerClose = SlidingPanelClose;
+var DrawerHandle = forwardRef(
+  function DrawerHandle2({ className }, ref) {
+    const sketch = useSlidingPanelSketch();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className,
+        style: {
+          position: "relative",
+          width: 48,
+          height: 10,
+          margin: "0 auto 12px"
+        },
+        "aria-hidden": true,
+        children: /* @__PURE__ */ 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 = forwardRef(
+  function DrawerContent2({ children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      SlidingPanelContent,
+      {
+        ref,
+        chrome: /* @__PURE__ */ jsx(DrawerHandle, {}),
+        contentStyle: { paddingTop: 8 },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var DrawerHeader = SlidingPanelHeader;
+var DrawerFooter = SlidingPanelFooter;
+var DrawerTitle = SlidingPanelTitle;
+var DrawerDescription = SlidingPanelDescription;
+function AspectRatio({
+  ratio = 16 / 9,
+  bordered = false,
+  className,
+  style,
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate
+}) {
+  const inner = /* @__PURE__ */ jsx(
+    AspectRatioPrimitive.Root,
+    {
+      ratio,
+      className: cn(className),
+      style: {
+        width: "100%",
+        overflow: "hidden",
+        ...style
+      },
+      children: /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children })
+    }
+  );
+  if (!bordered) {
+    return inner;
+  }
+  return /* @__PURE__ */ jsx(
+    SketchBox,
+    {
+      className: cn(className),
+      style: { width: "100%", ...style },
+      contentStyle: { padding: 0, width: "100%" },
+      fill: SKETCH_COLORS.paper,
+      fillStyle: fillStyle ?? "hachure",
+      roughness,
+      seed,
+      sketchColor,
+      bowing,
+      strokeWidth,
+      animate,
+      children: /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { ratio, style: { width: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children }) })
+    }
+  );
+}
+var CHEVRON_PATH6 = "M 4 6 L 10 12 L 16 6";
+var NativeSelect = forwardRef(
+  function NativeSelect2({
+    className,
+    style,
+    options,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    animate,
+    disabled,
+    ...rest
+  }, ref) {
+    const fieldRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(className),
+        style: {
+          position: "relative",
+          display: "block",
+          width: "100%",
+          opacity: disabled ? 0.6 : 1,
+          ...style
+        },
+        children: /* @__PURE__ */ jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
+          /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed: resolvedSeed,
+              sketchColor: ink,
+              bowing,
+              fillStyle,
+              fill: SKETCH_COLORS.paper,
+              strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              ref,
+              disabled,
+              style: {
+                position: "relative",
+                zIndex: 1,
+                width: "100%",
+                border: "none",
+                background: "transparent",
+                padding: "10px 36px 10px 12px",
+                fontFamily: doodleUiFontFamily,
+                fontSize: 14,
+                fontWeight: doodleUiFontWeight(500),
+                color: ink,
+                cursor: disabled ? "not-allowed" : "pointer",
+                appearance: "none",
+                WebkitAppearance: "none",
+                MozAppearance: "none",
+                outline: "none"
+              },
+              ...rest,
+              children: options ? options.map((opt) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: opt.value,
+                  disabled: opt.disabled,
+                  children: opt.label
+                },
+                opt.value
+              )) : children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                right: 10,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: 20,
+                height: 14,
+                pointerEvents: "none",
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: CHEVRON_PATH6,
+                  roughness: (roughness ?? 1.5) * 0.85,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1.5
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var EmptyContext = createContext(null);
+function useEmptyInk() {
+  const ctx = useContext(EmptyContext);
+  return ctx?.ink ?? SKETCH_COLORS.ink;
+}
+var emptyContentStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  gap: 12,
+  padding: "32px 24px",
+  minHeight: 160,
+  width: "100%"
+};
+var Empty = forwardRef(function Empty2({
+  className,
+  style,
+  children,
+  bordered = true,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const inner = /* @__PURE__ */ jsx(EmptyContext.Provider, { value: { ink }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: bordered ? void 0 : ref,
+      className: cn(className),
+      style: { ...emptyContentStyle, ...style },
+      ...bordered ? {} : rest,
+      children
+    }
+  ) });
+  if (!bordered) {
+    return inner;
+  }
+  return /* @__PURE__ */ jsx(
+    SketchBox,
+    {
+      ref,
+      className: cn(className),
+      style: { width: "100%", ...style },
+      contentStyle: emptyContentStyle,
+      fill: SKETCH_COLORS.secondaryFill,
+      fillStyle: fillStyle ?? "hachure",
+      roughness,
+      seed,
+      sketchColor,
+      bowing,
+      strokeWidth,
+      animate,
+      ...rest,
+      children: /* @__PURE__ */ jsx(EmptyContext.Provider, { value: { ink }, children })
+    }
+  );
+});
+function EmptyMedia({
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: 4,
+        ...style
+      },
+      children
+    }
+  );
+}
+function EmptyTitle({
+  className,
+  style,
+  children
+}) {
+  const ink = useEmptyInk();
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 18,
+        fontWeight: doodleUiFontWeight(700),
+        color: ink,
+        ...style
+      },
+      children
+    }
+  );
+}
+function EmptyDescription({
+  className,
+  style,
+  children
+}) {
+  const ink = useEmptyInk();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(className),
+      style: {
+        margin: 0,
+        maxWidth: 360,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        lineHeight: 1.5,
+        color: ink,
+        opacity: 0.85,
+        ...style
+      },
+      children
+    }
+  );
+}
+function EmptyAction({
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        justifyContent: "center",
+        marginTop: 8,
+        ...style
+      },
+      children
+    }
+  );
+}
+var FieldContext = createContext(null);
+function useField() {
+  const ctx = useContext(FieldContext);
+  if (!ctx) {
+    throw new Error("Field parts must be used inside <Field>.");
+  }
+  return ctx;
+}
+function Field({
+  className,
+  style,
+  children,
+  invalid = false,
+  error,
+  ...rest
+}) {
+  const id = useId();
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const value = useMemo(
+    () => ({
+      id,
+      descriptionId,
+      errorId,
+      invalid: invalid || Boolean(error),
+      error
+    }),
+    [id, descriptionId, errorId, invalid, error]
+  );
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        width: "100%",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  ) });
+}
+function FieldLabel({ className, style, ...rest }) {
+  const { id } = useField();
+  return /* @__PURE__ */ jsx(Label2, { htmlFor: id, className, style, ...rest });
+}
+function FieldDescription({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { descriptionId } = useField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id: descriptionId,
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        lineHeight: 1.45,
+        color: SKETCH_COLORS.ink,
+        opacity: 0.75,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function FieldError({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { error, errorId } = useField();
+  const message = children ?? error;
+  if (!message) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id: errorId,
+      role: "alert",
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        lineHeight: 1.45,
+        color: SKETCH_COLORS.error,
+        ...style
+      },
+      ...rest,
+      children: message
+    }
+  );
+}
+function FieldControl({ children }) {
+  const { id, descriptionId, errorId, invalid } = useField();
+  const child = Children.only(children);
+  if (!isValidElement(child)) {
+    throw new Error("FieldControl expects a single React element child.");
+  }
+  const describedBy = [descriptionId, invalid ? errorId : null].filter(Boolean).join(" ");
+  const props = child.props;
+  return cloneElement(child, {
+    id: props.id ?? id,
+    "aria-describedby": props["aria-describedby"] ?? (describedBy.length > 0 ? describedBy : void 0),
+    "aria-invalid": invalid ? true : props["aria-invalid"]
+  });
+}
+var HEADING_SIZES = {
+  1: 32,
+  2: 26,
+  3: 22,
+  4: 18,
+  5: 16,
+  6: 14
+};
+var Heading = forwardRef(
+  function Heading2({
+    level = 2,
+    accent = "none",
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const Tag = `h${level}`;
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const accentRef = useRef(null);
+    useDrawIn(accentRef, DRAW_IN_MARK_MS, shouldAnimate && accent !== "none");
+    const fontSize = HEADING_SIZES[level];
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          position: "relative",
+          margin: 0,
+          fontFamily: doodleUiFontFamily,
+          fontSize,
+          fontWeight: doodleUiFontWeight(700),
+          color: ink,
+          lineHeight: 1.2,
+          ...style
+        },
+        ...rest,
+        children: [
+          accent === "highlight" ? /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "inline" }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                ref: accentRef,
+                "aria-hidden": true,
+                style: {
+                  position: "absolute",
+                  left: -4,
+                  right: -4,
+                  bottom: 2,
+                  height: "0.45em",
+                  zIndex: 0
+                },
+                children: /* @__PURE__ */ jsx(
+                  RoughSvg,
+                  {
+                    shape: "rectangle",
+                    roughness,
+                    seed: resolvedSeed,
+                    sketchColor: SKETCH_COLORS.accent,
+                    fill: SKETCH_COLORS.accentFill,
+                    fillStyle: "solid",
+                    bowing,
+                    strokeWidth: strokeWidth ?? 1.2
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+          ] }) : children,
+          accent === "underline" ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: accentRef,
+              "aria-hidden": true,
+              style: {
+                display: "block",
+                position: "relative",
+                height: 6,
+                marginTop: 4,
+                maxWidth: "100%"
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: "M 2 4 Q 40 1 80 5 T 160 3",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1.5
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var Text = forwardRef(function Text2({ variant = "body", className, style, children, ...rest }, ref) {
+  const sizes = { body: 14, lead: 17, muted: 13 };
+  const opacity = variant === "muted" ? 0.75 : 1;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: sizes[variant],
+        fontWeight: doodleUiFontWeight(variant === "lead" ? 500 : 400),
+        lineHeight: 1.55,
+        color: SKETCH_COLORS.ink,
+        opacity,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var Paragraph = Text;
+var Blockquote = forwardRef(
+  function Blockquote2({
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const ruleRef = useRef(null);
+    useDrawIn(ruleRef, DRAW_IN_MARK_MS, shouldAnimate);
+    return /* @__PURE__ */ jsxs(
+      "blockquote",
+      {
+        ref,
+        className: cn(className),
+        style: {
+          display: "flex",
+          gap: 12,
+          margin: 0,
+          padding: "8px 0 8px 4px",
+          fontFamily: doodleUiFontFamily,
+          fontSize: 15,
+          fontStyle: "italic",
+          lineHeight: 1.5,
+          color: ink,
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: ruleRef,
+              "aria-hidden": true,
+              style: { position: "relative", width: 6, flexShrink: 0, minHeight: 40 },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "line-vertical",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 2
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children })
+        ]
+      }
+    );
+  }
+);
+var InlineCode = forwardRef(
+  function InlineCode2({
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    return /* @__PURE__ */ jsx(
+      SketchBox,
+      {
+        className: cn(className),
+        style: { display: "inline-flex", verticalAlign: "baseline", ...style },
+        contentStyle: {
+          padding: "1px 6px",
+          fontSize: "0.9em",
+          fontFamily: "ui-monospace, monospace"
+        },
+        fill: SKETCH_COLORS.paper,
+        fillStyle: fillStyle ?? "hachure",
+        roughness,
+        seed,
+        sketchColor: ink,
+        bowing,
+        strokeWidth: strokeWidth ?? 1.2,
+        animate,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "code",
+          {
+            ref,
+            style: {
+              border: "none",
+              background: "transparent",
+              padding: 0,
+              font: "inherit",
+              color: ink
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var Highlight = forwardRef(
+  function Highlight2({
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const markRef = useRef(null);
+    useDrawIn(markRef, DRAW_IN_MARK_MS, shouldAnimate);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(className),
+        style: { position: "relative", display: "inline", ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: markRef,
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                left: -2,
+                right: -2,
+                bottom: 0,
+                top: "35%",
+                zIndex: 0
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "rectangle",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: sketchColor ?? SKETCH_COLORS.accent,
+                  fill: SKETCH_COLORS.accentFill,
+                  fillStyle: "solid",
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+        ]
+      }
+    );
+  }
+);
+var SIDEBAR_WIDTH = 240;
+var SIDEBAR_WIDTH_COLLAPSED = 56;
+var SidebarContext = createContext(null);
+function useSidebar() {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error("Sidebar parts must be used inside <SidebarProvider>.");
+  }
+  return ctx;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  defaultCollapsed = false,
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  strokeWidth
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      onOpenChange?.(next);
+      if (openProp === void 0) {
+        setUncontrolledOpen(next);
+      }
+    },
+    [onOpenChange, openProp]
+  );
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((c) => !c);
+  }, []);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const value = useMemo(
+    () => ({
+      open,
+      setOpen,
+      collapsed,
+      toggleCollapsed,
+      ink,
+      sketch: { roughness, seed, sketchColor, bowing, strokeWidth }
+    }),
+    [
+      open,
+      setOpen,
+      collapsed,
+      toggleCollapsed,
+      ink,
+      roughness,
+      seed,
+      sketchColor,
+      bowing,
+      strokeWidth
+    ]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+var Sidebar = forwardRef(function Sidebar2({ className, style, children, side = "left", ...rest }, ref) {
+  const { open, collapsed, sketch } = useSidebar();
+  const resolvedSeed = useResolvedSeed(sketch.seed);
+  const width = collapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH;
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        position: "relative",
+        flexShrink: 0,
+        width,
+        minHeight: 200,
+        transition: "width 200ms ease",
+        display: "flex",
+        flexDirection: "column",
+        background: SKETCH_COLORS.paper,
+        ...style
+      },
+      "data-side": side,
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              width: 4,
+              ...side === "left" ? { right: 0 } : { left: 0 },
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              RoughSvg,
+              {
+                shape: "line-vertical",
+                roughness: sketch.roughness,
+                seed: resolvedSeed,
+                sketchColor: sketch.sketchColor ?? SKETCH_COLORS.ink,
+                bowing: sketch.bowing,
+                strokeWidth: sketch.strokeWidth ?? 1.5
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+function SidebarHeader({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        padding: collapsed ? "12px 8px" : "16px 14px",
+        borderBottom: `1px solid ${SKETCH_COLORS.ink}22`,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarContent({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        flex: 1,
+        overflow: "auto",
+        padding: "8px 6px",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarFooter({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        padding: "12px 10px",
+        borderTop: `1px solid ${SKETCH_COLORS.ink}22`,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarGroup({
+  className,
+  style,
+  children,
+  title,
+  ...rest
+}) {
+  const { collapsed, ink } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className),
+      style: { marginBottom: 12, ...style },
+      ...rest,
+      children: [
+        title && !collapsed ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "4px 10px 8px",
+              fontSize: 11,
+              fontWeight: doodleUiFontWeight(600),
+              fontFamily: doodleUiFontFamily,
+              color: ink,
+              opacity: 0.65,
+              textTransform: "uppercase",
+              letterSpacing: "0.06em"
+            },
+            children: title
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+var SidebarItem = forwardRef(
+  function SidebarItem2({ className, style, children, active, ...rest }, ref) {
+    const { collapsed, ink, sketch } = useSidebar();
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        type: "button",
+        variant: active ? "secondary" : "ghost",
+        className: cn(className),
+        style: {
+          width: "100%",
+          justifyContent: collapsed ? "center" : "flex-start",
+          marginBottom: 4,
+          ...style
+        },
+        roughness: sketch.roughness,
+        seed: sketch.seed,
+        sketchColor: ink,
+        bowing: sketch.bowing,
+        strokeWidth: sketch.strokeWidth,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+function SidebarTrigger({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { toggleCollapsed, sketch, ink } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      className: cn(className),
+      style,
+      onClick: toggleCollapsed,
+      roughness: sketch.roughness,
+      seed: sketch.seed,
+      sketchColor: ink,
+      bowing: sketch.bowing,
+      strokeWidth: sketch.strokeWidth,
+      ...rest,
+      children: children ?? "Toggle"
+    }
+  );
+}
+function SidebarLayout({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        width: "100%",
+        minHeight: 280,
+        alignItems: "stretch",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarInset({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        flex: 1,
+        padding: 16,
+        minWidth: 0,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+var CarouselContext = createContext(null);
+function useCarousel() {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("Carousel parts must be used inside <Carousel>.");
+  }
+  return ctx;
+}
+function Carousel({
+  opts,
+  plugins,
+  orientation = "horizontal",
+  bordered = false,
+  className,
+  style,
+  children,
+  setApi,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  strokeWidth,
+  fillStyle,
+  animate
+}) {
+  const [emblaRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = useCallback(() => api?.scrollNext(), [api]);
+  const onSelect = useCallback(() => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, [api]);
+  useEffect(() => {
+    if (!api) return;
+    setApi?.(api);
+    onSelect();
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api.off("reInit", onSelect);
+      api.off("select", onSelect);
+    };
+  }, [api, onSelect, setApi]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (orientation === "horizontal") {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [orientation, scrollPrev, scrollNext]
+  );
+  const value = {
+    emblaRef,
+    api,
+    scrollPrev,
+    scrollNext,
+    canScrollPrev,
+    canScrollNext,
+    orientation,
+    sketch: {
+      roughness,
+      seed,
+      sketchColor,
+      bowing,
+      strokeWidth,
+      fillStyle,
+      animate
+    },
+    bordered
+  };
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(className),
+      role: "region",
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      style: {
+        position: "relative",
+        width: "100%",
+        ...style
+      },
+      children
+    }
+  ) });
+}
+var CarouselContent = forwardRef(
+  function CarouselContent2({ className, style, children, ...rest }, ref) {
+    const { emblaRef, orientation, bordered, sketch } = useCarousel();
+    const viewport = /* @__PURE__ */ jsx("div", { ref: emblaRef, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        style: {
+          display: "flex",
+          flexDirection: orientation === "vertical" ? "column" : "row",
+          marginLeft: orientation === "horizontal" ? -16 : 0,
+          marginTop: orientation === "vertical" ? -16 : 0,
+          ...style
+        },
+        ...rest,
+        children
+      }
+    ) });
+    if (!bordered) {
+      return viewport;
+    }
+    return /* @__PURE__ */ jsx(
+      SketchBox,
+      {
+        fill: SKETCH_COLORS.paper,
+        fillStyle: sketch.fillStyle ?? "hachure",
+        roughness: sketch.roughness,
+        seed: sketch.seed,
+        sketchColor: sketch.sketchColor,
+        bowing: sketch.bowing,
+        strokeWidth: sketch.strokeWidth,
+        animate: sketch.animate,
+        contentStyle: { padding: 8 },
+        children: viewport
+      }
+    );
+  }
+);
+var CarouselItem = forwardRef(
+  function CarouselItem2({ className, style, children, ...rest }, ref) {
+    const { orientation } = useCarousel();
+    const gap = 16;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        role: "group",
+        "aria-roledescription": "slide",
+        style: {
+          flex: "0 0 100%",
+          minWidth: 0,
+          paddingLeft: orientation === "horizontal" ? gap : 0,
+          paddingTop: orientation === "vertical" ? gap : 0,
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var ARROW_PATH_PREV = "M 14 4 L 6 12 L 14 20";
+var ARROW_PATH_NEXT = "M 6 4 L 14 12 L 6 20";
+var ARROW_SIZE = 40;
+var CarouselArrow = forwardRef(function CarouselArrow2({ className, style, direction, ...rest }, ref) {
+  const {
+    scrollPrev,
+    scrollNext,
+    canScrollPrev,
+    canScrollNext,
+    sketch,
+    orientation
+  } = useCarousel();
+  const resolvedSeed = useResolvedSeed(sketch.seed);
+  const ink = sketch.sketchColor ?? SKETCH_COLORS.ink;
+  const isPrev = direction === "prev";
+  const disabled = isPrev ? !canScrollPrev : !canScrollNext;
+  const shouldAnimate = useAnimate(sketch.animate);
+  const rootRef = useRef(null);
+  const sketchSeed = deriveSeed(resolvedSeed, direction);
+  useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: (node) => {
+        rootRef.current = node;
+        assignRef(ref, node);
+      },
+      type: "button",
+      disabled,
+      className: cn(className),
+      style: {
+        position: "absolute",
+        zIndex: 2,
+        width: ARROW_SIZE,
+        height: ARROW_SIZE,
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        ...horizontal ? {
+          top: "50%",
+          transform: "translateY(-50%)",
+          left: isPrev ? -52 : void 0,
+          right: isPrev ? void 0 : -52
+        } : {
+          left: "50%",
+          transform: "translateX(-50%) rotate(90deg)",
+          top: isPrev ? -52 : void 0,
+          bottom: isPrev ? void 0 : -52
+        },
+        ...style
+      },
+      onClick: isPrev ? scrollPrev : scrollNext,
+      "aria-label": isPrev ? "Previous slide" : "Next slide",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          RoughSvg,
+          {
+            shape: "ellipse",
+            roughness: sketch.roughness,
+            seed: sketchSeed,
+            sketchColor: ink,
+            bowing: sketch.bowing,
+            fill: SKETCH_COLORS.paper,
+            fillStyle: "solid",
+            strokeWidth: sketch.strokeWidth ?? 1.5,
+            inset: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              zIndex: 1,
+              width: 18,
+              height: 22,
+              display: "block",
+              margin: "0 auto"
+            },
+            children: /* @__PURE__ */ jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: isPrev ? ARROW_PATH_PREV : ARROW_PATH_NEXT,
+                roughness: sketch.roughness,
+                seed: deriveSeed(resolvedSeed, `${direction}-arrow`),
+                sketchColor: ink,
+                strokeWidth: sketch.strokeWidth ?? 1.6
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+var CarouselPrevious = forwardRef(
+  function CarouselPrevious2(props, ref) {
+    return /* @__PURE__ */ jsx(CarouselArrow, { ref, direction: "prev", ...props });
+  }
+);
+var CarouselNext = forwardRef(
+  function CarouselNext2(props, ref) {
+    return /* @__PURE__ */ jsx(CarouselArrow, { ref, direction: "next", ...props });
+  }
+);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Dialog2 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DoodleUIProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuTrigger, Input, Label2 as Label, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, RoughSvg, SKETCH_COLORS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SketchBox, SketchSeedProvider, Slider, Stepper, Switch, TABLE_STAGGER_MS, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useDoodleUI, useDrawIn, useResolvedSeed, useSketchSeed };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, Badge, Blockquote, Breadcrumb, BreadcrumbItem, Button, Card, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuTrigger, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Dialog2 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DoodleUIProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuTrigger, Empty, EmptyAction, EmptyDescription, EmptyMedia, EmptyTitle, Field, FieldControl, FieldDescription, FieldError, FieldLabel, Heading, Highlight, HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemLink, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, RoughSvg, SKETCH_COLORS, ScrollArea, ScrollAreaCorner, ScrollAreaViewport, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarLayout, SidebarProvider, SidebarTrigger, Skeleton, SketchBox, SketchSeedProvider, Slider, Spinner, Stepper, Switch, TABLE_STAGGER_MS, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Text, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useCarousel, useDoodleUI, useDrawIn, useResolvedSeed, useSidebar, useSketchSeed };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map