@janbox/storefront-builder 2.0.0 → 2.0.2

package/dist/{color-picker-popover-B3AVFuei.js → color-picker-popover-XeaVfYS8.js}

@@ -1,14 +1,13 @@
-import { isString as g } from "lodash-es";
-import { useCallback as v, useMemo as P, useSyncExternalStore as W, Fragment as z } from "react";
-import "clsx";
-import "tailwind-merge";
-import { q as M, s as F, r as V, m as j, W as R, c as T, f as U } from "./dialog-header-DPLOS7TT.js";
-import { useEditor as q } from "@craftjs/core";
+import { isString as b } from "lodash-es";
+import { useCallback as v, useMemo as P, useSyncExternalStore as z, Fragment as M } from "react";
+import { t as g, q as F, s as R, r as V, l as j, W as T, e as U, z as q } from "./dialog-header-Bh3Dkw2q.js";
+import { useEditor as B } from "@craftjs/core";
 import { jsxs as c, jsx as r } from "@emotion/react/jsx-runtime";
-import { parseColor as x, paletteVars as B, groupedColors as O } from "@janbox/storefront-ui/theme";
-import { flatten as $ } from "flat";
+import { parseColor as k, paletteVars as D, groupedColors as G } from "@janbox/storefront-ui/theme";
+import { flatten as O } from "flat";
 import "@janbox/storefront-ui/hooks";
 import "@janbox/storefront-ui/utils";
+import "@emotion/react";
 import "@floating-ui/react";
 import "react-use";
 import "overlayscrollbars-react";
@@ -16,13 +15,13 @@ import "@tanstack/react-virtual";
 import "react-dropzone";
 import "react-datepicker/dist/react-datepicker.css";
 import "react-datepicker";
-const k = (e) => e.info ?? {}, y = (e) => e.data?.custom ?? {}, de = (e) => {
-  const t = y(e);
-  if (g(t.displayName))
+const N = (e) => e.info ?? {}, I = (e) => e.data?.custom ?? {}, de = (e) => {
+  const t = I(e);
+  if (b(t.displayName))
     return t.displayName;
-  const o = k(e);
-  return g(o.displayName) ? o.displayName : o.displayName?.(e.data.props) ?? e.data.displayName;
-}, le = (e) => e.data.displayName, ce = (e) => e.related ?? {}, he = (e) => y(e).selectable ?? k(e).selectable ?? !0, ue = (e, t) => {
+  const o = N(e);
+  return b(o.displayName) ? o.displayName : o.displayName?.(e.data.props) ?? e.data.displayName;
+}, le = (e) => e.data.displayName, ce = (e) => e.related ?? {}, he = (e) => I(e).selectable ?? N(e).selectable ?? !0, pe = (e, t) => {
   try {
     e.craft && (e.craft = {
       ...e.craft,
@@ -34,55 +33,55 @@ const k = (e) => e.info ?? {}, y = (e) => e.data?.custom ?? {}, de = (e) => {
   } catch (o) {
     console.error(`Error setting related for ${e.craft?.displayName}`, o);
   }
-}, pe = (e, t = "xs") => t === "xs" ? e : { [t]: e }, we = (e, t) => {
-  const { resolved: o, ...i } = t;
+}, ue = (e, t = "xs") => t === "xs" ? e : { [t]: e }, me = (e, t) => {
+  const { resolved: o, ...n } = t;
   return e.craft = {
     displayName: o,
-    ...i,
-    related: i.related ?? {}
+    ...n,
+    related: n.related ?? {}
   }, e;
-}, me = (e = () => ({})) => {
-  const t = q(e), { query: o, actions: i } = t, h = v(
+}, fe = (e = () => ({})) => {
+  const t = B(e), { query: o, actions: n } = t, h = v(
     (s, a, d) => {
-      const l = o.node(s).get(), n = a ?? l.data.parent, w = n ? o.node(n).get() : null;
-      if (!w)
+      const l = o.node(s).get(), i = a ?? l.data.parent, m = i ? o.node(i).get() : null;
+      if (!m)
         throw new Error("Parent node not found");
-      const u = {
+      const p = {
         data: {
           ...l.data,
           nodes: [],
           linkedNodes: {}
         }
-      }, f = o.parseFreshNode(u).toNode();
-      return i.add(f, w.id, d ?? w.data.nodes.length), l.data.nodes.forEach((S, E) => {
-        h(S, f.id, E);
-      }), o.node(f.id).get();
+      }, w = o.parseFreshNode(p).toNode();
+      return n.add(w, m.id, d ?? m.data.nodes.length), l.data.nodes.forEach((E, W) => {
+        h(E, w.id, W);
+      }), o.node(w.id).get();
     },
-    [i, o]
-  ), p = v(
+    [n, o]
+  ), u = v(
     (s) => {
       const a = s.parentId ?? o.node(s.nodeId).get().data.parent;
       if (!a)
         throw new Error("Parent node not found");
       let d;
       if ("sourceIndex" in s) {
-        const { sourceIndex: l, destinationIndex: n } = s;
-        d = n > l ? n + 1 : n;
+        const { sourceIndex: l, destinationIndex: i } = s;
+        d = i > l ? i + 1 : i;
       } else
         d = s.moveIndex;
-      i.move(s.nodeId, a, d);
+      n.move(s.nodeId, a, d);
     },
-    [i, o]
+    [n, o]
   );
   return P(() => ({
     ...t,
     actions: {
       ...t.actions,
-      move: p,
+      move: u,
       duplicate: h
     }
-  }), [h, t, p]);
-}, A = () => {
+  }), [h, t, u]);
+}, $ = () => {
   let e;
   const t = /* @__PURE__ */ new Set();
   return { getSnapshot: () => {
@@ -96,25 +95,25 @@ const k = (e) => e.info ?? {}, y = (e) => e.data?.custom ?? {}, de = (e) => {
       throw new Error("useEditor must be initialized before setState.");
     e = { ...e, ...s }, t.forEach((a) => a());
   } };
-}, m = A();
-let N = !1;
-const I = (e) => (e && !N && (N = !0, m.initialize(e)), {
-  ...W(m.subscribe, m.getSnapshot),
-  setState: m.setState
-}), b = ({ color: e, size: t = 24 }) => {
-  const o = I(), i = x(e, o.theme.palette);
+}, f = $();
+let C = !1;
+const S = (e) => (e && !C && (C = !0, f.initialize(e)), {
+  ...z(f.subscribe, f.getSnapshot),
+  setState: f.setState
+}), x = ({ color: e, size: t = 24 }) => {
+  const o = S(), n = k(e, o.theme.palette);
   return /* @__PURE__ */ c(
     "div",
     {
       title: e,
-      className: "tw:rounded-full tw:border tw:border-ic-white-3s tw:overflow-hidden",
-      style: { backgroundColor: i?.toString(), width: t, height: t },
+      css: { borderRadius: 9999, overflow: "hidden", borderWidth: 1, borderStyle: "solid", borderColor: g.palette.white["3s"] },
+      style: { backgroundColor: n?.toString(), width: t, height: t },
       children: [
-        !i && /* @__PURE__ */ c("svg", { className: "tw:w-full tw:h-full tw:text-ic-white-5s", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: [
+        !n && /* @__PURE__ */ c("svg", { css: { width: "100%", height: "100%", color: g.palette.white["5s"] }, viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: [
           /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ r("pattern", { id: "diagonal-stripes", patternUnits: "userSpaceOnUse", width: "8", height: "8", children: /* @__PURE__ */ r("path", { d: "M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4", stroke: "currentColor", strokeWidth: "1.5" }) }) }),
           /* @__PURE__ */ r("rect", { width: "32", height: "32", fill: "url(#diagonal-stripes)" })
         ] }),
-        i?.alpha() === 0 && /* @__PURE__ */ c("svg", { className: "tw:w-full tw:h-full", xmlns: "http://www.w3.org/2000/svg", children: [
+        n?.alpha() === 0 && /* @__PURE__ */ c("svg", { css: { width: "100%", height: "100%" }, xmlns: "http://www.w3.org/2000/svg", children: [
           /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ c("pattern", { id: "checkerboard", patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [
             /* @__PURE__ */ r("rect", { width: "8", height: "8", fill: "white" }),
             /* @__PURE__ */ r("rect", { width: "4", height: "4", fill: "lightgray" }),
@@ -125,40 +124,57 @@ const I = (e) => (e && !N && (N = !0, m.initialize(e)), {
       ]
     }
   );
-}, D = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, A = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.999 8C11.861 8 11.749 8.112 11.75 8.25C11.75 8.388 11.862 8.5 12 8.5C12.138 8.5 12.25 8.388 12.25 8.25C12.25 8.112 12.138 8 11.999 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M12 12V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, C = $(B), fe = ({
+`, y = O(D), ge = ({
   color: e,
   onChange: t,
   children: o,
-  placement: i = "right-start",
+  placement: n = "right-start",
   ...h
 }) => {
-  const p = (n) => {
-    t?.(C[n.currentTarget.value]);
-  }, s = I(), a = x(e, s.theme.palette)?.hex(), d = (n) => {
-    n.target.select();
-  }, l = (n) => {
-    t?.(n.target.value);
+  const u = (i) => {
+    t?.(y[i.currentTarget.value]);
+  }, s = S(), a = k(e, s.theme.palette)?.hex(), d = (i) => {
+    i.target.select();
+  }, l = (i) => {
+    t?.(i.target.value);
   };
-  return /* @__PURE__ */ c(M, { placement: i, ...h, children: [
-    /* @__PURE__ */ r(F, { children: o ?? /* @__PURE__ */ r("button", { className: "tw:border tw:border-ic-white-1s tw:rounded-full tw:hover:border-ic-white-3s tw:p-0.5", children: /* @__PURE__ */ r(b, { color: e }) }) }),
-    /* @__PURE__ */ r(V, { children: /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
-      /* @__PURE__ */ r("div", { className: "tw:flex tw:items-center tw:gap-2", children: /* @__PURE__ */ r("div", { className: "tw:flex-1", children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ c(F, { placement: n, ...h, children: [
+    /* @__PURE__ */ r(R, { children: o ?? /* @__PURE__ */ r(
+      "button",
+      {
+        css: {
+          padding: 2,
+          borderRadius: 9999,
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: g.palette.white["1s"],
+          ":hover": {
+            borderColor: g.palette.white["3s"]
+          }
+        },
+        children: /* @__PURE__ */ r(x, { color: e })
+      }
+    ) }),
+    /* @__PURE__ */ r(V, { children: /* @__PURE__ */ c("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ r("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ r("div", { css: { flex: 1 }, children: /* @__PURE__ */ r(
         j,
         {
           fullWidth: !0,
           suffix: /* @__PURE__ */ r(
-            R,
+            T,
             {
-              className: T({
-                hidden: e === a
-              }),
+              css: [
+                e === a && {
+                  display: "none"
+                }
+              ],
               size: 16,
-              source: D
+              source: A
             }
           ),
           onChange: l,
@@ -167,35 +183,43 @@ const I = (e) => (e && !N && (N = !0, m.initialize(e)), {
           size: "32"
         }
       ) }) }),
-      /* @__PURE__ */ r(U, { className: "tw:min-w-72", color: a, onChange: t }),
+      /* @__PURE__ */ r(U, { css: { minWidth: 288 }, color: a, onChange: t }),
       /* @__PURE__ */ r(
         "div",
         {
           style: {
             gridTemplateColumns: "max-content 1fr"
           },
-          className: "tw:grid tw:items-center tw:gap-x-4 tw:gap-y-2",
-          children: O.map((n, w) => /* @__PURE__ */ c(z, { children: [
-            /* @__PURE__ */ r("p", { className: "tw:text-xs", children: n.name }),
-            /* @__PURE__ */ r("div", { className: "tw:inline-flex tw:items-center tw:gap-2", children: n.colors.map((u) => /* @__PURE__ */ r("div", { className: "tw:inline-flex", children: /* @__PURE__ */ r("button", { title: u, onClick: p, type: "button", value: u, children: /* @__PURE__ */ r(b, { color: C[u] }) }) }, u)) })
-          ] }, w))
+          css: { display: "grid", alignItems: "center", columnGap: 16, rowGap: 8 },
+          children: G.map((i, m) => /* @__PURE__ */ c(M, { children: [
+            /* @__PURE__ */ r(
+              "p",
+              {
+                css: {
+                  ...q.xs
+                },
+                children: i.name
+              }
+            ),
+            /* @__PURE__ */ r("div", { css: { display: "inline-flex", alignItems: "center", gap: 8 }, children: i.colors.map((p) => /* @__PURE__ */ r("div", { css: { display: "inline-flex" }, children: /* @__PURE__ */ r("button", { title: p, onClick: u, type: "button", value: p, children: /* @__PURE__ */ r(x, { color: y[p] }) }) }, p)) })
+          ] }, m))
         }
       )
     ] }) })
   ] });
 };
 export {
-  fe as C,
-  D as I,
+  ge as C,
+  A as I,
   de as a,
-  k as b,
+  N as b,
   ce as c,
-  we as d,
+  me as d,
   le as e,
-  I as f,
-  y as g,
+  S as f,
+  I as g,
   he as i,
-  ue as r,
-  pe as t,
-  me as u
+  pe as r,
+  ue as t,
+  fe as u
 };