@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Cropper/Cropper.js

@@ -59,8 +59,8 @@ function ue(o, t) {
 }
 function le(o, t, u, b = _) {
   if (o.has(t) && o.delete(t), o.set(t, u), o.size > b) {
-    const f = o.keys().next().value;
-    f !== void 0 && o.delete(f);
+    const d = o.keys().next().value;
+    d !== void 0 && o.delete(d);
   }
 }
 function Ee(o, t) {
@@ -79,73 +79,73 @@ function Ge(o) {
   return o * Math.PI / 180;
 }
 function se(o, t, u) {
-  const b = `${$(o)}-${$(t)}-${ce(u)}`, f = ue(ze, b);
-  if (f)
-    return f;
+  const b = `${$(o)}-${$(t)}-${ce(u)}`, d = ue(ze, b);
+  if (d)
+    return d;
   const a = Ge(u), r = Math.cos(a), m = Math.sin(a), i = {
     width: Math.abs(r * o) + Math.abs(m * t),
     height: Math.abs(m * o) + Math.abs(r * t)
   };
   return le(ze, b, i, _), i;
 }
-function He(o, t, u, b, f, a = 0) {
-  const r = `${$(o, 8)}-${$(t, 8)}-${$(u, 8)}-${$(b, 8)}-${$(f, 0.01)}-${ce(a)}`, m = ue(Pe, r);
+function He(o, t, u, b, d, a = 0) {
+  const r = `${$(o, 8)}-${$(t, 8)}-${$(u, 8)}-${$(b, 8)}-${$(d, 0.01)}-${ce(a)}`, m = ue(Pe, r);
   if (m)
     return m;
-  const { width: i, height: h } = se(o, t, a), p = Math.min(i, u), c = Math.min(h, b), C = p > c * f ? {
-    width: c * f,
+  const { width: i, height: f } = se(o, t, a), p = Math.min(i, u), c = Math.min(f, b), C = p > c * d ? {
+    width: c * d,
     height: c
   } : {
     width: p,
-    height: p / f
+    height: p / d
   };
   return le(Pe, r, C, _), C;
 }
-function V(o, t, u, b, f = 0) {
-  const a = ne(o.x), r = ne(o.y), m = `${a}-${r}-${$(t.width)}-${$(t.height)}-${$(u.width)}-${$(u.height)}-${Te(b)}-${ce(f)}`, i = ue(re, m);
+function V(o, t, u, b, d = 0) {
+  const a = ne(o.x), r = ne(o.y), m = `${a}-${r}-${$(t.width)}-${$(t.height)}-${$(u.width)}-${$(u.height)}-${Te(b)}-${ce(d)}`, i = ue(re, m);
   if (i)
     return i;
-  const { width: h, height: p } = se(
+  const { width: f, height: p } = se(
     t.width,
     t.height,
-    f
-  ), c = h * b * 0.5 - u.width * 0.5, C = p * b * 0.5 - u.height * 0.5, g = {
+    d
+  ), c = f * b * 0.5 - u.width * 0.5, C = p * b * 0.5 - u.height * 0.5, g = {
     x: we(o.x, -c, c),
     y: we(o.y, -C, C)
   };
   return le(re, m, g, _), g;
 }
-function De(o, t, u, b, f, a = 0, r = !1) {
-  const m = `${ne(o.x)}-${ne(o.y)}-${$(t.width)}-${$(t.height)}-${$(t.naturalWidth)}-${$(t.naturalHeight)}-${$(u.width)}-${$(u.height)}-${$(b, 0.01)}-${Te(f)}-${ce(a)}-${r}`, i = ue(oe, m);
+function De(o, t, u, b, d, a = 0, r = !1) {
+  const m = `${ne(o.x)}-${ne(o.y)}-${$(t.width)}-${$(t.height)}-${$(t.naturalWidth)}-${$(t.naturalHeight)}-${$(u.width)}-${$(u.height)}-${$(b, 0.01)}-${Te(d)}-${ce(a)}-${r}`, i = ue(oe, m);
   if (i) return i;
-  const h = r ? (P, l) => l : (P, l) => Math.min(P, Math.max(0, l)), p = se(t.width, t.height, a), c = se(
+  const f = r ? (P, l) => l : (P, l) => Math.min(P, Math.max(0, l)), p = se(t.width, t.height, a), c = se(
     t.naturalWidth,
     t.naturalHeight,
     a
   ), C = {
-    x: h(
+    x: f(
       100,
-      ((p.width - u.width / f) / 2 - o.x / f) / p.width * 100
+      ((p.width - u.width / d) / 2 - o.x / d) / p.width * 100
     ),
-    y: h(
+    y: f(
       100,
-      ((p.height - u.height / f) / 2 - o.y / f) / p.height * 100
+      ((p.height - u.height / d) / 2 - o.y / d) / p.height * 100
     ),
-    width: h(
+    width: f(
       100,
-      u.width / p.width * 100 / f
+      u.width / p.width * 100 / d
     ),
-    height: h(
+    height: f(
       100,
-      u.height / p.height * 100 / f
+      u.height / p.height * 100 / d
     )
   }, g = Math.round(
-    h(
+    f(
       c.width,
       C.width * c.width / 100
     )
   ), x = Math.round(
-    h(
+    f(
       c.height,
       C.height * c.height / 100
     )
@@ -158,33 +158,33 @@ function De(o, t, u, b, f, a = 0, r = !1) {
   }, n = {
     ...v,
     x: Math.round(
-      h(
+      f(
         c.width - v.width,
         C.x * c.width / 100
       )
     ),
     y: Math.round(
-      h(
+      f(
         c.height - v.height,
         C.y * c.height / 100
       )
     )
-  }, d = { croppedAreaPercentages: C, croppedAreaPixels: n };
-  return le(oe, m, d, _), d;
+  }, h = { croppedAreaPercentages: C, croppedAreaPixels: n };
+  return le(oe, m, h, _), h;
 }
 function Le(o) {
   const t = s.useRef(null);
   return t.current === null && (t.current = o()), t;
 }
 const Ve = typeof window < "u" ? s.useLayoutEffect : s.useEffect;
-function Be(o, t, u, b, f, a, r, m, i, h, p, c, C) {
+function Be(o, t, u, b, d, a, r, m, i, f, p, c, C) {
   let g = !1, x = null;
   function A() {
     x == null && (x = requestAnimationFrame(() => {
       x = null;
       const n = t.current;
       if (n?.mediaSize && n.cropSize && r) {
-        const { croppedAreaPercentages: d, croppedAreaPixels: P } = De(
+        const { croppedAreaPercentages: h, croppedAreaPixels: P } = De(
           n.crop,
           n.mediaSize,
           n.cropSize,
@@ -193,7 +193,7 @@ function Be(o, t, u, b, f, a, r, m, i, h, p, c, C) {
           n.rotation,
           b
         );
-        r(d, P);
+        r(h, P);
       }
     }));
   }
@@ -209,21 +209,21 @@ function Be(o, t, u, b, f, a, r, m, i, h, p, c, C) {
       isDragging: !1,
       isWheelZooming: !1
     },
-    setState: (n, d) => {
+    setState: (n, h) => {
       const P = t.current;
-      if (!(!P || Object.is(P[n], d))) {
-        if (P[n] = d, n === "crop" && typeof d == "object" && d && "x" in d)
-          f?.(d);
-        else if (n === "zoom" && typeof d == "number")
-          i?.(d);
-        else if (n === "rotation" && typeof d == "number")
-          h?.(d);
-        else if (n === "cropSize" && typeof d == "object" && d && "width" in d)
-          a?.(d);
-        else if (n === "mediaSize" && typeof d == "object" && d && "naturalWidth" in d)
-          p?.(d);
+      if (!(!P || Object.is(P[n], h))) {
+        if (P[n] = h, n === "crop" && typeof h == "object" && h && "x" in h)
+          d?.(h);
+        else if (n === "zoom" && typeof h == "number")
+          i?.(h);
+        else if (n === "rotation" && typeof h == "number")
+          f?.(h);
+        else if (n === "cropSize" && typeof h == "object" && h && "width" in h)
+          a?.(h);
+        else if (n === "mediaSize" && typeof h == "object" && h && "naturalWidth" in h)
+          p?.(h);
         else if (n === "isDragging")
-          if (d)
+          if (h)
             c?.();
           else {
             C?.();
@@ -265,21 +265,21 @@ function Be(o, t, u, b, f, a, r, m, i, h, p, c, C) {
   return v;
 }
 const Fe = s.createContext(null);
-function fe(o) {
+function de(o) {
   const t = s.useContext(Fe);
   if (!t)
     throw new Error(`\`${o}\` must be used within \`${Ze}\``);
   return t;
 }
 function k(o) {
-  const t = fe("useStore"), u = s.useCallback(
+  const t = de("useStore"), u = s.useCallback(
     () => o(t.getState()),
     [t, o]
   );
   return s.useSyncExternalStore(t.subscribe, u, u);
 }
 const Ne = s.createContext(null);
-function he(o) {
+function fe(o) {
   const t = s.useContext(Ne);
   if (!t)
     throw new Error(`\`${o}\` must be used within \`${Ze}\``);
@@ -290,12 +290,12 @@ function kt(o) {
     crop: t = { x: 0, y: 0 },
     zoom: u = 1,
     minZoom: b = 1,
-    maxZoom: f = 3,
+    maxZoom: d = 3,
     zoomSpeed: a = 1,
     rotation: r = 0,
     keyboardStep: m = 1,
     aspectRatio: i = 4 / 3,
-    shape: h = "rectangle",
+    shape: f = "rectangle",
     objectFit: p = "contain",
     allowOverflow: c = !1,
     preventScrollZoom: C = !1,
@@ -304,7 +304,7 @@ function kt(o) {
     onCropSizeChange: A,
     onCropAreaChange: v,
     onCropComplete: n,
-    onZoomChange: d,
+    onZoomChange: h,
     onRotationChange: P,
     onMediaLoaded: l,
     onInteractionStart: M,
@@ -329,7 +329,7 @@ function kt(o) {
       A,
       v,
       n,
-      d,
+      h,
       P,
       l,
       M,
@@ -344,7 +344,7 @@ function kt(o) {
       A,
       v,
       n,
-      d,
+      h,
       P,
       l,
       M,
@@ -379,11 +379,11 @@ function kt(o) {
   const U = s.useMemo(
     () => ({
       minZoom: b,
-      maxZoom: f,
+      maxZoom: d,
       zoomSpeed: a,
       keyboardStep: m,
       aspectRatio: i,
-      shape: h,
+      shape: f,
       objectFit: p,
       preventScrollZoom: C,
       allowOverflow: c,
@@ -392,11 +392,11 @@ function kt(o) {
     }),
     [
       b,
-      f,
+      d,
       a,
       m,
       i,
-      h,
+      f,
       p,
       C,
       c,
@@ -407,14 +407,14 @@ function kt(o) {
     "div",
     {
       "data-slot": "cropper-wrapper",
-      className: Y("relative size-full overflow-hidden", F),
+      className: Y("ds:relative ds:size-full ds:overflow-hidden", F),
       children: /* @__PURE__ */ j(Xe, { ...D })
     }
   ) }) });
 }
 function Xe(o) {
-  const { className: t, asChild: u, ref: b, ...f } = o, a = he(Re), r = fe(Re), m = k((e) => e.crop), i = k((e) => e.zoom), h = k((e) => e.rotation), p = k((e) => e.mediaSize), c = k((e) => e.cropSize), C = be(b, a.rootRef), g = s.useRef({ x: 0, y: 0 }), x = s.useRef({ x: 0, y: 0 }), A = s.useRef({ x: 0, y: 0 }), v = s.useRef(0), n = s.useRef(0), d = s.useRef(null), P = s.useRef(null), l = s.useRef(null), M = s.useRef(!1), E = s.useRef(0), F = s.useRef(0), D = s.useCallback(() => {
-    d.current && (cancelAnimationFrame(d.current), d.current = null), P.current && (cancelAnimationFrame(P.current), P.current = null), l.current && (clearTimeout(l.current), l.current = null), M.current = !1;
+  const { className: t, asChild: u, ref: b, ...d } = o, a = fe(Re), r = de(Re), m = k((e) => e.crop), i = k((e) => e.zoom), f = k((e) => e.rotation), p = k((e) => e.mediaSize), c = k((e) => e.cropSize), C = be(b, a.rootRef), g = s.useRef({ x: 0, y: 0 }), x = s.useRef({ x: 0, y: 0 }), A = s.useRef({ x: 0, y: 0 }), v = s.useRef(0), n = s.useRef(0), h = s.useRef(null), P = s.useRef(null), l = s.useRef(null), M = s.useRef(!1), E = s.useRef(0), F = s.useRef(0), D = s.useCallback(() => {
+    h.current && (cancelAnimationFrame(h.current), h.current = null), P.current && (cancelAnimationFrame(P.current), P.current = null), l.current && (clearTimeout(l.current), l.current = null), M.current = !1;
   }, []), B = s.useCallback(() => {
     re.size > _ * 1.5 && re.clear(), oe.size > _ * 1.5 && oe.clear();
   }, []), W = s.useCallback(
@@ -453,9 +453,9 @@ function Xe(o) {
     [m, i]
   ), K = s.useCallback(() => {
     if (!c || !p) return;
-    const e = a.allowOverflow ? m : V(m, p, c, i, h);
+    const e = a.allowOverflow ? m : V(m, p, c, i, f);
     (Math.abs(e.x - m.x) > 1e-3 || Math.abs(e.y - m.y) > 1e-3) && r.setState("crop", e);
-  }, [c, p, a.allowOverflow, m, i, h, r]), N = s.useCallback(
+  }, [c, p, a.allowOverflow, m, i, f, r]), N = s.useCallback(
     (e, w, R = !0) => {
       if (!c || !p) return;
       const S = we(e, a.minZoom, a.maxZoom);
@@ -472,7 +472,7 @@ function Xe(o) {
             p,
             c,
             S,
-            h
+            f
           );
           r.setState("crop", ee);
         }
@@ -489,7 +489,7 @@ function Xe(o) {
       a.allowOverflow,
       U,
       q,
-      h,
+      f,
       r,
       K
     ]
@@ -500,7 +500,7 @@ function Xe(o) {
     [m, r]
   ), T = s.useCallback(
     ({ x: e, y: w }) => {
-      d.current && cancelAnimationFrame(d.current), d.current = requestAnimationFrame(() => {
+      h.current && cancelAnimationFrame(h.current), h.current = requestAnimationFrame(() => {
         if (!c || !p || e === void 0 || w === void 0) return;
         const R = e - g.current.x, S = w - g.current.y;
         if (Math.abs(R) < 2 && Math.abs(S) < 2)
@@ -513,12 +513,12 @@ function Xe(o) {
           p,
           c,
           i,
-          h
+          f
         ), O = r.getState().crop;
         (Math.abs(I.x - O.x) > 1 || Math.abs(I.y - O.y) > 1) && r.setState("crop", I);
       });
     },
-    [c, p, a.allowOverflow, i, h, r]
+    [c, p, a.allowOverflow, i, f, r]
   ), J = s.useCallback(
     (e) => T(W(e)),
     [W, T]
@@ -536,7 +536,7 @@ function Xe(o) {
             }
             const Ce = Ae(S, z), ye = Ce - n.current;
             if (Math.abs(ye) > 0.5) {
-              const ge = h + ye;
+              const ge = f + ye;
               r.setState("rotation", ge), n.current = Ce;
             }
           });
@@ -546,7 +546,7 @@ function Xe(o) {
         w && T(Z(w));
       }
     },
-    [Z, T, i, N, h, r]
+    [Z, T, i, N, f, r]
   ), G = s.useCallback(
     (e) => {
       if (e.preventDefault(), M.current)
@@ -562,14 +562,14 @@ function Xe(o) {
       "gesturechange",
       G
     ), document.removeEventListener("gestureend", X);
-  }, [G]), de = s.useCallback(
+  }, [G]), he = s.useCallback(
     (e) => {
       e.preventDefault(), document.addEventListener(
         "gesturechange",
         G
-      ), document.addEventListener("gestureend", X), E.current = i, F.current = h;
+      ), document.addEventListener("gestureend", X), E.current = i, F.current = f;
     },
-    [i, h, G, X]
+    [i, f, G, X]
   ), me = s.useCallback(
     (e) => e.preventDefault(),
     []
@@ -585,7 +585,7 @@ function Xe(o) {
     return e.deltaMode === 1 ? (w *= 16, R *= 16, S *= 16) : e.deltaMode === 2 && (w *= 400, R *= 400, S *= 400), { deltaX: w, deltaY: R, deltaZ: S };
   }, []), pe = s.useCallback(
     (e) => {
-      if (f.onWheelZoom?.(e), e.defaultPrevented) return;
+      if (d.onWheelZoom?.(e), e.defaultPrevented) return;
       e.preventDefault();
       const w = W(e), { deltaY: R } = Se(e), S = i - R * a.zoomSpeed / 200;
       N(S, w, !0), r.batch(() => {
@@ -598,7 +598,7 @@ function Xe(o) {
       }, 250);
     },
     [
-      f.onWheelZoom,
+      d.onWheelZoom,
       W,
       i,
       a.zoomSpeed,
@@ -608,7 +608,7 @@ function Xe(o) {
     ]
   ), Oe = s.useCallback(
     (e) => {
-      if (f.onKeyUp?.(e), e.defaultPrevented) return;
+      if (d.onKeyUp?.(e), e.defaultPrevented) return;
       (/* @__PURE__ */ new Set([
         "ArrowUp",
         "ArrowDown",
@@ -616,10 +616,10 @@ function Xe(o) {
         "ArrowRight"
       ])).has(e.key) && (e.preventDefault(), r.setState("isDragging", !1));
     },
-    [f.onKeyUp, r]
+    [d.onKeyUp, r]
   ), je = s.useCallback(
     (e) => {
-      if (f.onKeyDown?.(e), e.defaultPrevented || !c || !p) return;
+      if (d.onKeyDown?.(e), e.defaultPrevented || !c || !p) return;
       let w = a.keyboardStep;
       e.shiftKey && (w *= 0.2);
       const S = {
@@ -631,25 +631,25 @@ function Xe(o) {
       if (!S) return;
       e.preventDefault();
       let z = S();
-      a.allowOverflow || (z = V(z, p, c, i, h)), e.repeat || r.setState("isDragging", !0), r.setState("crop", z);
+      a.allowOverflow || (z = V(z, p, c, i, f)), e.repeat || r.setState("isDragging", !0), r.setState("crop", z);
     },
     [
-      f.onKeyDown,
+      d.onKeyDown,
       c,
       p,
       a.keyboardStep,
       a.allowOverflow,
       m,
       i,
-      h,
+      f,
       r
     ]
   ), qe = s.useCallback(
     (e) => {
-      f.onMouseDown?.(e), !e.defaultPrevented && (e.preventDefault(), document.addEventListener("mousemove", J), document.addEventListener("mouseup", H), L(), y(W(e)));
+      d.onMouseDown?.(e), !e.defaultPrevented && (e.preventDefault(), document.addEventListener("mousemove", J), document.addEventListener("mouseup", H), L(), y(W(e)));
     },
     [
-      f.onMouseDown,
+      d.onMouseDown,
       W,
       y,
       H,
@@ -658,7 +658,7 @@ function Xe(o) {
     ]
   ), Ke = s.useCallback(
     (e) => {
-      if (f.onTouchStart?.(e), !e.defaultPrevented) {
+      if (d.onTouchStart?.(e), !e.defaultPrevented) {
         if (M.current = !0, document.addEventListener("touchmove", Q, { passive: !1 }), document.addEventListener("touchend", H), L(), e.touches.length === 2) {
           const [w, R] = e.touches ? Array.from(e.touches) : [];
           if (w && R) {
@@ -678,7 +678,7 @@ function Xe(o) {
       }
     },
     [
-      f.onTouchStart,
+      d.onTouchStart,
       H,
       Q,
       L,
@@ -689,10 +689,10 @@ function Xe(o) {
   return s.useEffect(() => {
     const e = a.rootRef?.current;
     if (e)
-      return a.preventScrollZoom || e.addEventListener("wheel", pe, { passive: !1 }), e.addEventListener("gesturestart", me), e.addEventListener("gesturestart", de), () => {
+      return a.preventScrollZoom || e.addEventListener("wheel", pe, { passive: !1 }), e.addEventListener("gesturestart", me), e.addEventListener("gesturestart", he), () => {
         a.preventScrollZoom || e.removeEventListener("wheel", pe), e.removeEventListener("gesturestart", me), e.removeEventListener(
           "gesturestart",
-          de
+          he
         ), D();
       };
   }, [
@@ -701,7 +701,7 @@ function Xe(o) {
     pe,
     D,
     me,
-    de
+    he
   ]), s.useEffect(() => () => {
     D(), B();
   }, [D, B]), /* @__PURE__ */ j(
@@ -709,10 +709,10 @@ function Xe(o) {
     {
       "data-slot": "cropper",
       tabIndex: 0,
-      ...f,
+      ...d,
       ref: C,
       className: Y(
-        "absolute inset-0 flex cursor-move touch-none select-none items-center justify-center overflow-hidden outline-none",
+        "ds:absolute ds:inset-0 ds:flex ds:cursor-move ds:touch-none ds:select-none ds:items-center ds:justify-center ds:overflow-hidden ds:outline-none",
         t
       ),
       onKeyUp: Oe,
@@ -722,13 +722,13 @@ function Xe(o) {
     }
   );
 }
-const We = ke("will-change-transform", {
+const We = ke("ds:will-change-transform", {
   variants: {
     objectFit: {
-      contain: "absolute inset-0 m-auto max-h-full max-w-full",
-      cover: "h-auto w-full",
-      "horizontal-cover": "h-auto w-full",
-      "vertical-cover": "h-full w-auto"
+      contain: "ds:absolute ds:inset-0 ds:m-auto ds:max-h-full ds:max-w-full",
+      cover: "ds:h-auto ds:w-full",
+      "horizontal-cover": "ds:h-auto ds:w-full",
+      "vertical-cover": "ds:h-full ds:w-auto"
     }
   },
   defaultVariants: {
@@ -740,16 +740,16 @@ function Ie({
   context: t,
   store: u,
   rotation: b,
-  getNaturalDimensions: f
+  getNaturalDimensions: d
 }) {
   return { computeSizes: s.useCallback(() => {
     const r = o.current, m = t.rootRef?.current;
     if (!r || !m) return;
-    const i = m.getBoundingClientRect(), h = i.width / i.height, { width: p, height: c } = f(r), C = r.offsetWidth < p || r.offsetHeight < c, g = p / c;
+    const i = m.getBoundingClientRect(), f = i.width / i.height, { width: p, height: c } = d(r), C = r.offsetWidth < p || r.offsetHeight < c, g = p / c;
     let x;
     if (C) {
-      const d = {
-        contain: () => h > g ? {
+      const h = {
+        contain: () => f > g ? {
           width: i.height * g,
           height: i.height
         } : {
@@ -764,7 +764,7 @@ function Ie({
           width: i.height * g,
           height: i.height
         }),
-        cover: () => h < g ? {
+        cover: () => f < g ? {
           width: i.width,
           height: i.width / g
         } : {
@@ -772,7 +772,7 @@ function Ie({
           height: i.height
         }
       }[t.objectFit];
-      x = d ? d() : h > g ? {
+      x = h ? h() : f > g ? {
         width: i.height * g,
         height: i.height
       } : {
@@ -801,14 +801,14 @@ function Ie({
     return u.setState("cropSize", v), requestAnimationFrame(() => {
       const n = u.getState();
       if (n.cropSize && n.mediaSize) {
-        const d = V(
+        const h = V(
           n.crop,
           n.mediaSize,
           n.cropSize,
           n.zoom,
           n.rotation
         );
-        (Math.abs(d.x - n.crop.x) > 1e-3 || Math.abs(d.y - n.crop.y) > 1e-3) && u.setState("crop", d);
+        (Math.abs(h.x - n.crop.x) > 1e-3 || Math.abs(h.y - n.crop.y) > 1e-3) && u.setState("crop", h);
       }
     }), { mediaSize: A, cropSize: v };
   }, [
@@ -818,7 +818,7 @@ function Ie({
     t.objectFit,
     u,
     b,
-    f
+    d
   ]) };
 }
 function Zt(o) {
@@ -826,12 +826,12 @@ function Zt(o) {
     className: t,
     style: u,
     asChild: b,
-    ref: f,
+    ref: d,
     onLoad: a,
     objectFit: r,
     snapPixels: m = !1,
     ...i
-  } = o, h = he(ve), p = fe(ve), c = k((l) => l.crop), C = k((l) => l.zoom), g = k((l) => l.rotation), x = s.useRef(null), A = be(f, x), v = s.useCallback(
+  } = o, f = fe(ve), p = de(ve), c = k((l) => l.crop), C = k((l) => l.zoom), g = k((l) => l.rotation), x = s.useRef(null), A = be(d, x), v = s.useCallback(
     (l) => ({
       width: l.naturalWidth,
       height: l.naturalHeight
@@ -839,20 +839,20 @@ function Zt(o) {
     []
   ), { computeSizes: n } = Ie({
     mediaRef: x,
-    context: h,
+    context: f,
     store: p,
     rotation: g,
     getNaturalDimensions: v
-  }), d = s.useCallback(() => {
+  }), h = s.useCallback(() => {
     x.current && (n(), a?.(
       new Event("load")
     ));
   }, [n, a]);
   return s.useEffect(() => {
     const l = x.current;
-    l?.complete && l.naturalWidth > 0 && d();
-  }, [d]), s.useEffect(() => {
-    const l = h.rootRef?.current;
+    l?.complete && l.naturalWidth > 0 && h();
+  }, [h]), s.useEffect(() => {
+    const l = f.rootRef?.current;
     if (l)
       if (typeof ResizeObserver < "u") {
         let M = !0;
@@ -879,7 +879,7 @@ function Zt(o) {
           window.removeEventListener("resize", M);
         };
       }
-  }, [h.rootRef, n]), /* @__PURE__ */ j(
+  }, [f.rootRef, n]), /* @__PURE__ */ j(
     b ? ae : "img",
     {
       "data-slot": "cropper-image",
@@ -887,7 +887,7 @@ function Zt(o) {
       ref: A,
       className: Y(
         We({
-          objectFit: r ?? h.objectFit,
+          objectFit: r ?? f.objectFit,
           className: t
         })
       ),
@@ -895,7 +895,7 @@ function Zt(o) {
         transform: m ? `translate(${ie(c.x)}px, ${ie(c.y)}px) rotate(${g}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${g}deg) scale(${C})`,
         ...u
       },
-      onLoad: d
+      onLoad: h
     }
   );
 }
@@ -904,12 +904,12 @@ function Tt(o) {
     className: t,
     style: u,
     asChild: b,
-    ref: f,
+    ref: d,
     onLoadedMetadata: a,
     objectFit: r,
     snapPixels: m = !1,
     ...i
-  } = o, h = he(Me), p = fe(Me), c = k((l) => l.crop), C = k((l) => l.zoom), g = k((l) => l.rotation), x = s.useRef(null), A = be(f, x), v = s.useCallback(
+  } = o, f = fe(Me), p = de(Me), c = k((l) => l.crop), C = k((l) => l.zoom), g = k((l) => l.rotation), x = s.useRef(null), A = be(d, x), v = s.useCallback(
     (l) => ({
       width: l.videoWidth,
       height: l.videoHeight
@@ -917,11 +917,11 @@ function Tt(o) {
     []
   ), { computeSizes: n } = Ie({
     mediaRef: x,
-    context: h,
+    context: f,
     store: p,
     rotation: g,
     getNaturalDimensions: v
-  }), d = s.useCallback(() => {
+  }), h = s.useCallback(() => {
     x.current && (n(), a?.(
       new Event(
         "loadedmetadata"
@@ -929,7 +929,7 @@ function Tt(o) {
     ));
   }, [n, a]);
   return s.useEffect(() => {
-    const l = h.rootRef?.current;
+    const l = f.rootRef?.current;
     if (l)
       if (typeof ResizeObserver < "u") {
         let M = !0;
@@ -956,7 +956,7 @@ function Tt(o) {
           window.removeEventListener("resize", M);
         };
       }
-  }, [h.rootRef, n]), /* @__PURE__ */ j(
+  }, [f.rootRef, n]), /* @__PURE__ */ j(
     b ? ae : "video",
     {
       "data-slot": "cropper-video",
@@ -969,7 +969,7 @@ function Tt(o) {
       ref: A,
       className: Y(
         We({
-          objectFit: r ?? h.objectFit,
+          objectFit: r ?? f.objectFit,
           className: t
         })
       ),
@@ -977,20 +977,20 @@ function Tt(o) {
         transform: m ? `translate(${ie(c.x)}px, ${ie(c.y)}px) rotate(${g}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${g}deg) scale(${C})`,
         ...u
       },
-      onLoadedMetadata: d
+      onLoadedMetadata: h
     }
   );
 }
 const Ye = ke(
-  "-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 box-border overflow-hidden border border-[2.5px] border-white/90 shadow-[0_0_0_9999em_rgba(0,0,0,0.5)]",
+  "ds:-translate-x-1/2 ds:-translate-y-1/2 ds:absolute ds:top-1/2 ds:left-1/2 ds:box-border ds:overflow-hidden ds:border ds:border-[2.5px] ds:border-white/90 ds:shadow-[0_0_0_9999em_rgba(0,0,0,0.5)]",
   {
     variants: {
       shape: {
         rectangle: "",
-        circle: "rounded-full"
+        circle: "ds:rounded-full"
       },
       withGrid: {
-        true: "before:absolute before:top-0 before:right-1/3 before:bottom-0 before:left-1/3 before:box-border before:border before:border-white/50 before:border-t-0 before:border-b-0 before:content-[''] after:absolute after:top-1/3 after:right-0 after:bottom-1/3 after:left-0 after:box-border after:border after:border-white/50 after:border-r-0 after:border-l-0 after:content-['']",
+        true: "ds:before:absolute ds:before:top-0 ds:before:right-1/3 ds:before:bottom-0 ds:before:left-1/3 ds:before:box-border ds:before:border ds:before:border-white/50 ds:before:border-t-0 ds:before:border-b-0 ds:before:content-[''] ds:after:absolute ds:after:top-1/3 ds:after:right-0 ds:after:bottom-1/3 ds:after:left-0 ds:after:box-border ds:after:border ds:after:border-white/50 ds:after:border-r-0 ds:after:border-l-0 ds:after:content-['']",
         false: ""
       }
     },
@@ -1005,22 +1005,22 @@ function Ft(o) {
     className: t,
     style: u,
     asChild: b,
-    ref: f,
+    ref: d,
     snapPixels: a = !1,
     shape: r,
     withGrid: m,
     ...i
-  } = o, h = he(_e), p = k((C) => C.cropSize);
+  } = o, f = fe(_e), p = k((C) => C.cropSize);
   return p ? /* @__PURE__ */ j(
     b ? ae : "div",
     {
       "data-slot": "cropper-area",
       ...i,
-      ref: f,
+      ref: d,
       className: Y(
         Ye({
-          shape: r ?? h.shape,
-          withGrid: m ?? h.withGrid,
+          shape: r ?? f.shape,
+          withGrid: m ?? f.withGrid,
           className: t
         })
       ),