doodleui-react 0.5.0 → 0.6.1

package/dist/index.cjs

@@ -31,6 +31,8 @@ var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
 var MenubarPrimitive = require('@radix-ui/react-menubar');
+var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
+var useEmblaCarousel = require('embla-carousel-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -77,6 +79,8 @@ var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrim
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
+var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
+var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 
 // src/types.ts
 function toRoughOptions(props) {
@@ -91,6 +95,9 @@ function toRoughOptions(props) {
   if (props.fill) {
     options.fill = props.fill;
     options.fillStyle = props.fillStyle ?? "hachure";
+    if (props.hachureGap !== void 0) options.hachureGap = props.hachureGap;
+    if (props.hachureAngle !== void 0) options.hachureAngle = props.hachureAngle;
+    if (props.fillWeight !== void 0) options.fillWeight = props.fillWeight;
   }
   return options;
 }
@@ -98,6 +105,10 @@ var DEFAULT_ROUGHNESS = 1.5;
 var DEFAULT_BOWING = 1;
 var DEFAULT_STROKE_WIDTH = 1.75;
 var DEFAULT_INK = "#1f1d1a";
+var DEFAULT_DARK_INK = "#f3f4f6";
+var DEFAULT_PAPER = "#f7f6f2";
+var DEFAULT_DARK_PAPER = "#131923";
+var DEFAULT_DARK_CARD_BG = "#131923";
 var DEFAULT_INSET = 3;
 var SKETCH_COLORS = {
   ink: DEFAULT_INK,
@@ -110,6 +121,19 @@ var SKETCH_COLORS = {
   error: "#c0392b",
   success: "#2d6a4f"
 };
+var DARK_SKETCH_COLORS = {
+  ink: DEFAULT_DARK_INK,
+  accent: "#f87171",
+  accentFill: "rgba(248, 113, 113, 0.22)",
+  secondaryFill: "rgba(255, 255, 255, 0.08)",
+  paper: DEFAULT_DARK_PAPER,
+  cardBg: DEFAULT_DARK_CARD_BG,
+  shadow: "#000000",
+  info: "#60a5fa",
+  warning: "#fbbf24",
+  error: "#f87171",
+  success: "#34d399"
+};
 
 // src/utils.ts
 function assignRef(ref, value) {
@@ -225,6 +249,9 @@ function RoughSvg({
   fillStyle,
   strokeWidth,
   fill,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   inset = DEFAULT_INSET,
   path,
   className,
@@ -248,7 +275,10 @@ function RoughSvg({
       bowing,
       fillStyle,
       strokeWidth,
-      fill
+      fill,
+      hachureGap,
+      hachureAngle,
+      fillWeight
     });
     const x = inset;
     const y = inset;
@@ -284,6 +314,9 @@ function RoughSvg({
     fillStyle,
     strokeWidth,
     fill,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     inset,
     path
   ]);
@@ -321,16 +354,17 @@ var DoodleUIContext = react.createContext(null);
 function DoodleUIProvider({
   children,
   animate = true,
-  forceAnimate = false
+  forceAnimate = false,
+  theme = "system"
 }) {
   const value = react.useMemo(
-    () => ({ animate, forceAnimate }),
-    [animate, forceAnimate]
+    () => ({ animate, forceAnimate, theme }),
+    [animate, forceAnimate, theme]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DoodleUIContext.Provider, { value, children });
 }
 function useDoodleUI() {
-  return react.useContext(DoodleUIContext) ?? { animate: true, forceAnimate: false };
+  return react.useContext(DoodleUIContext) ?? { animate: true, forceAnimate: false, theme: "system" };
 }
 
 // src/animations/resolveAnimate.ts
@@ -488,6 +522,93 @@ function useDrawIn(pathRef, duration = DRAW_IN_DURATION_MS, enabled = true, repl
     };
   }, [pathRef, duration, enabled, replayKey, delay]);
 }
+function checkIsDark() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return false;
+  }
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) return true;
+  const dataTheme = root.getAttribute("data-theme");
+  if (dataTheme === "dark") return true;
+  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return true;
+  }
+  return false;
+}
+function useSketchTheme(sketchColorOverride) {
+  const doodleContext = useDoodleUI();
+  const contextTheme = doodleContext?.theme;
+  const [isClientDark, setIsClientDark] = react.useState(() => {
+    if (contextTheme === "dark") return true;
+    if (contextTheme === "light") return false;
+    return checkIsDark();
+  });
+  react.useEffect(() => {
+    if (contextTheme === "dark") {
+      setIsClientDark(true);
+      return;
+    }
+    if (contextTheme === "light") {
+      setIsClientDark(false);
+      return;
+    }
+    const update = () => {
+      setIsClientDark(checkIsDark());
+    };
+    update();
+    const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mediaQuery?.addEventListener?.("change", update);
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.attributeName === "class" || m.attributeName === "data-theme") {
+          update();
+          break;
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => {
+      mediaQuery?.removeEventListener?.("change", update);
+      observer.disconnect();
+    };
+  }, [contextTheme]);
+  const isDark = contextTheme === "dark" ? true : contextTheme === "light" ? false : isClientDark;
+  const baseInk = isDark ? DEFAULT_DARK_INK : DEFAULT_INK;
+  const ink = sketchColorOverride ?? baseInk;
+  if (isDark) {
+    return {
+      isDark: true,
+      ink,
+      paper: DEFAULT_DARK_PAPER,
+      cardBg: DEFAULT_DARK_CARD_BG,
+      shadow: "rgba(0, 0, 0, 0.45)",
+      accent: DARK_SKETCH_COLORS.accent,
+      accentFill: DARK_SKETCH_COLORS.accentFill,
+      secondaryFill: DARK_SKETCH_COLORS.secondaryFill,
+      info: DARK_SKETCH_COLORS.info,
+      warning: DARK_SKETCH_COLORS.warning,
+      error: DARK_SKETCH_COLORS.error,
+      success: DARK_SKETCH_COLORS.success
+    };
+  }
+  return {
+    isDark: false,
+    ink,
+    paper: DEFAULT_PAPER,
+    cardBg: DEFAULT_PAPER,
+    shadow: sketchColorOverride ?? DEFAULT_INK,
+    accent: SKETCH_COLORS.accent,
+    accentFill: SKETCH_COLORS.accentFill,
+    secondaryFill: SKETCH_COLORS.secondaryFill,
+    info: SKETCH_COLORS.info,
+    warning: SKETCH_COLORS.warning,
+    error: SKETCH_COLORS.error,
+    success: SKETCH_COLORS.success
+  };
+}
 var SketchBox = react.forwardRef(
   function SketchBox2({
     children,
@@ -504,6 +625,9 @@ var SketchBox = react.forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     inset,
     path,
     animate,
@@ -512,8 +636,14 @@ var SketchBox = react.forwardRef(
     ...rest
   }, ref) {
     const rootRef = react.useRef(null);
+    const theme = useSketchTheme(sketchColor);
+    const resolvedInk = sketchColor ?? theme.ink;
     const shouldAnimate = useAnimate(animate);
     useDrawIn(rootRef, drawInDuration, shouldAnimate, drawInKey);
+    const hasExplicitFill = fill !== void 0;
+    const resolvedFill = hasExplicitFill ? fill : shadow ? theme.cardBg : void 0;
+    const resolvedFillStyle = fillStyle ?? (resolvedFill ? "solid" : "solid");
+    const isPatternedFill = Boolean(resolvedFill && resolvedFillStyle !== "solid");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -531,13 +661,31 @@ var SketchBox = react.forwardRef(
               shape,
               roughness: (roughness ?? 1.5) + 0.35,
               seed,
-              sketchColor,
+              sketchColor: theme.isDark ? "rgba(0, 0, 0, 0.45)" : resolvedInk,
               bowing,
               fillStyle: "hachure",
-              fill: sketchColor ?? "#1f1d1a",
+              fill: theme.isDark ? theme.shadow : resolvedInk ?? theme.ink,
               strokeWidth: 1,
+              hachureGap: 8,
               inset,
-              style: { transform: "translate(5px, 6px)", opacity: 0.16 }
+              style: {
+                transform: "translate(5px, 6px)",
+                opacity: theme.isDark ? 0.35 : 0.16
+              }
+            }
+          ) : null,
+          isPatternedFill ? /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape,
+              roughness,
+              seed,
+              sketchColor: "transparent",
+              bowing,
+              fillStyle: "solid",
+              fill: theme.cardBg,
+              strokeWidth: 0,
+              inset
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -546,11 +694,14 @@ var SketchBox = react.forwardRef(
               shape,
               roughness,
               seed,
-              sketchColor,
+              sketchColor: resolvedInk,
               bowing,
-              fillStyle: fill ? fillStyle : shadow ? "solid" : fillStyle,
-              fill: fill ?? (shadow ? "#f7f6f2" : void 0),
+              fillStyle: resolvedFill ? resolvedFillStyle : void 0,
+              fill: resolvedFill,
               strokeWidth,
+              hachureGap: hachureGap ?? (isPatternedFill ? 10 : void 0),
+              hachureAngle,
+              fillWeight: fillWeight ?? (isPatternedFill ? 0.9 : void 0),
               inset,
               path
             }
@@ -563,6 +714,7 @@ var SketchBox = react.forwardRef(
                 position: "relative",
                 zIndex: 1,
                 fontFamily: doodleUiFontFamily,
+                color: resolvedInk,
                 ...contentStyle
               },
               children
@@ -595,6 +747,9 @@ var Button = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     disabled,
     animate,
     onMouseEnter,
@@ -603,13 +758,15 @@ var Button = react.forwardRef(
   }, ref) {
     const rootRef = react.useRef(null);
     const [hovered, setHovered] = react.useState(false);
+    const theme = useSketchTheme(sketchColor);
     const shouldAnimate = useAnimate(animate);
     const resolvedSeed = useResolvedSeed(seed);
     const hoverSeed = deriveSeed(resolvedSeed, "hover");
     const sketchSeed = shouldAnimate && hovered && !disabled ? hoverSeed : resolvedSeed;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
-    const fill = variant === "primary" ? SKETCH_COLORS.accentFill : variant === "secondary" ? SKETCH_COLORS.secondaryFill : void 0;
-    const stroke = variant === "ghost" && !hovered ? "transparent" : variant === "primary" ? sketchColor ?? SKETCH_COLORS.accent : ink;
+    const ink = sketchColor ?? theme.ink;
+    const fill = variant === "primary" ? theme.isDark ? sketchColor ? `${sketchColor}28` : theme.accentFill : theme.accentFill : variant === "secondary" ? theme.secondaryFill : hovered && variant === "ghost" ? theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(31,29,26,0.05)" : void 0;
+    const stroke = variant === "ghost" && !hovered ? "transparent" : variant === "primary" ? sketchColor ?? theme.accent : ink;
+    const textColor = variant === "primary" ? sketchColor ?? (theme.isDark ? "#ffffff" : ink) : ink;
     useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -638,7 +795,7 @@ var Button = react.forwardRef(
           border: "none",
           background: "transparent",
           cursor: disabled ? "not-allowed" : "pointer",
-          color: ink,
+          color: textColor,
           fontFamily: doodleUiFontFamily,
           fontWeight: doodleUiFontWeight(600),
           lineHeight: 1.2,
@@ -656,8 +813,11 @@ var Button = react.forwardRef(
               seed: sketchSeed,
               sketchColor: stroke,
               bowing,
-              fillStyle: fillStyle ?? "hachure",
+              fillStyle: fillStyle ?? (fill ? "hachure" : void 0),
               fill,
+              hachureGap: hachureGap ?? 7,
+              hachureAngle,
+              fillWeight: fillWeight ?? 1,
               strokeWidth: !shouldAnimate && hovered ? (strokeWidth ?? 1.75) + 0.4 : strokeWidth
             }
           ),
@@ -677,6 +837,9 @@ var Input = react.forwardRef(function Input2({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   id,
   onFocus,
   onBlur,
@@ -685,11 +848,12 @@ var Input = react.forwardRef(function Input2({
 }, ref) {
   const [focused, setFocused] = react.useState(false);
   const fieldRef = react.useRef(null);
+  const theme = useSketchTheme(sketchColor);
   const shouldAnimate = useAnimate(animate);
   const resolvedSeed = useResolvedSeed(seed);
   const focusSeed = deriveSeed(resolvedSeed, "focus");
   const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const ink = sketchColor ?? theme.ink;
   const inputId = id;
   useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -722,9 +886,12 @@ var Input = react.forwardRef(function Input2({
               shape: "rectangle",
               roughness,
               seed: sketchSeed,
-              sketchColor: focused ? SKETCH_COLORS.accent : ink,
+              sketchColor: focused ? sketchColor ?? theme.accent : ink,
               bowing,
               fillStyle,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
             }
           ),
@@ -775,6 +942,9 @@ var Textarea = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     id,
     rows = 4,
     onFocus,
@@ -784,11 +954,12 @@ var Textarea = react.forwardRef(
   }, ref) {
     const [focused, setFocused] = react.useState(false);
     const fieldRef = react.useRef(null);
+    const theme = useSketchTheme(sketchColor);
     const shouldAnimate = useAnimate(animate);
     const resolvedSeed = useResolvedSeed(seed);
     const focusSeed = deriveSeed(resolvedSeed, "focus");
     const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const ink = sketchColor ?? theme.ink;
     useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -820,9 +991,12 @@ var Textarea = react.forwardRef(
                 shape: "rectangle",
                 roughness,
                 seed: sketchSeed,
-                sketchColor: focused ? SKETCH_COLORS.accent : ink,
+                sketchColor: focused ? sketchColor ?? theme.accent : ink,
                 bowing,
                 fillStyle,
+                hachureGap,
+                hachureAngle,
+                fillWeight,
                 strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
               }
             ),
@@ -852,8 +1026,7 @@ var Textarea = react.forwardRef(
                   color: ink,
                   fontFamily: doodleUiFontFamily,
                   fontSize: 15,
-                  lineHeight: 1.5,
-                  padding: "10px 12px",
+                  padding: "8px 12px",
                   resize: "vertical",
                   ...style
                 },
@@ -871,6 +1044,7 @@ var CHECK_PATH = "M 4.5 10.5 L 8.5 14.5 L 15.5 5.5";
 function CheckMark({
   roughness,
   seed,
+  sketchColor,
   bowing,
   strokeWidth,
   shouldAnimate
@@ -889,7 +1063,7 @@ function CheckMark({
           path: CHECK_PATH,
           roughness: (roughness ?? 1.5) * 0.7,
           seed,
-          sketchColor: SKETCH_COLORS.accent,
+          sketchColor,
           bowing,
           strokeWidth: (strokeWidth ?? 1.6) + 0.4,
           inset: 0
@@ -903,12 +1077,16 @@ var Checkbox = react.forwardRef(
     className,
     style,
     label,
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     checked,
     defaultChecked,
     onCheckedChange,
@@ -916,7 +1094,9 @@ var Checkbox = react.forwardRef(
     animate,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
     const generatedId = react.useId();
     const inputId = id ?? generatedId;
     const boxRef = react.useRef(null);
@@ -932,6 +1112,7 @@ var Checkbox = react.forwardRef(
           gap: 8,
           cursor: "pointer",
           userSelect: "none",
+          color: ink,
           ...style
         },
         children: [
@@ -968,8 +1149,12 @@ var Checkbox = react.forwardRef(
                         seed,
                         sketchColor: ink,
                         bowing,
-                        fillStyle,
+                        fillStyle: fillStyle ?? (fill ? "solid" : void 0),
+                        fill,
                         strokeWidth: strokeWidth ?? 1.6,
+                        hachureGap,
+                        hachureAngle,
+                        fillWeight,
                         inset: 1.5
                       }
                     )
@@ -988,6 +1173,7 @@ var Checkbox = react.forwardRef(
                       {
                         roughness,
                         seed,
+                        sketchColor: accent,
                         bowing,
                         strokeWidth,
                         shouldAnimate
@@ -1002,7 +1188,7 @@ var Checkbox = react.forwardRef(
             "label",
             {
               htmlFor: inputId,
-              style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily },
+              style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily, color: ink },
               children: label
             }
           ) : null
@@ -1034,6 +1220,7 @@ var SIZE = 20;
 function RadioDot({
   roughness,
   seed,
+  sketchColor,
   bowing,
   shouldAnimate
 }) {
@@ -1067,8 +1254,8 @@ function RadioDot({
           shape: "ellipse",
           roughness: (roughness ?? 1.5) + 0.2,
           seed,
-          sketchColor: SKETCH_COLORS.accent,
-          fill: SKETCH_COLORS.accent,
+          sketchColor,
+          fill: sketchColor,
           fillStyle: "solid",
           bowing,
           strokeWidth: 1,
@@ -1082,17 +1269,23 @@ var Radio = react.forwardRef(function Radio2({
   className,
   style,
   label,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   id,
   animate,
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
   const generatedId = react.useId();
   const inputId = id ?? generatedId;
   const ringRef = react.useRef(null);
@@ -1108,6 +1301,7 @@ var Radio = react.forwardRef(function Radio2({
         gap: 8,
         cursor: "pointer",
         userSelect: "none",
+        color: ink,
         ...style
       },
       children: [
@@ -1142,8 +1336,12 @@ var Radio = react.forwardRef(function Radio2({
                       seed,
                       sketchColor: ink,
                       bowing,
-                      fillStyle,
+                      fillStyle: fillStyle ?? (fill ? "solid" : void 0),
+                      fill,
                       strokeWidth: strokeWidth ?? 1.6,
+                      hachureGap,
+                      hachureAngle,
+                      fillWeight,
                       inset: 1.5
                     }
                   )
@@ -1162,6 +1360,7 @@ var Radio = react.forwardRef(function Radio2({
                     {
                       roughness,
                       seed,
+                      sketchColor: accent,
                       bowing,
                       shouldAnimate
                     }
@@ -1175,7 +1374,7 @@ var Radio = react.forwardRef(function Radio2({
           "label",
           {
             htmlFor: inputId,
-            style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily },
+            style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily, color: ink },
             children: label
           }
         ) : null
@@ -1197,18 +1396,26 @@ var Card = react.forwardRef(function Card2({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const boxProps = {
     shadow,
     fill,
     roughness,
     seed,
-    sketchColor: sketchColor ?? SKETCH_COLORS.ink,
+    sketchColor: ink,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1216,7 +1423,10 @@ var Card = react.forwardRef(function Card2({
     {
       ref,
       className: cn(className),
-      style,
+      style: {
+        color: ink,
+        ...style
+      },
       contentStyle: { padding: "16px 18px" },
       ...boxProps,
       ...rest,
@@ -1227,13 +1437,14 @@ var Card = react.forwardRef(function Card2({
             style: {
               fontWeight: doodleUiFontWeight(700),
               fontSize: 16,
-              marginBottom: 10
+              marginBottom: 10,
+              color: ink
             },
             children: title
           }
         ) : null,
         children,
-        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14, fontSize: 13, opacity: 0.8 }, children: footer }) : null
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14, fontSize: 13, opacity: 0.8, color: ink }, children: footer }) : null
       ]
     }
   );
@@ -1249,11 +1460,15 @@ var Badge = react.forwardRef(function Badge2({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
-  const ink = variant === "accent" ? sketchColor ?? SKETCH_COLORS.accent : sketchColor ?? SKETCH_COLORS.ink;
-  const fill = variant === "accent" ? SKETCH_COLORS.accentFill : variant === "outline" ? void 0 : SKETCH_COLORS.secondaryFill;
+  const theme = useSketchTheme(sketchColor);
+  const ink = variant === "accent" ? sketchColor ?? theme.accent : sketchColor ?? theme.ink;
+  const fill = variant === "accent" ? theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill : variant === "outline" ? void 0 : theme.secondaryFill;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SketchBox,
     {
@@ -1268,10 +1483,14 @@ var Badge = react.forwardRef(function Badge2({
         fontSize: 12,
         fontWeight: doodleUiFontWeight(650),
         lineHeight: 1.4,
-        letterSpacing: "0.01em"
+        letterSpacing: "0.01em",
+        color: ink
       },
       fill,
-      fillStyle: fillStyle ?? "hachure",
+      fillStyle: fillStyle ?? (fill ? "hachure" : void 0),
+      hachureGap: hachureGap ?? 6,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.9,
       roughness,
       seed,
       sketchColor: ink,
@@ -1283,35 +1502,42 @@ var Badge = react.forwardRef(function Badge2({
     }
   );
 });
-var VARIANT_COLOR = {
-  info: SKETCH_COLORS.info,
-  warning: SKETCH_COLORS.warning,
-  error: SKETCH_COLORS.error,
-  success: SKETCH_COLORS.success
-};
-var VARIANT_FILL = {
+var LIGHT_VARIANT_FILL = {
   info: "#d2deec",
   warning: "#f3e2c0",
   error: "#f3d0cc",
   success: "#d3e8dc"
 };
+var DARK_VARIANT_FILL = {
+  info: "rgba(96, 165, 250, 0.16)",
+  warning: "rgba(251, 191, 36, 0.16)",
+  error: "rgba(248, 113, 113, 0.16)",
+  success: "rgba(52, 211, 153, 0.16)"
+};
 var Alert = react.forwardRef(function Alert2({
   children,
   className,
   style,
   variant = "info",
   title,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   role = "status",
   animate,
   ...rest
 }, ref) {
-  const color = sketchColor ?? VARIANT_COLOR[variant];
+  const theme = useSketchTheme(sketchColor);
+  const color = sketchColor ?? theme[variant];
+  const defaultFill = theme.isDark ? DARK_VARIANT_FILL[variant] : LIGHT_VARIANT_FILL[variant];
+  const resolvedFill = fill ?? defaultFill;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SketchBox,
     {
@@ -1319,14 +1545,17 @@ var Alert = react.forwardRef(function Alert2({
       role,
       className: cn(className),
       style: { color, ...style },
-      contentStyle: { padding: "12px 16px" },
+      contentStyle: { padding: "12px 16px", color: theme.ink },
       roughness,
       seed,
       sketchColor: color,
       bowing,
       fillStyle: fillStyle ?? "hachure",
-      fill: VARIANT_FILL[variant],
+      fill: resolvedFill,
       strokeWidth,
+      hachureGap: hachureGap ?? 9,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.85,
       animate,
       drawInDuration: DRAW_IN_ALERT_MS,
       ...rest,
@@ -1337,12 +1566,13 @@ var Alert = react.forwardRef(function Alert2({
             style: {
               fontWeight: doodleUiFontWeight(700),
               marginBottom: 4,
-              fontSize: 15
+              fontSize: 15,
+              color
             },
             children: title
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, lineHeight: 1.5, color: SKETCH_COLORS.ink }, children })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, lineHeight: 1.5, color: theme.ink }, children })
       ]
     }
   );
@@ -1356,15 +1586,20 @@ function Modal({
   description,
   children,
   className,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   const shouldAnimate = useAnimate(animate);
@@ -1385,7 +1620,7 @@ function Modal({
           style: {
             position: "fixed",
             inset: 0,
-            background: "rgba(31, 29, 26, 0.38)",
+            background: theme.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
             zIndex: 70
           }
         }
@@ -1414,7 +1649,8 @@ function Modal({
               style: {
                 width: "min(480px, calc(100vw - 32px))",
                 outline: "none",
-                pointerEvents: "auto"
+                pointerEvents: "auto",
+                color: ink
               },
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 SketchBox,
@@ -1424,11 +1660,14 @@ function Modal({
                   sketchColor: ink,
                   bowing,
                   fillStyle: fillStyle ?? "solid",
-                  fill: "#f7f6f2",
+                  fill: fill ?? theme.paper,
                   strokeWidth: strokeWidth ?? 2,
+                  hachureGap,
+                  hachureAngle,
+                  fillWeight,
                   shadow: true,
                   animate,
-                  contentStyle: { padding: "20px 22px 18px" },
+                  contentStyle: { padding: "20px 22px 18px", color: ink },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       "div",
@@ -1471,12 +1710,10 @@ function Modal({
                             {
                               variant: "ghost",
                               size: "sm",
-                              roughness,
-                              seed,
                               sketchColor: ink,
-                              animate,
-                              "aria-label": "Close",
-                              children: "Close"
+                              "aria-label": "Close dialog",
+                              style: { padding: "2px 8px", minHeight: 26 },
+                              children: "\u2715"
                             }
                           ) })
                         ]
@@ -1486,11 +1723,13 @@ function Modal({
                       Dialog__namespace.Description,
                       {
                         style: {
-                          margin: "0 0 14px",
+                          margin: 0,
+                          marginBottom: 14,
                           fontSize: 14,
-                          lineHeight: 1.5,
-                          color: ink,
-                          opacity: 0.8
+                          lineHeight: 1.4,
+                          opacity: 0.78,
+                          fontFamily: doodleUiFontFamily,
+                          color: ink
                         },
                         children: description
                       }
@@ -1521,10 +1760,15 @@ var Divider = react.forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate,
     ...rest
   }, ref) {
     const rootRef = react.useRef(null);
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const shouldAnimate = useAnimate(animate);
     const horizontal = orientation === "horizontal";
     useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
@@ -1552,9 +1796,12 @@ var Divider = react.forwardRef(
             shape: horizontal ? "line" : "line-vertical",
             roughness: roughness ?? 1.8,
             seed,
-            sketchColor: sketchColor ?? SKETCH_COLORS.ink,
+            sketchColor: ink,
             bowing: bowing ?? 2,
             strokeWidth: strokeWidth ?? 1.5,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             inset: 4
           }
         )
@@ -1574,12 +1821,16 @@ var Progress = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    fillWeight,
     animate,
     ...rest
   }, ref) {
     const rootRef = react.useRef(null);
     const trackRef = react.useRef(null);
-    const ink = sketchColor ?? SKETCH_COLORS.accent;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.accent;
+    const trackInk = sketchColor ?? (theme.isDark ? "rgba(243, 244, 246, 0.45)" : theme.ink);
     const clamped = Math.min(max, Math.max(0, value));
     const percent = max === 0 ? 0 : clamped / max * 100;
     const shouldAnimate = useAnimate(animate);
@@ -1619,7 +1870,7 @@ var Progress = react.forwardRef(
                   shape: "rectangle",
                   roughness,
                   seed: resolvedSeed,
-                  sketchColor: SKETCH_COLORS.ink,
+                  sketchColor: trackInk,
                   bowing,
                   strokeWidth: strokeWidth ?? 1.5,
                   inset: 2
@@ -1650,6 +1901,8 @@ var Progress = react.forwardRef(
                   fillStyle: fillStyle ?? "hachure",
                   bowing,
                   strokeWidth: 1.1,
+                  hachureGap: hachureGap ?? 5,
+                  fillWeight: fillWeight ?? 1.2,
                   inset: 1
                 }
               )
@@ -1667,15 +1920,20 @@ function Tooltip({
   side = "top",
   delayDuration = 200,
   className,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { delayDuration, children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1693,8 +1951,11 @@ function Tooltip({
             sketchColor: ink,
             bowing,
             fillStyle: fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? theme.paper,
             strokeWidth: strokeWidth ?? 1.4,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             animate,
             drawInDuration: DRAW_IN_TOOLTIP_MS,
             contentStyle: {
@@ -1729,12 +1990,16 @@ function Select({
   placeholder = "Select\u2026",
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   value,
   defaultValue,
   onValueChange,
@@ -1746,7 +2011,8 @@ function Select({
   const selectedValue = value ?? uncontrolled;
   const selectedLabel = options.find((option) => option.value === selectedValue)?.label;
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectSketchContext.Provider,
     {
@@ -1757,8 +2023,13 @@ function Select({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        accent: theme.accent,
         selectedValue,
         selectedLabel,
         placeholder,
@@ -1844,7 +2115,7 @@ var SelectTrigger = react.forwardRef(
               shape: "rectangle",
               roughness: sketch.roughness,
               seed: sketch.resolvedSeed,
-              sketchColor: openish ? SKETCH_COLORS.accent : sketch.ink,
+              sketchColor: openish ? sketch.accent : sketch.ink,
               bowing: sketch.bowing,
               fillStyle: sketch.fillStyle,
               strokeWidth: openish ? (sketch.strokeWidth ?? 1.75) + 0.35 : sketch.strokeWidth
@@ -1895,7 +2166,7 @@ var SelectTrigger = react.forwardRef(
   }
 );
 var SelectContent = react.forwardRef(
-  function SelectContent2({ className, style, children, ...rest }, ref) {
+  function SelectContent2({ className, style, children, fill, ...rest }, ref) {
     const sketch = useSelectSketch();
     return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       SelectPrimitive__namespace.Content,
@@ -1908,6 +2179,7 @@ var SelectContent = react.forwardRef(
           zIndex: 80,
           outline: "none",
           minWidth: "var(--radix-select-trigger-width)",
+          color: sketch.ink,
           ...style
         },
         ...rest,
@@ -1919,10 +2191,13 @@ var SelectContent = react.forwardRef(
             sketchColor: sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? sketch.paper,
             strokeWidth: sketch.strokeWidth ?? 1.5,
+            hachureGap: sketch.hachureGap,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight,
             animate: sketch.animate,
-            contentStyle: { padding: "6px 4px" },
+            contentStyle: { padding: "6px 4px", color: sketch.ink },
             children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { children })
           }
         )
@@ -1968,7 +2243,7 @@ var SelectItem = react.forwardRef(
               shape: "line",
               roughness: (sketch.roughness ?? 1.5) + 0.4,
               seed: sketch.resolvedSeed,
-              sketchColor: selected ? SKETCH_COLORS.accent : sketch.ink,
+              sketchColor: selected ? sketch.accent : sketch.ink,
               bowing: sketch.bowing ?? 1.6,
               strokeWidth: selected ? 1.8 : 1.3,
               inset: UNDERLINE_INSET,
@@ -2017,7 +2292,10 @@ var Switch = react.forwardRef(
   }, ref) {
     const [uncontrolled, setUncontrolled] = react.useState(defaultChecked === true);
     const isOn = checked ?? uncontrolled;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const activeColor = sketchColor ?? theme.accent;
+    const activeFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
     const resolvedSeed = useResolvedSeed(seed);
     const shouldAnimate = useAnimate(animate);
     const trackRef = react.useRef(null);
@@ -2033,6 +2311,7 @@ var Switch = react.forwardRef(
           gap: 8,
           cursor: "pointer",
           userSelect: "none",
+          color: ink,
           ...style
         },
         children: [
@@ -2071,10 +2350,10 @@ var Switch = react.forwardRef(
                         shape: "rectangle",
                         roughness,
                         seed: trackSeed,
-                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
+                        sketchColor: isOn ? activeColor : ink,
                         bowing: bowing ?? 1.4,
                         fillStyle: fillStyle ?? (isOn ? "hachure" : void 0),
-                        fill: isOn ? SKETCH_COLORS.accentFill : void 0,
+                        fill: isOn ? activeFill : void 0,
                         strokeWidth: strokeWidth ?? 1.6,
                         inset: 1.5
                       }
@@ -2102,8 +2381,8 @@ var Switch = react.forwardRef(
                         shape: "ellipse",
                         roughness: (roughness ?? 1.5) * 0.85,
                         seed: deriveSeed(resolvedSeed, "thumb"),
-                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
-                        fill: "#f7f6f2",
+                        sketchColor: isOn ? activeColor : ink,
+                        fill: theme.paper,
                         fillStyle: "solid",
                         bowing,
                         strokeWidth: (strokeWidth ?? 1.5) + 0.2,
@@ -2122,7 +2401,8 @@ var Switch = react.forwardRef(
               style: {
                 fontSize: 15,
                 cursor: "pointer",
-                fontFamily: doodleUiFontFamily
+                fontFamily: doodleUiFontFamily,
+                color: ink
               },
               children: label
             }
@@ -2159,7 +2439,9 @@ var Tabs = react.forwardRef(function Tabs2({
   const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
   const current = value ?? uncontrolled;
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
   const shouldAnimate = useAnimate(animate);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsSketchContext.Provider,
@@ -2173,6 +2455,7 @@ var Tabs = react.forwardRef(function Tabs2({
         strokeWidth,
         resolvedSeed,
         ink,
+        accent,
         current,
         shouldAnimate
       },
@@ -2222,7 +2505,7 @@ function TabUnderline({
           shape: "line",
           roughness: (sketch.roughness ?? 1.5) + 0.35,
           seed,
-          sketchColor: SKETCH_COLORS.accent,
+          sketchColor: sketch.accent,
           bowing: sketch.bowing ?? 1.8,
           strokeWidth: (sketch.strokeWidth ?? 1.75) + 0.4,
           inset: 2
@@ -2305,7 +2588,7 @@ var Tab = react.forwardRef(function Tab2({ className, style, children, value, ..
         fontFamily: doodleUiFontFamily,
         fontSize: 15,
         fontWeight: active ? doodleUiFontWeight(650) : doodleUiFontWeight(400),
-        color: sketch.ink,
+        color: active ? sketch.accent : sketch.ink,
         outline: "none",
         ...style
       },
@@ -2403,7 +2686,8 @@ var Table = react.forwardRef(function Table2({
   const tableRef = react.useRef(null);
   const [lines, setLines] = react.useState([]);
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const shouldAnimate = useAnimate(animate);
   react.useLayoutEffect(() => {
     const wrapper = wrapperRef.current;
@@ -2576,18 +2860,18 @@ var TableCell = react.forwardRef(
     );
   }
 );
-var VARIANT_COLOR2 = {
-  info: SKETCH_COLORS.info,
-  warning: SKETCH_COLORS.warning,
-  error: SKETCH_COLORS.error,
-  success: SKETCH_COLORS.success
-};
-var VARIANT_FILL2 = {
+var LIGHT_VARIANT_FILL2 = {
   info: "#d2deec",
   warning: "#f3e2c0",
   error: "#f3d0cc",
   success: "#d3e8dc"
 };
+var DARK_VARIANT_FILL2 = {
+  info: "rgba(96, 165, 250, 0.16)",
+  warning: "rgba(251, 191, 36, 0.16)",
+  error: "rgba(248, 113, 113, 0.16)",
+  success: "rgba(52, 211, 153, 0.16)"
+};
 var POSITION_STYLE = {
   "top-left": { top: 16, left: 16 },
   "top-right": { top: 16, right: 16 },
@@ -2639,6 +2923,7 @@ function Toast({
   title,
   children,
   variant = "info",
+  fill,
   duration,
   className,
   style,
@@ -2648,6 +2933,9 @@ function Toast({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
   const position = react.useContext(ToastPositionContext);
@@ -2655,7 +2943,10 @@ function Toast({
   const [uncontrolled, setUncontrolled] = react.useState(defaultOpen ?? false);
   const isOpen = open ?? uncontrolled;
   const shouldAnimate = useAnimate(animate);
-  const color = sketchColor ?? VARIANT_COLOR2[variant];
+  const theme = useSketchTheme(sketchColor);
+  const color = sketchColor ?? theme[variant];
+  const defaultFill = theme.isDark ? DARK_VARIANT_FILL2[variant] : LIGHT_VARIANT_FILL2[variant];
+  const resolvedFill = fill ?? defaultFill;
   const offset = fromTop ? -14 : 14;
   function handleOpenChange(next) {
     setUncontrolled(next);
@@ -2690,11 +2981,14 @@ function Toast({
               sketchColor: color,
               bowing,
               fillStyle: fillStyle ?? "hachure",
-              fill: VARIANT_FILL2[variant],
+              fill: resolvedFill,
               strokeWidth: strokeWidth ?? 1.7,
+              hachureGap: hachureGap ?? 9,
+              hachureAngle,
+              fillWeight: fillWeight ?? 0.85,
               shadow: true,
               animate,
-              contentStyle: { padding: "12px 16px" },
+              contentStyle: { padding: "12px 16px", color: theme.ink },
               children: [
                 title ? /* @__PURE__ */ jsxRuntime.jsx(
                   ToastPrimitive__namespace.Title,
@@ -2718,7 +3012,7 @@ function Toast({
                       fontSize: 14,
                       lineHeight: 1.5,
                       fontFamily: doodleUiFontFamily,
-                      color: SKETCH_COLORS.ink
+                      color: theme.ink
                     },
                     children
                   }
@@ -2763,19 +3057,26 @@ var Accordion = react.forwardRef(
     sketchColor,
     bowing,
     fillStyle,
-    strokeWidth
+    strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const [uncontrolled, setUncontrolled] = react.useState(defaultValue ?? (type === "multiple" ? [] : void 0));
     const openValue = value ?? uncontrolled;
     const sketchValue = {
       roughness,
       seed: resolvedSeed,
-      sketchColor,
+      sketchColor: ink,
       bowing,
       fillStyle,
       strokeWidth,
+      hachureGap,
+      hachureAngle,
+      fillWeight,
       resolvedSeed,
       ink,
       openValue
@@ -2938,11 +3239,6 @@ var AccordionContent = react.forwardRef(function AccordionContent2({ className,
     }
   );
 });
-var STATUS_COLOR = {
-  online: SKETCH_COLORS.success,
-  offline: "#8a8680",
-  busy: SKETCH_COLORS.accent
-};
 var Avatar = react.forwardRef(
   function Avatar2({
     className,
@@ -2953,18 +3249,28 @@ var Avatar = react.forwardRef(
     size = 40,
     shape = "circle",
     status,
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const resolvedSeed = useResolvedSeed(seed);
     const roughShape = shape === "circle" ? "ellipse" : "rectangle";
     const badge = 12;
+    const statusColors = {
+      online: theme.success,
+      offline: theme.isDark ? "#9ca3af" : "#8a8680",
+      busy: theme.accent
+    };
     const rootStyle = {
       position: "relative",
       display: "inline-flex",
@@ -2991,8 +3297,11 @@ var Avatar = react.forwardRef(
               sketchColor: ink,
               bowing,
               fillStyle: fillStyle ?? "solid",
-              fill: "#f7f6f2",
+              fill: fill ?? theme.paper,
               strokeWidth: strokeWidth ?? 1.6,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               inset: 1.5
             }
           ),
@@ -3036,7 +3345,7 @@ var Avatar = react.forwardRef(
                       fontWeight: doodleUiFontWeight(650),
                       fontSize: Math.max(12, size * 0.36),
                       color: ink,
-                      background: SKETCH_COLORS.secondaryFill
+                      background: theme.secondaryFill
                     },
                     children: fallback
                   }
@@ -3061,8 +3370,8 @@ var Avatar = react.forwardRef(
                   shape: "ellipse",
                   roughness: (roughness ?? 1.5) * 0.8,
                   seed: deriveSeed(resolvedSeed, "status"),
-                  sketchColor: STATUS_COLOR[status],
-                  fill: STATUS_COLOR[status],
+                  sketchColor: statusColors[status],
+                  fill: statusColors[status],
                   fillStyle: "solid",
                   bowing,
                   strokeWidth: 1,
@@ -3079,16 +3388,23 @@ var Avatar = react.forwardRef(
 var Slider = react.forwardRef(function Slider2({
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   thumbShape = "circle",
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
+  const trackInk = sketchColor ?? (theme.isDark ? "rgba(243, 244, 246, 0.4)" : theme.ink);
   const resolvedSeed = useResolvedSeed(seed);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SliderPrimitive__namespace.Root,
@@ -3103,6 +3419,7 @@ var Slider = react.forwardRef(function Slider2({
         height: 28,
         userSelect: "none",
         touchAction: "none",
+        color: ink,
         ...style
       },
       ...rest,
@@ -3122,7 +3439,7 @@ var Slider = react.forwardRef(function Slider2({
                   shape: "line",
                   roughness: roughness ?? 1.8,
                   seed: resolvedSeed,
-                  sketchColor: ink,
+                  sketchColor: trackInk,
                   bowing: bowing ?? 2,
                   strokeWidth: strokeWidth ?? 1.6,
                   inset: 4
@@ -3142,7 +3459,7 @@ var Slider = react.forwardRef(function Slider2({
                       shape: "line",
                       roughness: (roughness ?? 1.5) + 0.4,
                       seed: deriveSeed(resolvedSeed, "range"),
-                      sketchColor: SKETCH_COLORS.accent,
+                      sketchColor: accent,
                       bowing: bowing ?? 1.6,
                       strokeWidth: (strokeWidth ?? 1.6) + 0.6,
                       inset: 4
@@ -3170,11 +3487,14 @@ var Slider = react.forwardRef(function Slider2({
                 shape: thumbShape === "square" ? "rectangle" : "ellipse",
                 roughness: (roughness ?? 1.5) * 0.85,
                 seed: deriveSeed(resolvedSeed, "thumb"),
-                sketchColor: SKETCH_COLORS.accent,
-                fill: "#f7f6f2",
+                sketchColor: accent,
+                fill: fill ?? theme.paper,
                 fillStyle: fillStyle ?? "solid",
                 bowing,
                 strokeWidth: (strokeWidth ?? 1.5) + 0.3,
+                hachureGap,
+                hachureAngle,
+                fillWeight,
                 inset: 1
               }
             )
@@ -3213,7 +3533,10 @@ var Pagination = react.forwardRef(
     strokeWidth,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
+    const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
     const resolvedSeed = useResolvedSeed(seed);
     const items = pageItems(page, count);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3226,6 +3549,7 @@ var Pagination = react.forwardRef(
           display: "inline-flex",
           alignItems: "center",
           gap: 4,
+          color: ink,
           ...style
         },
         ...rest,
@@ -3239,6 +3563,9 @@ var Pagination = react.forwardRef(
               roughness,
               seed: deriveSeed(resolvedSeed, "prev"),
               ink,
+              accent,
+              accentFill,
+              isDark: theme.isDark,
               bowing,
               strokeWidth,
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3278,6 +3605,9 @@ var Pagination = react.forwardRef(
                 roughness,
                 seed: deriveSeed(resolvedSeed, `page-${item}`),
                 ink,
+                accent,
+                accentFill,
+                isDark: theme.isDark,
                 bowing,
                 strokeWidth,
                 children: item
@@ -3294,6 +3624,9 @@ var Pagination = react.forwardRef(
               roughness,
               seed: deriveSeed(resolvedSeed, "next"),
               ink,
+              accent,
+              accentFill,
+              isDark: theme.isDark,
               bowing,
               strokeWidth,
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3324,10 +3657,15 @@ function PageButton({
   roughness,
   seed,
   ink,
+  accent,
+  accentFill,
+  isDark,
   bowing,
   strokeWidth,
   ...rest
 }) {
+  const activeColor = accent ?? ink;
+  const textColor = active ? isDark ? "#ffffff" : activeColor : ink;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -3342,7 +3680,7 @@ function PageButton({
         border: "none",
         background: "transparent",
         cursor: disabled ? "not-allowed" : "pointer",
-        color: ink,
+        color: textColor,
         fontFamily: doodleUiFontFamily,
         fontWeight: active ? doodleUiFontWeight(700) : doodleUiFontWeight(400),
         fontSize: 14,
@@ -3358,9 +3696,9 @@ function PageButton({
             shape: "ellipse",
             roughness,
             seed,
-            sketchColor: active ? SKETCH_COLORS.accent : ink,
+            sketchColor: active ? activeColor : ink,
             bowing,
-            fill: active ? SKETCH_COLORS.accentFill : void 0,
+            fill: active ? accentFill : void 0,
             fillStyle: active ? "hachure" : void 0,
             strokeWidth: active ? (strokeWidth ?? 1.6) + 0.3 : strokeWidth ?? 1.4,
             inset: 1.5
@@ -3372,7 +3710,7 @@ function PageButton({
             shape: "ellipse",
             roughness: (roughness ?? 1.5) + 0.45,
             seed,
-            sketchColor: SKETCH_COLORS.accent,
+            sketchColor: activeColor,
             bowing: bowing ?? 1.6,
             strokeWidth: 1.1,
             inset: -1.5,
@@ -3405,9 +3743,13 @@ var Breadcrumb = react.forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const resolvedSeed = useResolvedSeed(seed);
     const items = react.Children.toArray(children).filter(react.isValidElement);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3416,9 +3758,12 @@ var Breadcrumb = react.forwardRef(
         value: {
           roughness,
           seed: resolvedSeed,
-          sketchColor,
+          sketchColor: ink,
           bowing,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
           resolvedSeed,
           ink,
           separator
@@ -3557,11 +3902,15 @@ var Skeleton = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
     const base = useResolvedSeed(seed);
     const [tick, setTick] = react.useState(0);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     react.useEffect(() => {
       if (!pulse) return;
       const id = window.setInterval(() => {
@@ -3598,6 +3947,9 @@ var Skeleton = react.forwardRef(
             fillStyle: fillStyle ?? "hachure",
             bowing: bowing ?? 1.6,
             strokeWidth: strokeWidth ?? 1.1,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             inset: 2,
             style: { opacity: 0.28 }
           }
@@ -3618,15 +3970,21 @@ var Stepper = react.forwardRef(
     steps,
     current = 0,
     orientation = "horizontal",
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
     const resolvedSeed = useResolvedSeed(seed);
     const items = normalizeSteps(steps);
     const horizontal = orientation === "horizontal";
@@ -3640,13 +3998,15 @@ var Stepper = react.forwardRef(
           display: "flex",
           flexDirection: horizontal ? "row" : "column",
           alignItems: horizontal ? "flex-start" : "stretch",
+          color: ink,
           ...style
         },
         ...rest,
         children: items.map((step, index) => {
           const complete = index < current;
           const active = index === current;
-          const markerColor = complete || active ? SKETCH_COLORS.accent : ink;
+          const markerColor = complete || active ? accent : ink;
+          const completeFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -3694,10 +4054,13 @@ var Stepper = react.forwardRef(
                                 roughness,
                                 seed: deriveSeed(resolvedSeed, `step-${index}`),
                                 sketchColor: markerColor,
-                                fill: complete ? SKETCH_COLORS.accentFill : active ? "#f7f6f2" : void 0,
+                                fill: complete ? completeFill : active ? fill ?? theme.paper : void 0,
                                 fillStyle: complete || active ? fillStyle ?? "hachure" : void 0,
                                 bowing,
                                 strokeWidth: active ? (strokeWidth ?? 1.6) + 0.4 : strokeWidth ?? 1.5,
+                                hachureGap,
+                                hachureAngle,
+                                fillWeight,
                                 inset: 1.5
                               }
                             ),
@@ -3722,7 +4085,7 @@ var Stepper = react.forwardRef(
                               shape: horizontal ? "line" : "line-vertical",
                               roughness: (roughness ?? 1.5) + 0.3,
                               seed: deriveSeed(resolvedSeed, `connector-${index}`),
-                              sketchColor: complete ? SKETCH_COLORS.accent : ink,
+                              sketchColor: complete ? accent : theme.isDark ? "rgba(243, 244, 246, 0.35)" : ink,
                               bowing: bowing ?? 2,
                               strokeWidth: strokeWidth ?? 1.4,
                               inset: 2
@@ -3770,10 +4133,14 @@ var Label2 = react.forwardRef(function Label3({
   sketchColor,
   bowing,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const resolvedSeed = useResolvedSeed(seed);
   const shouldAnimate = useAnimate(animate);
   const markRef = react.useRef(null);
@@ -3809,11 +4176,14 @@ var Label2 = react.forwardRef(function Label3({
                 shape: "ellipse",
                 roughness: (roughness ?? 1.5) * 0.9,
                 seed: resolvedSeed,
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: theme.accent,
                 bowing,
                 fillStyle: "solid",
-                fill: SKETCH_COLORS.accent,
+                fill: theme.accent,
                 strokeWidth: strokeWidth ?? 1.2,
+                hachureGap,
+                hachureAngle,
+                fillWeight,
                 inset: 1
               }
             )
@@ -3849,10 +4219,14 @@ var Collapsible = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const [uncontrolled, setUncontrolled] = react.useState(defaultOpen ?? false);
     const isOpen = open ?? uncontrolled;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3861,10 +4235,13 @@ var Collapsible = react.forwardRef(
         value: {
           roughness,
           seed: resolvedSeed,
-          sketchColor,
+          sketchColor: ink,
           bowing,
           fillStyle,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
           resolvedSeed,
           ink,
           open: isOpen
@@ -3979,17 +4356,22 @@ function usePopoverSketch() {
 }
 function Popover({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     PopoverSketchContext.Provider,
     {
@@ -4000,8 +4382,12 @@ function Popover({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { ...rest, children })
@@ -4012,7 +4398,7 @@ var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
 var PopoverClose = PopoverPrimitive__namespace.Close;
 var PopoverContent = react.forwardRef(
-  function PopoverContent2({ className, style, children, sideOffset = 8, ...rest }, ref) {
+  function PopoverContent2({ className, style, children, fill, sideOffset = 8, ...rest }, ref) {
     const sketch = usePopoverSketch();
     return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       PopoverPrimitive__namespace.Content,
@@ -4020,7 +4406,7 @@ var PopoverContent = react.forwardRef(
         ref,
         sideOffset,
         className: cn(className),
-        style: { zIndex: 80, outline: "none", ...style },
+        style: { zIndex: 80, outline: "none", color: sketch.ink, ...style },
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           SketchBox,
@@ -4030,11 +4416,14 @@ var PopoverContent = react.forwardRef(
             sketchColor: sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? sketch.paper,
             strokeWidth: sketch.strokeWidth ?? 1.5,
+            hachureGap: sketch.hachureGap,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight,
             shadow: true,
             animate: sketch.animate,
-            contentStyle: { padding: "14px 16px", minWidth: 200 },
+            contentStyle: { padding: "14px 16px", minWidth: 200, color: sketch.ink },
             children
           }
         )
@@ -4042,12 +4431,9 @@ var PopoverContent = react.forwardRef(
     ) });
   }
 );
-var PopoverArrow = react.forwardRef(
-  function PopoverArrow2(props, ref) {
-    const sketch = usePopoverSketch();
-    return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { ref, fill: sketch.ink, ...props });
-  }
-);
+function PopoverArrow(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { ...props });
+}
 var DropdownMenuSketchContext = react.createContext(null);
 function useDropdownMenuSketch() {
   const ctx = react.useContext(DropdownMenuSketchContext);
@@ -4060,17 +4446,22 @@ function useDropdownMenuSketch() {
 }
 function DropdownMenu({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuSketchContext.Provider,
     {
@@ -4081,8 +4472,13 @@ function DropdownMenu({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        accent: theme.accent,
         animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Root, { ...rest, children })
@@ -4093,7 +4489,7 @@ var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
-var DropdownMenuContent = react.forwardRef(function DropdownMenuContent2({ className, style, children, sideOffset = 6, align = "start", ...rest }, ref) {
+var DropdownMenuContent = react.forwardRef(function DropdownMenuContent2({ className, style, children, fill, sideOffset = 6, align = "start", ...rest }, ref) {
   const sketch = useDropdownMenuSketch();
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Content,
@@ -4102,7 +4498,7 @@ var DropdownMenuContent = react.forwardRef(function DropdownMenuContent2({ class
       sideOffset,
       align,
       className: cn(className),
-      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      style: { zIndex: 80, outline: "none", minWidth: 180, color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SketchBox,
@@ -4112,11 +4508,14 @@ var DropdownMenuContent = react.forwardRef(function DropdownMenuContent2({ class
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: "6px 4px" },
+          contentStyle: { padding: "6px 4px", color: sketch.ink },
           children
         }
       )
@@ -4231,7 +4630,7 @@ var DropdownMenuCheckboxItem = react.forwardRef(function DropdownMenuCheckboxIte
                 path: CHECK_PATH2,
                 roughness: (sketch.roughness ?? 1.5) * 0.7,
                 seed: deriveSeed(sketch.resolvedSeed, "checkbox-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 strokeWidth: 1.6,
                 inset: 0
@@ -4299,10 +4698,10 @@ var DropdownMenuRadioItem = react.forwardRef(function DropdownMenuRadioItem2({ c
                 shape: "ellipse",
                 roughness: (sketch.roughness ?? 1.5) * 0.8,
                 seed: deriveSeed(sketch.resolvedSeed, "radio-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 fillStyle: "solid",
-                fill: SKETCH_COLORS.accent,
+                fill: sketch.accent,
                 strokeWidth: 1.2,
                 inset: 0
               }
@@ -4377,17 +4776,22 @@ function Dialog2({
   open,
   defaultOpen,
   onOpenChange,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4400,8 +4804,13 @@ function Dialog2({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        isDark: theme.isDark,
         animate,
         open: isOpen
       },
@@ -4437,7 +4846,7 @@ var DialogOverlay = react.forwardRef(
         style: {
           position: "fixed",
           inset: 0,
-          background: "rgba(31, 29, 26, 0.38)",
+          background: sketch.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
           zIndex: 70,
           ...style
         }
@@ -4446,7 +4855,7 @@ var DialogOverlay = react.forwardRef(
   }
 );
 var DialogContent = react.forwardRef(
-  function DialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+  function DialogContent2({ className, style, contentStyle, fill, children, ...rest }, ref) {
     const sketch = useDialogSketch();
     const shouldAnimate = useAnimate(sketch.animate);
     return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
@@ -4476,6 +4885,7 @@ var DialogContent = react.forwardRef(
                 width: "min(420px, calc(100vw - 32px))",
                 outline: "none",
                 pointerEvents: "auto",
+                color: sketch.ink,
                 ...style
               },
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4486,10 +4896,13 @@ var DialogContent = react.forwardRef(
                   sketchColor: sketch.ink,
                   bowing: sketch.bowing,
                   fillStyle: sketch.fillStyle ?? "solid",
-                  fill: "#f7f6f2",
+                  fill: fill ?? sketch.paper,
                   strokeWidth: sketch.strokeWidth ?? 2,
+                  hachureGap: sketch.hachureGap,
+                  hachureAngle: sketch.hachureAngle,
+                  fillWeight: sketch.fillWeight,
                   animate: sketch.animate,
-                  contentStyle: { padding: 20, ...contentStyle },
+                  contentStyle: { padding: 20, color: sketch.ink, ...contentStyle },
                   children
                 }
               )
@@ -4586,17 +4999,22 @@ function AlertDialog({
   open,
   defaultOpen,
   onOpenChange,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4609,8 +5027,13 @@ function AlertDialog({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        isDark: theme.isDark,
         animate,
         open: isOpen
       },
@@ -4644,14 +5067,14 @@ var AlertDialogOverlay = react.forwardRef(function AlertDialogOverlay2({ style,
       style: {
         position: "fixed",
         inset: 0,
-        background: "rgba(31, 29, 26, 0.38)",
+        background: sketch.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
         zIndex: 70,
         ...style
       }
     }
   ) });
 });
-var AlertDialogContent = react.forwardRef(function AlertDialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+var AlertDialogContent = react.forwardRef(function AlertDialogContent2({ className, style, contentStyle, fill, children, ...rest }, ref) {
   const sketch = useAlertDialogSketch();
   const shouldAnimate = useAnimate(sketch.animate);
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPrimitive__namespace.Portal, { forceMount: true, children: [
@@ -4681,6 +5104,7 @@ var AlertDialogContent = react.forwardRef(function AlertDialogContent2({ classNa
               width: "min(420px, calc(100vw - 32px))",
               outline: "none",
               pointerEvents: "auto",
+              color: sketch.ink,
               ...style
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4691,10 +5115,13 @@ var AlertDialogContent = react.forwardRef(function AlertDialogContent2({ classNa
                 sketchColor: sketch.ink,
                 bowing: sketch.bowing,
                 fillStyle: sketch.fillStyle ?? "solid",
-                fill: "#f7f6f2",
+                fill: fill ?? sketch.paper,
                 strokeWidth: sketch.strokeWidth ?? 2,
+                hachureGap: sketch.hachureGap,
+                hachureAngle: sketch.hachureAngle,
+                fillWeight: sketch.fillWeight,
                 animate: sketch.animate,
-                contentStyle: { padding: 20, ...contentStyle },
+                contentStyle: { padding: 20, color: sketch.ink, ...contentStyle },
                 children
               }
             )
@@ -4836,11 +5263,15 @@ var Command = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate,
     ...rest
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     return /* @__PURE__ */ jsxRuntime.jsx(
       CommandSketchContext.Provider,
       {
@@ -4851,24 +5282,31 @@ var Command = react.forwardRef(
           bowing,
           fillStyle,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
           resolvedSeed,
           ink,
+          paper: theme.paper,
           animate
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           SketchBox,
           {
             className: cn(className),
-            style,
+            style: { color: ink, ...style },
             roughness,
             seed: resolvedSeed,
             sketchColor: ink,
             bowing,
             fillStyle: fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: theme.paper,
             strokeWidth: strokeWidth ?? 1.5,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             animate,
-            contentStyle: { padding: 0, display: "flex", flexDirection: "column" },
+            contentStyle: { padding: 0, display: "flex", flexDirection: "column", color: ink },
             children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command, { ref, ...rest, children })
           }
         )
@@ -5089,6 +5527,9 @@ function Combobox({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   "aria-label": ariaLabel
 }) {
@@ -5098,7 +5539,8 @@ function Combobox({
   const selectedOption = options.find(
     (option) => option.value === selectedValue
   );
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const resolvedSeed = useResolvedSeed(seed);
   const shouldAnimate = useAnimate(animate);
   const triggerRef = react.useRef(null);
@@ -5148,9 +5590,12 @@ function Combobox({
               shape: "rectangle",
               roughness,
               seed: resolvedSeed,
-              sketchColor: open ? SKETCH_COLORS.accent : ink,
+              sketchColor: open ? theme.accent : ink,
               bowing,
               fillStyle,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               strokeWidth: open ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
             }
           ),
@@ -5209,6 +5654,9 @@ function Combobox({
             bowing,
             fillStyle,
             strokeWidth,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             animate,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: searchPlaceholder }),
@@ -5236,16 +5684,21 @@ var Kbd = react.forwardRef(function Kbd2({
   children,
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SketchBox,
     {
@@ -5253,6 +5706,7 @@ var Kbd = react.forwardRef(function Kbd2({
       style: {
         display: "inline-flex",
         verticalAlign: "middle",
+        color: ink,
         ...style
       },
       contentStyle: {
@@ -5260,10 +5714,14 @@ var Kbd = react.forwardRef(function Kbd2({
         fontSize: 11,
         fontFamily: doodleUiFontFamily,
         lineHeight: 1.35,
-        letterSpacing: "0.04em"
+        letterSpacing: "0.04em",
+        color: ink
       },
-      fill: SKETCH_COLORS.secondaryFill,
+      fill: fill ?? theme.secondaryFill,
       fillStyle: fillStyle ?? "hachure",
+      hachureGap: hachureGap ?? 6,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.8,
       roughness,
       seed,
       sketchColor: ink,
@@ -5310,7 +5768,8 @@ var Spinner = react.forwardRef(
   }, ref) {
     const px = SIZE_PX[size];
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const shouldSpin = useAnimate(animate);
     const boxStyle = {
       position: "relative",
@@ -5378,6 +5837,9 @@ var Toggle = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     pressed,
     defaultPressed,
     onPressedChange,
@@ -5389,7 +5851,10 @@ var Toggle = react.forwardRef(
     const rootRef = react.useRef(null);
     const [uncontrolled, setUncontrolled] = react.useState(defaultPressed === true);
     const isPressed = pressed ?? uncontrolled;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
+    const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
     const resolvedSeed = useResolvedSeed(seed);
     const shouldAnimate = useAnimate(animate);
     const pressSeed = deriveSeed(resolvedSeed, isPressed ? "on" : "off");
@@ -5418,7 +5883,7 @@ var Toggle = react.forwardRef(
           border: "none",
           background: "transparent",
           cursor: disabled ? "not-allowed" : "pointer",
-          color: ink,
+          color: isPressed ? theme.isDark ? "#ffffff" : accent : ink,
           fontFamily: doodleUiFontFamily,
           fontWeight: doodleUiFontWeight(600),
           opacity: disabled ? 0.45 : 1,
@@ -5434,11 +5899,14 @@ var Toggle = react.forwardRef(
               shape: "rectangle",
               roughness,
               seed: sketchSeed,
-              sketchColor: isPressed ? SKETCH_COLORS.accent : ink,
+              sketchColor: isPressed ? accent : ink,
               bowing,
               fillStyle: fillStyle ?? "hachure",
-              fill: isPressed ? SKETCH_COLORS.accentFill : void 0,
-              strokeWidth: strokeWidth ?? 1.6
+              fill: isPressed ? accentFill : void 0,
+              strokeWidth: strokeWidth ?? 1.6,
+              hachureGap: hachureGap ?? 7,
+              hachureAngle,
+              fillWeight: fillWeight ?? 1
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
@@ -5464,13 +5932,19 @@ function ToggleGroup(props) {
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     size = "md",
     animate,
     type = "single",
     ...rest
   } = props;
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
+  const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
   const rootStyle = { display: "inline-flex", gap: 6, flexWrap: "wrap" };
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupSketchContext.Provider,
@@ -5482,8 +5956,14 @@ function ToggleGroup(props) {
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        accent,
+        accentFill,
+        isDark: theme.isDark,
         animate,
         size
       },
@@ -5532,6 +6012,7 @@ var ToggleGroupItem = react.forwardRef(function ToggleGroupItem2({ className, st
     return () => obs.disconnect();
   }, [value]);
   useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
+  const textColor = pressed ? sketch.isDark ? "#ffffff" : sketch.accent : sketch.ink;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -5550,7 +6031,7 @@ var ToggleGroupItem = react.forwardRef(function ToggleGroupItem2({ className, st
         border: "none",
         background: "transparent",
         cursor: disabled ? "not-allowed" : "pointer",
-        color: sketch.ink,
+        color: textColor,
         fontFamily: doodleUiFontFamily,
         fontWeight: doodleUiFontWeight(600),
         opacity: disabled ? 0.45 : 1,
@@ -5566,11 +6047,14 @@ var ToggleGroupItem = react.forwardRef(function ToggleGroupItem2({ className, st
             shape: "rectangle",
             roughness: sketch.roughness,
             seed: sketchSeed,
-            sketchColor: pressed ? SKETCH_COLORS.accent : sketch.ink,
+            sketchColor: pressed ? sketch.accent : sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "hachure",
-            fill: pressed ? SKETCH_COLORS.accentFill : void 0,
-            strokeWidth: sketch.strokeWidth ?? 1.6
+            fill: pressed ? sketch.accentFill : void 0,
+            strokeWidth: sketch.strokeWidth ?? 1.6,
+            hachureGap: sketch.hachureGap ?? 7,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight ?? 1
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
@@ -5596,13 +6080,17 @@ function InputGroup({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   onFocus,
   onBlur,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [focused, setFocused] = react.useState(false);
   const shouldAnimate = useAnimate(animate);
   const focusSeed = deriveSeed(resolvedSeed, "focus");
@@ -5613,12 +6101,16 @@ function InputGroup({
       value: {
         roughness,
         seed: resolvedSeed,
-        sketchColor,
+        sketchColor: ink,
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        accent: theme.accent,
         animate,
         focused,
         setFocused
@@ -5644,10 +6136,13 @@ function InputGroup({
             {
               roughness,
               seed: sketchSeed,
-              sketchColor: focused ? SKETCH_COLORS.accent : ink,
+              sketchColor: focused ? theme.accent : ink,
               bowing,
               fillStyle,
               strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               animate,
               drawInKey: sketchSeed,
               contentStyle: {
@@ -5747,24 +6242,35 @@ var InputOTP = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
+    fill,
     animate,
     children,
     ...rest
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     return /* @__PURE__ */ jsxRuntime.jsx(
       InputOTPSketchContext.Provider,
       {
         value: {
           roughness,
           seed: resolvedSeed,
-          sketchColor,
+          sketchColor: ink,
           bowing,
           fillStyle,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
+          fill,
           resolvedSeed,
           ink,
+          accent: theme.accent,
+          paper: theme.paper,
           animate
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5841,9 +6347,13 @@ var InputOTPSlot = react.forwardRef(
               shape: "rectangle",
               roughness: sketch.roughness,
               seed: slotSeed,
-              sketchColor: isActive ? SKETCH_COLORS.accent : sketch.ink,
+              sketchColor: isActive ? sketch.accent : sketch.ink,
               bowing: sketch.bowing,
               fillStyle: sketch.fillStyle,
+              fill: sketch.fill,
+              hachureGap: sketch.hachureGap,
+              hachureAngle: sketch.hachureAngle,
+              fillWeight: sketch.fillWeight,
               strokeWidth: isActive ? (sketch.strokeWidth ?? 1.75) + 0.15 : sketch.strokeWidth
             }
           ),
@@ -5903,17 +6413,22 @@ var ScrollArea = react.forwardRef(function ScrollArea2({
   className,
   style,
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollAreaSketchContext.Provider,
     {
@@ -5924,8 +6439,12 @@ var ScrollArea = react.forwardRef(function ScrollArea2({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5933,7 +6452,7 @@ var ScrollArea = react.forwardRef(function ScrollArea2({
         {
           ref,
           className: cn(className),
-          style: { position: "relative", overflow: "hidden", ...style },
+          style: { position: "relative", overflow: "hidden", color: ink, ...style },
           ...rest,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             SketchBox,
@@ -5943,10 +6462,13 @@ var ScrollArea = react.forwardRef(function ScrollArea2({
               sketchColor: ink,
               bowing,
               fillStyle: fillStyle ?? "solid",
-              fill: "#f7f6f2",
+              fill: fill ?? theme.paper,
               strokeWidth: strokeWidth ?? 1.5,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               animate,
-              contentStyle: { padding: 0, height: "100%" },
+              contentStyle: { padding: 0, height: "100%", color: ink },
               style: { height: "100%" },
               children
             }
@@ -6035,7 +6557,8 @@ function ResizableHandle({
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const handleSeed = deriveSeed(resolvedSeed, "handle");
   const base = {
     position: "relative",
@@ -6109,17 +6632,22 @@ function useHoverCardSketch() {
 }
 function HoverCard({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     HoverCardSketchContext.Provider,
     {
@@ -6130,8 +6658,12 @@ function HoverCard({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardPrimitive__namespace.Root, { ...rest, children })
@@ -6139,7 +6671,7 @@ function HoverCard({
   );
 }
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = react.forwardRef(function HoverCardContent2({ className, style, children, sideOffset = 6, align = "center", ...rest }, ref) {
+var HoverCardContent = react.forwardRef(function HoverCardContent2({ className, style, children, fill, sideOffset = 6, align = "center", ...rest }, ref) {
   const sketch = useHoverCardSketch();
   return /* @__PURE__ */ jsxRuntime.jsx(HoverCardPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     HoverCardPrimitive__namespace.Content,
@@ -6148,7 +6680,7 @@ var HoverCardContent = react.forwardRef(function HoverCardContent2({ className,
       sideOffset,
       align,
       className: cn(className),
-      style: { zIndex: 75, outline: "none", ...style },
+      style: { zIndex: 75, outline: "none", color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SketchBox,
@@ -6158,11 +6690,14 @@ var HoverCardContent = react.forwardRef(function HoverCardContent2({ className,
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: 14, maxWidth: 320, fontSize: 14 },
+          contentStyle: { padding: 14, maxWidth: 320, fontSize: 14, color: sketch.ink },
           children
         }
       )
@@ -6182,17 +6717,22 @@ function useContextMenuSketch() {
 }
 function ContextMenu({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     ContextMenuSketchContext.Provider,
     {
@@ -6203,8 +6743,13 @@ function ContextMenu({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        accent: theme.accent,
         animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Root, { ...rest, children })
@@ -6215,14 +6760,14 @@ var ContextMenuTrigger = ContextMenuPrimitive__namespace.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive__namespace.Group;
 var ContextMenuRadioGroup = ContextMenuPrimitive__namespace.RadioGroup;
 var ContextMenuSub = ContextMenuPrimitive__namespace.Sub;
-var ContextMenuContent = react.forwardRef(function ContextMenuContent2({ className, style, children, ...rest }, ref) {
+var ContextMenuContent = react.forwardRef(function ContextMenuContent2({ className, style, children, fill, ...rest }, ref) {
   const sketch = useContextMenuSketch();
   return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     ContextMenuPrimitive__namespace.Content,
     {
       ref,
       className: cn(className),
-      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      style: { zIndex: 80, outline: "none", minWidth: 180, color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SketchBox,
@@ -6232,11 +6777,14 @@ var ContextMenuContent = react.forwardRef(function ContextMenuContent2({ classNa
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: "6px 4px" },
+          contentStyle: { padding: "6px 4px", color: sketch.ink },
           children
         }
       )
@@ -6351,7 +6899,7 @@ var ContextMenuCheckboxItem = react.forwardRef(function ContextMenuCheckboxItem2
                 path: CHECK_PATH3,
                 roughness: (sketch.roughness ?? 1.5) * 0.7,
                 seed: deriveSeed(sketch.resolvedSeed, "checkbox-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 strokeWidth: 1.6,
                 inset: 0
@@ -6419,10 +6967,10 @@ var ContextMenuRadioItem = react.forwardRef(function ContextMenuRadioItem2({ cla
                 shape: "ellipse",
                 roughness: (sketch.roughness ?? 1.5) * 0.8,
                 seed: deriveSeed(sketch.resolvedSeed, "radio-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 fillStyle: "solid",
-                fill: SKETCH_COLORS.accent,
+                fill: sketch.accent,
                 strokeWidth: 1.2,
                 inset: 0
               }
@@ -6492,17 +7040,22 @@ function useNavigationMenuSketch() {
 }
 function NavigationMenu({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuSketchContext.Provider,
     {
@@ -6513,8 +7066,12 @@ function NavigationMenu({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuPrimitive__namespace.Root, { ...rest, children: [
@@ -6569,14 +7126,14 @@ var NavigationMenuTrigger = react.forwardRef(function NavigationMenuTrigger2({ c
     }
   );
 });
-var NavigationMenuContent = react.forwardRef(function NavigationMenuContent2({ className, style, children, ...rest }, ref) {
+var NavigationMenuContent = react.forwardRef(function NavigationMenuContent2({ className, style, children, fill, ...rest }, ref) {
   const sketch = useNavigationMenuSketch();
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Content,
     {
       ref,
       className: cn(className),
-      style: { outline: "none", ...style },
+      style: { outline: "none", color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SketchBox,
@@ -6586,11 +7143,14 @@ var NavigationMenuContent = react.forwardRef(function NavigationMenuContent2({ c
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: 12, minWidth: 200 },
+          contentStyle: { padding: 12, minWidth: 200, color: sketch.ink },
           children
         }
       )
@@ -6692,17 +7252,22 @@ function Menubar({
   children,
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxRuntime.jsx(
     MenubarSketchContext.Provider,
     {
@@ -6713,8 +7278,12 @@ function Menubar({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6759,7 +7328,7 @@ var MenubarTrigger = react.forwardRef(function MenubarTrigger2({ className, styl
     }
   );
 });
-var MenubarContent = react.forwardRef(function MenubarContent2({ className, style, children, align = "start", sideOffset = 6, ...rest }, ref) {
+var MenubarContent = react.forwardRef(function MenubarContent2({ className, style, children, fill, align = "start", sideOffset = 6, ...rest }, ref) {
   const sketch = useMenubarSketch();
   return /* @__PURE__ */ jsxRuntime.jsx(MenubarPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     MenubarPrimitive__namespace.Content,
@@ -6768,7 +7337,7 @@ var MenubarContent = react.forwardRef(function MenubarContent2({ className, styl
       align,
       sideOffset,
       className: cn(className),
-      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      style: { zIndex: 80, outline: "none", minWidth: 180, color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SketchBox,
@@ -6778,11 +7347,14 @@ var MenubarContent = react.forwardRef(function MenubarContent2({ className, styl
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: "6px 4px" },
+          contentStyle: { padding: "6px 4px", color: sketch.ink },
           children
         }
       )
@@ -6921,17 +7493,22 @@ function SlidingPanelRoot({
   defaultOpen,
   onOpenChange,
   side = "right",
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6944,8 +7521,13 @@ function SlidingPanelRoot({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        isDark: theme.isDark,
         animate,
         open: isOpen,
         side
@@ -7023,14 +7605,14 @@ var SlidingPanelOverlay = react.forwardRef(function SlidingPanelOverlay2({ style
       style: {
         position: "fixed",
         inset: 0,
-        background: "rgba(31, 29, 26, 0.38)",
+        background: sketch.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
         zIndex: 70,
         ...style
       }
     }
   ) });
 });
-var SlidingPanelContent = react.forwardRef(function SlidingPanelContent2({ className, style, contentStyle, children, chrome, ...rest }, ref) {
+var SlidingPanelContent = react.forwardRef(function SlidingPanelContent2({ className, style, contentStyle, fill, children, chrome, ...rest }, ref) {
   const sketch = useSlidingPanelSketch();
   const shouldAnimate = useAnimate(sketch.animate);
   const variants = slideVariants(sketch.side, shouldAnimate);
@@ -7061,8 +7643,11 @@ var SlidingPanelContent = react.forwardRef(function SlidingPanelContent2({ class
             sketchColor: sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? sketch.paper,
             strokeWidth: sketch.strokeWidth ?? 2,
+            hachureGap: sketch.hachureGap,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight,
             animate: sketch.animate,
             contentStyle: {
               padding: 20,
@@ -7070,6 +7655,7 @@ var SlidingPanelContent = react.forwardRef(function SlidingPanelContent2({ class
               boxSizing: "border-box",
               display: "flex",
               flexDirection: "column",
+              color: sketch.ink,
               ...contentStyle
             },
             style: { height: "100%" },
@@ -7201,7 +7787,7 @@ var DrawerHandle = react.forwardRef(
             shape: "line",
             roughness: (sketch.roughness ?? 1.5) + 0.3,
             seed: deriveSeed(sketch.resolvedSeed, "drawer-handle"),
-            sketchColor: sketch.sketchColor ?? SKETCH_COLORS.ink,
+            sketchColor: sketch.sketchColor ?? sketch.ink,
             bowing: sketch.bowing ?? 1.6,
             strokeWidth: 2.4,
             width: 48,
@@ -7231,6 +7817,1406 @@ var DrawerHeader = SlidingPanelHeader;
 var DrawerFooter = SlidingPanelFooter;
 var DrawerTitle = SlidingPanelTitle;
 var DrawerDescription = SlidingPanelDescription;
+function AspectRatio({
+  ratio = 16 / 9,
+  bordered = false,
+  className,
+  style,
+  children,
+  fill,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
+  animate
+}) {
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const inner = /* @__PURE__ */ jsxRuntime.jsx(
+    AspectRatioPrimitive__namespace.Root,
+    {
+      ratio,
+      className: cn(className),
+      style: {
+        width: "100%",
+        overflow: "hidden",
+        color: ink,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%" }, children })
+    }
+  );
+  if (!bordered) {
+    return inner;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SketchBox,
+    {
+      className: cn(className),
+      style: { width: "100%", color: ink, ...style },
+      contentStyle: { padding: 0, width: "100%", color: ink },
+      fill: fill ?? theme.paper,
+      fillStyle: fillStyle ?? "solid",
+      hachureGap,
+      hachureAngle,
+      fillWeight,
+      roughness,
+      seed,
+      sketchColor: ink,
+      bowing,
+      strokeWidth,
+      animate,
+      children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { ratio, style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%" }, children }) })
+    }
+  );
+}
+var CHEVRON_PATH6 = "M 4 6 L 10 12 L 16 6";
+var NativeSelect = react.forwardRef(
+  function NativeSelect2({
+    className,
+    style,
+    options,
+    children,
+    fill,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
+    animate,
+    disabled,
+    ...rest
+  }, ref) {
+    const fieldRef = react.useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    const resolvedSeed = useResolvedSeed(seed);
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(className),
+        style: {
+          position: "relative",
+          display: "block",
+          width: "100%",
+          opacity: disabled ? 0.6 : 1,
+          color: ink,
+          ...style
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed: resolvedSeed,
+              sketchColor: ink,
+              bowing,
+              fillStyle: fillStyle ?? "solid",
+              fill: fill ?? theme.paper,
+              strokeWidth,
+              hachureGap,
+              hachureAngle,
+              fillWeight
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "option",
+                {
+                  value: opt.value,
+                  disabled: opt.disabled,
+                  children: opt.label
+                },
+                opt.value
+              )) : children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: CHEVRON_PATH6,
+                  roughness: (roughness ?? 1.5) * 0.85,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1.5
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var EmptyContext = react.createContext(null);
+function useEmptyInk() {
+  const ctx = react.useContext(EmptyContext);
+  const theme = useSketchTheme();
+  return ctx?.ink ?? theme.ink;
+}
+var emptyContentStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  gap: 12,
+  padding: "32px 24px",
+  minHeight: 160,
+  width: "100%"
+};
+var Empty = react.forwardRef(function Empty2({
+  className,
+  style,
+  children,
+  bordered = true,
+  fill,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
+  animate,
+  ...rest
+}, ref) {
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const inner = /* @__PURE__ */ jsxRuntime.jsx(EmptyContext.Provider, { value: { ink }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: bordered ? void 0 : ref,
+      className: cn(className),
+      style: { ...emptyContentStyle, color: ink, ...style },
+      ...bordered ? {} : rest,
+      children
+    }
+  ) });
+  if (!bordered) {
+    return inner;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SketchBox,
+    {
+      ref,
+      className: cn(className),
+      style: { width: "100%", color: ink, ...style },
+      contentStyle: { ...emptyContentStyle, color: ink },
+      fill: fill ?? theme.secondaryFill,
+      fillStyle: fillStyle ?? "hachure",
+      hachureGap: hachureGap ?? 8,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.85,
+      roughness,
+      seed,
+      sketchColor: ink,
+      bowing,
+      strokeWidth,
+      animate,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(EmptyContext.Provider, { value: { ink }, children })
+    }
+  );
+});
+function EmptyMedia({
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        justifyContent: "center",
+        marginTop: 8,
+        ...style
+      },
+      children
+    }
+  );
+}
+var FieldContext = react.createContext(null);
+function useField() {
+  const ctx = react.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 = react.useId();
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const value = react.useMemo(
+    () => ({
+      id,
+      descriptionId,
+      errorId,
+      invalid: invalid || Boolean(error),
+      error
+    }),
+    [id, descriptionId, errorId, invalid, error]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Label2, { htmlFor: id, className, style, ...rest });
+}
+function FieldDescription({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { descriptionId } = useField();
+  const theme = useSketchTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      id: descriptionId,
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        lineHeight: 1.45,
+        color: theme.ink,
+        opacity: 0.75,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function FieldError({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { error, errorId } = useField();
+  const theme = useSketchTheme();
+  const message = children ?? error;
+  if (!message) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      id: errorId,
+      role: "alert",
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        lineHeight: 1.45,
+        color: theme.error,
+        ...style
+      },
+      ...rest,
+      children: message
+    }
+  );
+}
+function FieldControl({ children }) {
+  const { id, descriptionId, errorId, invalid } = useField();
+  const child = react.Children.only(children);
+  if (!react.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 react.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 = react.forwardRef(
+  function Heading2({
+    level = 2,
+    accent = "none",
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const Tag = `h${level}`;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accentColor = sketchColor ?? theme.accent;
+    const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
+    const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const accentRef = react.useRef(null);
+    useDrawIn(accentRef, DRAW_IN_MARK_MS, shouldAnimate && accent !== "none");
+    const fontSize = HEADING_SIZES[level];
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { style: { position: "relative", display: "inline" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                ref: accentRef,
+                "aria-hidden": true,
+                style: {
+                  position: "absolute",
+                  left: -4,
+                  right: -4,
+                  bottom: 2,
+                  height: "0.45em",
+                  zIndex: 0
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  RoughSvg,
+                  {
+                    shape: "rectangle",
+                    roughness,
+                    seed: resolvedSeed,
+                    sketchColor: accentColor,
+                    fill: accentFill,
+                    fillStyle: "solid",
+                    bowing,
+                    strokeWidth: strokeWidth ?? 1.2
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+          ] }) : children,
+          accent === "underline" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: accentRef,
+              "aria-hidden": true,
+              style: {
+                display: "block",
+                position: "relative",
+                height: 6,
+                marginTop: 4,
+                maxWidth: "100%"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: "M 2 4 Q 40 1 80 5 T 160 3",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: accentColor,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1.5
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var Text = react.forwardRef(function Text2({ variant = "body", className, style, children, ...rest }, ref) {
+  const theme = useSketchTheme();
+  const sizes = { body: 14, lead: 17, muted: 13 };
+  const opacity = variant === "muted" ? 0.75 : 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        margin: 0,
+        fontFamily: doodleUiFontFamily,
+        fontSize: sizes[variant],
+        fontWeight: doodleUiFontWeight(variant === "lead" ? 500 : 400),
+        lineHeight: 1.55,
+        color: theme.ink,
+        opacity,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var Paragraph = Text;
+var Blockquote = react.forwardRef(
+  function Blockquote2({
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
+    const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const ruleRef = react.useRef(null);
+    useDrawIn(ruleRef, DRAW_IN_MARK_MS, shouldAnimate);
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: ruleRef,
+              "aria-hidden": true,
+              style: { position: "relative", width: 6, flexShrink: 0, minHeight: 40 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "line-vertical",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: accent,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 2
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+        ]
+      }
+    );
+  }
+);
+var InlineCode = react.forwardRef(
+  function InlineCode2({
+    className,
+    style,
+    children,
+    fill,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
+    animate,
+    ...rest
+  }, ref) {
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SketchBox,
+      {
+        className: cn(className),
+        style: { display: "inline-flex", verticalAlign: "baseline", color: ink, ...style },
+        contentStyle: {
+          padding: "1px 6px",
+          fontSize: "0.9em",
+          fontFamily: "ui-monospace, monospace",
+          color: ink
+        },
+        fill: fill ?? theme.paper,
+        fillStyle: fillStyle ?? "solid",
+        roughness,
+        seed,
+        sketchColor: ink,
+        bowing,
+        strokeWidth: strokeWidth ?? 1.2,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
+        animate,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "code",
+          {
+            ref,
+            style: {
+              border: "none",
+              background: "transparent",
+              padding: 0,
+              font: "inherit",
+              color: ink
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var Highlight = react.forwardRef(
+  function Highlight2({
+    className,
+    style,
+    children,
+    fill,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const theme = useSketchTheme(sketchColor);
+    const accent = sketchColor ?? theme.accent;
+    const accentFill = fill ?? (theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill);
+    const shouldAnimate = useAnimate(animate);
+    const markRef = react.useRef(null);
+    useDrawIn(markRef, DRAW_IN_MARK_MS, shouldAnimate);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn(className),
+        style: { position: "relative", display: "inline", ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: markRef,
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                left: -2,
+                right: -2,
+                bottom: 0,
+                top: "35%",
+                zIndex: 0
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "rectangle",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: accent,
+                  fill: accentFill,
+                  fillStyle: "solid",
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+        ]
+      }
+    );
+  }
+);
+var SIDEBAR_WIDTH = 240;
+var SIDEBAR_WIDTH_COLLAPSED = 56;
+var SidebarContext = react.createContext(null);
+function useSidebar() {
+  const ctx = react.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] = react.useState(defaultOpen);
+  const [collapsed, setCollapsed] = react.useState(defaultCollapsed);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = react.useCallback(
+    (next) => {
+      onOpenChange?.(next);
+      if (openProp === void 0) {
+        setUncontrolledOpen(next);
+      }
+    },
+    [onOpenChange, openProp]
+  );
+  const toggleCollapsed = react.useCallback(() => {
+    setCollapsed((c) => !c);
+  }, []);
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const paper = theme.paper;
+  const value = react.useMemo(
+    () => ({
+      open,
+      setOpen,
+      collapsed,
+      toggleCollapsed,
+      ink,
+      paper,
+      sketch: { roughness, seed, sketchColor: ink, bowing, strokeWidth }
+    }),
+    [
+      open,
+      setOpen,
+      collapsed,
+      toggleCollapsed,
+      ink,
+      paper,
+      roughness,
+      seed,
+      bowing,
+      strokeWidth
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value, children });
+}
+var Sidebar = react.forwardRef(function Sidebar2({ className, style, children, fill, side = "left", ...rest }, ref) {
+  const { open, collapsed, ink, paper, sketch } = useSidebar();
+  const resolvedSeed = useResolvedSeed(sketch.seed);
+  const width = collapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH;
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        position: "relative",
+        flexShrink: 0,
+        width,
+        minHeight: 200,
+        transition: "width 200ms ease",
+        display: "flex",
+        flexDirection: "column",
+        background: fill ?? paper,
+        color: ink,
+        ...style
+      },
+      "data-side": side,
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              width: 4,
+              ...side === "left" ? { right: 0 } : { left: 0 },
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "line-vertical",
+                roughness: sketch.roughness,
+                seed: resolvedSeed,
+                sketchColor: sketch.sketchColor ?? ink,
+                bowing: sketch.bowing,
+                strokeWidth: sketch.strokeWidth ?? 1.5
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+function SidebarHeader({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { collapsed, ink } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        padding: collapsed ? "12px 8px" : "16px 14px",
+        borderBottom: `1px solid ${ink}22`,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarContent({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        flex: 1,
+        overflow: "auto",
+        padding: "8px 6px",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarFooter({
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { ink } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        padding: "12px 10px",
+        borderTop: `1px solid ${ink}22`,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarGroup({
+  className,
+  style,
+  children,
+  title,
+  ...rest
+}) {
+  const { collapsed, ink } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(className),
+      style: { marginBottom: 12, ...style },
+      ...rest,
+      children: [
+        title && !collapsed ? /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(
+  function SidebarItem2({ className, style, children, active, ...rest }, ref) {
+    const { collapsed, ink, sketch } = useSidebar();
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        flex: 1,
+        padding: 16,
+        minWidth: 0,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+var CarouselContext = react.createContext(null);
+function useCarousel() {
+  const ctx = react.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,
+  fill,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  strokeWidth,
+  fillStyle,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
+  animate
+}) {
+  const [emblaRef, api] = useEmblaCarousel__default.default(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = react.useState(false);
+  const [canScrollNext, setCanScrollNext] = react.useState(false);
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const paper = fill ?? theme.paper;
+  const scrollPrev = react.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = react.useCallback(() => api?.scrollNext(), [api]);
+  const onSelect = react.useCallback(() => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, [api]);
+  react.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 = react.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: ink,
+      bowing,
+      strokeWidth,
+      fillStyle,
+      hachureGap,
+      hachureAngle,
+      fillWeight,
+      animate,
+      paper,
+      ink
+    },
+    bordered
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      role: "region",
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      style: {
+        position: "relative",
+        width: "100%",
+        outline: "none",
+        color: ink,
+        ...style
+      },
+      children
+    }
+  ) });
+}
+var CarouselContent = react.forwardRef(
+  function CarouselContent2({ className, style, children, ...rest }, ref) {
+    const { emblaRef, orientation, bordered, sketch } = useCarousel();
+    const viewport = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      SketchBox,
+      {
+        fill: sketch.paper,
+        fillStyle: sketch.fillStyle ?? "solid",
+        roughness: sketch.roughness,
+        seed: sketch.seed,
+        sketchColor: sketch.sketchColor,
+        bowing: sketch.bowing,
+        strokeWidth: sketch.strokeWidth,
+        hachureGap: sketch.hachureGap,
+        hachureAngle: sketch.hachureAngle,
+        fillWeight: sketch.fillWeight,
+        animate: sketch.animate,
+        contentStyle: { padding: 8, color: sketch.ink },
+        children: viewport
+      }
+    );
+  }
+);
+var CarouselItem = react.forwardRef(
+  function CarouselItem2({ className, style, children, ...rest }, ref) {
+    const { orientation } = useCarousel();
+    const gap = 16;
+    return /* @__PURE__ */ jsxRuntime.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 = react.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.ink;
+  const isPrev = direction === "prev";
+  const disabled = isPrev ? !canScrollPrev : !canScrollNext;
+  const shouldAnimate = useAnimate(sketch.animate);
+  const rootRef = react.useRef(null);
+  const sketchSeed = deriveSeed(resolvedSeed, direction);
+  useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "ellipse",
+            roughness: sketch.roughness,
+            seed: sketchSeed,
+            sketchColor: ink,
+            bowing: sketch.bowing,
+            fill: sketch.paper,
+            fillStyle: "solid",
+            strokeWidth: sketch.strokeWidth ?? 1.5,
+            inset: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              zIndex: 1,
+              width: 18,
+              height: 22,
+              display: "block",
+              margin: "0 auto"
+            },
+            children: /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(
+  function CarouselPrevious2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CarouselArrow, { ref, direction: "prev", ...props });
+  }
+);
+var CarouselNext = react.forwardRef(
+  function CarouselNext2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CarouselArrow, { ref, direction: "next", ...props });
+  }
+);
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -7248,12 +9234,19 @@ exports.AlertDialogOverlay = AlertDialogOverlay;
 exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
+exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
+exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Button = Button;
 exports.Card = Card;
+exports.Carousel = Carousel;
+exports.CarouselContent = CarouselContent;
+exports.CarouselItem = CarouselItem;
+exports.CarouselNext = CarouselNext;
+exports.CarouselPrevious = CarouselPrevious;
 exports.Checkbox = Checkbox;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent;
@@ -7278,8 +9271,13 @@ exports.ContextMenuRadioItem = ContextMenuRadioItem;
 exports.ContextMenuSeparator = ContextMenuSeparator;
 exports.ContextMenuSub = ContextMenuSub;
 exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.DARK_SKETCH_COLORS = DARK_SKETCH_COLORS;
 exports.DEFAULT_BOWING = DEFAULT_BOWING;
+exports.DEFAULT_DARK_CARD_BG = DEFAULT_DARK_CARD_BG;
+exports.DEFAULT_DARK_INK = DEFAULT_DARK_INK;
+exports.DEFAULT_DARK_PAPER = DEFAULT_DARK_PAPER;
 exports.DEFAULT_INK = DEFAULT_INK;
+exports.DEFAULT_PAPER = DEFAULT_PAPER;
 exports.DEFAULT_ROUGHNESS = DEFAULT_ROUGHNESS;
 exports.DEFAULT_STROKE_WIDTH = DEFAULT_STROKE_WIDTH;
 exports.DRAW_IN_ALERT_MS = DRAW_IN_ALERT_MS;
@@ -7318,10 +9316,23 @@ exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.Empty = Empty;
+exports.EmptyAction = EmptyAction;
+exports.EmptyDescription = EmptyDescription;
+exports.EmptyMedia = EmptyMedia;
+exports.EmptyTitle = EmptyTitle;
+exports.Field = Field;
+exports.FieldControl = FieldControl;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldLabel = FieldLabel;
+exports.Heading = Heading;
+exports.Highlight = Highlight;
 exports.HoverCard = HoverCard;
 exports.HoverCardArrow = HoverCardArrow;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
+exports.InlineCode = InlineCode;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.InputGroupAddon = InputGroupAddon;
@@ -7353,6 +9364,7 @@ exports.ModalDescription = ModalDescription;
 exports.ModalRoot = ModalRoot;
 exports.ModalTitle = ModalTitle;
 exports.ModalTrigger = ModalTrigger;
+exports.NativeSelect = NativeSelect;
 exports.NavigationMenu = NavigationMenu;
 exports.NavigationMenuContent = NavigationMenuContent;
 exports.NavigationMenuIndicator = NavigationMenuIndicator;
@@ -7363,6 +9375,7 @@ exports.NavigationMenuList = NavigationMenuList;
 exports.NavigationMenuTrigger = NavigationMenuTrigger;
 exports.NavigationMenuViewport = NavigationMenuViewport;
 exports.Pagination = Pagination;
+exports.Paragraph = Paragraph;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverArrow = PopoverArrow;
@@ -7398,6 +9411,16 @@ exports.SheetFooter = SheetFooter;
 exports.SheetHeader = SheetHeader;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
+exports.Sidebar = Sidebar;
+exports.SidebarContent = SidebarContent;
+exports.SidebarFooter = SidebarFooter;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarHeader = SidebarHeader;
+exports.SidebarInset = SidebarInset;
+exports.SidebarItem = SidebarItem;
+exports.SidebarLayout = SidebarLayout;
+exports.SidebarProvider = SidebarProvider;
+exports.SidebarTrigger = SidebarTrigger;
 exports.Skeleton = Skeleton;
 exports.SketchBox = SketchBox;
 exports.SketchSeedProvider = SketchSeedProvider;
@@ -7416,6 +9439,7 @@ exports.TableHead = TableHead;
 exports.TableHeaderCell = TableHeaderCell;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
+exports.Text = Text;
 exports.Textarea = Textarea;
 exports.Toast = Toast;
 exports.ToastAction = ToastAction;
@@ -7433,9 +9457,12 @@ exports.TooltipProvider = TooltipProvider;
 exports.deriveSeed = deriveSeed;
 exports.toRoughOptions = toRoughOptions;
 exports.useAnimate = useAnimate;
+exports.useCarousel = useCarousel;
 exports.useDoodleUI = useDoodleUI;
 exports.useDrawIn = useDrawIn;
 exports.useResolvedSeed = useResolvedSeed;
+exports.useSidebar = useSidebar;
 exports.useSketchSeed = useSketchSeed;
+exports.useSketchTheme = useSketchTheme;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map