@chaibuilder/sdk 0.1.32 → 1.0.0

package/dist/{Settings-ad55d8cb.js → Settings-a2d4e9c2.js}

@@ -1,26 +1,26 @@
 import { j as e } from "./jsx-runtime-944c88e2.js";
 import * as ne from "react";
-import $, { useState as w, useEffect as E, useMemo as N, useCallback as A, createContext as Oe, useContext as re } from "react";
+import P, { useState as w, useEffect as E, useMemo as k, useCallback as A, createContext as Oe, useContext as re } from "react";
 import { useThrottledCallback as me } from "@react-hookz/web";
 import { map as C, isEmpty as b, last as ye, forEach as je, set as Me, get as p, startCase as Y, filter as be, truncate as it, isArray as ae, includes as M, first as we, split as dt, toLower as te, find as ct, omit as pt, keys as ut, cloneDeep as xt, each as gt, capitalize as ht, reject as mt, nth as Re, startsWith as z, isNumber as yt, parseInt as bt, isNaN as _e, findLast as ft, has as ge, flatten as U, intersection as Ee, isNull as vt } from "lodash";
 import { useTranslation as Fe } from "react-i18next";
-import { PlusIcon as Ce, Cross2Icon as Ye, EyeOpenIcon as jt, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as wt, ArrowTopRightIcon as Ct, ArrowBottomRightIcon as kt, ArrowBottomLeftIcon as Nt, AlignLeftIcon as St, AlignCenterHorizontallyIcon as Tt, AlignRightIcon as Rt, StretchHorizontallyIcon as Vt, FontItalicIcon as Ht, UnderlineIcon as Bt, OverlineIcon as At, LetterCaseUppercaseIcon as Dt, Cross1Icon as $t, InfoCircledIcon as ke, MinusIcon as Pt, BoxIcon as Xe, TriangleDownIcon as It, RowSpacingIcon as Lt, TrashIcon as We, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { PlusIcon as Ce, Cross2Icon as Ye, EyeOpenIcon as jt, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as wt, ArrowTopRightIcon as Ct, ArrowBottomRightIcon as Nt, ArrowBottomLeftIcon as kt, AlignLeftIcon as St, AlignCenterHorizontallyIcon as Tt, AlignRightIcon as Rt, StretchHorizontallyIcon as Vt, FontItalicIcon as Ht, UnderlineIcon as Bt, OverlineIcon as At, LetterCaseUppercaseIcon as Dt, Cross1Icon as Pt, InfoCircledIcon as Ne, MinusIcon as $t, BoxIcon as Xe, TriangleDownIcon as It, RowSpacingIcon as Lt, TrashIcon as We, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
 import { T as Ot, a as Mt, b as He, c as Be } from "./tabs-85caa1e8.js";
 import _t from "@rjsf/core";
 import Et from "@rjsf/validator-ajv8";
-import { D as G, E as Ft, d as ze, G as Ue, H as Yt, I as Xt, J as Wt, j as Ne, K as Ge, L as Ke, i as qe, e as Zt, M as Je, f as Ae, N as pe, c as zt, O as Ut, P as Gt } from "./index-370ce00c.js";
+import { D as G, E as Ft, d as ze, G as Ue, H as Yt, I as Xt, J as Wt, j as ke, K as Ge, L as Ke, i as qe, e as Zt, M as Je, f as Ae, N as pe, c as zt, O as Ut, P as Gt } from "./index-914d197c.js";
 import { getChaiDataProviders as Kt, getBlockComponent as Qe, SingleLineText as qt } from "@chaibuilder/blocks";
 import { EditIcon as Jt, TrashIcon as Qt, Check as er } from "lucide-react";
 import { u as et } from "./useChaiExternalData-192c7896.js";
-import { d as X, e as W, f as Z, B as ue, g as tr } from "./useBuilderProp-81a14920.js";
+import { l as X, m as W, n as Z, B as ue, o as tr } from "./useBuilderProp-21feb2da.js";
 import { D as rr, a as sr, b as lr, c as or, e as nr, f as ar, d as ir } from "./dialog-18207bef.js";
 import { P as dr, a as cr, b as pr } from "./popover-f7addcf4.js";
 import { C as ur, b as xr, c as gr, d as hr, e as mr, f as yr, I as br } from "./command-6f260f61.js";
 import { A as tt, a as ie, b as de, c as ce } from "./accordion-c0176dc5.js";
-import { R as fr, I as vr, a as jr, L as wr } from "./link-e3a788f7.js";
+import { R as fr, I as vr, a as jr, L as wr } from "./link-57de608a.js";
 import { useAtom as Cr } from "jotai";
-import kr from "react-autosuggest";
-import Nr from "fuse.js";
+import Nr from "react-autosuggest";
+import kr from "fuse.js";
 import { A as Sr, C as xe, d as Tr } from "./html-to-json-45e0e3b5.js";
 import { L as Se } from "./label-e770a087.js";
 import { S as Rr } from "./MODIFIERS-2f19c314.js";
@@ -41,6 +41,7 @@ import "react-hotkeys-hook";
 import "flat-to-nested";
 import "redux-undo";
 import "sonner";
+import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "@radix-ui/react-tooltip";
@@ -50,13 +51,13 @@ import "@radix-ui/react-popover";
 import "cmdk";
 import "@radix-ui/react-accordion";
 import "react-icons-picker";
-import "./ImagesPanel-3fb8087f.js";
+import "./ImagesPanel-47ac13c3.js";
 import "react-quill";
 import "himalaya";
 import "@radix-ui/react-label";
 import "@radix-ui/react-select";
-const $r = $.lazy(() => import("react-json-view"));
-function Pr(t) {
+const Pr = P.lazy(() => import("react-json-view"));
+function $r(t) {
   const s = [], r = {};
   function l(o, a) {
     je(a, (d, i) => {
@@ -73,7 +74,7 @@ const fe = ({ data: t, fullView: s }) => {
   return s ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(Ft, { children: /* @__PURE__ */ e.jsx(
-      $r,
+      Pr,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -97,7 +98,7 @@ const fe = ({ data: t, fullView: s }) => {
   dataType: a,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: n } = Pr(l), u = t === "PROP" ? Qe(l == null ? void 0 : l._type) : {}, x = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+  const { paths: i, pathsType: n } = $r(l), u = t === "PROP" ? Qe(l == null ? void 0 : l._type) : {}, x = t === "PROP", [c, m] = w(!1), h = k(() => t === "PROP" ? i.filter(
     (g) => !M(d, g) && p(u, `props.${we(dt(g, "."))}.binding`)
   ) : i.filter((g) => a === p(n, g, "")), [t, i, d, a, u]);
   return E(() => {
@@ -283,12 +284,14 @@ const fe = ({ data: t, fullView: s }) => {
   E(() => {
     d(C(t, (c, m) => ({ key: m, value: c })));
   }, [r == null ? void 0 : r._id]);
-  const i = N(() => {
+  const i = k(() => {
+    if (b(l))
+      return !0;
     if (b(a))
       return !1;
     const c = ye(a);
     return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [a]), n = (c) => {
+  }, [l, a]), n = (c) => {
     const m = be(a, (h) => h.key !== c.key);
     d([...m, c]), x([...m, c]);
   }, u = (c) => {
@@ -329,14 +332,14 @@ const fe = ({ data: t, fullView: s }) => {
         "button",
         {
           disabled: i,
-          className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${b(a) ? "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30" : ""} ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : b(a) ? "" : "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30"}`,
-          children: "+ Add Data Binding"
+          className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
+          children: b(l) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
         }
       ) }) }),
-      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: "Complete last added data binding to add more" })
+      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(l) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, Mr = Or, _r = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), $e = ({
+}, Mr = Or, _r = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), Pe = ({
   createHistorySnapshot: t,
   properties: s,
   formData: r,
@@ -386,7 +389,7 @@ function Er() {
       title: "Name",
       default: p(t, "_name", t._type)
     })
-  }, n = ut(p(o, "_bindings", {})), u = N(() => {
+  }, n = ut(p(o, "_bindings", {})), u = k(() => {
     const x = xt(p(l, "props", {}));
     return gt(n, (c) => {
       delete x[c];
@@ -394,7 +397,7 @@ function Er() {
   }, [l, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
-      $e,
+      Pe,
       {
         onChange: d,
         createHistorySnapshot: a,
@@ -438,7 +441,7 @@ function Er() {
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            $e,
+            Pe,
             {
               onChange: d,
               createHistorySnapshot: a,
@@ -452,7 +455,7 @@ function Er() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Pe = new Nr(Sr, {
+const $e = new kr(Sr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
@@ -460,21 +463,21 @@ const Pe = new Nr(Sr, {
 });
 function Fr() {
   var D;
-  const [t] = Ne(), s = G(), r = Ge(), l = Ke(), [o] = qe(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, n = mt((p(s, i, "").replace(Rr, "").split(",").pop() || "").split(" "), b), u = () => {
+  const [t] = ke(), s = G(), r = Ge(), l = Ke(), [o] = qe(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, n = mt((p(s, i, "").replace(Rr, "").split(",").pop() || "").split(" "), b), u = () => {
     const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     r(o, j, !0), d("");
   }, [x, c] = w([]), m = ({ value: j }) => {
-    const L = j.trim().toLowerCase(), P = L.match(/.+:/g);
-    let k = [];
-    if (P && P.length > 0) {
-      const [I] = P, F = L.replace(I, "");
-      k = Pe.search(F).map((y) => ({
+    const L = j.trim().toLowerCase(), $ = L.match(/.+:/g);
+    let N = [];
+    if ($ && $.length > 0) {
+      const [I] = $, F = L.replace(I, "");
+      N = $e.search(F).map((y) => ({
         ...y,
         item: { ...y.item, name: I + y.item.name }
       }));
     } else
-      k = Pe.search(L);
-    c(C(k, "item"));
+      N = $e.search(L);
+    c(C(N, "item"));
   }, h = () => {
     c([]);
   }, g = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), S = {
@@ -498,7 +501,7 @@ function Fr() {
         /* @__PURE__ */ e.jsx(Se, { className: "mt-2", children: "Add Tailwind classes" }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            kr,
+            Nr,
             {
               suggestions: x,
               onSuggestionsFetchRequested: m,
@@ -1019,8 +1022,8 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   borderRadiusLeft: ee,
   borderRadiusTopLeft: wt,
   borderRadiusTopRight: Ct,
-  borderRadiusBottomRight: kt,
-  borderRadiusBottomLeft: Nt,
+  borderRadiusBottomRight: Nt,
+  borderRadiusBottomLeft: kt,
   divideXWidth: R,
   divideYWidth: V,
   scale: O,
@@ -1171,16 +1174,16 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
       }
     )
   ] }),
-  static: $t
+  static: Pt
 }, se = Oe({ canReset: !1, canChange: !0 }), Zr = ({ children: t, canReset: s = !1, canChange: r = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(se.Provider, { value: { canReset: s, canChange: r }, children: t })
 ), lt = ({ label: t, property: s, onChange: r }) => {
-  const l = N(() => p(xe, `${s}.classes`, [""]), [s]), o = le(s), a = N(() => p(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(a);
+  const l = k(() => p(xe, `${s}.classes`, [""]), [s]), o = le(s), a = k(() => p(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(a);
   return /* @__PURE__ */ e.jsx("div", { className: t ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ e.jsx(br, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
     /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(ke, {}) }) }),
+      /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
@@ -1208,7 +1211,7 @@ function ve({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o
       value: a,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        $.Children.toArray(
+        P.Children.toArray(
           l.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
         )
       ]
@@ -1216,7 +1219,7 @@ function ve({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o
   );
 }
 const zr = ({ property: t, onChange: s }) => {
-  const { canReset: r, canChange: l } = re(se), o = le(t), a = N(() => p(o, "cls", ""), [o]), d = N(() => p(xe, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, n = /\[.*\]/g.test(a);
+  const { canReset: r, canChange: l } = re(se), o = le(t), a = k(() => p(o, "cls", ""), [o]), d = k(() => p(xe, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, n = /\[.*\]/g.test(a);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1225,7 +1228,7 @@ const zr = ({ property: t, onChange: s }) => {
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
         disabled: !l && (!r || i - 1 < 0),
         onClick: () => s(Re(d, i - 1), t),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(Pt, { className: !l && (!r || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx($t, { className: !l && (!r || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(lt, { label: !1, property: t, onChange: s }) }),
@@ -1246,7 +1249,7 @@ const zr = ({ property: t, onChange: s }) => {
     )
   ] }) });
 }, Ur = ({ property: t, onChange: s }) => {
-  const r = N(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), a = N(() => p(o, "cls", ""), [o]);
+  const r = k(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), a = k(() => p(o, "cls", ""), [o]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(X, { children: [
     /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
@@ -1255,7 +1258,7 @@ const zr = ({ property: t, onChange: s }) => {
         disabled: !l,
         onClick: () => s(d, t),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(p(st, d, Xe))
+        children: P.createElement(p(st, d, Xe))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
@@ -1273,7 +1276,7 @@ const zr = ({ property: t, onChange: s }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, Kr = ({ property: t, onChange: s }) => {
-  const r = le(t), l = N(() => p(r, "cls", ""), [r]), { canChange: o } = re(se), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), u = l.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
+  const r = le(t), l = k(() => p(r, "cls", ""), [r]), { canChange: o } = re(se), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), u = l.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
     // eslint-disable-next-line no-shadow
     (g) => {
       ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), n({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((f) => ({ ...f, color: g, shade: f.shade ? f.shade : "500" })));
@@ -1484,7 +1487,7 @@ const zr = ({ property: t, onChange: s }) => {
     return Qr(t);
   const r = p(s, "0", "").replace(/\[|\]/g, ""), l = t.startsWith("-") ? "-" : "", o = we(r.match(/\d+.\d+|\d+/g));
   return { value: `${l}${o}`, unit: r.replace(o, "") };
-}, Qr = (t) => b(t) ? { value: "", unit: "" } : qr(t), ot = $.createContext({
+}, Qr = (t) => b(t) ? { value: "", unit: "" } : qr(t), ot = P.createContext({
   setDragData: () => {
   }
 }), es = ({
@@ -1532,7 +1535,7 @@ const zr = ({ property: t, onChange: s }) => {
   },
   l
 )) }), rs = (t) => {
-  const [s, r] = w(!1), [l, o] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: n, units: u, negative: x } = t, [c, m] = w(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, S] = w(""), [D, j] = w(!1), [L, P] = w(!1);
+  const [s, r] = w(!1), [l, o] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: n, units: u, negative: x } = t, [c, m] = w(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, S] = w(""), [D, j] = w(!1), [L, $] = w(!1);
   E(() => {
     const { value: y, unit: v } = Jr(a);
     if (v === "") {
@@ -1541,7 +1544,7 @@ const zr = ({ property: t, onChange: s }) => {
     }
     m(v), o(v === "class" || b(y) ? "" : y);
   }, [a, n, u]);
-  const k = me(
+  const N = me(
     (y) => {
       d(y);
     },
@@ -1562,15 +1565,15 @@ const zr = ({ property: t, onChange: s }) => {
       }
       const T = p(v, "unit") !== "" ? p(v, "unit") : c;
       if (T === "auto" || T === "none") {
-        k(`${i}${T}`);
+        N(`${i}${T}`);
         return;
       }
       if (p(v, "value") === "")
         return;
       const K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
-      y ? I(K) : k(K);
+      y ? I(K) : N(K);
     },
-    [k, I, l, c, i, u]
+    [N, I, l, c, i, u]
   ), oe = A(
     (y) => {
       const v = Ie(`${l}`, u);
@@ -1579,20 +1582,20 @@ const zr = ({ property: t, onChange: s }) => {
         return;
       }
       if (y === "auto" || y === "none") {
-        k(`${i}${y}`);
+        N(`${i}${y}`);
         return;
       }
       if (p(v, "value") === "")
         return;
       const T = p(v, "unit") !== "" ? p(v, "unit") : y, K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
-      k(K);
+      N(K);
     },
-    [k, l, i, u]
+    [N, l, i, u]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: c === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: a }),
     /* @__PURE__ */ e.jsxs(X, { children: [
-      /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(ke, {}) }) }),
+      /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
     ] })
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${D ? "z-auto" : ""}`, children: [
@@ -1607,7 +1610,7 @@ const zr = ({ property: t, onChange: s }) => {
           onKeyDown: (y) => {
             if (y.keyCode !== 38 && y.keyCode !== 40)
               return;
-            y.preventDefault(), P(!0);
+            y.preventDefault(), $(!0);
             const v = bt(y.target.value);
             let T = _e(v) ? 0 : v;
             y.keyCode === 38 && (T += 1), y.keyCode === 40 && (T -= 1);
@@ -1615,7 +1618,7 @@ const zr = ({ property: t, onChange: s }) => {
             I(at);
           },
           onKeyUp: (y) => {
-            L && (y.preventDefault(), P(!1));
+            L && (y.preventDefault(), $(!1));
           },
           onBlur: () => F(),
           onChange: (y) => {
@@ -1665,7 +1668,7 @@ const zr = ({ property: t, onChange: s }) => {
           if (S(() => ""), j(!1), b(y))
             return;
           const v = `${y}`, _ = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
-          k(_);
+          N(_);
         },
         onDrag: (y) => {
           if (b(y))
@@ -1769,9 +1772,9 @@ const zr = ({ property: t, onChange: s }) => {
   "2xl": "1536px"
 }, os = (t) => `${t.toUpperCase()} ${Le[t] ? `(${Le[t]} & up)` : ""}`, Te = (t) => {
   const { type: s = "icons", label: r, property: l, onEmitChange: o = () => {
-  }, units: a, negative: d = !1 } = t, [i] = Zt(), [n] = Je(), [, u] = Ae(), x = le(l), c = Ge(), m = Ke(), [h] = qe(), g = N(() => p(x, "fullCls", ""), [x]), f = A(
-    (k, I = !0) => {
-      const F = { dark: i, mq: u, mod: n, cls: k, property: l, fullCls: "" };
+  }, units: a, negative: d = !1 } = t, [i] = Zt(), [n] = Je(), [, u] = Ae(), x = le(l), c = Ge(), m = Ke(), [h] = qe(), g = k(() => p(x, "fullCls", ""), [x]), f = A(
+    (N, I = !0) => {
+      const F = { dark: i, mq: u, mod: n, cls: N, property: l, fullCls: "" };
       (i || n !== "") && (F.mq = "xs");
       const oe = Tr(F);
       c(h, [oe], I);
@@ -1779,12 +1782,12 @@ const zr = ({ property: t, onChange: s }) => {
     [h, i, u, n, l, c]
   ), S = A(() => {
     m(h, [g]);
-  }, [h, g, m]), D = N(() => ss(x, u), [x, u]);
+  }, [h, g, m]), D = k(() => ss(x, u), [x, u]);
   E(() => {
     o(D, x);
   }, [D, o, x]);
   const [, , j] = Ae(), L = A(
-    (k) => {
+    (N) => {
       j({
         xs: 400,
         sm: 640,
@@ -1792,12 +1795,12 @@ const zr = ({ property: t, onChange: s }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[k]);
+      }[N]);
     },
     [j]
-  ), P = p(x, "dark", null) === i && p(x, "mod", null) === n && p(x, "mq", null) === u;
-  return /* @__PURE__ */ e.jsx(Zr, { canChange: D, canReset: x && P, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${x && !P ? "text-foreground" : ""}`, children: r }) }),
+  ), $ = p(x, "dark", null) === i && p(x, "mod", null) === n && p(x, "mq", null) === u;
+  return /* @__PURE__ */ e.jsx(Zr, { canChange: D, canReset: x && $, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${x && !$ ? "text-foreground" : ""}`, children: r }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         s === "arbitrary" ? /* @__PURE__ */ e.jsx(
@@ -1816,13 +1819,13 @@ const zr = ({ property: t, onChange: s }) => {
         s === "color" && /* @__PURE__ */ e.jsx(Kr, { property: l, onChange: f }),
         s === "dropdown" && /* @__PURE__ */ e.jsx(lt, { label: r, property: l, onChange: f })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(We, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: $ ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(We, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
             className: "invisible ml-3 mt-1 rounded-full bg-blue-500 text-white group-hover:visible",
-            children: /* @__PURE__ */ e.jsx(ke, {})
+            children: /* @__PURE__ */ e.jsx(Ne, {})
           }
         ) }),
         /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
@@ -1865,7 +1868,7 @@ const zr = ({ property: t, onChange: s }) => {
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           t && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: t }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
             s.map(({ label: c, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(X, { children: [
               /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
@@ -1874,10 +1877,10 @@ const zr = ({ property: t, onChange: s }) => {
                   onClick: () => n(m),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    $.createElement("div", {
+                    P.createElement("div", {
                       className: x(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(p(st, m, Xe), { className: "text-inherit w-3 h-3" })
+                    P.createElement(p(st, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1899,7 +1902,7 @@ const zr = ({ property: t, onChange: s }) => {
     }
   );
 }, as = ({ heading: t, items: s }) => {
-  const r = pe(), l = N(() => {
+  const r = pe(), l = k(() => {
     const o = (i) => U(
       i.map((n) => n.styleType === "multiple" ? C(n.options, "key") : n.property)
     ), a = U(
@@ -1934,7 +1937,7 @@ const zr = ({ property: t, onChange: s }) => {
       return i;
     },
     [s]
-  ), l = N(() => {
+  ), l = k(() => {
     if (s.length > 0 && t.heading === "Classes")
       return !0;
     const a = (n) => U(
@@ -1943,14 +1946,14 @@ const zr = ({ property: t, onChange: s }) => {
       t.items.map((n) => n.styleType === "accordion" ? a(n.items) : n.styleType === "multiple" ? U(C(n.options, "key")) : n.property)
     ), i = C(s, "property");
     return Ee(d, i).length > 0;
-  }, [s, t.heading, t.items]), o = N(() => ({}), []);
+  }, [s, t.heading, t.items]), o = k(() => ({}), []);
   return /* @__PURE__ */ e.jsx(is.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
     /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
       t.heading
     ] }) }),
-    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      t.items.map((a) => ge(a, "component") ? $.createElement(a.component, { key: a.label }) : ge(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(as, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Te, { ...a }, a.label))
+    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
+      t.items.map((a) => ge(a, "component") ? P.createElement(a.component, { key: a.label }) : ge(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(as, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Te, { ...a }, a.label))
     ) })
   ] }) });
 }, ds = ({
@@ -1995,7 +1998,7 @@ const zr = ({ property: t, onChange: s }) => {
   ] })
 ] }), cs = ({ section: t }) => {
   var m;
-  const { setSyncState: s } = zt(), r = G(), [l, o] = w([]), [a] = Ne(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
+  const { setSyncState: s } = zt(), r = G(), [l, o] = w([]), [a] = ke(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
   ne.useEffect(() => {
     const h = C(p(r, i), (g, f) => ({ key: f, value: g }));
     b(h) ? o([]) : o(h);
@@ -2065,7 +2068,7 @@ const zr = ({ property: t, onChange: s }) => {
   ] });
 };
 function ps() {
-  const [t, s] = Je(), { flexChild: r, gridChild: l } = Ut(), [, o] = Cr(Gt), { t: a } = Fe(), [d] = Ne();
+  const [t, s] = Je(), { flexChild: r, gridChild: l } = Ut(), [, o] = Cr(Gt), { t: a } = Fe(), [d] = ke();
   return b(d) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: a("no_styling_block_selected") }),
@@ -2121,8 +2124,8 @@ const us = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, hl = () => {
-  const t = G(), { t: s } = Fe(), [r, l] = $.useState(""), [o, a] = $.useState({
+}, ml = () => {
+  const t = G(), { t: s } = Fe(), [r, l] = P.useState(""), [o, a] = P.useState({
     onDrag: (n) => n,
     onDragEnd: (n) => n,
     dragStartY: 0,
@@ -2185,5 +2188,5 @@ const us = {
   ] });
 };
 export {
-  hl as default
+  ml as default
 };

package/dist/SidePanels-0d276d29.cjs

@@ -0,0 +1 @@
+"use strict";var P=Object.create;var q=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var K=(s,o,r,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of T(o))!B.call(s,l)&&l!==r&&q(s,l,{get:()=>o[l],enumerable:!(u=A(o,l))||u.enumerable});return s};var V=(s,o,r)=>(r=s!=null?P(z(s)):{},K(o||!s||!s.__esModule?q(r,"default",{value:s,enumerable:!0}):r,s));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),k=require("@radix-ui/react-icons"),i=require("react"),N=require("jotai"),x=require("lodash"),n=require("./useBuilderProp-adacf42f.cjs"),h=require("./tabs-860e37aa.cjs"),E=require("./index-6fc652ec.cjs");require("react-i18next");const I=require("./utils-3c452dd0.cjs"),w=require("lucide-react"),L=require("@chaibuilder/blocks"),g=require("./dialog-170eaad9.cjs"),v=require("./select-0e32300c.cjs");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("@radix-ui/react-tabs");require("./MODIFIERS-4716c669.cjs");require("clsx");require("@radix-ui/react-scroll-area");require("react-dom");require("@floating-ui/react-dom");require("i18next");require("flagged");require("react-dnd");require("@minoru/react-dnd-treeview");require("react-hotkeys-hook");require("flat-to-nested");require("./html-to-json-aadcbf66.cjs");require("himalaya");require("redux-undo");require("@react-hookz/web");require("sonner");require("tailwind-merge");require("@radix-ui/react-dialog");require("@radix-ui/react-select");const M=i.lazy(()=>import("react-json-view")),H=({provider:s,onClose:o})=>{const[r,u]=i.useState(null);return i.useEffect(()=>{s&&(s.mockFn?s.mockFn:s.dataFn)().then(d=>u(d))},[s]),s?e.jsxRuntimeExports.jsx(g.Dialog,{onOpenChange:l=>l?"":o(),defaultOpen:!0,children:e.jsxRuntimeExports.jsxs(g.DialogContent,{children:[e.jsxRuntimeExports.jsxs(g.DialogHeader,{children:[e.jsxRuntimeExports.jsxs(g.DialogTitle,{children:["Data Provider: ",s.name]}),e.jsxRuntimeExports.jsx(g.DialogDescription,{children:s.description})]}),e.jsxRuntimeExports.jsx(E.ErrorBoundary,{children:e.jsxRuntimeExports.jsx(M,{style:{maxHeight:"80vh",overflowY:"auto"},name:s.providerKey,enableClipboard:!1,displayObjectSize:!1,displayDataTypes:!1,src:r})})]})}):null};function O({children:s,name:o,onRemove:r}){return e.jsxRuntimeExports.jsxs(n.AlertDialog,{children:[e.jsxRuntimeExports.jsx(n.AlertDialogTrigger,{asChild:!0,children:s}),e.jsxRuntimeExports.jsxs(n.AlertDialogContent,{children:[e.jsxRuntimeExports.jsxs(n.AlertDialogHeader,{children:[e.jsxRuntimeExports.jsxs(n.AlertDialogTitle,{children:["Are you sure, you want to remove ",e.jsxRuntimeExports.jsx("span",{className:"text-blue-500",children:o})," provider?"]}),e.jsxRuntimeExports.jsx(n.AlertDialogDescription,{children:"Your data provider will be removed from this page and all added data binding will be not visible on blocks."})]}),e.jsxRuntimeExports.jsxs(n.AlertDialogFooter,{children:[e.jsxRuntimeExports.jsx(n.AlertDialogCancel,{children:"Cancel"}),e.jsxRuntimeExports.jsx(n.AlertDialogAction,{onClick:r,className:"bg-red-600 hover:bg-red-700",children:"Remove"})]})]})]})}const F=()=>{const s=i.useMemo(()=>L.getChaiDataProviders(),[]),[o,r]=E.usePageDataProviders(),[,u]=N.useAtom(E.pageSyncStateAtom),[l,d]=i.useState(x.filter(s,t=>x.map(o,"providerKey").includes(t.providerKey))),[j,y]=i.useState(""),[R,c]=i.useState(null),b=x.filter(s.map(t=>x.map(l,"providerKey").includes(t.providerKey)?null:{value:t.providerKey,label:t.name}),t=>!x.isNull(t)),a=t=>{const p=x.find(s,{providerKey:t});d(m=>[...m,p]),r(m=>[...m,{providerKey:p.providerKey,args:{}}]),y(""),u("UNSAVED")},f=t=>{d(p=>x.filter(p,m=>m.providerKey!==t.providerKey)),r(p=>x.filter(p,m=>m.providerKey!==t.providerKey)),u("UNSAVED")},D=t=>c(t);return x.isEmpty(s)?e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsxs("p",{className:"text-gray-500 mb-1.5 text-xs p-4",children:["You have no data providers registered. Please add a data provider to your project. ",e.jsxRuntimeExports.jsx("br",{}),e.jsxRuntimeExports.jsx("a",{className:"text-blue-500",href:"https://chaibuilder.com/docs/registering-data-providers",target:"_blank",children:"Learn more"})]})}):e.jsxRuntimeExports.jsxs("div",{className:"px-1",children:[e.jsxRuntimeExports.jsx("br",{}),e.jsxRuntimeExports.jsx("label",{children:e.jsxRuntimeExports.jsx("p",{className:"text-gray-500 mb-1.5 text-xs",children:"Add data providers:"})}),e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-1",children:e.jsxRuntimeExports.jsxs(v.Select,{value:j,onValueChange:t=>a(t),children:[e.jsxRuntimeExports.jsx(v.SelectTrigger,{className:"w-full",children:e.jsxRuntimeExports.jsx(v.SelectValue,{placeholder:"Select a provider"})}),e.jsxRuntimeExports.jsxs(v.SelectContent,{children:[e.jsxRuntimeExports.jsx(v.SelectItem,{value:"",children:"Choose"}),b.map(t=>e.jsxRuntimeExports.jsx(v.SelectItem,{value:t.value,children:t.label},t.value))]})]})}),e.jsxRuntimeExports.jsx("br",{}),e.jsxRuntimeExports.jsxs("div",{className:`border-t ${l.length?"block":"hidden"}`,children:[e.jsxRuntimeExports.jsx("p",{className:"text-gray-500 pt-4 pb-1.5 text-xs flex-1 font-medium",children:"Page data providers:"}),e.jsxRuntimeExports.jsx("div",{className:"space-y-2",children:l.map(t=>e.jsxRuntimeExports.jsxs("div",{className:"rounded-lg border bg-card text-card-foreground shadow-sm w-full","data-v0-t":"card",children:[e.jsxRuntimeExports.jsx("div",{className:"flex flex-col space-y-1.5 px-4 pt-4",children:e.jsxRuntimeExports.jsx("div",{className:"flex justify-between items-center",children:e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx("h3",{className:"font-medium leading-4",children:t.name}),e.jsxRuntimeExports.jsx("p",{className:"text-xs text-gray-400 pt-1",children:t.description})]})})}),e.jsxRuntimeExports.jsxs("div",{className:"items-center p-2 py-2 flex justify-between",children:[e.jsxRuntimeExports.jsxs("button",{onClick:()=>D(t),className:"inline-flex items-center justify-center text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 underline-offset-4 hover:underline h-9 rounded-md px-3 text-blue-500",children:[e.jsxRuntimeExports.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:"w-4 h-4 mr-2",children:[e.jsxRuntimeExports.jsx("path",{d:"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"}),e.jsxRuntimeExports.jsx("circle",{cx:"12",cy:"12",r:"3"})]}),"View Data"]}),e.jsxRuntimeExports.jsx(O,{onRemove:()=>f(t),name:t.name,children:e.jsxRuntimeExports.jsxs("button",{className:"inline-flex items-center justify-center text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 underline-offset-4 hover:underline h-9 rounded-md px-3 text-red-500",children:[e.jsxRuntimeExports.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:"w-4 h-4 mr-2",children:[e.jsxRuntimeExports.jsx("path",{d:"M3 6h18"}),e.jsxRuntimeExports.jsx("path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}),e.jsxRuntimeExports.jsx("path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"})]}),"Remove"]})})]})]},t.providerKey))}),e.jsxRuntimeExports.jsx(H,{onClose:()=>c(null),provider:R})]})]})},C=i.lazy(()=>Promise.resolve().then(()=>require("./Layers-860f5e42.cjs"))),Y=i.lazy(()=>Promise.resolve().then(()=>require("./BrandingOptions-cfa79ffe.cjs"))),_=i.lazy(()=>Promise.resolve().then(()=>require("./ImagesPanel-8b7a989d.cjs")));let S=null;const U=()=>{const s=n.useBuilderProp("sideBarComponents.top",[]),o=n.useBuilderProp("sideBarComponents.bottom",[]),[r,u]=N.useAtom(E.activePanelAtom),[l,d]=i.useState(r),[j,y]=i.useState(null),R={layers:C,"branding-options":Y,images:_};x.each(s,({name:a,panel:f})=>{R[a]=f});const c=a=>{clearTimeout(S),b(!1),r!=="layers"&&a==="layers"?S=setTimeout(()=>d("layers"),500):d(a),u(a)},[,b]=N.useAtom(E.addBlocksModalAtom);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex",children:[e.jsxRuntimeExports.jsxs("div",{className:"z-[100] flex h-full w-fit flex-col items-center justify-between border-b border-r border-border bg-background pt-2",children:[e.jsxRuntimeExports.jsxs("div",{className:"relative z-[100] flex w-14 flex-col items-center space-y-2",children:[e.jsxRuntimeExports.jsx(n.Button,{onClick:()=>{b(!0),u("layers")},size:"sm",variant:r==="add-blocks"?"default":"outline",children:e.jsxRuntimeExports.jsx(k.PlusIcon,{className:"text-xl"})}),e.jsxRuntimeExports.jsx(n.Button,{onClick:()=>c("layers"),size:"sm",variant:r==="layers"?"default":"outline",children:e.jsxRuntimeExports.jsx(w.ListTreeIcon,{className:"w-4"})}),e.jsxRuntimeExports.jsx(n.Button,{onClick:()=>c("branding-options"),size:"sm",variant:r==="branding-options"?"default":"outline",children:e.jsxRuntimeExports.jsx(k.Half2Icon,{className:"w-4 max-w-[40px] text-xs"})}),i.Children.toArray(s.map(({name:a,icon:f})=>e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsx(n.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(n.Button,{onClick:()=>c(a),size:"sm",className:"w-10",variant:r===a?"default":"outline",children:e.jsxRuntimeExports.jsx(f,{})})})))]}),e.jsxRuntimeExports.jsx("div",{className:"relative z-[100] flex w-14 flex-col items-center space-y-2",children:i.Children.toArray(o.map(a=>e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsx(n.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(a,{})})))})]}),e.jsxRuntimeExports.jsx("div",{onClick:()=>{c("layers")},className:"absolute inset-0 right-0 z-50 w-screen bg-black/20"+(r==="layers"?" hidden":"")}),e.jsxRuntimeExports.jsx("div",{className:`fixed left-14 z-[50] h-full w-96 border-r bg-background duration-500 ease-in-out ${r!=="layers"?"translate-x-0":"-translate-x-full"}`,children:e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsxs("div",{className:"flex animate-pulse flex-col gap-y-2 bg-white p-4",children:[e.jsxRuntimeExports.jsx("div",{className:"h-6 w-1/2 bg-gray-300"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"})]}),children:e.jsxRuntimeExports.jsx("div",{className:I.cn("relative h-full max-h-[93%] bg-background p-1",r==="layers"?"":"z-[100]"),onMouseEnter:()=>{j&&clearTimeout(j)},onMouseLeave:()=>{const a=setTimeout(()=>{j&&(c("layers"),clearTimeout(j))},1e3);y(a)},children:i.createElement(x.get(R,l,()=>e.jsxRuntimeExports.jsx("div",{})))})})}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-60 border-r p-1",children:e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsxs("div",{className:"flex animate-pulse flex-col gap-y-2 p-4",children:[e.jsxRuntimeExports.jsx("div",{className:"h-6 w-1/2 bg-gray-300"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"})]}),children:e.jsxRuntimeExports.jsxs(h.Tabs,{defaultValue:"layers",className:"flex h-full w-full flex-col py-1",children:[e.jsxRuntimeExports.jsxs(h.TabsList,{className:"mx-1 h-10 grid grid-cols-2",children:[e.jsxRuntimeExports.jsxs(h.TabsTrigger,{value:"layers",children:[e.jsxRuntimeExports.jsx(w.ListTreeIcon,{className:"h-3 mr-2"})," Layers"]}),e.jsxRuntimeExports.jsxs(h.TabsTrigger,{value:"data-provider",children:[e.jsxRuntimeExports.jsx(w.DatabaseIcon,{className:"w-3 mr-2"}),"Data"]})]}),e.jsxRuntimeExports.jsx(h.TabsContent,{value:"layers",className:"no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",children:i.createElement(C)}),e.jsxRuntimeExports.jsx(h.TabsContent,{value:"data-provider",className:"flex-1 overflow-y-auto overflow-x-hidden",children:e.jsxRuntimeExports.jsx(F,{})})]})})})]})};exports.default=U;