@definable/ui 0.1.31 → 0.1.32

package/dist/components/alert.js

@@ -8,7 +8,7 @@ const g = p(
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-secondary text-foreground",
         destructive: "border-destructive/50 text-destructive dark:border-destructive"
       }
     },
@@ -16,7 +16,7 @@ const g = p(
       variant: "default"
     }
   }
-), b = i.forwardRef(({ className: t, variant: r, isOpen: e, onClose: o, onConfirm: l, title: s, description: n, confirmText: m, cancelText: c, ...f }, u) => e !== void 0 && o && l && s && n ? /* @__PURE__ */ a(
+), x = i.forwardRef(({ className: t, variant: r, isOpen: e, onClose: o, onConfirm: l, title: s, description: n, confirmText: m, cancelText: c, ...f }, u) => e !== void 0 && o && l && s && n ? /* @__PURE__ */ a(
   v,
   {
     isOpen: e,
@@ -37,8 +37,8 @@ const g = p(
     ...f
   }
 ));
-b.displayName = "Alert";
-const x = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
+x.displayName = "Alert";
+const A = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "h5",
   {
     ref: e,
@@ -46,8 +46,8 @@ const x = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
     ...r
   }
 ));
-x.displayName = "AlertTitle";
-const A = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
+A.displayName = "AlertTitle";
+const N = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
@@ -55,9 +55,9 @@ const A = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
     ...r
   }
 ));
-A.displayName = "AlertDescription";
+N.displayName = "AlertDescription";
 export {
-  b as Alert,
-  A as AlertDescription,
-  x as AlertTitle
+  x as Alert,
+  N as AlertDescription,
+  A as AlertTitle
 };

package/dist/components/card.js

@@ -1,61 +1,61 @@
 import { jsx as d } from "react/jsx-runtime";
-import * as o from "react";
-import { cn as t } from "../lib/utils.js";
-const s = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+import * as t from "react";
+import { cn as o } from "../lib/utils.js";
+const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t(
-      "rounded-lg border-border/50 bg-card text-card-foreground ",
-      e
+    className: o(
+      "rounded-lg border-light bg-card text-card-foreground ",
+      a
     ),
-    ...a
+    ...e
   }
 ));
 s.displayName = "Card";
-const i = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const i = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("flex flex-col space-y-1.5 p-6", e),
-    ...a
+    className: o("flex flex-col space-y-1.5 p-6", a),
+    ...e
   }
 ));
 i.displayName = "CardHeader";
-const c = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const l = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "h3",
   {
     ref: r,
-    className: t("text-lg font-semibold leading-none tracking-tight", e),
-    ...a
+    className: o("text-lg font-semibold leading-none tracking-tight", a),
+    ...e
   }
 ));
-c.displayName = "CardTitle";
-const l = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+l.displayName = "CardTitle";
+const c = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "p",
   {
     ref: r,
-    className: t("text-sm text-muted-foreground", e),
-    ...a
+    className: o("text-sm text-muted-foreground", a),
+    ...e
   }
 ));
-l.displayName = "CardDescription";
-const m = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", e), ...a }));
+c.displayName = "CardDescription";
+const m = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: o("p-6 pt-0", a), ...e }));
 m.displayName = "CardContent";
-const n = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const n = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("flex items-center p-6 pt-0", e),
-    ...a
+    className: o("flex items-center p-6 pt-0", a),
+    ...e
   }
 ));
 n.displayName = "CardFooter";
 export {
   s as Card,
   m as CardContent,
-  l as CardDescription,
+  c as CardDescription,
   n as CardFooter,
   i as CardHeader,
-  c as CardTitle
+  l as CardTitle
 };

package/dist/components/command-menu.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { CommandDialog as l, Command as a, CommandInput as i, CommandList as u, CommandEmpty as h, CommandGroup as s, CommandItem as d, CommandSeparator as p } from "./command.js";
+import { CommandDialog as l, Command as a, CommandInput as i, CommandList as u, CommandEmpty as h, CommandGroup as d, CommandItem as s, CommandSeparator as p } from "./command.js";
 import { useEffect as f, useCallback as g, useState as x } from "react";
-import { Home as S, FileText as b, FolderOpen as N, Settings as C, Search as w } from "lucide-react";
-function y({ open: t, onOpenChange: o }) {
+import { Home as S, FileText as b, FolderOpen as N, Settings as y, Search as C } from "lucide-react";
+function w({ open: t, onOpenChange: o }) {
   f(() => {
     const m = (c) => {
       c.key === "k" && (c.metaKey || c.ctrlKey) && (c.preventDefault(), o(!t));
@@ -16,9 +16,9 @@ function y({ open: t, onOpenChange: o }) {
     /* @__PURE__ */ e(i, { placeholder: "Type a command or search..." }),
     /* @__PURE__ */ n(u, { children: [
       /* @__PURE__ */ e(h, { children: "No results found." }),
-      /* @__PURE__ */ n(s, { heading: "Suggestions", children: [
+      /* @__PURE__ */ n(d, { heading: "Suggestions", children: [
         /* @__PURE__ */ n(
-          d,
+          s,
           {
             onSelect: () => r(() => console.log("Home")),
             children: [
@@ -28,7 +28,7 @@ function y({ open: t, onOpenChange: o }) {
           }
         ),
         /* @__PURE__ */ n(
-          d,
+          s,
           {
             onSelect: () => r(() => console.log("Documents")),
             children: [
@@ -38,7 +38,7 @@ function y({ open: t, onOpenChange: o }) {
           }
         ),
         /* @__PURE__ */ n(
-          d,
+          s,
           {
             onSelect: () => r(() => console.log("Projects")),
             children: [
@@ -49,12 +49,12 @@ function y({ open: t, onOpenChange: o }) {
         )
       ] }),
       /* @__PURE__ */ e(p, {}),
-      /* @__PURE__ */ e(s, { heading: "Settings", children: /* @__PURE__ */ n(
-        d,
+      /* @__PURE__ */ e(d, { heading: "Settings", children: /* @__PURE__ */ n(
+        s,
         {
           onSelect: () => r(() => console.log("Settings")),
           children: [
-            /* @__PURE__ */ e(C, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ e(y, { className: "mr-2 h-4 w-4" }),
             /* @__PURE__ */ e("span", { children: "Settings" })
           ]
         }
@@ -69,9 +69,9 @@ function E() {
       "button",
       {
         onClick: () => o(!0),
-        className: "inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground",
+        className: "inline-flex items-center justify-center gap-1 rounded-md border border-input bg-secondary px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground",
         children: [
-          /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
+          /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
           /* @__PURE__ */ e("span", { children: "Search..." }),
           /* @__PURE__ */ n("kbd", { className: "pointer-events-none ml-1 inline-flex h-5 select-none items-center gap-1 rounded border border-input bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground", children: [
             /* @__PURE__ */ e("span", { className: "text-xs", children: "⌘" }),
@@ -80,10 +80,10 @@ function E() {
         ]
       }
     ),
-    /* @__PURE__ */ e(y, { open: t, onOpenChange: o })
+    /* @__PURE__ */ e(w, { open: t, onOpenChange: o })
   ] });
 }
 export {
-  y as CommandMenu,
+  w as CommandMenu,
   E as CommandMenuDemo
 };

package/dist/components/command.js

@@ -15,7 +15,7 @@ const i = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ d(
   }
 ));
 i.displayName = t.displayName;
-const w = ({
+const b = ({
   children: e,
   open: a,
   onOpenChange: o
@@ -23,7 +23,7 @@ const w = ({
   "div",
   {
     className: s(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       a ? "block" : "hidden"
     ),
     onClick: (n) => {
@@ -32,12 +32,12 @@ const w = ({
     children: /* @__PURE__ */ d(
       "div",
       {
-        className: "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg border border-border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className: "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg border border-light bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         children: e
       }
     )
   }
-), p = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ m("div", { className: "flex items-center border-b border-border px-3", "cmdk-input-wrapper": "", children: [
+), p = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ m("div", { className: "flex items-center border-b border-light px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ d(l, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ d(
     t.Input,
@@ -105,7 +105,7 @@ const g = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ d(
 g.displayName = t.Item.displayName;
 export {
   i as Command,
-  w as CommandDialog,
+  b as CommandDialog,
   f as CommandEmpty,
   u as CommandGroup,
   p as CommandInput,

package/dist/components/dialog.js

@@ -1,10 +1,10 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import * as r from "react";
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import * as l from "react";
 import * as a from "@radix-ui/react-dialog";
 import { cn as s } from "../lib/utils.js";
 import { X as m } from "lucide-react";
-import { motion as n, AnimatePresence as g } from "framer-motion";
-const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, p = a.Portal, R = a.Close, c = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+import { motion as n, AnimatePresence as p } from "framer-motion";
+const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, g = a.Portal, R = a.Close, c = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   a.Overlay,
   {
     ref: t,
@@ -14,7 +14,7 @@ const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, p =
       n.div,
       {
         className: s(
-          "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+          "fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm",
           e
         ),
         initial: { opacity: 0 },
@@ -26,7 +26,7 @@ const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, p =
   }
 ));
 c.displayName = a.Overlay.displayName;
-const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__ */ o(p, { children: /* @__PURE__ */ l(g, { mode: "wait", children: [
+const f = l.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__ */ o(g, { children: /* @__PURE__ */ r(p, { mode: "wait", children: [
   /* @__PURE__ */ o(c, {}),
   /* @__PURE__ */ o(
     a.Content,
@@ -34,11 +34,11 @@ const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
       ref: d,
       asChild: !0,
       ...t,
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ r(
         n.div,
         {
           className: s(
-            "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg gap-4 border-border/50 bg-background p-6 shadow-lg rounded-lg",
+            "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg gap-4 border-light bg-secondary p-6 shadow-lg rounded-lg",
             e
           ),
           initial: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
@@ -47,7 +47,7 @@ const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
           transition: { duration: 0.2 },
           children: [
             i,
-            /* @__PURE__ */ l(a.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ r(a.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
               /* @__PURE__ */ o(m, { className: "h-4 w-4" }),
               /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
             ] })
@@ -86,7 +86,7 @@ const x = ({
   }
 );
 x.displayName = "DialogFooter";
-const u = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+const u = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   a.Title,
   {
     ref: t,
@@ -98,7 +98,7 @@ const u = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   }
 ));
 u.displayName = a.Title.displayName;
-const N = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+const N = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   a.Description,
   {
     ref: t,
@@ -115,7 +115,7 @@ export {
   x as DialogFooter,
   y as DialogHeader,
   c as DialogOverlay,
-  p as DialogPortal,
+  g as DialogPortal,
   u as DialogTitle,
   C as DialogTrigger
 };

package/dist/components/drawer.js

@@ -60,7 +60,7 @@ const c = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__
     {
       ref: l,
       className: i(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[20px] bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[20px] bg-secondary",
         r
       ),
       ...a,

package/dist/components/dropzone.js

@@ -2,7 +2,7 @@ import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { useCallback as u } from "react";
 import { useDropzone as b } from "react-dropzone";
 import { Upload as f } from "lucide-react";
-function D({
+function y({
   onDrop: r,
   children: t,
   className: n = "",
@@ -30,7 +30,7 @@ function D({
       className: n,
       children: [
         /* @__PURE__ */ e("input", { ...p() }),
-        c && a && /* @__PURE__ */ e("div", { className: `absolute inset-0 bg-background/80 flex items-center justify-center z-10 pointer-events-none ${s}`, children: /* @__PURE__ */ o("div", { className: "border-2 border-dashed border-primary rounded-lg p-8 text-center", children: [
+        c && a && /* @__PURE__ */ e("div", { className: `absolute inset-0 bg-secondary/80 flex items-center justify-center z-10 pointer-events-none ${s}`, children: /* @__PURE__ */ o("div", { className: "border-2 border-dashed border-primary rounded-lg p-8 text-center", children: [
           /* @__PURE__ */ e(f, { className: "h-12 w-12 mb-2 text-primary mx-auto" }),
           /* @__PURE__ */ e("p", { className: "text-base font-medium mb-1", children: "Drop files here" })
         ] }) }),
@@ -40,5 +40,5 @@ function D({
   );
 }
 export {
-  D as Dropzone
+  y as Dropzone
 };

package/dist/components/image-cropper-modal.js

@@ -12,46 +12,46 @@ function O({
   title: U = "Crop Your Image",
   outputSize: h = 200
 }) {
-  const [t, w] = x({ x: 0, y: 0, size: 100 }), [N, y] = x(!1), [k, z] = x(!1), [C, X] = x({ x: 0, y: 0 }), [r, Y] = x({ width: 0, height: 0 }), D = L(null), b = L(null), A = m(() => {
-    if (b.current) {
-      const e = b.current, i = 400, a = e.naturalWidth / e.naturalHeight;
-      let n, o;
-      a > 1 ? (n = i, o = i / a) : (o = i, n = i * a), Y({ width: n, height: o });
-      const l = Math.min(n, o) * 0.6;
+  const [t, w] = x({ x: 0, y: 0, size: 100 }), [N, y] = x(!1), [C, z] = x(!1), [k, X] = x({ x: 0, y: 0 }), [r, Y] = x({ width: 0, height: 0 }), D = L(null), p = L(null), A = m(() => {
+    if (p.current) {
+      const e = p.current, o = 400, a = e.naturalWidth / e.naturalHeight;
+      let n, i;
+      a > 1 ? (n = o, i = o / a) : (i = o, n = o * a), Y({ width: n, height: i });
+      const l = Math.min(n, i) * 0.6;
       w({
         x: (n - l) / 2,
-        y: (o - l) / 2,
+        y: (i - l) / 2,
         size: l
       });
     }
-  }, []), p = m((e, i) => {
+  }, []), b = m((e, o) => {
     e.preventDefault();
-    const a = e.currentTarget.getBoundingClientRect(), n = e.clientX - a.left, o = e.clientY - a.top;
-    if (i === "resize") {
+    const a = e.currentTarget.getBoundingClientRect(), n = e.clientX - a.left, i = e.clientY - a.top;
+    if (o === "resize") {
       z(!0);
-      const l = t.x + t.size / 2, u = t.y + t.size / 2, c = Math.sqrt((n - l) ** 2 + (o - u) ** 2);
+      const l = t.x + t.size / 2, u = t.y + t.size / 2, c = Math.sqrt((n - l) ** 2 + (i - u) ** 2);
       X({ x: c, y: 0 });
     } else
-      y(!0), X({ x: n - t.x, y: o - t.y });
+      y(!0), X({ x: n - t.x, y: i - t.y });
   }, [t]), B = m((e) => {
-    if (!N && !k) return;
-    const i = e.currentTarget.getBoundingClientRect(), a = e.clientX - i.left, n = e.clientY - i.top;
-    if (k) {
-      const o = t.x + t.size / 2, l = t.y + t.size / 2, u = Math.sqrt((a - o) ** 2 + (n - l) ** 2), c = Math.max(50, Math.min(Math.min(r.width, r.height), u * 2));
+    if (!N && !C) return;
+    const o = e.currentTarget.getBoundingClientRect(), a = e.clientX - o.left, n = e.clientY - o.top;
+    if (C) {
+      const i = t.x + t.size / 2, l = t.y + t.size / 2, u = Math.sqrt((a - i) ** 2 + (n - l) ** 2), c = Math.max(50, Math.min(Math.min(r.width, r.height), u * 2));
       w({
-        x: Math.max(0, Math.min(r.width - c, o - c / 2)),
+        x: Math.max(0, Math.min(r.width - c, i - c / 2)),
         y: Math.max(0, Math.min(r.height - c, l - c / 2)),
         size: c
       });
     } else if (N) {
-      const o = a - C.x, l = n - C.y, u = r.width - t.size, c = r.height - t.size;
+      const i = a - k.x, l = n - k.y, u = r.width - t.size, c = r.height - t.size;
       w((R) => ({
         ...R,
-        x: Math.max(0, Math.min(u, o)),
+        x: Math.max(0, Math.min(u, i)),
         y: Math.max(0, Math.min(c, l))
       }));
     }
-  }, [N, k, C, r, t]), $ = m(() => {
+  }, [N, C, k, r, t]), $ = m(() => {
     y(!1), z(!1);
   }, []), H = m(() => {
     if (r.width && r.height) {
@@ -63,13 +63,13 @@ function O({
       });
     }
   }, [r]), W = m(() => {
-    if (!D.current || !b.current) return;
-    const e = D.current, i = e.getContext("2d");
-    if (!i) return;
-    const a = b.current;
+    if (!D.current || !p.current) return;
+    const e = D.current, o = e.getContext("2d");
+    if (!o) return;
+    const a = p.current;
     e.width = h, e.height = h;
-    const n = a.naturalWidth / r.width, o = a.naturalHeight / r.height, l = t.x * n, u = t.y * o, c = t.size * Math.min(n, o);
-    i.beginPath(), i.arc(h / 2, h / 2, h / 2, 0, Math.PI * 2), i.clip(), i.drawImage(
+    const n = a.naturalWidth / r.width, i = a.naturalHeight / r.height, l = t.x * n, u = t.y * i, c = t.size * Math.min(n, i);
+    o.beginPath(), o.arc(h / 2, h / 2, h / 2, 0, Math.PI * 2), o.clip(), o.drawImage(
       a,
       l,
       u,
@@ -140,7 +140,7 @@ function O({
                 /* @__PURE__ */ s(
                   "img",
                   {
-                    ref: b,
+                    ref: p,
                     src: f,
                     alt: "Crop preview",
                     className: "block",
@@ -159,7 +159,7 @@ function O({
                       width: t.size,
                       height: t.size
                     },
-                    onMouseDown: (e) => p(e, "move"),
+                    onMouseDown: (e) => b(e, "move"),
                     children: [
                       /* @__PURE__ */ s("div", { className: "w-full h-full rounded-full border-2 border-primary border-dashed" }),
                       /* @__PURE__ */ s(
@@ -167,7 +167,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-nw-resize -top-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -177,7 +177,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-ne-resize -bottom-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -187,7 +187,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-sw-resize -bottom-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -197,7 +197,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-se-resize -top-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -222,7 +222,7 @@ function O({
             /* @__PURE__ */ s(
               "div",
               {
-                className: "rounded-full border-2 border-border bg-background overflow-hidden mx-auto",
+                className: "rounded-full border-2 border-light bg-secondary overflow-hidden mx-auto",
                 style: { width: 80, height: 80 },
                 children: /* @__PURE__ */ s(
                   "div",