@lax-wp/design-system 0.11.5 → 0.11.7

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);
       },
@@ -77064,11 +77092,13 @@ const WAe = ({
   }, [e, k, T]);
   const w = q({
     "bg-primary-50 dark:bg-primary-900": p,
-    "bg-neutral-100 dark:bg-black-600": r === e && !p,
+    "bg-neutral-100 dark:bg-black-600": r === e && !p && !(s || d?.is_deleted) && !(A || d?.is_added),
+    "bg-error-200 dark:bg-error-900": r === e && !p && (s || d?.is_deleted),
+    "bg-success-100 dark:bg-success-800": r === e && !p && (A || d?.is_added),
     "bg-primary-50 dark:bg-black-700": !h && !a && c && r !== e && !p,
     "bg-warning-50 dark:bg-black-500": (h || i || o || d?.is_row_modified) && r !== e && !p,
     "bg-error-100 dark:bg-error-975": (s || d?.is_deleted) && r !== e && !p,
-    "bg-success-50": (A || d?.is_added) && r !== e && !p,
+    "bg-success-50 dark:bg-success-900": (A || d?.is_added) && r !== e && !p,
     "bg-primary-50": u && !p,
     ...f && !p && { [f]: !0 }
   });
@@ -77818,7 +77848,9 @@ const t7 = (t) => {
     nt.current && clearTimeout(nt.current), Ve ? He(!0) : nt.current = setTimeout(() => He(!1), 200);
   }, []), $e = q({
     "bg-amber-100 dark:bg-amber-900/30": D,
-    "bg-neutral-100 dark:bg-black-600": a === e && !g && !D,
+    "bg-neutral-100 dark:bg-black-600": a === e && !g && !D && !(h || A?.is_deleted) && !(p || A?.is_added),
+    "bg-error-200 dark:bg-error-900": a === e && !g && !D && (h || A?.is_deleted),
+    "bg-success-100 dark:bg-success-800": a === e && !g && !D && (p || A?.is_added),
     "bg-primary-50 dark:bg-black-700": !_ && !c && I && !N && a !== e && !g && !D,
     "bg-warning-50 dark:bg-black-500": (_ || d || f || A?.is_row_modified) && !N && a !== e && !g && !D,
     "bg-error-100 dark:bg-error-975": (h || A?.is_deleted) && !N && a !== e && !g && !D,
@@ -78020,11 +78052,13 @@ const t7 = (t) => {
     }, 300);
   }, N = q({
     "bg-primary-50 dark:bg-primary-900": o,
-    "bg-neutral-100 dark:bg-black-600": i === t && !o,
+    "bg-neutral-100 dark:bg-black-600": i === t && !o && !c && !d,
+    "bg-error-200 dark:bg-error-900": i === t && !o && c,
+    "bg-success-100 dark:bg-success-800": i === t && !o && d,
     "bg-primary-50 dark:bg-black-700": !f && !s && h && i !== t && !o,
     "bg-warning-50 dark:bg-black-500": (f || A || u) && i !== t && !o,
     "bg-error-100 dark:bg-error-975": c && i !== t && !o,
-    "bg-success-50": d && i !== t && !o
+    "bg-success-50 dark:bg-success-900": d && i !== t && !o
   });
   return /* @__PURE__ */ C("td", { className: `min-w-[28px] w-[28px] sticky left-0 z-30 ${N || "bg-white dark:bg-black-800"} h-[39px]`, children: [
     /* @__PURE__ */ l("div", { ref: S, className: "w-full h-[39px] flex items-center justify-center cursor-pointer", onMouseEnter: w, onMouseLeave: O, children: a && /* @__PURE__ */ l("div", { className: "w-5 h-5 rounded-full bg-warning-100 dark:bg-warning-900 flex items-center justify-center shadow-sm border border-warning-200 dark:border-warning-700", children: /* @__PURE__ */ l(r_, { sx: { fontSize: 14 }, className: "text-warning-600 dark:text-warning-400" }) }) }),
@@ -78085,7 +78119,9 @@ const t7 = (t) => {
         className: q(
           "absolute top-0 left-0 flex items-center justify-center w-full z-20",
           { [S]: f !== d || v },
-          { "bg-neutral-100 dark:bg-black-600": f === d && !v },
+          { "bg-neutral-100 dark:bg-black-600": f === d && !v && !(s || A?.is_deleted) && !(u || A?.is_added) },
+          { "bg-error-200 dark:bg-error-900": f === d && !v && (s || A?.is_deleted) },
+          { "bg-success-100 dark:bg-success-800": f === d && !v && (u || A?.is_added) },
           g && "pointer-events-none"
         ),
         children: e(c, r)
@@ -78118,11 +78154,13 @@ const t7 = (t) => {
 }) => {
   const T = vn(), k = q({
     "bg-primary-50 dark:bg-primary-900": y,
-    "bg-neutral-100 dark:bg-black-600": n === t && !y,
+    "bg-neutral-100 dark:bg-black-600": n === t && !y && !(u || A?.is_deleted) && !(c || A?.is_added),
+    "bg-error-200 dark:bg-error-900": n === t && !y && (u || A?.is_deleted),
+    "bg-success-100 dark:bg-success-800": n === t && !y && (c || A?.is_added),
     "bg-primary-50 dark:bg-black-700": !g && !a && i && n !== t && !y,
     "bg-warning-50 dark:bg-black-500": (g || o || s || A?.is_row_modified) && n !== t && !y,
     "bg-error-100 dark:bg-error-975": (u || A?.is_deleted) && n !== t && !y,
-    "bg-success-50": (c || A?.is_added) && n !== t && !y,
+    "bg-success-50 dark:bg-success-900": (c || A?.is_added) && n !== t && !y,
     "bg-primary-50": d && !y,
     ...m && !y && { [m]: !0 }
   }), w = de(() => v(t), [v, t]), O = de(() => v(null), [v]), { asyncRowOptionsFilter: N, disableOptionsForRowIndex: _ = null, fieldOperationLoading: R } = cr(ea), D = T?.t?.("Save or cancel pending changes first") ?? "Save or cancel pending changes first", L = T?.getRowOptionsDropdownProps?.(), P = !!R, [z, H] = X(!!N), [I, U] = X(e), B = e ? e.filter((Q) => Q.isVisible !== !1).length : 0, j = async (Q) => {