@fileverse/ui 4.1.1-patch-8 → 4.1.1-patch-9

package/dist/index.css

@@ -2209,6 +2209,11 @@ video {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

package/dist/index.es.d.ts

@@ -259,6 +259,7 @@ export declare const DialogContent: React_2.ForwardRefExoticComponent<DialogCont
 declare interface DialogContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     hasCloseIcon?: boolean;
     dismissable?: boolean;
+    overlayClasses?: string;
 }
 
 export declare const DialogDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
@@ -304,6 +305,7 @@ export declare const DrawerContent: React_2.ForwardRefExoticComponent<DrawerCont
 
 declare interface DrawerContentProps extends React_2.ComponentPropsWithoutRef<typeof Drawer_2.Content> {
     hasCloseIcon?: boolean;
+    overlayClasses?: string;
 }
 
 export declare const DrawerDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
@@ -347,7 +349,7 @@ export declare interface DynamicContentControllerProps {
     size?: "sm" | "lg";
 }
 
-export declare const DynamicDrawer: ({ open, onOpenChange, title, titleIcon, content, className, headerClassName, side, noOverlay, rounded, dismissible, }: DynamicDrawerProps) => JSX_2.Element;
+export declare const DynamicDrawer: ({ open, onOpenChange, title, titleIcon, content, className, headerClassName, side, noOverlay, overlayClasses, rounded, dismissible, }: DynamicDrawerProps) => JSX_2.Element;
 
 export declare interface DynamicDrawerProps {
     open: boolean;
@@ -359,6 +361,7 @@ export declare interface DynamicDrawerProps {
     className?: string;
     headerClassName?: string;
     noOverlay?: boolean;
+    overlayClasses?: string;
     side?: "top" | "right" | "bottom" | "left";
     rounded?: boolean;
     dismissible?: boolean;
@@ -375,7 +378,7 @@ export declare interface DynamicDropdownProps {
     alignOffset?: number;
 }
 
-export declare const DynamicModal: ({ open, onOpenChange, title, description, content, primaryAction, secondaryAction, className, contentClassName, disableOutsideClick, hasCloseIcon, }: DynamicModalProps) => JSX_2.Element;
+export declare const DynamicModal: ({ open, onOpenChange, title, description, content, primaryAction, secondaryAction, className, contentClassName, disableOutsideClick, hasCloseIcon, overlayClasses, noOverlay, }: DynamicModalProps) => JSX_2.Element;
 
 export declare interface DynamicModalProps {
     open: boolean;
@@ -401,6 +404,8 @@ export declare interface DynamicModalProps {
     contentClassName?: string;
     disableOutsideClick?: boolean;
     hasCloseIcon?: boolean;
+    overlayClasses?: string;
+    noOverlay?: boolean;
 }
 
 export declare const DynamicRadio: ForwardRefExoticComponent<DynamicRadioProps & RefAttributes<HTMLDivElement>>;

package/dist/index.es.js

@@ -62,8 +62,8 @@ function g5() {
       {
         var ae = w.ReactDebugCurrentFrame, we = ae.getStackAddendum();
         we !== "" && (P += "%s", F = F.concat([we]));
-        var Ce = F.map(function(ye) {
-          return String(ye);
+        var Ce = F.map(function(me) {
+          return String(me);
         });
         Ce.unshift("Warning: " + P), Function.prototype.apply.call(console[L], console, Ce);
       }
@@ -122,9 +122,9 @@ function g5() {
             var ae = L.displayName || null;
             return ae !== null ? ae : U(L.type) || "Memo";
           case y: {
-            var we = L, Ce = we._payload, ye = we._init;
+            var we = L, Ce = we._payload, me = we._init;
             try {
-              return U(ye(Ce));
+              return U(me(Ce));
             } catch {
               return null;
             }
@@ -210,8 +210,8 @@ function g5() {
     }
     var ke = !1, V;
     {
-      var me = typeof WeakMap == "function" ? WeakMap : Map;
-      V = new me();
+      var ve = typeof WeakMap == "function" ? WeakMap : Map;
+      V = new ve();
     }
     function pe(L, P) {
       if (!L || ke)
@@ -229,27 +229,27 @@ function g5() {
       Ce = re.current, re.current = null, K();
       try {
         if (P) {
-          var ye = function() {
+          var me = function() {
             throw Error();
           };
-          if (Object.defineProperty(ye.prototype, "props", {
+          if (Object.defineProperty(me.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(ye, []);
+              Reflect.construct(me, []);
             } catch (ft) {
               ae = ft;
             }
-            Reflect.construct(L, [], ye);
+            Reflect.construct(L, [], me);
           } else {
             try {
-              ye.call();
+              me.call();
             } catch (ft) {
               ae = ft;
             }
-            L.call(ye.prototype);
+            L.call(me.prototype);
           }
         } else {
           try {
@@ -331,19 +331,19 @@ function g5() {
     function ir(L, P, F, ae, we) {
       {
         var Ce = Function.call.bind(it);
-        for (var ye in L)
-          if (Ce(L, ye)) {
+        for (var me in L)
+          if (Ce(L, me)) {
             var ue = void 0;
             try {
-              if (typeof L[ye] != "function") {
-                var at = Error((ae || "React class") + ": " + F + " type `" + ye + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof L[ye] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+              if (typeof L[me] != "function") {
+                var at = Error((ae || "React class") + ": " + F + " type `" + me + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof L[me] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw at.name = "Invariant Violation", at;
               }
-              ue = L[ye](P, ye, ae, F, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+              ue = L[me](P, me, ae, F, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (Ve) {
               ue = Ve;
             }
-            ue && !(ue instanceof Error) && (Dt(we), M("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", ae || "React class", F, ye, typeof ue), Dt(null)), ue instanceof Error && !(ue.message in Vt) && (Vt[ue.message] = !0, Dt(we), M("Failed %s type: %s", F, ue.message), Dt(null));
+            ue && !(ue instanceof Error) && (Dt(we), M("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", ae || "React class", F, me, typeof ue), Dt(null)), ue instanceof Error && !(ue.message in Vt) && (Vt[ue.message] = !0, Dt(we), M("Failed %s type: %s", F, ue.message), Dt(null));
           }
       }
     }
@@ -422,7 +422,7 @@ function g5() {
         });
       }
     }
-    var Ae = function(L, P, F, ae, we, Ce, ye) {
+    var Ae = function(L, P, F, ae, we, Ce, me) {
       var ue = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: t,
@@ -430,7 +430,7 @@ function g5() {
         type: L,
         key: P,
         ref: F,
-        props: ye,
+        props: me,
         // Record the component responsible for creating this element.
         _owner: Ce
       };
@@ -453,20 +453,20 @@ function g5() {
     };
     function fe(L, P, F, ae, we) {
       {
-        var Ce, ye = {}, ue = null, at = null;
+        var Ce, me = {}, ue = null, at = null;
         F !== void 0 && (sr(F), ue = "" + F), pi(P) && (sr(P.key), ue = "" + P.key), hi(P) && (at = P.ref, yi(P, we));
         for (Ce in P)
-          it.call(P, Ce) && !fr.hasOwnProperty(Ce) && (ye[Ce] = P[Ce]);
+          it.call(P, Ce) && !fr.hasOwnProperty(Ce) && (me[Ce] = P[Ce]);
         if (L && L.defaultProps) {
           var Ve = L.defaultProps;
           for (Ce in Ve)
-            ye[Ce] === void 0 && (ye[Ce] = Ve[Ce]);
+            me[Ce] === void 0 && (me[Ce] = Ve[Ce]);
         }
         if (ue || at) {
           var Be = typeof L == "function" ? L.displayName || L.name || "Unknown" : L;
-          ue && te(ye, Be), at && se(ye, Be);
+          ue && te(me, Be), at && se(me, Be);
         }
-        return Ae(L, ue, at, we, ae, kt.current, ye);
+        return Ae(L, ue, at, we, ae, kt.current, me);
       }
     }
     var Se = w.ReactCurrentOwner, ze = w.ReactDebugCurrentFrame;
@@ -537,8 +537,8 @@ Check the top-level render call using <` + F + ">.");
         else if (L) {
           var we = k(L);
           if (typeof we == "function" && we !== L.entries)
-            for (var Ce = we.call(L), ye; !(ye = Ce.next()).done; )
-              Mt(ye.value) && hf(ye.value, P);
+            for (var Ce = we.call(L), me; !(me = Ce.next()).done; )
+              Mt(me.value) && hf(me.value, P);
         }
       }
     }
@@ -582,8 +582,8 @@ Check the top-level render call using <` + F + ">.");
     var yf = {};
     function mf(L, P, F, ae, we, Ce) {
       {
-        var ye = H(L);
-        if (!ye) {
+        var me = H(L);
+        if (!me) {
           var ue = "";
           (L === void 0 || typeof L == "object" && L !== null && Object.keys(L).length === 0) && (ue += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
           var at = Yt();
@@ -594,7 +594,7 @@ Check the top-level render call using <` + F + ">.");
         var Be = fe(L, P, F, we, Ce);
         if (Be == null)
           return Be;
-        if (ye) {
+        if (me) {
           var wt = P.children;
           if (wt !== void 0)
             if (ae)
@@ -645,7 +645,7 @@ function td(e) {
   } else for (a in e) e[a] && (n && (n += " "), n += a);
   return n;
 }
-function ve() {
+function ye() {
   for (var e, t, a = 0, n = "", r = arguments.length; a < r; a++) (e = arguments[a]) && (t = td(e)) && (n && (n += " "), n += t);
   return n;
 }
@@ -2980,7 +2980,7 @@ function K5() {
 }
 const J5 = /* @__PURE__ */ N5(K5);
 function D(...e) {
-  return J5(ve(e));
+  return J5(ye(e));
 }
 const eae = (e) => e < 1e3 ? e.toString() : e < 1e4 ? e.toString().slice(0, 1) + "," + e.toString().slice(1) : e < 1e6 ? e % 1e3 === 0 ? e / 1e3 + "K" : (e / 1e3).toFixed(1) + "K" : e % 1e6 === 0 ? e / 1e6 + "M" : (e / 1e6).toFixed(1) + "M", tae = (e, t, a) => {
   if ((e == null ? void 0 : e.length) > a) {
@@ -27299,7 +27299,7 @@ var Rd = "PopperAnchor", Hd = p.forwardRef(
 Hd.displayName = Rd;
 var C0 = "PopperContent", [MB, wB] = zd(C0), Od = p.forwardRef(
   (e, t) => {
-    var Z, X, ke, V, me, pe;
+    var Z, X, ke, V, ve, pe;
     const {
       __scopePopper: a,
       side: n = "bottom",
@@ -27370,7 +27370,7 @@ var C0 = "PopperContent", [MB, wB] = zd(C0), Od = p.forwardRef(
           zIndex: Y,
           "--radix-popper-transform-origin": [
             (V = $.transformOrigin) == null ? void 0 : V.x,
-            (me = $.transformOrigin) == null ? void 0 : me.y
+            (ve = $.transformOrigin) == null ? void 0 : ve.y
           ].join(" "),
           // hide the content if using the hide middleware and should be hidden
           // set visibility to hidden and disable pointer events so the UI behaves
@@ -36639,9 +36639,9 @@ var Kt = 10, [C3, S1] = Za(J1), AK = "SelectContentImpl", L3 = p.forwardRef(
     }, [x]), ns();
     const B = p.useCallback(
       (Z) => {
-        const [X, ...ke] = R().map((pe) => pe.ref.current), [V] = ke.slice(-1), me = document.activeElement;
+        const [X, ...ke] = R().map((pe) => pe.ref.current), [V] = ke.slice(-1), ve = document.activeElement;
         for (const pe of Z)
-          if (pe === me || (pe == null || pe.scrollIntoView({ block: "nearest" }), pe === X && C && (C.scrollTop = 0), pe === V && C && (C.scrollTop = C.scrollHeight), pe == null || pe.focus(), document.activeElement !== me)) return;
+          if (pe === ve || (pe == null || pe.scrollIntoView({ block: "nearest" }), pe === X && C && (C.scrollTop = 0), pe === V && C && (C.scrollTop = C.scrollHeight), pe == null || pe.focus(), document.activeElement !== ve)) return;
       },
       [R, C]
     ), W = p.useCallback(
@@ -36656,9 +36656,9 @@ var Kt = 10, [C3, S1] = Za(J1), AK = "SelectContentImpl", L3 = p.forwardRef(
       if (x) {
         let Z = { x: 0, y: 0 };
         const X = (V) => {
-          var me, pe;
+          var ve, pe;
           Z = {
-            x: Math.abs(Math.round(V.pageX) - (((me = ee.current) == null ? void 0 : me.x) ?? 0)),
+            x: Math.abs(Math.round(V.pageX) - (((ve = ee.current) == null ? void 0 : ve.x) ?? 0)),
             y: Math.abs(Math.round(V.pageY) - (((pe = ee.current) == null ? void 0 : pe.y) ?? 0))
           };
         }, ke = (V) => {
@@ -36675,7 +36675,7 @@ var Kt = 10, [C3, S1] = Za(J1), AK = "SelectContentImpl", L3 = p.forwardRef(
       };
     }, [$]);
     const [je, be] = F3((Z) => {
-      const X = R().filter((me) => !me.disabled), ke = X.find((me) => me.ref.current === document.activeElement), V = G3(X, Z, ke);
+      const X = R().filter((ve) => !ve.disabled), ke = X.find((ve) => ve.ref.current === document.activeElement), V = G3(X, Z, ke);
       V && setTimeout(() => V.ref.current.focus());
     }), N = p.useCallback(
       (Z, X, ke) => {
@@ -36761,9 +36761,9 @@ var Kt = 10, [C3, S1] = Za(J1), AK = "SelectContentImpl", L3 = p.forwardRef(
                     onKeyDown: q(w.onKeyDown, (Z) => {
                       const X = Z.ctrlKey || Z.altKey || Z.metaKey;
                       if (Z.key === "Tab" && Z.preventDefault(), !X && Z.key.length === 1 && be(Z.key), ["ArrowUp", "ArrowDown", "Home", "End"].includes(Z.key)) {
-                        let V = R().filter((me) => !me.disabled).map((me) => me.ref.current);
+                        let V = R().filter((ve) => !ve.disabled).map((ve) => ve.ref.current);
                         if (["ArrowUp", "End"].includes(Z.key) && (V = V.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(Z.key)) {
-                          const me = Z.target, pe = V.indexOf(me);
+                          const ve = Z.target, pe = V.indexOf(ve);
                           V = V.slice(pe + 1);
                         }
                         setTimeout(() => B(V)), Z.preventDefault();
@@ -36785,29 +36785,29 @@ var SK = "SelectItemAlignedPosition", j3 = p.forwardRef((e, t) => {
     if (o.trigger && o.valueNode && f && l && v && k && w) {
       const S = o.trigger.getBoundingClientRect(), A = l.getBoundingClientRect(), T = o.valueNode.getBoundingClientRect(), H = w.getBoundingClientRect();
       if (o.dir !== "rtl") {
-        const me = H.left - A.left, pe = T.left - me, We = S.left - pe, ot = S.width + We, Je = Math.max(ot, A.width), it = window.innerWidth - Kt, Vt = ll(pe, [Kt, it - Je]);
+        const ve = H.left - A.left, pe = T.left - ve, We = S.left - pe, ot = S.width + We, Je = Math.max(ot, A.width), it = window.innerWidth - Kt, Vt = ll(pe, [Kt, it - Je]);
         f.style.minWidth = ot + "px", f.style.left = Vt + "px";
       } else {
-        const me = A.right - H.right, pe = window.innerWidth - T.right - me, We = window.innerWidth - S.right - pe, ot = S.width + We, Je = Math.max(ot, A.width), it = window.innerWidth - Kt, Vt = ll(pe, [Kt, it - Je]);
+        const ve = A.right - H.right, pe = window.innerWidth - T.right - ve, We = window.innerWidth - S.right - pe, ot = S.width + We, Je = Math.max(ot, A.width), it = window.innerWidth - Kt, Vt = ll(pe, [Kt, it - Je]);
         f.style.minWidth = ot + "px", f.style.right = Vt + "px";
       }
       const G = y(), R = window.innerHeight - Kt * 2, U = v.scrollHeight, E = window.getComputedStyle(l), O = parseInt(E.borderTopWidth, 10), B = parseInt(E.paddingTop, 10), W = parseInt(E.borderBottomWidth, 10), $ = parseInt(E.paddingBottom, 10), ee = O + B + U + $ + W, je = Math.min(k.offsetHeight * 5, ee), be = window.getComputedStyle(v), N = parseInt(be.paddingTop, 10), Q = parseInt(be.paddingBottom, 10), K = S.top + S.height / 2 - Kt, Y = R - K, re = k.offsetHeight / 2, Z = k.offsetTop + re, X = O + B + Z, ke = ee - X;
       if (X <= K) {
-        const me = k === G[G.length - 1].ref.current;
+        const ve = k === G[G.length - 1].ref.current;
         f.style.bottom = "0px";
         const pe = l.clientHeight - v.offsetTop - v.offsetHeight, We = Math.max(
           Y,
           re + // viewport might have padding bottom, include it to avoid a scrollable viewport
-          (me ? Q : 0) + pe + W
+          (ve ? Q : 0) + pe + W
         ), ot = X + We;
         f.style.height = ot + "px";
       } else {
-        const me = k === G[0].ref.current;
+        const ve = k === G[0].ref.current;
         f.style.top = "0px";
         const We = Math.max(
           K,
           O + v.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
-          (me ? N : 0) + re
+          (ve ? N : 0) + re
         ) + ke;
         f.style.height = We + "px", v.scrollTop = X - K + v.offsetTop;
       }
@@ -38090,7 +38090,7 @@ function MJ({ activeSnapPointProp: e, setActiveSnapPointProp: t, snapPoints: a,
 const wJ = 0.25, xJ = 100, hl = 8, O1 = 16, pl = 26, Yi = "vaul-dragging";
 function ip({ open: e, onOpenChange: t, children: a, shouldScaleBackground: n, onDrag: r, onRelease: o, snapPoints: s, nested: f = !1, setBackgroundColorOnScale: c = !0, closeThreshold: l = wJ, scrollLockTimeout: d = xJ, dismissible: h = !0, handleOnly: y = !1, fadeFromIndex: m = s && s.length - 1, activeSnapPoint: g, setActiveSnapPoint: v, fixed: k, modal: w = !0, onClose: M, noBodyStyles: x, direction: b = "bottom", preventScrollRestoration: C = !0, disablePreventScroll: j = !1 }) {
   var S;
-  const [A = !1, T] = z.useState(!1), [H, G] = z.useState(!1), [R, U] = z.useState(!1), [E, O] = z.useState(!1), [B, W] = z.useState(!1), [$, ee] = z.useState(!1), je = z.useRef(null), be = z.useRef(null), N = z.useRef(null), Q = z.useRef(null), K = z.useRef(null), Y = z.useRef(!1), re = z.useRef(null), Z = z.useRef(0), X = z.useRef(!1), ke = z.useRef(0), V = z.useRef(null), me = z.useRef(((S = V.current) == null ? void 0 : S.getBoundingClientRect().height) || 0), pe = z.useRef(0), We = z.useCallback((te) => {
+  const [A = !1, T] = z.useState(!1), [H, G] = z.useState(!1), [R, U] = z.useState(!1), [E, O] = z.useState(!1), [B, W] = z.useState(!1), [$, ee] = z.useState(!1), je = z.useRef(null), be = z.useRef(null), N = z.useRef(null), Q = z.useRef(null), K = z.useRef(null), Y = z.useRef(!1), re = z.useRef(null), Z = z.useRef(0), X = z.useRef(!1), ke = z.useRef(0), V = z.useRef(null), ve = z.useRef(((S = V.current) == null ? void 0 : S.getBoundingClientRect().height) || 0), pe = z.useRef(0), We = z.useCallback((te) => {
     s && te === qt.length - 1 && (be.current = /* @__PURE__ */ new Date());
   }, []), { activeSnapPoint: ot, activeSnapPointIndex: Je, setActiveSnapPoint: it, onRelease: Vt, snapPointsOffset: qt, onDrag: Dt, shouldFade: ir, getPercentageDragged: di } = MJ({
     snapPoints: s,
@@ -38118,7 +38118,7 @@ function ip({ open: e, onOpenChange: t, children: a, shouldScaleBackground: n, o
   }
   function ui(te) {
     var se;
-    !h && !s || V.current && !V.current.contains(te.target) || (me.current = ((se = V.current) == null ? void 0 : se.getBoundingClientRect().height) || 0, W(!0), N.current = /* @__PURE__ */ new Date(), $3() && window.addEventListener("touchend", () => Y.current = !1, {
+    !h && !s || V.current && !V.current.contains(te.target) || (ve.current = ((se = V.current) == null ? void 0 : se.getBoundingClientRect().height) || 0, W(!0), N.current = /* @__PURE__ */ new Date(), $3() && window.addEventListener("touchend", () => Y.current = !1, {
       once: !0
     }), te.target.setPointerCapture(te.pointerId), Z.current = Ze(b) ? te.clientY : te.clientX);
   }
@@ -38154,7 +38154,7 @@ function ip({ open: e, onOpenChange: t, children: a, shouldScaleBackground: n, o
       const se = b === "bottom" || b === "right" ? 1 : -1, Ae = (Z.current - (Ze(b) ? te.clientY : te.clientX)) * se, fe = Ae > 0, Se = s && !h && !fe;
       if (Se && Je === 0) return;
       const ze = Math.abs(Ae), Ge = document.querySelector("[vaul-drawer-wrapper]");
-      let st = ze / me.current;
+      let st = ze / ve.current;
       const Mt = di(ze, fe);
       if (Mt !== null && (st = Mt), Se && st >= 1 || !Y.current && !Ya(te.target, fe)) return;
       if (V.current.classList.add(Yi), Y.current = !0, Ie(V.current, {
@@ -38613,7 +38613,7 @@ const Ot = {
   Yn,
   {
     ref: a,
-    className: ve(
+    className: ye(
       "fixed inset-0 z-50 color-utility-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       e
     ),
@@ -38621,32 +38621,41 @@ const Ot = {
   }
 ));
 up.displayName = Yn.displayName;
-const js = p.forwardRef(({ className: e, children: t, hasCloseIcon: a, dismissable: n = !0, ...r }, o) => /* @__PURE__ */ u.jsxs(jJ, { children: [
-  /* @__PURE__ */ u.jsx(up, {}),
-  /* @__PURE__ */ u.jsx(Ba, { trapped: !1, children: /* @__PURE__ */ u.jsxs(
-    Qn,
-    {
-      ref: o,
-      onInteractOutside: (s) => {
-        n || s.preventDefault();
-      },
-      className: ve(
-        "max-w-lg fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border color-bg-default 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%] rounded sm:rounded-lg",
-        e
-      ),
-      ...r,
-      children: [
-        t,
-        a && /* @__PURE__ */ u.jsx(dp, { className: "absolute right-5 top-5 rounded-sm ring-offset-white hover:color-bg-default-hover p-1 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focused focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:color-bg-default-selected data-[state=open]:color-text-default", children: /* @__PURE__ */ u.jsx(To, { name: "Close", className: "h-5 w-5", fill: "#363B3F" }) })
-      ]
-    }
-  ) })
-] }));
+const js = p.forwardRef(
+  ({
+    className: e,
+    children: t,
+    hasCloseIcon: a,
+    dismissable: n = !0,
+    overlayClasses: r,
+    ...o
+  }, s) => /* @__PURE__ */ u.jsxs(jJ, { children: [
+    /* @__PURE__ */ u.jsx(up, { className: r }),
+    /* @__PURE__ */ u.jsx(Ba, { trapped: !1, children: /* @__PURE__ */ u.jsxs(
+      Qn,
+      {
+        ref: s,
+        onInteractOutside: (f) => {
+          n || f.preventDefault();
+        },
+        className: ye(
+          "max-w-lg fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border color-bg-default 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%] rounded sm:rounded-lg",
+          e
+        ),
+        ...o,
+        children: [
+          t,
+          a && /* @__PURE__ */ u.jsx(dp, { className: "absolute right-5 top-5 rounded-sm ring-offset-white hover:color-bg-default-hover p-1 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focused focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:color-bg-default-selected data-[state=open]:color-text-default", children: /* @__PURE__ */ u.jsx(To, { name: "Close", className: "h-5 w-5", fill: "#363B3F" }) })
+        ]
+      }
+    ) })
+  ] })
+);
 js.displayName = Qn.displayName;
 const hp = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ u.jsx("div", { className: ve("flex flex-col space-y-1.5 text-left", e), ...t });
+}) => /* @__PURE__ */ u.jsx("div", { className: ye("flex flex-col space-y-1.5 text-left", e), ...t });
 hp.displayName = "DialogHeader";
 const pp = ({
   className: e,
@@ -38654,7 +38663,7 @@ const pp = ({
 }) => /* @__PURE__ */ u.jsx(
   "div",
   {
-    className: ve(
+    className: ye(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       e
     ),
@@ -38666,7 +38675,7 @@ const yp = p.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ u.jsx(
   Kn,
   {
     ref: a,
-    className: ve("text-heading-md", e),
+    className: ye("text-heading-md", e),
     ...t
   }
 ));
@@ -38675,7 +38684,7 @@ const AJ = p.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ u.jsx(
   Jn,
   {
     ref: a,
-    className: ve("text-body-sm color-text-secondary", e),
+    className: ye("text-body-sm color-text-secondary", e),
     ...t
   }
 ));
@@ -38689,7 +38698,7 @@ const Cae = Ot.Trigger, SJ = Ot.Portal, Ss = Ot.Close, mp = p.forwardRef(({ clas
   Ot.Overlay,
   {
     ref: a,
-    className: ve(
+    className: ye(
       "fixed inset-0 z-50 color-utility-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       e
     ),
@@ -38697,17 +38706,17 @@ const Cae = Ot.Trigger, SJ = Ot.Portal, Ss = Ot.Close, mp = p.forwardRef(({ clas
   }
 ));
 mp.displayName = Ot.Overlay.displayName;
-const Ts = p.forwardRef(({ className: e, children: t, hasCloseIcon: a, ...n }, r) => /* @__PURE__ */ u.jsxs(SJ, { children: [
-  /* @__PURE__ */ u.jsx(mp, {}),
+const Ts = p.forwardRef(({ className: e, children: t, hasCloseIcon: a, overlayClasses: n, ...r }, o) => /* @__PURE__ */ u.jsxs(SJ, { children: [
+  /* @__PURE__ */ u.jsx(mp, { className: n }),
   /* @__PURE__ */ u.jsx(Ba, { trapped: !1, children: /* @__PURE__ */ u.jsxs(
     Ot.Content,
     {
-      ref: r,
-      className: ve(
+      ref: o,
+      className: ye(
         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col gap-4 rounded-t-[10px] border color-bg-default",
         e
       ),
-      ...n,
+      ...r,
       children: [
         t,
         a && /* @__PURE__ */ u.jsx(Ss, { className: "absolute top-6 right-6 rounded-sm ring-offset-white hover:color-bg-default-hover p-1 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focused focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:color-bg-default-selected data-[state=open]:color-text-default", children: /* @__PURE__ */ u.jsx(To, { name: "Close", className: "h-5 w-5", fill: "#363B3F" }) })
@@ -38719,18 +38728,18 @@ Ts.displayName = "DrawerContent";
 const Is = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ u.jsx("div", { className: ve("flex flex-col space-y-1.5 text-left", e), ...t });
+}) => /* @__PURE__ */ u.jsx("div", { className: ye("flex flex-col space-y-1.5 text-left", e), ...t });
 Is.displayName = "DrawerHeader";
 const Ns = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ u.jsx("div", { className: ve("flex gap-2", e), ...t });
+}) => /* @__PURE__ */ u.jsx("div", { className: ye("flex gap-2", e), ...t });
 Ns.displayName = "DrawerFooter";
 const Ds = p.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ u.jsx(
   Ot.Title,
   {
     ref: a,
-    className: ve("text-heading-md", e),
+    className: ye("text-heading-md", e),
     ...t
   }
 ));
@@ -38739,7 +38748,7 @@ const TJ = p.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ u.jsx(
   Ot.Description,
   {
     ref: a,
-    className: ve("text-body-sm color-text-secondary", e),
+    className: ye("text-body-sm color-text-secondary", e),
     ...t
   }
 ));
@@ -38773,18 +38782,21 @@ const Lae = ({
   className: f,
   contentClassName: c,
   disableOutsideClick: l,
-  hasCloseIcon: d
-}) => EJ("(max-width: 768px)") ? /* @__PURE__ */ u.jsx(As, { open: e, onOpenChange: (y) => t(y), children: /* @__PURE__ */ u.jsxs(
+  hasCloseIcon: d,
+  overlayClasses: h,
+  noOverlay: y
+}) => EJ("(max-width: 768px)") ? /* @__PURE__ */ u.jsx(As, { open: e, onOpenChange: (g) => t(g), children: /* @__PURE__ */ u.jsxs(
   Ts,
   {
-    className: ve("w-full", f),
+    className: ye("w-full", f),
     hasCloseIcon: d,
+    overlayClasses: ye(h, { "bg-transparent": y }),
     children: [
       /* @__PURE__ */ u.jsx(Is, { className: "px-6 pt-6", children: /* @__PURE__ */ u.jsx(Ds, { className: "text-left text-heading-md", children: a }) }),
       /* @__PURE__ */ u.jsxs(
         "div",
         {
-          className: ve(
+          className: ye(
             "flex flex-col gap-4 w-full h-full border-t-[1px] text-body-sm color-text-default",
             {
               "px-6 pt-6 pb-2": !c
@@ -38826,15 +38838,16 @@ const Lae = ({
 ) }) : /* @__PURE__ */ u.jsx(lp, { open: e, onOpenChange: t, children: /* @__PURE__ */ u.jsxs(
   js,
   {
-    className: ve(f),
+    className: ye(f),
     dismissable: !l,
     hasCloseIcon: d,
+    overlayClasses: ye(h, { "bg-transparent": y }),
     children: [
       /* @__PURE__ */ u.jsx(hp, { className: "px-6 pt-4", children: /* @__PURE__ */ u.jsx(yp, { className: "text-heading-md", children: a }) }),
       /* @__PURE__ */ u.jsxs(
         "div",
         {
-          className: ve(
+          className: ye(
             "flex flex-col gap-2 w-full h-full border-t-[1px] text-body-sm color-text-default",
             {
               "px-6 pt-6 pb-2": !c
@@ -39452,7 +39465,7 @@ const rX = ({
   }, y) => /* @__PURE__ */ u.jsxs(
     "div",
     {
-      className: ve(
+      className: ye(
         "flex w-full h-full justify-center gap-2",
         c === "vertical" ? "flex-row relative items-start" : "flex-col items-center",
         s
@@ -39463,7 +39476,7 @@ const rX = ({
         /* @__PURE__ */ u.jsxs(
           "div",
           {
-            className: ve("flex w-full items-center justify-center", {
+            className: ye("flex w-full items-center justify-center", {
               "flex-col flex-[0.05] relative h-full": c === "vertical",
               "!h-[4rem]": c === "vertical" && t,
               "translate-x-1/2 right-4 relative": c === "horizontal"
@@ -39472,7 +39485,7 @@ const rX = ({
               /* @__PURE__ */ u.jsx(
                 "div",
                 {
-                  className: ve(
+                  className: ye(
                     "flex h-8 w-8 flex-none flex-col items-center justify-center gap-2 rounded-full",
                     { "color-bg-default-inverse": t || e || a },
                     { "color-bg-tertiary": !t || !e }
@@ -39480,7 +39493,7 @@ const rX = ({
                   children: r ? /* @__PURE__ */ u.jsx(
                     "span",
                     {
-                      className: ve("text-body-md-bold", {
+                      className: ye("text-body-md-bold", {
                         "color-text-inverse": t || e || a,
                         "color-text-secondary": !t || !e
                       }),
@@ -39493,7 +39506,7 @@ const rX = ({
                 "div",
                 {
                   id: "step-line",
-                  className: ve(
+                  className: ye(
                     "flex grow shrink-0 basis-0 flex-col items-center gap-2 border",
                     {
                       "border-transparent": n && c === "horizontal" || c === "vertical" && n && t,
@@ -39513,7 +39526,7 @@ const rX = ({
           "div",
           {
             id: "step-content",
-            className: ve("text-heading-xsm flex flex-col w-full h-full", {
+            className: ye("text-heading-xsm flex flex-col w-full h-full", {
               "color-text-default": t || e || a,
               "color-text-secondary": !e && !t,
               "flex-1 text-left relative gap-4 py-2": c === "vertical",
@@ -39538,7 +39551,7 @@ const rX = ({
             ] }) : /* @__PURE__ */ u.jsx(
               "div",
               {
-                className: ve(
+                className: ye(
                   "absolute flex flex-col gap-4 top-1/2 left-1/2 -translate-x-1/2 translate-y-1/4 transform max-w-sm",
                   {
                     hidden: !e && !t
@@ -39559,7 +39572,7 @@ const rX = ({
   ({ children: e, className: t, layout: a = "horizontal", ...n }, r) => e ? /* @__PURE__ */ u.jsx(
     "div",
     {
-      className: ve(
+      className: ye(
         "flex items-center justify-center",
         {
           "flex-col w-full max-w-sm": a === "vertical",
@@ -39692,23 +39705,24 @@ const Dae = ({
   headerClassName: s,
   side: f = "left",
   noOverlay: c = !1,
-  rounded: l = !1,
-  dismissible: d
+  overlayClasses: l,
+  rounded: d = !1,
+  dismissible: h
 }) => /* @__PURE__ */ u.jsx(iX, { open: e, onOpenChange: t, children: /* @__PURE__ */ u.jsxs(
   Op,
   {
-    className: ve(
+    className: ye(
       {
-        "rounded-b-lg": l && f === "top",
-        "rounded-l-lg": l && f === "right",
-        "rounded-t-lg": l && f === "bottom",
-        "rounded-r-lg": l && f === "left"
+        "rounded-b-lg": d && f === "top",
+        "rounded-l-lg": d && f === "right",
+        "rounded-t-lg": d && f === "bottom",
+        "rounded-r-lg": d && f === "left"
       },
       o
     ),
     side: f,
-    overlayClasses: ve({ "bg-transparent": c }),
-    dismissible: d,
+    overlayClasses: ye(l, { "bg-transparent": c }),
+    dismissible: h,
     children: [
       a && /* @__PURE__ */ u.jsx(Vp, { className: s, children: /* @__PURE__ */ u.jsxs(qp, { className: "text-body-sm-bold inline-flex gap-2 items-center", children: [
         n && (n !== "X" ? /* @__PURE__ */ u.jsx(Pe, { name: n, size: "md" }) : /* @__PURE__ */ u.jsx(sX, { className: "rounded-sm ring-offset-white hover:color-bg-default-hover p-1 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focused focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:color-bg-default-selected data-[state=open]:color-text-default", children: /* @__PURE__ */ u.jsx(Pe, { name: n, size: "md" }) })),
@@ -39863,12 +39877,12 @@ const Pae = ({
     defaultValue: s,
     disabled: c,
     onValueChange: f,
-    children: /* @__PURE__ */ u.jsxs("div", { className: ve(r), children: [
-      /* @__PURE__ */ u.jsx(Zp, { className: ve(a), children: /* @__PURE__ */ u.jsx(mX, { placeholder: o, id: e }) }),
+    children: /* @__PURE__ */ u.jsxs("div", { className: ye(r), children: [
+      /* @__PURE__ */ u.jsx(Zp, { className: ye(a), children: /* @__PURE__ */ u.jsx(mX, { placeholder: o, id: e }) }),
       /* @__PURE__ */ u.jsx(
         Up,
         {
-          className: ve(n),
+          className: ye(n),
           sideOffset: d,
           alignOffset: h,
           children: /* @__PURE__ */ u.jsxs(yX, { children: [
@@ -39876,7 +39890,7 @@ const Pae = ({
             l.map((y) => /* @__PURE__ */ u.jsx(Yp, { value: y.value, children: /* @__PURE__ */ u.jsxs(
               "div",
               {
-                className: ve("flex items-center", {
+                className: ye("flex items-center", {
                   "gap-4": y.icon,
                   "gap-2": !y.icon
                 }),
@@ -39902,7 +39916,7 @@ const Pae = ({
                     }
                   ),
                   /* @__PURE__ */ u.jsxs("div", { className: "flex flex-col gap-2", children: [
-                    /* @__PURE__ */ u.jsxs("span", { className: ve("flex items-center gap-2"), children: [
+                    /* @__PURE__ */ u.jsxs("span", { className: ye("flex items-center gap-2"), children: [
                       /* @__PURE__ */ u.jsx(Ea, { className: "text-body-sm", children: y.label }),
                       y.pro && /* @__PURE__ */ u.jsx(
                         L4,
@@ -59660,7 +59674,7 @@ const Hae = He(
       KW,
       {
         defaultValue: s,
-        className: ve(
+        className: ye(
           "px-4 pt-2 gap-4 rounded-lg shadow-elevation-4 w-[350px] bg-white pb-4",
           s === "emojiPicker" && "h-[400px]"
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse/ui",
-  "version": "4.1.1-patch-8",
+  "version": "4.1.1-patch-9",
   "files": [
     "/dist"
   ],