@definable/ui 0.1.31 → 0.1.35

package/dist/components/dialog.js

@@ -1,20 +1,20 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import * as r 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 b = ({ ...e }) => /* @__PURE__ */ i(a.Root, { ...e }), C = a.Trigger, f = a.Portal, R = a.Close, c = r.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ i(
   a.Overlay,
   {
     ref: t,
     asChild: !0,
-    ...i,
-    children: /* @__PURE__ */ o(
+    ...o,
+    children: /* @__PURE__ */ i(
       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,9 +26,9 @@ 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: [
-  /* @__PURE__ */ o(c, {}),
-  /* @__PURE__ */ o(
+const g = r.forwardRef(({ className: e, children: o, ...t }, d) => /* @__PURE__ */ i(f, { children: /* @__PURE__ */ l(p, { mode: "wait", children: [
+  /* @__PURE__ */ i(c, {}),
+  /* @__PURE__ */ i(
     a.Content,
     {
       ref: d,
@@ -38,7 +38,7 @@ const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
         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%" },
@@ -46,10 +46,10 @@ const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
           exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
           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__ */ o(m, { className: "h-4 w-4" }),
-              /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+            o,
+            /* @__PURE__ */ l(a.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white dark:ring-offset-[#1F1F20] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-black/20 dark:focus:ring-white/20 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-hover data-[state=open]:text-tertiary", children: [
+              /* @__PURE__ */ i(m, { className: "h-4 w-4" }),
+              /* @__PURE__ */ i("span", { className: "sr-only", children: "Close" })
             ] })
           ]
         }
@@ -57,36 +57,36 @@ const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
     }
   )
 ] }) }));
-f.displayName = a.Content.displayName;
+g.displayName = a.Content.displayName;
 const y = ({
   className: e,
-  ...i
-}) => /* @__PURE__ */ o(
+  ...o
+}) => /* @__PURE__ */ i(
   "div",
   {
     className: s(
       "flex flex-col space-y-1.5 text-center sm:text-left",
       e
     ),
-    ...i
+    ...o
   }
 );
 y.displayName = "DialogHeader";
 const x = ({
   className: e,
-  ...i
-}) => /* @__PURE__ */ o(
+  ...o
+}) => /* @__PURE__ */ i(
   "div",
   {
     className: s(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       e
     ),
-    ...i
+    ...o
   }
 );
 x.displayName = "DialogFooter";
-const u = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+const N = r.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ i(
   a.Title,
   {
     ref: t,
@@ -94,28 +94,28 @@ const u = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
       "text-lg font-semibold leading-none tracking-tight",
       e
     ),
-    ...i
+    ...o
   }
 ));
-u.displayName = a.Title.displayName;
-const N = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+N.displayName = a.Title.displayName;
+const h = r.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ i(
   a.Description,
   {
     ref: t,
-    className: s("text-sm text-muted-foreground", e),
-    ...i
+    className: s("text-sm text-tertiary", e),
+    ...o
   }
 ));
-N.displayName = a.Description.displayName;
+h.displayName = a.Description.displayName;
 export {
-  w as Dialog,
+  b as Dialog,
   R as DialogClose,
-  f as DialogContent,
-  N as DialogDescription,
+  g as DialogContent,
+  h as DialogDescription,
   x as DialogFooter,
   y as DialogHeader,
   c as DialogOverlay,
-  p as DialogPortal,
-  u as DialogTitle,
+  f as DialogPortal,
+  N as DialogTitle,
   C as DialogTrigger
 };

package/dist/components/drawer.js

@@ -44,7 +44,7 @@ const n = ({
   }
 );
 n.displayName = "Drawer";
-const Y = e.Trigger, d = e.Portal, Z = e.Close, s = m.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ o(
+const Y = e.Trigger, c = e.Portal, Z = e.Close, s = m.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: a,
@@ -53,14 +53,14 @@ const Y = e.Trigger, d = e.Portal, Z = e.Close, s = m.forwardRef(({ className: r
   }
 ));
 s.displayName = e.Overlay.displayName;
-const c = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__ */ p(d, { children: [
+const d = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__ */ p(c, { children: [
   /* @__PURE__ */ o(s, {}),
   /* @__PURE__ */ p(
     e.Content,
     {
       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,
@@ -71,7 +71,7 @@ const c = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__
     }
   )
 ] }));
-c.displayName = "DrawerContent";
+d.displayName = "DrawerContent";
 const f = ({
   className: r,
   ...t
@@ -110,7 +110,7 @@ const x = m.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: a,
-    className: i("text-sm text-muted-foreground", r),
+    className: i("text-sm text-tertiary", r),
     ...t
   }
 ));
@@ -118,12 +118,12 @@ x.displayName = e.Description.displayName;
 export {
   n as Drawer,
   Z as DrawerClose,
-  c as DrawerContent,
+  d as DrawerContent,
   x as DrawerDescription,
   w as DrawerFooter,
   f as DrawerHeader,
   s as DrawerOverlay,
-  d as DrawerPortal,
+  c as DrawerPortal,
   D as DrawerTitle,
   Y as DrawerTrigger
 };

package/dist/components/dropdown-menu.js

@@ -2,47 +2,47 @@ import { jsx as e } from "react/jsx-runtime";
 import * as a from "react";
 import * as o from "@radix-ui/react-dropdown-menu";
 import { cn as i } from "../lib/utils.js";
-import { motion as p } from "framer-motion";
-const w = o.Root, y = o.Trigger, g = o.Group, x = o.Separator, c = a.forwardRef(({ className: t, sideOffset: r = 4, children: n, ...d }, s) => /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
+import { motion as m } from "framer-motion";
+const w = o.Root, y = o.Trigger, x = o.Group, D = o.Separator, p = a.forwardRef(({ className: r, sideOffset: t = 4, children: n, ...d }, s) => /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
   o.Content,
   {
     ref: s,
-    sideOffset: r,
+    sideOffset: t,
     ...d,
     children: /* @__PURE__ */ e(
-      p.div,
+      m.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
         exit: { opacity: 0, scale: 0.95 },
         transition: { duration: 0.2 },
         className: i(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          t
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-card p-1 text-primary shadow-md",
+          r
         ),
         children: n
       }
     )
   }
 ) }));
-c.displayName = o.Content.displayName;
-const m = a.forwardRef(({ className: t, ...r }, n) => /* @__PURE__ */ e(
+p.displayName = o.Content.displayName;
+const c = a.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ e(
   o.Item,
   {
     ref: n,
     className: i(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      t
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-hover focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      r
     ),
-    ...r
+    ...t
   }
 ));
-m.displayName = o.Item.displayName;
+c.displayName = o.Item.displayName;
 export {
   w as DropdownMenu,
-  c as DropdownMenuContent,
-  g as DropdownMenuGroup,
-  m as DropdownMenuItem,
-  x as DropdownMenuSeparator,
+  p as DropdownMenuContent,
+  x as DropdownMenuGroup,
+  c as DropdownMenuItem,
+  D as DropdownMenuSeparator,
   y as DropdownMenuTrigger
 };

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

@@ -1,4 +1,4 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import { useState as x, useRef as L, useCallback as m, useEffect as E } from "react";
 import { Button as P } from "./button.js";
 import { Modal as q } from "./modal.js";
@@ -6,53 +6,53 @@ import { Label as T } from "./label.js";
 import { RotateCcw as K, X as F, Check as G } from "lucide-react";
 function O({
   isOpen: g,
-  onClose: v,
+  onClose: y,
   imageSrc: f,
   onCrop: j,
   title: U = "Crop Your Image",
-  outputSize: h = 200
+  outputSize: d = 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, v] = 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 });
+      v(!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(() => {
-    y(!1), z(!1);
+  }, [N, C, k, r, t]), $ = m(() => {
+    v(!1), z(!1);
   }, []), H = m(() => {
     if (r.width && r.height) {
       const e = Math.min(r.width, r.height) * 0.6;
@@ -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;
-    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(
+    if (!D.current || !p.current) return;
+    const e = D.current, o = e.getContext("2d");
+    if (!o) return;
+    const a = p.current;
+    e.width = d, e.height = d;
+    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(d / 2, d / 2, d / 2, 0, Math.PI * 2), o.clip(), o.drawImage(
       a,
       l,
       u,
@@ -77,21 +77,21 @@ function O({
       c,
       0,
       0,
-      h,
-      h
+      d,
+      d
     );
     const R = e.toDataURL("image/png");
-    j(R), v();
-  }, [t, r, j, v, h]), M = m(() => {
-    y(!1), z(!1), w({ x: 0, y: 0, size: 100 }), v();
-  }, [v]), I = m((e) => {
+    j(R), y();
+  }, [t, r, j, y, d]), M = m(() => {
+    v(!1), z(!1), w({ x: 0, y: 0, size: 100 }), y();
+  }, [y]), I = m((e) => {
     e.key === "Escape" && g && (e.stopPropagation(), M());
   }, [g, M]);
   return E(() => {
     if (g)
       return document.addEventListener("keydown", I, !0), () => document.removeEventListener("keydown", I, !0);
   }, [g, I]), E(() => {
-    g && f && (y(!1), z(!1), Y({ width: 0, height: 0 }));
+    g && f && (v(!1), z(!1), Y({ width: 0, height: 0 }));
   }, [g, f]), f ? /* @__PURE__ */ s(
     q,
     {
@@ -100,8 +100,8 @@ function O({
       title: U,
       size: "2xl",
       zIndexClassName: "z-[60]",
-      footer: /* @__PURE__ */ d("div", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ d(
+      footer: /* @__PURE__ */ h("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ h(
           P,
           {
             variant: "ghost",
@@ -114,21 +114,21 @@ function O({
             ]
           }
         ),
-        /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ d(P, { variant: "outline", onClick: M, children: [
+        /* @__PURE__ */ h("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ h(P, { variant: "outline", onClick: M, children: [
             /* @__PURE__ */ s(F, { className: "h-4 w-4 mr-2" }),
             "Cancel"
           ] }),
-          /* @__PURE__ */ d(P, { onClick: W, children: [
+          /* @__PURE__ */ h(P, { onClick: W, children: [
             /* @__PURE__ */ s(G, { className: "h-4 w-4 mr-2" }),
             "Crop Image"
           ] })
         ] })
       ] }),
-      children: /* @__PURE__ */ d("div", { className: "p-6", children: [
-        /* @__PURE__ */ d("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ s("div", { className: "text-center", children: /* @__PURE__ */ s("p", { className: "text-sm text-muted-foreground", children: "Drag the circle to move • Drag corners to resize • Click reset to center" }) }),
-          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ h("div", { className: "p-6", children: [
+        /* @__PURE__ */ h("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ s("div", { className: "text-center", children: /* @__PURE__ */ s("p", { className: "text-sm text-tertiary", children: "Drag the circle to move • Drag corners to resize • Click reset to center" }) }),
+          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ h(
             "div",
             {
               className: "relative bg-gray-100 rounded-xl overflow-hidden select-none border",
@@ -140,7 +140,7 @@ function O({
                 /* @__PURE__ */ s(
                   "img",
                   {
-                    ref: b,
+                    ref: p,
                     src: f,
                     alt: "Crop preview",
                     className: "block",
@@ -149,7 +149,7 @@ function O({
                     draggable: !1
                   }
                 ),
-                /* @__PURE__ */ d(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     className: "absolute border-2 border-white rounded-full shadow-lg cursor-move",
@@ -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" })
                         }
@@ -217,12 +217,12 @@ function O({
               ]
             }
           ) }),
-          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ d("div", { className: "text-center", children: [
-            /* @__PURE__ */ s(T, { className: "text-xs font-medium text-muted-foreground mb-2 block", children: "Preview" }),
+          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ h("div", { className: "text-center", children: [
+            /* @__PURE__ */ s(T, { className: "text-xs font-medium text-tertiary mb-2 block", children: "Preview" }),
             /* @__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",