@chaibuilder/sdk 1.1.7 → 1.1.8

package/dist/{Settings-E0XoSH8T.js → Settings-b5UJ1CbF.js}

@@ -1,15 +1,15 @@
 import { j as e } from "./jsx-runtime-NV737rRe.js";
 import * as ne from "react";
-import I, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as dt, createContext as Ee, useContext as re } from "react";
+import I, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as ct, createContext as Ee, useContext as re } from "react";
 import { useThrottledCallback as be } from "@react-hookz/web";
-import { forEach as Ce, isArray as ae, omit as ct, truncate as pt, includes as E, get as u, first as pe, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as fe, filter as ve, set as Me, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Ve, startsWith as z, isNumber as ft, parseInt as vt, isNaN as _e, findLast as jt, flatten as U, intersection as Fe, has as he, isNull as wt } from "lodash";
+import { forEach as Ce, isArray as ae, omit as pt, truncate as ut, includes as E, get as u, first as pe, split as xt, startCase as Y, toLower as te, isEmpty as b, map as C, find as gt, last as fe, filter as ve, set as Me, keys as ht, cloneDeep as mt, each as yt, capitalize as bt, reject as ft, nth as Ve, startsWith as z, isNumber as vt, parseInt as jt, isNaN as _e, findLast as wt, flatten as U, intersection as Fe, has as he, isNull as Ct } from "lodash";
 import { useTranslation as Ye } from "react-i18next";
-import { PlusIcon as ke, Cross2Icon as We, EyeOpenIcon as Ct, EyeClosedIcon as He, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as St, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as At, UnderlineIcon as Dt, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as $t, InfoCircledIcon as Ne, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Ot, TriangleDownIcon as Et, CrossCircledIcon as Mt, TrashIcon as _t, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { b0 as Ft, b1 as Yt, B as ue, b2 as Wt, b3 as Xt, b4 as Zt, b5 as zt, b6 as Ut, b7 as Gt, b8 as Kt, a6 as G, am as qt, an as Jt, ao as Qt, b9 as er, ak as tr, ba as rr, al as lr, aD as W, aE as X, aG as Z, bb as sr, bc as or, bd as nr, be as ar, bf as ir, bg as dr, p as ze, ac as Ue, i as cr, bh as Ge, bi as ie, bj as de, bk as ce, aj as Te, P as Ke, a3 as qe, j as Je, aI as Se, bl as pr, bm as ur, a4 as xe, W as xr, a9 as Qe, R as Be, ag as gr, ad as hr, bn as mr, aq as yr, ar as br, as as fr, at as vr, au as H, bo as jr, ax as wr, ay as Cr, az as Ae, aA as De } from "./index-bKgIzodL.js";
+import { PlusIcon as ke, Cross2Icon as We, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as Tt, ArrowBottomRightIcon as St, ArrowBottomLeftIcon as Rt, AlignLeftIcon as Vt, AlignCenterHorizontallyIcon as Ht, AlignRightIcon as Bt, StretchHorizontallyIcon as At, FontItalicIcon as Dt, UnderlineIcon as It, OverlineIcon as Pt, LetterCaseUppercaseIcon as $t, Cross1Icon as Lt, InfoCircledIcon as Ne, MinusIcon as Ot, BoxIcon as Xe, RowSpacingIcon as Et, TriangleDownIcon as Mt, CrossCircledIcon as _t, TrashIcon as Ft, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { b0 as Yt, b1 as Wt, B as ue, b2 as Xt, b3 as Zt, b4 as zt, b5 as Ut, b6 as Gt, b7 as Kt, b8 as qt, a6 as G, am as Jt, an as Qt, ao as er, b9 as tr, ak as rr, ba as lr, al as sr, aD as W, aE as X, aG as Z, bb as or, bc as nr, bd as ar, be as ir, bf as dr, bg as cr, p as ze, ac as Ue, i as pr, bh as Ge, bi as ie, bj as de, bk as ce, aj as Te, P as Ke, a3 as qe, j as Je, aI as Se, bl as ur, bm as xr, a4 as xe, W as gr, a9 as Qe, R as Be, ag as hr, ad as mr, bn as yr, aq as br, ar as fr, as as vr, at as jr, au as H, bo as et, ax as wr, ay as Cr, az as Ae, aA as De } from "./index-bKgIzodL.js";
 import { u as kr } from "./controls-G0puEH71.js";
 import { Check as Nr, EditIcon as Tr, TrashIcon as Sr } from "lucide-react";
-import { getBlockComponent as et, getChaiDataProviders as Rr } from "@chaibuilder/runtime";
-import { E as tt, u as rt } from "./index-QWyJwEV6.js";
+import { getBlockComponent as tt, getChaiDataProviders as Rr } from "@chaibuilder/runtime";
+import { E as rt, u as lt } from "./index-LOLasIJD.js";
 import Vr from "@rjsf/core";
 import Hr from "@rjsf/validator-ajv8";
 import { useAtom as Br } from "jotai";
@@ -71,7 +71,7 @@ function Or(t) {
       l.push(a), r[a] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ae(d) && s(a, d);
     });
   }
-  return s("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: r };
+  return s("", pt(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: r };
 }
 const je = ({ data: t, fullView: l }) => {
   if (!t)
@@ -79,7 +79,7 @@ const je = ({ data: t, fullView: l }) => {
   const r = typeof t;
   return l ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsx(
       Lr,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
@@ -94,7 +94,7 @@ const je = ({ data: t, fullView: l }) => {
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: "text-gray-800/50 text-[12px] leading-4 w-full max-h-36 overflow-x-hidden overflow-y-auto", children: [
     /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
     t
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: pt(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: ut(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
 }, Ie = ({
   type: t,
   value: l = "",
@@ -104,16 +104,16 @@ const je = ({ data: t, fullView: l }) => {
   dataType: n,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: a } = Or(s), p = t === "PROP" ? et(s == null ? void 0 : s._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
-    (x) => !E(d, x) && u(p, `props.${pe(ut(x, "."))}.binding`)
+  const { paths: i, pathsType: a } = Or(s), p = t === "PROP" ? tt(s == null ? void 0 : s._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+    (x) => !E(d, x) && u(p, `props.${pe(xt(x, "."))}.binding`)
   ) : i.filter((x) => n === u(a, x, "")), [t, i, d, n, p]);
   return _(() => {
     l && o(l);
   }, [l, t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: Y(te(t)) }),
-      /* @__PURE__ */ e.jsxs(Ft, { open: c, onOpenChange: m, children: [
-        /* @__PURE__ */ e.jsx(Yt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsxs(Yt, { open: c, onOpenChange: m, children: [
+        /* @__PURE__ */ e.jsx(Wt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           ue,
           {
             variant: "outline",
@@ -131,17 +131,17 @@ const je = ({ data: t, fullView: l }) => {
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Wt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Xt, { children: [
-          /* @__PURE__ */ e.jsx(Zt, { placeholder: `Choose ${te(t)}...` }),
-          /* @__PURE__ */ e.jsxs(zt, { children: [
-            /* @__PURE__ */ e.jsx(Ut, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(Gt, { children: C(h, (x) => /* @__PURE__ */ e.jsxs(
-              Kt,
+        /* @__PURE__ */ e.jsx(Xt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Zt, { children: [
+          /* @__PURE__ */ e.jsx(zt, { placeholder: `Choose ${te(t)}...` }),
+          /* @__PURE__ */ e.jsxs(Ut, { children: [
+            /* @__PURE__ */ e.jsx(Gt, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(Kt, { children: C(h, (x) => /* @__PURE__ */ e.jsxs(
+              qt,
               {
                 value: x,
                 className: `cursor-pointer ${g ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
                 onSelect: (f) => {
-                  r(xt(h, (T) => T === f) || null), m(!1);
+                  r(gt(h, (T) => T === f) || null), m(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
@@ -165,7 +165,7 @@ const je = ({ data: t, fullView: l }) => {
   editMode: r,
   item: s
 }) => {
-  const [o, n] = w(r ? s.key : ""), [d, i] = w(r ? s.value : ""), a = G(), [p] = rt(), g = A(
+  const [o, n] = w(r ? s.key : ""), [d, i] = w(r ? s.value : ""), a = G(), [p] = lt(), g = A(
     (h, x) => {
       if (b(h))
         return "";
@@ -180,9 +180,9 @@ const je = ({ data: t, fullView: l }) => {
     [a, p]
   ), [c, m] = w(r ? g(s.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(qt, { children: [
-      /* @__PURE__ */ e.jsx(Jt, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(Qt, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(Jt, { children: [
+      /* @__PURE__ */ e.jsx(Qt, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(er, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 relative", children: [
       /* @__PURE__ */ e.jsx(
@@ -221,7 +221,7 @@ const je = ({ data: t, fullView: l }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(er, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(
       ue,
       {
         type: "submit",
@@ -232,11 +232,11 @@ const je = ({ data: t, fullView: l }) => {
       }
     ) })
   ] });
-}, lt = ({ disabled: t, children: l, onAddBinding: r, appliedBindings: s, editMode: o = !0, item: n = {} }) => {
+}, st = ({ disabled: t, children: l, onAddBinding: r, appliedBindings: s, editMode: o = !0, item: n = {} }) => {
   const [d, i] = w(!1);
-  return /* @__PURE__ */ e.jsxs(tr, { children: [
-    /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: l }),
-    d && /* @__PURE__ */ e.jsx(lr, { children: /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e.jsxs(rr, { children: [
+    /* @__PURE__ */ e.jsx(lr, { disabled: t, asChild: !0, onClick: () => i(!0), children: l }),
+    d && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
       Er,
       {
         item: n,
@@ -272,7 +272,7 @@ const je = ({ data: t, fullView: l }) => {
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
     /* @__PURE__ */ e.jsx(je, { data: u(o, t.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: l, appliedBindings: n, item: t, children: /* @__PURE__ */ e.jsx(Tr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
+      /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: l, appliedBindings: n, item: t, children: /* @__PURE__ */ e.jsx(Tr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
       /* @__PURE__ */ e.jsx(
         Sr,
         {
@@ -284,7 +284,7 @@ const je = ({ data: t, fullView: l }) => {
     !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(d) })
   ] });
 }, _r = ({ bindingData: t, onChange: l }) => {
-  const r = G(), [s] = rt(), o = Rr(), [n, d] = w(
+  const r = G(), [s] = lt(), o = Rr(), [n, d] = w(
     C(t, (c, m) => ({ key: m, value: c }))
   );
   _(() => {
@@ -335,7 +335,7 @@ const je = ({ data: t, fullView: l }) => {
     )),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 200, children: [
       /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
-        lt,
+        st,
         {
           disabled: i,
           appliedBindings: C(n, "key"),
@@ -352,24 +352,24 @@ const je = ({ data: t, fullView: l }) => {
       i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(s) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, Fr = () => /* @__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" }), me = dt(({ createHistorySnapshot: t, properties: l, formData: r, onChange: s }) => {
+}, Fr = () => /* @__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" }), me = ct(({ createHistorySnapshot: t, properties: l, formData: r, onChange: s }) => {
   const o = { type: "object", properties: {} }, n = {};
   return Object.keys(l).forEach((d) => {
     const i = l[d];
     if (E(["slot", "styles"], i.type))
       return;
     const a = d;
-    o.properties[a] = sr(i), n[a] = or(i);
+    o.properties[a] = or(i), n[a] = nr(i);
   }), /* @__PURE__ */ e.jsx(
     Vr,
     {
       widgets: {
         binding: Fr,
-        richtext: nr,
-        icon: ar,
-        image: ir
+        richtext: ar,
+        icon: ir,
+        image: dr
       },
-      fields: { link: dr },
+      fields: { link: cr },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
@@ -385,7 +385,7 @@ const je = ({ data: t, fullView: l }) => {
   );
 });
 function Yr() {
-  const t = G(), { createSnapshot: l } = ze(), r = Ue(), s = et(t._type), o = { ...t }, n = cr("dataBindingSupport", !1), d = () => l(), i = ({ formData: c }, m) => {
+  const t = G(), { createSnapshot: l } = ze(), r = Ue(), s = tt(t._type), o = { ...t }, n = pr("dataBindingSupport", !1), d = () => l(), i = ({ formData: c }, m) => {
     if (m) {
       const h = m.replace("root.", "");
       r([t._id], { [h]: u(c, h) });
@@ -395,9 +395,9 @@ function Yr() {
       title: "Name",
       default: u(t, "_name", t._type)
     })
-  }, p = gt(u(o, "_bindings", {})), g = N(() => {
-    const c = ht(u(s, "props", {}));
-    return n && mt(p, (m) => delete c[m]), c;
+  }, p = ht(u(o, "_bindings", {})), g = N(() => {
+    const c = mt(u(s, "props", {}));
+    return n && yt(p, (m) => delete c[m]), c;
   }, [s, p, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
@@ -439,7 +439,7 @@ function Yr() {
         /* @__PURE__ */ e.jsxs(ce, { className: "pt-4", children: [
           b(p) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: C(p, yt).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: C(p, bt).join(", ") }),
             " ",
             p.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
@@ -475,7 +475,7 @@ const Pe = new Dr(Ir, {
 });
 function Wr() {
   var D;
-  const [t] = Te(), l = G(), r = Ke(), s = qe(), [o] = Je(), [n, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, a = bt((u(l, i, "").replace($r, "").split(",").pop() || "").split(" "), b), p = () => {
+  const [t] = Te(), l = G(), r = Ke(), s = qe(), [o] = Je(), [n, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, a = ft((u(l, i, "").replace($r, "").split(",").pop() || "").split(" "), b), p = () => {
     const j = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     r(o, j, !0), d("");
   }, [g, c] = w([]), m = ({ value: j }) => {
@@ -750,7 +750,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
               { key: "insetY", label: "Top Bottom" }
             ]
           },
-          { type: "arbitrary", label: "Z-Chai", units: ["-", "auto"], property: "zIndex" }
+          { type: "arbitrary", label: "Z-Index", units: ["-", "auto"], property: "zIndex" }
         ]
       },
       {
@@ -993,10 +993,10 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     heading: "Classes",
     items: [{ component: Wr }]
   }
-], st = {
+], ot = {
   "not-italic": () => /* @__PURE__ */ e.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
   // visibility
-  visible: Ct,
+  visible: kt,
   invisible: He,
   // display
   hidden: He,
@@ -1032,10 +1032,10 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   borderRadiusRight: J,
   borderRadiusBottom: Q,
   borderRadiusLeft: ee,
-  borderRadiusTopLeft: kt,
-  borderRadiusTopRight: Nt,
-  borderRadiusBottomRight: Tt,
-  borderRadiusBottomLeft: St,
+  borderRadiusTopLeft: Nt,
+  borderRadiusTopRight: Tt,
+  borderRadiusBottomRight: St,
+  borderRadiusBottomLeft: Rt,
   divideXWidth: R,
   divideYWidth: V,
   scale: O,
@@ -1062,18 +1062,18 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   marginBottom: Q,
   marginLeft: ee,
   // text-align
-  textLeft: Rt,
-  textCenter: Vt,
-  textRight: Ht,
-  textJustify: Bt,
+  textLeft: Vt,
+  textCenter: Ht,
+  textRight: Bt,
+  textJustify: At,
   // font style
-  italic: At,
+  italic: Dt,
   // "not-italic": "",
   // decoration
-  underline: Dt,
-  overline: It,
+  underline: It,
+  overline: Pt,
   // transform
-  uppercase: Pt,
+  uppercase: $t,
   block: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
       "path",
@@ -1186,14 +1186,14 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
       }
     )
   ] }),
-  static: $t
+  static: Lt
 }, le = Ee({ canReset: !1, canChange: !0 }), Ur = ({ children: t, canReset: l = !1, canChange: r = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: l, canChange: r }, children: t })
-), ot = ({ label: t, property: l, onChange: r }) => {
+), nt = ({ label: t, property: l, onChange: r }) => {
   const s = N(() => u(ge, `${l}.classes`, [""]), [l]), o = se(l), n = N(() => u(o, "cls", ""), [o]), { canChange: d } = re(le), i = /\[.*\]/g.test(n);
   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(pr, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsx(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(X, { 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." })
@@ -1241,14 +1241,14 @@ const Gr = ({ property: t, onChange: l }) => {
         disabled: !s && (!r || i - 1 < 0),
         onClick: () => l(Ve(d, i - 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Lt,
+          Ot,
           {
             className: !s && (!r || i - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ot, { label: !1, property: t, onChange: l }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(nt, { label: !1, property: t, onChange: l }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
@@ -1275,7 +1275,7 @@ const Gr = ({ property: t, onChange: l }) => {
         disabled: !s,
         onClick: () => l(d, t),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: I.createElement(u(st, d, Xe))
+        children: I.createElement(u(ot, d, Xe))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
@@ -1496,7 +1496,7 @@ const Qr = (t) => {
     const [s, o] = C(r.split("/"), (n) => parseInt(n, 10));
     return { value: l + (s / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return ft(parseFloat(r)) ? { value: `${l + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
+  return vt(parseFloat(r)) ? { value: `${l + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
 };
 const el = (t) => {
   if (b(t))
@@ -1506,7 +1506,7 @@ const el = (t) => {
     return tl(t);
   const r = u(l, "0", "").replace(/\[|\]/g, ""), s = t.startsWith("-") ? "-" : "", o = pe(r.match(/\d+.\d+|\d+/g));
   return { value: `${s}${o}`, unit: r.replace(o, "") };
-}, tl = (t) => b(t) ? { value: "", unit: "" } : Qr(t), nt = I.createContext({
+}, tl = (t) => b(t) ? { value: "", unit: "" } : Qr(t), at = I.createContext({
   setDragData: () => {
   }
 }), rl = ({
@@ -1518,7 +1518,7 @@ const el = (t) => {
   negative: n,
   cssProperty: d
 }) => {
-  const { setDragData: i } = re(nt);
+  const { setDragData: i } = re(at);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
@@ -1538,7 +1538,7 @@ const el = (t) => {
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Ot, {})
+      children: /* @__PURE__ */ e.jsx(Et, {})
     }
   );
 }, ll = ({ onSelect: t, current: l, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((s) => /* @__PURE__ */ e.jsx(
@@ -1618,11 +1618,11 @@ const el = (t) => {
             if (y.keyCode !== 38 && y.keyCode !== 40)
               return;
             y.preventDefault(), P(!0);
-            const v = vt(y.target.value);
+            const v = jt(y.target.value);
             let S = _e(v) ? 0 : v;
             y.keyCode === 38 && (S += 1), y.keyCode === 40 && (S -= 1);
-            const M = `${S}`, it = `${M.startsWith("-") ? "-" : ""}${i}[${M.replace("-", "")}${c === "-" ? "" : c}]`;
-            $(it);
+            const M = `${S}`, dt = `${M.startsWith("-") ? "-" : ""}${i}[${M.replace("-", "")}${c === "-" ? "" : c}]`;
+            $(dt);
           },
           onKeyUp: (y) => {
             L && (y.preventDefault(), P(!1));
@@ -1651,11 +1651,11 @@ const el = (t) => {
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Et, {}) : null
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ e.jsx(xr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
           ll,
           {
             units: p,
@@ -1693,7 +1693,7 @@ const el = (t) => {
   ] }) }) });
 }, se = (t) => {
   const l = xe();
-  return jt(l, { property: t });
+  return wt(l, { property: t });
 }, ol = (t, l) => {
   const r = {
     xs: 0,
@@ -1779,7 +1779,7 @@ const el = (t) => {
   "2xl": "1536px"
 }, al = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Re = (t) => {
   const { type: l = "icons", label: r, property: s, onEmitChange: o = () => {
-  }, units: n, negative: d = !1 } = t, [i] = xr(), [a] = Qe(), [, p] = Be(), g = se(s), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
+  }, units: n, negative: d = !1 } = t, [i] = gr(), [a] = Qe(), [, p] = Be(), g = se(s), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
     (k, $ = !0) => {
       const F = { dark: i, mq: p, mod: a, cls: k, property: s, fullCls: "" };
       (i || a !== "") && (F.mq = "xs");
@@ -1824,9 +1824,9 @@ const el = (t) => {
         l === "icons" && /* @__PURE__ */ e.jsx(Kr, { property: s, onChange: f }),
         l === "range" && /* @__PURE__ */ e.jsx(Gr, { property: s, onChange: f }),
         l === "color" && /* @__PURE__ */ e.jsx(Jr, { property: s, onChange: f }),
-        l === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: r, property: s, onChange: f })
+        l === "dropdown" && /* @__PURE__ */ e.jsx(nt, { label: r, property: s, onChange: f })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Mt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && g ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(_t, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && g ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1858,7 +1858,7 @@ const el = (t) => {
       ] }) : null })
     ] })
   ] }) });
-}, il = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
+}, il = ["px", "%", "em", "rem", "ch", "vh", "vw"], it = ({
   label: t,
   options: l,
   borderB: r = !1,
@@ -1887,7 +1887,7 @@ const el = (t) => {
                     I.createElement("div", {
                       className: g(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    I.createElement(u(st, m, Xe), { className: "text-inherit w-3 h-3" })
+                    I.createElement(u(ot, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1927,7 +1927,7 @@ const el = (t) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Re, { ...o }, o.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Re, { ...o }, o.label)) })
   ] });
 }, cl = Ee({}), ye = ({ section: t }) => {
   const l = xe(), r = A(
@@ -1960,7 +1960,7 @@ const el = (t) => {
       t.heading
     ] }) }),
     /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
-      t.items.map((n) => he(n, "component") ? I.createElement(n.component, { key: n.label }) : he(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : n.styleType === "accordion" && r(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label))
+      t.items.map((n) => he(n, "component") ? I.createElement(n.component, { key: n.label }) : he(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...n }, n.label) : n.styleType === "accordion" && r(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label))
     ) })
   ] }) });
 }, pl = ({
@@ -1996,7 +1996,7 @@ const el = (t) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      _t,
+      Ft,
       {
         onClick: o,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
@@ -2005,7 +2005,7 @@ const el = (t) => {
   ] })
 ] }), ul = ({ section: t }) => {
   var m;
-  const { setSyncState: l } = gr(), r = G(), [s, o] = w([]), [n] = Te(), d = Ue(), i = `${u(n, "0.prop")}_attrs`;
+  const { setSyncState: l } = hr(), r = G(), [s, o] = w([]), [n] = Te(), d = Ue(), i = `${u(n, "0.prop")}_attrs`;
   ne.useEffect(() => {
     const h = C(u(r, i), (x, f) => ({ key: f, value: x }));
     b(h) ? o([]) : o(h);
@@ -2075,7 +2075,7 @@ const el = (t) => {
   ] });
 };
 function xl() {
-  const [t, l] = Qe(), { flexChild: r, gridChild: s } = hr(), [, o] = Br(mr), { t: n } = Ye(), [d] = Te();
+  const [t, l] = Qe(), { flexChild: r, gridChild: s } = mr(), [, o] = Br(yr), { t: n } = Ye(), [d] = Te();
   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: n("no_styling_block_selected") }),
@@ -2090,9 +2090,9 @@ function xl() {
     /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b h-12 border-border px-4 py-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
         /* @__PURE__ */ e.jsx(Se, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(yr, { defaultValue: t, onValueChange: (i) => l(i), children: [
-          /* @__PURE__ */ e.jsx(br, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(fr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(vr, { children: [
+        /* @__PURE__ */ e.jsxs(br, { defaultValue: t, onValueChange: (i) => l(i), children: [
+          /* @__PURE__ */ e.jsx(fr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(vr, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(jr, { children: [
             /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
             /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
             /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
@@ -2108,15 +2108,12 @@ function xl() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(jr, { className: "no-scrollbar -mx-1 mb-4 flex-1 h-full overflow-x-hidden", children: [
-        /* @__PURE__ */ e.jsxs(Ge, { defaultValue: ["Layout"], type: "multiple", className: "h-full w-full", children: [
-          r && /* @__PURE__ */ e.jsx(ye, { section: Xr }),
-          s ? /* @__PURE__ */ e.jsx(ye, { section: Zr }) : null,
-          zr.map((i) => /* @__PURE__ */ e.jsx(ye, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(ul, { section: { heading: "Attributes" } })
-        ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "h-60" })
-      ] })
+      /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsxs(Ge, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
+        r && /* @__PURE__ */ e.jsx(ye, { section: Xr }),
+        s ? /* @__PURE__ */ e.jsx(ye, { section: Zr }) : null,
+        zr.map((i) => /* @__PURE__ */ e.jsx(ye, { section: i }, i.heading)),
+        /* @__PURE__ */ e.jsx(ul, { section: { heading: "Attributes" } })
+      ] }) })
     ] })
   );
 }
@@ -2165,10 +2162,10 @@ const gl = {
       cssProperty: ""
     });
   }, [o, r, n]);
-  return wt(t) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+  return Ct(t) ? /* @__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: l("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: n }, children: [
+  ] }) }) : /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsxs(at.Provider, { value: { setDragData: n }, children: [
     o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -2187,7 +2184,7 @@ const gl = {
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(Yr, {})
+          children: /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 pb-5 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
         }
       ),
       /* @__PURE__ */ e.jsx(De, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(xl, {}) })

package/dist/{SidePanels-1069fKzh.js → SidePanels-BH-IFPaj.js}

@@ -7,7 +7,7 @@ import { ak as O, al as Y, am as J, an as U, ao as $, D as q, E as G, F as Z, G
 import "./lib.js";
 import { ListTreeIcon as C, DatabaseIcon as pe } from "lucide-react";
 import { getChaiDataProviders as ue } from "@chaibuilder/runtime";
-import { E as he } from "./index-QWyJwEV6.js";
+import { E as he } from "./index-LOLasIJD.js";
 import { c as fe } from "./utils-PPBbw5bk.js";
 import "./MODIFIERS-MLfpKQY1.js";
 import "@radix-ui/react-toggle";
@@ -204,7 +204,7 @@ const be = () => {
       /* @__PURE__ */ e.jsx(je, { onClose: () => l(null), provider: f })
     ] })
   ] });
-}, ye = b(() => import("./AddBlocks-a2VUDT5t.js")), D = b(() => import("./Layers-3C2qfE8G.js")), we = b(() => import("./BrandingOptions-uU1nNRzP.js")), Ne = b(() => import("./index-bKgIzodL.js").then((r) => r.cy));
+}, ye = b(() => import("./AddBlocks-a2VUDT5t.js")), D = b(() => import("./Layers-urjdDTKB.js")), we = b(() => import("./BrandingOptions-uU1nNRzP.js")), Ne = b(() => import("./index-bKgIzodL.js").then((r) => r.cy));
 let B = null;
 const Ps = () => {
   const r = k("sideBarComponents.top", []), o = k("sideBarComponents.bottom", []), [a, d] = A(ce), [t, n] = u(a), [m, y] = u(null), f = {