@lax-wp/design-system 0.11.5 → 0.11.6

package/dist/index.es.js

@@ -34627,55 +34627,83 @@ const wj = ({
   mainClass: g,
   id: y,
   childrenClass: x,
-  ...S
-}) => /* @__PURE__ */ C("div", { id: y, className: `${!d && "mb-4"}  ${n ? "pb-1" : ""} ${g || ""}`, style: h?.style, ...S, children: [
-  /* @__PURE__ */ C(
-    "div",
-    {
-      className: q(
-        "flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg",
-        p
-      ),
-      onClick: r,
-      ...S,
-      children: [
-        /* @__PURE__ */ C("div", { onClick: (E) => s ? s(E) : null, className: `${f && "flex"} w-full`, children: [
-          f && !o && /* @__PURE__ */ l(
-            "button",
-            {
-              id: "btn-accordion-outline-drag-indicator",
-              className: "flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out",
-              ...h?.attributes,
-              ...h?.listeners,
-              children: /* @__PURE__ */ l(vb, { height: "10px", width: "7px", color: "#98A2B3" })
-            }
-          ),
-          /* @__PURE__ */ C("div", { className: "flex items-center gap-1 w-full", children: [
-            u && /* @__PURE__ */ l(
-              EW,
+  withAnimation: S = !1,
+  ...E
+}) => {
+  const T = q(!d && "p-4", x);
+  return /* @__PURE__ */ C("div", { id: y, className: `${!d && "mb-4"}  ${n ? "pb-1" : ""} ${g || ""}`, style: h?.style, ...E, children: [
+    /* @__PURE__ */ C(
+      "div",
+      {
+        className: q(
+          "flex items-center justify-between cursor-pointer border border-neutral-200 dark:border-none bg-neutral-100 dark:bg-black-600 px-3 py-1 rounded-lg",
+          p
+        ),
+        onClick: r,
+        ...E,
+        children: [
+          /* @__PURE__ */ C("div", { onClick: (k) => s ? s(k) : null, className: `${f && "flex"} w-full`, children: [
+            f && !o && /* @__PURE__ */ l(
+              "button",
               {
-                isChecked: A,
-                onSelect: (E) => {
-                  E.stopPropagation(), u();
-                },
-                className: "h-4 w-4 accent-[#366FE3]"
+                id: "btn-accordion-outline-drag-indicator",
+                className: "flex items-center justify-center w-icon h-icon hover:transform hover:scale-125 transition-all duration-200 ease-in-out",
+                ...h?.attributes,
+                ...h?.listeners,
+                children: /* @__PURE__ */ l(vb, { height: "10px", width: "7px", color: "#98A2B3" })
               }
             ),
-            /* @__PURE__ */ C("div", { className: "flex gap-2 items-center", children: [
-              m,
-              /* @__PURE__ */ l(oe, { size: "small", appearance: "body", variant: "medium", className: "whitespace-nowrap", children: e })
-            ] }),
-            /* @__PURE__ */ l(oe, { size: "extra-small", appearance: "title", variant: "medium", className: "ml-1", children: c }),
-            v,
-            /* @__PURE__ */ l("span", { children: a === i && !o && /* @__PURE__ */ l(pr, { variant: "ghost", children: /* @__PURE__ */ l(Q_, { size: 16, className: "ml-[8px]" }) }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ l(_N, { sx: { fontSize: 18 }, className: q("text-neutral-600 dark:text-neutral-400", n ? "rotate-90" : "-rotate-90") })
-      ]
-    }
-  ),
-  n ? /* @__PURE__ */ l(at.div, { className: ` ${!d && "p-4"} ${x}`, children: t }) : null
-] });
+            /* @__PURE__ */ C("div", { className: "flex items-center gap-1 w-full", children: [
+              u && /* @__PURE__ */ l(
+                EW,
+                {
+                  isChecked: A,
+                  onSelect: (k) => {
+                    k.stopPropagation(), u();
+                  },
+                  className: "h-4 w-4 accent-[#366FE3]"
+                }
+              ),
+              /* @__PURE__ */ C("div", { className: "flex gap-2 items-center", children: [
+                m,
+                /* @__PURE__ */ l(oe, { size: "small", appearance: "body", variant: "medium", className: "whitespace-nowrap", children: e })
+              ] }),
+              /* @__PURE__ */ l(oe, { size: "extra-small", appearance: "title", variant: "medium", className: "ml-1", children: c }),
+              v,
+              /* @__PURE__ */ l("span", { children: a === i && !o && /* @__PURE__ */ l(pr, { variant: "ghost", children: /* @__PURE__ */ l(Q_, { size: 16, className: "ml-[8px]" }) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ l(
+            _N,
+            {
+              sx: { fontSize: 18 },
+              className: q(
+                "text-neutral-600 dark:text-neutral-400",
+                n ? "rotate-90" : "-rotate-90",
+                S && "transition-transform duration-300 ease-in-out"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    S ? /* @__PURE__ */ l(
+      at.div,
+      {
+        initial: !1,
+        animate: {
+          height: n ? "auto" : 0
+        },
+        transition: {
+          duration: 0.3,
+          ease: [0.4, 0, 0.2, 1]
+        },
+        style: { overflow: "hidden" },
+        children: /* @__PURE__ */ l("div", { className: T, children: t })
+      }
+    ) : n ? /* @__PURE__ */ l("div", { className: T, children: t }) : null
+  ] });
+};
 wj.displayName = "Accordion";
 const Oj = ({
   steps: t,
@@ -36549,7 +36577,7 @@ const iG = ({ isOpen: t, onClose: e, anchorEl: r, placement: n = "right-start",
     "div",
     {
       ref: j,
-      className: "bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700",
+      className: "bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]",
       onMouseEnter: () => {
         B.current && clearTimeout(B.current);
       },