@metaboliccode-dev/widget 0.2.60 → 0.2.61

package/dist/index.js

@@ -3976,7 +3976,7 @@ function tA({
     if (R)
       return rE();
   }, [R]), !p || typeof document > "u" || !R ? null : s3(
-    /* @__PURE__ */ a("div", { className: "mb-root fixed inset-0 z-[9999]", role: "presentation", style: S, children: [
+    /* @__PURE__ */ I("div", { className: "mb-root", style: S, children: /* @__PURE__ */ a("div", { className: "fixed inset-0 z-[9999] overflow-hidden", role: "presentation", children: [
       /* @__PURE__ */ I(
         "button",
         {
@@ -3996,10 +3996,12 @@ function tA({
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": Z,
-          className: "absolute right-0 top-0 z-10 flex h-full w-full max-w-[min(100vw,72rem)] shrink-0 flex-col overflow-hidden rounded-l-2xl border border-solid border-[color:var(--mb-color-card-border)] shadow-xl transition-transform duration-300 ease-out",
+          className: "absolute right-0 top-0 z-10 flex h-full w-full max-w-[min(100vw,72rem)] shrink-0 flex-col overflow-hidden rounded-l-2xl border border-solid border-[color:var(--mb-color-card-border)] shadow-xl transition-[clip-path] duration-300 ease-out",
           style: {
-            transform: l ? "translateX(0)" : "translateX(100%)",
-            backgroundColor: "#FFFFFF"
+            backgroundColor: "#FFFFFF",
+            clipPath: l ? "inset(0 0 0 0)" : "inset(0 0 0 100%)",
+            willChange: "clip-path",
+            backfaceVisibility: "hidden"
           },
           children: [
             /* @__PURE__ */ a(
@@ -4114,7 +4116,7 @@ function tA({
           ]
         }
       )
-    ] }),
+    ] }) }),
     document.body
   );
 }
@@ -6553,7 +6555,7 @@ function Oa({
     if (v)
       return rE();
   }, [v]), !n || typeof document > "u" || !v ? null : s3(
-    /* @__PURE__ */ a("div", { className: "mb-root fixed inset-0 z-[9999]", role: "presentation", style: W, children: [
+    /* @__PURE__ */ I("div", { className: "mb-root", style: W, children: /* @__PURE__ */ a("div", { className: "fixed inset-0 z-[9999] overflow-hidden", role: "presentation", children: [
       /* @__PURE__ */ I(
         "button",
         {
@@ -6573,8 +6575,12 @@ function Oa({
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": z,
-          className: "absolute right-0 top-0 z-10 flex h-full w-full max-w-[min(100vw,72rem)] shrink-0 flex-col overflow-hidden rounded-l-2xl border border-solid border-[color:var(--mb-color-card-border)] bg-white shadow-xl transition-transform duration-300 ease-out",
-          style: { transform: t ? "translateX(0)" : "translateX(100%)" },
+          className: "absolute right-0 top-0 z-10 flex h-full w-full max-w-[min(100vw,72rem)] shrink-0 flex-col overflow-hidden rounded-l-2xl border border-solid border-[color:var(--mb-color-card-border)] bg-white shadow-xl transition-[clip-path] duration-300 ease-out",
+          style: {
+            clipPath: t ? "inset(0 0 0 0)" : "inset(0 0 0 100%)",
+            willChange: "clip-path",
+            backfaceVisibility: "hidden"
+          },
           children: [
             /* @__PURE__ */ a("div", { className: "flex shrink-0 items-start justify-between gap-6 px-4 pt-4 sm:px-6 sm:pt-6", children: [
               /* @__PURE__ */ I(
@@ -6620,7 +6626,7 @@ function Oa({
           ]
         }
       )
-    ] }),
+    ] }) }),
     document.body
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metaboliccode-dev/widget",
-  "version": "0.2.60",
+  "version": "0.2.61",
   "type": "module",
   "files": [
     "dist",