@moontra/moonui 2.2.4 → 2.2.6

package/dist/index.js

@@ -1445,8 +1445,6 @@ var CheckboxWithLabel = t__namespace.forwardRef(({
   ] });
 });
 CheckboxWithLabel.displayName = "CheckboxWithLabel";
-
-// ../../node_modules/@radix-ui/primitive/dist/index.mjs
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler?.(event);
@@ -1713,7 +1711,7 @@ function usePresence(present) {
       const ownerWindow = node.ownerDocument.defaultView ?? window;
       const handleAnimationEnd = (event) => {
         const currentAnimationName = getAnimationName(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
         if (event.target === node && isCurrentAnimation) {
           send("ANIMATION_END");
           if (!prevPresentRef.current) {
@@ -3263,6 +3261,88 @@ function D(_) {
 function W(_, C, h) {
   return _ = h && h.length > 0 ? `${_ + " " + h.join(" ")}` : _, G(_, C, D(_), D(C), 0, 0, {});
 }
+var NODES2 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive2 = NODES2.reduce((primitive, node) => {
+  const Slot = reactSlot.createSlot(`Primitive.${node}`);
+  const Node = t__namespace.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node };
+}, {});
+var useLayoutEffect22 = globalThis?.document ? t__namespace.useLayoutEffect : () => {
+};
+
+// ../../node_modules/@radix-ui/react-id/dist/index.mjs
+var useReactId2 = t__namespace[" useId ".trim().toString()] || (() => void 0);
+var count2 = 0;
+function useId3(deterministicId) {
+  const [id, setId] = t__namespace.useState(useReactId2());
+  useLayoutEffect22(() => {
+    if (!deterministicId)
+      setId((reactId) => reactId ?? String(count2++));
+  }, [deterministicId]);
+  return deterministicId || (id ? `radix-${id}` : "");
+}
+function setRef2(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs2(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef2(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef2(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs2(...refs) {
+  return t__namespace.useCallback(composeRefs2(...refs), refs);
+}
+
+// ../../node_modules/cmdk/dist/index.mjs
 var N = '[cmdk-group=""]';
 var Y2 = '[cmdk-group-items=""]';
 var be = '[cmdk-group-heading=""]';
@@ -3280,7 +3360,7 @@ var me = t__namespace.forwardRef((r, o) => {
   let n = L(() => {
     var e, a;
     return { search: "", value: (a = (e = r.value) != null ? e : r.defaultValue) != null ? a : "", selectedItemId: void 0, filtered: { count: 0, items: /* @__PURE__ */ new Map(), groups: /* @__PURE__ */ new Set() } };
-  }), u2 = L(() => /* @__PURE__ */ new Set()), c = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), p2 = pe(r), { label: b, children: m2, value: R, onValueChange: x, filter: C, shouldFilter: S, loop: A, disablePointerSelection: ge = false, vimBindings: j = true, ...O } = r, $2 = useId2(), q = useId2(), _ = useId2(), I = t__namespace.useRef(null), v = ke();
+  }), u2 = L(() => /* @__PURE__ */ new Set()), c = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), p2 = pe(r), { label: b, children: m2, value: R, onValueChange: x, filter: C, shouldFilter: S, loop: A, disablePointerSelection: ge = false, vimBindings: j = true, ...O } = r, $2 = useId3(), q = useId3(), _ = useId3(), I = t__namespace.useRef(null), v = ke();
   k2(() => {
     if (R !== void 0) {
       let e = R.trim();
@@ -3415,7 +3495,7 @@ var me = t__namespace.forwardRef((r, o) => {
   }, se = (e) => {
     e.preventDefault(), e.metaKey ? X8(0) : e.altKey ? re(-1) : Q(-1);
   };
-  return t__namespace.createElement(Primitive.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
+  return t__namespace.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
     (s = O.onKeyDown) == null || s.call(O, e);
     let a = e.nativeEvent.isComposing || e.keyCode === 229;
@@ -3460,7 +3540,7 @@ var me = t__namespace.forwardRef((r, o) => {
 });
 var he = t__namespace.forwardRef((r, o) => {
   var _, I;
-  let n = useId2(), u2 = t__namespace.useRef(null), c = t__namespace.useContext(fe), d = K2(), f = pe(r), p2 = (I = (_ = f.current) == null ? void 0 : _.forceMount) != null ? I : c == null ? void 0 : c.forceMount;
+  let n = useId3(), u2 = t__namespace.useRef(null), c = t__namespace.useContext(fe), d = K2(), f = pe(r), p2 = (I = (_ = f.current) == null ? void 0 : _.forceMount) != null ? I : c == null ? void 0 : c.forceMount;
   k2(() => {
     if (!p2)
       return d.item(n, c == null ? void 0 : c.id);
@@ -3481,23 +3561,23 @@ var he = t__namespace.forwardRef((r, o) => {
   if (!x)
     return null;
   let { disabled: A, value: ge, onSelect: j, forceMount: O, keywords: $2, ...q } = r;
-  return t__namespace.createElement(Primitive.div, { ref: composeRefs(u2, o), ...q, id: n, "cmdk-item": "", role: "option", "aria-disabled": !!A, "aria-selected": !!R, "data-disabled": !!A, "data-selected": !!R, onPointerMove: A || d.getDisablePointerSelection() ? void 0 : S, onClick: A ? void 0 : C }, r.children);
+  return t__namespace.createElement(Primitive2.div, { ref: composeRefs2(u2, o), ...q, id: n, "cmdk-item": "", role: "option", "aria-disabled": !!A, "aria-selected": !!R, "data-disabled": !!A, "data-selected": !!R, onPointerMove: A || d.getDisablePointerSelection() ? void 0 : S, onClick: A ? void 0 : C }, r.children);
 });
 var Ee = t__namespace.forwardRef((r, o) => {
-  let { heading: n, children: u2, forceMount: c, ...d } = r, f = useId2(), p2 = t__namespace.useRef(null), b = t__namespace.useRef(null), m2 = useId2(), R = K2(), x = P((S) => c || R.filter() === false ? true : S.search ? S.filtered.groups.has(f) : true);
+  let { heading: n, children: u2, forceMount: c, ...d } = r, f = useId3(), p2 = t__namespace.useRef(null), b = t__namespace.useRef(null), m2 = useId3(), R = K2(), x = P((S) => c || R.filter() === false ? true : S.search ? S.filtered.groups.has(f) : true);
   k2(() => R.group(f), []), ve(f, p2, [r.value, r.heading, b]);
   let C = t__namespace.useMemo(() => ({ id: f, forceMount: c }), [c]);
-  return t__namespace.createElement(Primitive.div, { ref: composeRefs(p2, o), ...d, "cmdk-group": "", role: "presentation", hidden: x ? void 0 : true }, n && t__namespace.createElement("div", { ref: b, "cmdk-group-heading": "", "aria-hidden": true, id: m2 }, n), B2(r, (S) => t__namespace.createElement("div", { "cmdk-group-items": "", role: "group", "aria-labelledby": n ? m2 : void 0 }, t__namespace.createElement(fe.Provider, { value: C }, S))));
+  return t__namespace.createElement(Primitive2.div, { ref: composeRefs2(p2, o), ...d, "cmdk-group": "", role: "presentation", hidden: x ? void 0 : true }, n && t__namespace.createElement("div", { ref: b, "cmdk-group-heading": "", "aria-hidden": true, id: m2 }, n), B2(r, (S) => t__namespace.createElement("div", { "cmdk-group-items": "", role: "group", "aria-labelledby": n ? m2 : void 0 }, t__namespace.createElement(fe.Provider, { value: C }, S))));
 });
 var ye = t__namespace.forwardRef((r, o) => {
   let { alwaysRender: n, ...u2 } = r, c = t__namespace.useRef(null), d = P((f) => !f.search);
-  return !n && !d ? null : t__namespace.createElement(Primitive.div, { ref: composeRefs(c, o), ...u2, "cmdk-separator": "", role: "separator" });
+  return !n && !d ? null : t__namespace.createElement(Primitive2.div, { ref: composeRefs2(c, o), ...u2, "cmdk-separator": "", role: "separator" });
 });
 var Se = t__namespace.forwardRef((r, o) => {
   let { onValueChange: n, ...u2 } = r, c = r.value != null, d = ee(), f = P((m2) => m2.search), p2 = P((m2) => m2.selectedItemId), b = K2();
   return t__namespace.useEffect(() => {
     r.value != null && d.setState("search", r.value);
-  }, [r.value]), t__namespace.createElement(Primitive.input, { ref: o, ...u2, "cmdk-input": "", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-expanded": true, "aria-controls": b.listId, "aria-labelledby": b.labelId, "aria-activedescendant": p2, id: b.inputId, type: "text", value: c ? r.value : f, onChange: (m2) => {
+  }, [r.value]), t__namespace.createElement(Primitive2.input, { ref: o, ...u2, "cmdk-input": "", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-expanded": true, "aria-controls": b.listId, "aria-labelledby": b.labelId, "aria-activedescendant": p2, id: b.inputId, type: "text", value: c ? r.value : f, onChange: (m2) => {
     c || d.setState("search", m2.target.value), n == null || n(m2.target.value);
   } });
 });
@@ -3515,16 +3595,16 @@ var Ce = t__namespace.forwardRef((r, o) => {
         cancelAnimationFrame(x), C.unobserve(m2);
       };
     }
-  }, []), t__namespace.createElement(Primitive.div, { ref: composeRefs(d, o), ...c, "cmdk-list": "", role: "listbox", tabIndex: -1, "aria-activedescendant": p2, "aria-label": u2, id: b.listId }, B2(r, (m2) => t__namespace.createElement("div", { ref: composeRefs(f, b.listInnerRef), "cmdk-list-sizer": "" }, m2)));
+  }, []), t__namespace.createElement(Primitive2.div, { ref: composeRefs2(d, o), ...c, "cmdk-list": "", role: "listbox", tabIndex: -1, "aria-activedescendant": p2, "aria-label": u2, id: b.listId }, B2(r, (m2) => t__namespace.createElement("div", { ref: composeRefs2(f, b.listInnerRef), "cmdk-list-sizer": "" }, m2)));
 });
 var xe = t__namespace.forwardRef((r, o) => {
   let { open: n, onOpenChange: u2, overlayClassName: c, contentClassName: d, container: f, ...p2 } = r;
   return t__namespace.createElement(DialogPrimitive__namespace.Root, { open: n, onOpenChange: u2 }, t__namespace.createElement(DialogPrimitive__namespace.Portal, { container: f }, t__namespace.createElement(DialogPrimitive__namespace.Overlay, { "cmdk-overlay": "", className: c }), t__namespace.createElement(DialogPrimitive__namespace.Content, { "aria-label": r.label, "cmdk-dialog": "", className: d }, t__namespace.createElement(me, { ref: o, ...p2 }))));
 });
-var Ie = t__namespace.forwardRef((r, o) => P((u2) => u2.filtered.count === 0) ? t__namespace.createElement(Primitive.div, { ref: o, ...r, "cmdk-empty": "", role: "presentation" }) : null);
+var Ie = t__namespace.forwardRef((r, o) => P((u2) => u2.filtered.count === 0) ? t__namespace.createElement(Primitive2.div, { ref: o, ...r, "cmdk-empty": "", role: "presentation" }) : null);
 var Pe = t__namespace.forwardRef((r, o) => {
   let { progress: n, children: u2, label: c = "Loading...", ...d } = r;
-  return t__namespace.createElement(Primitive.div, { ref: o, ...d, "cmdk-loading": "", role: "progressbar", "aria-valuenow": n, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": c }, B2(r, (f) => t__namespace.createElement("div", { "aria-hidden": true }, f)));
+  return t__namespace.createElement(Primitive2.div, { ref: o, ...d, "cmdk-loading": "", role: "progressbar", "aria-valuenow": n, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": c }, B2(r, (f) => t__namespace.createElement("div", { "aria-hidden": true }, f)));
 });
 var _e = Object.assign(me, { List: Ce, Item: he, Input: Se, Group: Ee, Separator: ye, Dialog: xe, Empty: Ie, Loading: Pe });
 function we(r, o) {
@@ -4677,16 +4757,16 @@ var extent = (columnId, _leafRows, childRows) => {
   return [min2, max2];
 };
 var mean = (columnId, leafRows) => {
-  let count3 = 0;
+  let count4 = 0;
   let sum2 = 0;
   leafRows.forEach((row) => {
     let value = row.getValue(columnId);
     if (value != null && (value = +value) >= value) {
-      ++count3, sum2 += value;
+      ++count4, sum2 += value;
     }
   });
-  if (count3)
-    return sum2 / count3;
+  if (count4)
+    return sum2 / count4;
   return;
 };
 var median = (columnId, leafRows) => {
@@ -4710,7 +4790,7 @@ var unique = (columnId, leafRows) => {
 var uniqueCount = (columnId, leafRows) => {
   return new Set(leafRows.map((d) => d.getValue(columnId))).size;
 };
-var count2 = (_columnId, leafRows) => {
+var count3 = (_columnId, leafRows) => {
   return leafRows.length;
 };
 var aggregationFns = {
@@ -4722,7 +4802,7 @@ var aggregationFns = {
   median,
   unique,
   uniqueCount,
-  count: count2
+  count: count3
 };
 var ColumnGrouping = {
   getDefaultColumnDef: () => {
@@ -8444,7 +8524,7 @@ function DatePicker({
     /* @__PURE__ */ jsxRuntime.jsx(
       PopoverContent,
       {
-        className: "w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]",
+        className: "w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]",
         align: "start",
         sideOffset: 12,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8535,7 +8615,7 @@ function DateRangePicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]", align: "start", sideOffset: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]", align: "start", sideOffset: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
       Calendar,
       {
         mode: "range",
@@ -8693,7 +8773,7 @@ function MonthPicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background z-[1000]", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background !z-[9999]", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
@@ -10101,6 +10181,188 @@ function RichTextEditor({
     )
   ] });
 }
+function useStateMachine2(initialState, machine) {
+  return t__namespace.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var Presence2 = (props) => {
+  const { present, children } = props;
+  const presence = usePresence2(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : t__namespace.Children.only(children);
+  const ref = useComposedRefs2(presence.ref, getElementRef2(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? t__namespace.cloneElement(child, { ref }) : null;
+};
+Presence2.displayName = "Presence";
+function usePresence2(present) {
+  const [node, setNode] = t__namespace.useState();
+  const stylesRef = t__namespace.useRef(null);
+  const prevPresentRef = t__namespace.useRef(present);
+  const prevAnimationNameRef = t__namespace.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine2(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  t__namespace.useEffect(() => {
+    const currentAnimationName = getAnimationName2(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect22(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName2(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect22(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName2(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName2(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: t__namespace.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName2(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef2(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+function createContextScope2(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext32(rootComponentName, defaultContext) {
+    const BaseContext = t__namespace.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider3 = (props) => {
+      const { scope, children, ...context } = props;
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const value = t__namespace.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
+    };
+    Provider3.displayName = rootComponentName + "Provider";
+    function useContext22(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const context = t__namespace.useContext(Context);
+      if (context)
+        return context;
+      if (defaultContext !== void 0)
+        return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider3, useContext22];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return t__namespace.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return t__namespace.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext32, composeContextScopes2(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes2(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1)
+    return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return t__namespace.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
 function useCallbackRef(callback) {
   const callbackRef = t__namespace.useRef(callback);
   t__namespace.useEffect(() => {
@@ -10118,14 +10380,24 @@ function useDirection(localDir) {
 function clamp(value, [min2, max2]) {
   return Math.min(max2, Math.max(min2, value));
 }
-function useStateMachine2(initialState, machine) {
+
+// ../../node_modules/@radix-ui/primitive/dist/index.mjs
+function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+function useStateMachine3(initialState, machine) {
   return t__namespace.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
 }
 var SCROLL_AREA_NAME = "ScrollArea";
-var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
+var [createScrollAreaContext, createScrollAreaScope] = createContextScope2(SCROLL_AREA_NAME);
 var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
 var ScrollArea = t__namespace.forwardRef(
   (props, forwardedRef) => {
@@ -10145,7 +10417,7 @@ var ScrollArea = t__namespace.forwardRef(
     const [cornerHeight, setCornerHeight] = t__namespace.useState(0);
     const [scrollbarXEnabled, setScrollbarXEnabled] = t__namespace.useState(false);
     const [scrollbarYEnabled, setScrollbarYEnabled] = t__namespace.useState(false);
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
+    const composedRefs = useComposedRefs2(forwardedRef, (node) => setScrollArea(node));
     const direction = useDirection(dir);
     return /* @__PURE__ */ jsxRuntime.jsx(
       ScrollAreaProvider,
@@ -10170,7 +10442,7 @@ var ScrollArea = t__namespace.forwardRef(
         onCornerWidthChange: setCornerWidth,
         onCornerHeightChange: setCornerHeight,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Primitive.div,
+          Primitive2.div,
           {
             dir: direction,
             ...scrollAreaProps,
@@ -10195,7 +10467,7 @@ var ScrollAreaViewport = t__namespace.forwardRef(
     const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
     const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
     const ref = t__namespace.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    const composedRefs = useComposedRefs2(forwardedRef, ref, context.onViewportChange);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "style",
@@ -10207,7 +10479,7 @@ var ScrollAreaViewport = t__namespace.forwardRef(
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Primitive.div,
+        Primitive2.div,
         {
           "data-radix-scroll-area-viewport": "",
           ...viewportProps,
@@ -10276,7 +10548,7 @@ var ScrollAreaScrollbarHover = t__namespace.forwardRef((props, forwardedRef) =>
       };
     }
   }, [context.scrollArea, context.scrollHideDelay]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || visible, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Presence2, { present: forceMount || visible, children: /* @__PURE__ */ jsxRuntime.jsx(
     ScrollAreaScrollbarAuto,
     {
       "data-state": visible ? "visible" : "hidden",
@@ -10290,7 +10562,7 @@ var ScrollAreaScrollbarScroll = t__namespace.forwardRef((props, forwardedRef) =>
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const isHorizontal = props.orientation === "horizontal";
   const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
-  const [state, send] = useStateMachine2("hidden", {
+  const [state, send] = useStateMachine3("hidden", {
     hidden: {
       SCROLL: "scrolling"
     },
@@ -10332,14 +10604,14 @@ var ScrollAreaScrollbarScroll = t__namespace.forwardRef((props, forwardedRef) =>
       return () => viewport.removeEventListener("scroll", handleScroll);
     }
   }, [context.viewport, isHorizontal, send, debounceScrollEnd]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || state !== "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Presence2, { present: forceMount || state !== "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
     ScrollAreaScrollbarVisible,
     {
       "data-state": state === "hidden" ? "hidden" : "visible",
       ...scrollbarProps,
       ref: forwardedRef,
-      onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
-      onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
+      onPointerEnter: composeEventHandlers2(props.onPointerEnter, () => send("POINTER_ENTER")),
+      onPointerLeave: composeEventHandlers2(props.onPointerLeave, () => send("POINTER_LEAVE"))
     }
   ) });
 });
@@ -10357,7 +10629,7 @@ var ScrollAreaScrollbarAuto = t__namespace.forwardRef((props, forwardedRef) => {
   }, 10);
   useResizeObserver(context.viewport, handleResize);
   useResizeObserver(context.content, handleResize);
-  return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || visible, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Presence2, { present: forceMount || visible, children: /* @__PURE__ */ jsxRuntime.jsx(
     ScrollAreaScrollbarVisible,
     {
       "data-state": visible ? "visible" : "hidden",
@@ -10445,7 +10717,7 @@ var ScrollAreaScrollbarX = t__namespace.forwardRef((props, forwardedRef) => {
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const [computedStyle, setComputedStyle] = t__namespace.useState();
   const ref = t__namespace.useRef(null);
-  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
+  const composeRefs3 = useComposedRefs2(forwardedRef, ref, context.onScrollbarXChange);
   t__namespace.useEffect(() => {
     if (ref.current)
       setComputedStyle(getComputedStyle(ref.current));
@@ -10455,7 +10727,7 @@ var ScrollAreaScrollbarX = t__namespace.forwardRef((props, forwardedRef) => {
     {
       "data-orientation": "horizontal",
       ...scrollbarProps,
-      ref: composeRefs2,
+      ref: composeRefs3,
       sizes,
       style: {
         bottom: 0,
@@ -10496,7 +10768,7 @@ var ScrollAreaScrollbarY = t__namespace.forwardRef((props, forwardedRef) => {
   const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
   const [computedStyle, setComputedStyle] = t__namespace.useState();
   const ref = t__namespace.useRef(null);
-  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
+  const composeRefs3 = useComposedRefs2(forwardedRef, ref, context.onScrollbarYChange);
   t__namespace.useEffect(() => {
     if (ref.current)
       setComputedStyle(getComputedStyle(ref.current));
@@ -10506,7 +10778,7 @@ var ScrollAreaScrollbarY = t__namespace.forwardRef((props, forwardedRef) => {
     {
       "data-orientation": "vertical",
       ...scrollbarProps,
-      ref: composeRefs2,
+      ref: composeRefs3,
       sizes,
       style: {
         top: 0,
@@ -10560,7 +10832,7 @@ var ScrollAreaScrollbarImpl = t__namespace.forwardRef((props, forwardedRef) => {
   } = props;
   const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
   const [scrollbar, setScrollbar] = t__namespace.useState(null);
-  const composeRefs2 = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
+  const composeRefs3 = useComposedRefs2(forwardedRef, (node) => setScrollbar(node));
   const rectRef = t__namespace.useRef(null);
   const prevWebkitUserSelectRef = t__namespace.useRef("");
   const viewport = context.viewport;
@@ -10599,12 +10871,12 @@ var ScrollAreaScrollbarImpl = t__namespace.forwardRef((props, forwardedRef) => {
       onThumbPositionChange: handleThumbPositionChange,
       onThumbPointerDown: useCallbackRef(onThumbPointerDown),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        Primitive.div,
+        Primitive2.div,
         {
           ...scrollbarProps,
-          ref: composeRefs2,
+          ref: composeRefs3,
           style: { position: "absolute", ...scrollbarProps.style },
-          onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+          onPointerDown: composeEventHandlers2(props.onPointerDown, (event) => {
             const mainPointer = 0;
             if (event.button === mainPointer) {
               const element = event.target;
@@ -10617,8 +10889,8 @@ var ScrollAreaScrollbarImpl = t__namespace.forwardRef((props, forwardedRef) => {
               handleDragScroll(event);
             }
           }),
-          onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
-          onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+          onPointerMove: composeEventHandlers2(props.onPointerMove, handleDragScroll),
+          onPointerUp: composeEventHandlers2(props.onPointerUp, (event) => {
             const element = event.target;
             if (element.hasPointerCapture(event.pointerId)) {
               element.releasePointerCapture(event.pointerId);
@@ -10638,7 +10910,7 @@ var ScrollAreaThumb = t__namespace.forwardRef(
   (props, forwardedRef) => {
     const { forceMount, ...thumbProps } = props;
     const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
-    return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Presence2, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
   }
 );
 var ScrollAreaThumbImpl = t__namespace.forwardRef(
@@ -10647,7 +10919,7 @@ var ScrollAreaThumbImpl = t__namespace.forwardRef(
     const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
     const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
     const { onThumbPositionChange } = scrollbarContext;
-    const composedRef = useComposedRefs(
+    const composedRef = useComposedRefs2(
       forwardedRef,
       (node) => scrollbarContext.onThumbChange(node)
     );
@@ -10675,7 +10947,7 @@ var ScrollAreaThumbImpl = t__namespace.forwardRef(
       }
     }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Primitive.div,
+      Primitive2.div,
       {
         "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
         ...thumbProps,
@@ -10685,14 +10957,14 @@ var ScrollAreaThumbImpl = t__namespace.forwardRef(
           height: "var(--radix-scroll-area-thumb-height)",
           ...style
         },
-        onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
+        onPointerDownCapture: composeEventHandlers2(props.onPointerDownCapture, (event) => {
           const thumb = event.target;
           const thumbRect = thumb.getBoundingClientRect();
           const x = event.clientX - thumbRect.left;
           const y = event.clientY - thumbRect.top;
           scrollbarContext.onThumbPointerDown({ x, y });
         }),
-        onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+        onPointerUp: composeEventHandlers2(props.onPointerUp, scrollbarContext.onThumbPointerUp)
       }
     );
   }
@@ -10725,7 +10997,7 @@ var ScrollAreaCornerImpl = t__namespace.forwardRef((props, forwardedRef) => {
     setWidth(width2);
   });
   return hasSize ? /* @__PURE__ */ jsxRuntime.jsx(
-    Primitive.div,
+    Primitive2.div,
     {
       ...cornerProps,
       ref: forwardedRef,
@@ -10814,7 +11086,7 @@ function useDebounceCallback(callback, delay) {
 }
 function useResizeObserver(element, onResize) {
   const handleResize = useCallbackRef(onResize);
-  useLayoutEffect2(() => {
+  useLayoutEffect22(() => {
     let rAF = 0;
     if (element) {
       const resizeObserver = new ResizeObserver(() => {
@@ -10982,17 +11254,81 @@ var Separator3 = t__namespace.forwardRef(
   )
 );
 Separator3.displayName = SeparatorPrimitive__namespace.Root.displayName;
+var useInsertionEffect2 = t__namespace[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
+function useControllableState2({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState2({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  {
+    const isControlledRef = t__namespace.useRef(prop !== void 0);
+    t__namespace.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = t__namespace.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const value2 = isFunction3(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          onChangeRef.current?.(value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState2({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = t__namespace.useState(defaultProp);
+  const prevValueRef = t__namespace.useRef(value);
+  const onChangeRef = t__namespace.useRef(onChange);
+  useInsertionEffect2(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  t__namespace.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction3(value) {
+  return typeof value === "function";
+}
 var NAME = "Toggle";
 var Toggle = t__namespace.forwardRef((props, forwardedRef) => {
   const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
-  const [pressed, setPressed] = useControllableState({
+  const [pressed, setPressed] = useControllableState2({
     prop: pressedProp,
     onChange: onPressedChange,
     defaultProp: defaultPressed ?? false,
     caller: NAME
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Primitive.button,
+    Primitive2.button,
     {
       type: "button",
       "aria-pressed": pressed,
@@ -11000,7 +11336,7 @@ var Toggle = t__namespace.forwardRef((props, forwardedRef) => {
       "data-disabled": props.disabled ? "" : void 0,
       ...buttonProps,
       ref: forwardedRef,
-      onClick: composeEventHandlers(props.onClick, () => {
+      onClick: composeEventHandlers2(props.onClick, () => {
         if (!props.disabled) {
           setPressed(!pressed);
         }
@@ -11327,7 +11663,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
       }
     }, [executeCommand, updateContent]);
     t__namespace.default.useEffect(() => {
-      if (editorRef.current && content !== editorRef.current.innerHTML) {
+      if (editorRef.current && content && content !== editorRef.current.innerHTML) {
         editorRef.current.innerHTML = content;
       }
     }, [content]);
@@ -11340,7 +11676,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
     const toolbar = showToolbar && /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
-        className: "flex items-center gap-1 p-2 border-b bg-muted/50",
+        className: "flex items-center gap-1 p-2 border-b bg-gray-50/50 dark:bg-zinc-800/50 backdrop-blur-sm",
         initial: { opacity: 0, y: -10 },
         animate: { opacity: 1, y: 0 },
         children: [
@@ -11387,7 +11723,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               Select,
               {
@@ -11419,7 +11755,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 ToolbarButton,
@@ -11462,7 +11798,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 ToolbarButton,
@@ -11505,7 +11841,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 ToolbarButton,
@@ -11526,7 +11862,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 ToolbarButton,
@@ -11547,7 +11883,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                 Button,
@@ -11562,7 +11898,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
               ) }),
               /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxRuntime.jsx(ColorPicker2, { onColorSelect: setTextColor }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 ToolbarButton,
@@ -11585,7 +11921,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
             ] })
           ] }),
           showPreview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            !isPreview && /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6" }),
+            !isPreview && /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "h-6 bg-gray-300 dark:bg-zinc-600" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               ToolbarButton,
               {
@@ -11612,7 +11948,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "border rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-ring",
+          "border border-gray-200 dark:border-zinc-700 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-ring focus-within:border-transparent",
           disabled && "opacity-50 cursor-not-allowed",
           className
         ),
@@ -11625,7 +11961,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
               {
                 initial: { opacity: 0 },
                 animate: { opacity: 1 },
-                className: "p-4",
+                className: "bg-slate-50 dark:bg-zinc-900/95",
                 style: { minHeight, maxHeight, overflow: "auto" },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "textarea",
@@ -11633,7 +11969,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
                     ref: sourceRef,
                     value: sourceContent,
                     onChange: (e) => setSourceContent(e.target.value),
-                    className: "w-full h-full bg-muted rounded-lg p-4 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring",
+                    className: "w-full h-full bg-transparent p-4 font-mono text-sm text-gray-900 dark:text-gray-100 resize-none focus:outline-none",
                     style: { minHeight: minHeight - 32 },
                     disabled,
                     placeholder: "HTML source code..."
@@ -11648,6 +11984,8 @@ var SimpleEditor = t__namespace.default.forwardRef(
                 suppressContentEditableWarning: true,
                 className: cn(
                   "p-4 outline-none prose prose-sm dark:prose-invert max-w-none overflow-y-auto",
+                  "bg-slate-50 dark:bg-zinc-900/95",
+                  "text-gray-900 dark:text-gray-100",
                   "focus:ring-0",
                   "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mb-4",
                   "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mb-3",
@@ -11678,7 +12016,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 border-t bg-muted/50 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(CharacterCount, { content }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 border-t bg-gray-50/50 dark:bg-zinc-800/50 backdrop-blur-sm text-xs text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(CharacterCount, { content }) })
         ]
       }
     );
@@ -11686,7 +12024,7 @@ var SimpleEditor = t__namespace.default.forwardRef(
 );
 SimpleEditor.displayName = "SimpleEditor";
 var CharacterCount = ({ content }) => {
-  const [count3, setCount] = t.useState(0);
+  const [count4, setCount] = t.useState(0);
   t.useEffect(() => {
     const getPlainText = (html) => {
       const div = document.createElement("div");
@@ -11696,7 +12034,7 @@ var CharacterCount = ({ content }) => {
     setCount(getPlainText(content).length);
   }, [content]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    count3,
+    count4,
     " characters"
   ] });
 };